網站升級 Bootstrap 4 筆記

四年前網站開始採用熱門的 Bootstrap 3 來設計網頁,趁這農曆年後空檔期間,將網站升級到新版 Bootstrap 4。Bootstrap 現已成為網頁設計師必備的技能條件之一,被認為是最好的響應式 CSS 框架,它採用了模組化設計,只要懂得如何套用 CSS Class,就可以快速開發出具有美感的響應式 (RWD) 網頁,輕鬆地就能做出漂亮的網頁。 Bootstrap 專為前端開發而設計,尤其手機優先 (mobile first) 的設計理念,讓手機螢幕也能夠輕鬆瀏覽網頁最為關鍵。

閱讀全文⊳

Google 網頁評分工具

經過一番網站改版,讓智慧手機和平板電腦等正常顯示網頁內容 (不會太小),以方便行動裝置瀏覽網站後,如何知道網頁合格嗎?Google 提供一個線上的網頁評分工具,只要輸入網址 (URL),該網頁是否合格立刻揭曉!

Think-with-Google

這是 Think With Google 團隊運用 Google PageSpeed Insights 服務所推出的小工具,針對網頁載入速度和行動裝置體驗加以評分,並建議可改善的部分。公司官方網站首頁的評分:手機體驗-95、手機網頁效能-81、桌機網頁效能-91

易普印網站評分

接著是部落格網站 (blog.eprint.com.tw) 首頁的評分:手機體驗-94、手機網頁效能-74、桌機網頁效能-91。由於這兩個公司網站,均改採用 Responsive Web Design (RWD) 自動調適網頁的技術開發設計,在手機體驗(Mobile friendly)上的評分都很不錯,但手機網頁效能 (Mobile speed) 則還有加強空間。

e知識庫網站評分

自動依螢幕大小調適網站

市面上的上網設備玲瑯滿目,有著各種螢幕大小和解析度,如何讓所有設備的瀏覽器 (Browser) 都能很舒服地瀏覽公司網站,不需要一直縮放滑動網頁,這個想法一直盤旋在腦海裡。從農曆過年後,開始積極研究這方面的網頁技術,進行網站大改版,經過半年時間終於完成並上線 (下圖為桌機版)。
*** 如果網頁沒有正確更新的話,記得按一下 F5 鍵!

這項 Responsive Web Design (RWD) 的網頁技術 ,又稱自適應式網頁設計,或響應式網頁設計,最簡單的說法就是手機、平板、桌上電腦瀏覽器上,網頁都能自動調適來符合螢幕的大小,達到最佳的瀏覽閱讀效果。 (下圖為平板版本)

易普印 平板版

易普印 手基版

為了讓不同螢幕大小/解析度,能夠輕鬆瀏覽網頁內容,以往是按照螢幕大小來個別設計網頁,手機、平板、桌機有各自專屬的網頁空間。除了上述的三種專屬解析度之外,其他的解析度可能就會變形或變醜了。

我們採用的是 Twitter Bootstrap 網頁技術來開發新的公司網站,適合於各種手機、平板、桌機上新舊版本的瀏覽器,包括 IE 8 以上版本、Edge、Chrome、Firefox、Safari 等。

*** 網站全新改版難免有異常,如果發現任何問題,麻煩幫忙通知一下客服人員。

適合行動裝置的公司網站

以往針對不同的螢幕解析度,需要設計各自獨立的網站網頁,網頁更新時更是麻煩又費時 (容易發生不一致的錯誤)。最新的網頁設計技術 (Responsive Web Design 響應式網頁; RWD),可以針對不同電腦設備(如桌機、筆電、平板、手機)的螢幕尺寸,自動調整網頁頁面的呈現方式,也就是一個網站擁有四個網頁瀏覽版本 (如下圖),來提供使用者最佳的網頁瀏覽效果。

響應式網站範例

在 Inc. 雜誌上就提到,消費者使用手機的頻率,在新的一年會更甚以往,企業主務必要確定「公司的網站適用於行動裝置」。因為越來越多人是用手機而非電腦上進行搜尋,谷歌也為此做出必要的調整。因此,公司的網站必須能夠順利在手機上瀏覽與使用。如果消費者無法順利透過行動裝置進入貴公司網站,公司將很難繼續在市場上存活。

 

依據 Google Analytics 的公司流量分析,我們官方網站與部落格網站的行動客戶約佔一成。雖然公司的部落格網站已適合於行動裝置瀏覽和使用 (如上圖),新年度裡將再持續針對公司的官網進行響應式網頁設計,提供行動裝置更好的瀏覽體驗。

 

分享