點閱率 | 432 次

新版電子報 ─ 利用Bootstrap設計

文/劉普昇


  │網路生態的改變│

1969年,UCLA的教授,也是人稱網際網路之父的Leonard Kleinrock,將他UCLA的實驗室電腦,與Stanford Univ另外一個實驗室的電腦,透過網路協定,第一次試連成功,Internet正式誕生了,並且在這30多年的期間,可以說徹徹底底的顛覆了人類世界的發展。

1970-1980年間,許多資訊界的先進們,逐步努力,一一建立各項協定與技術:TCP/IP、ROUTER、Telnet、FTP、E-mail等等,替網際網路建立了穩健的基礎。

1980-1990年間,Domain Name的概念被提出來,網址也逐步建構起來;WWW之父Berners Lee正式制訂了World Wide Web的標準,www開始踏入一般民眾的生活。

這整個發展的過程中,也包含了許多人的無私、不求利益的分享;比如說美國國防部免費釋放出他們研發多年的TCP/IP protocol、WWW之父Berners Lee也不將他的技術用在商用,free的分享出來,讓整個網際網路發展的進程,大大的加速。

1995年,從Nascape開始,網頁瀏覽器大戰延續了二十年,Mosaic、Netscape、Internet Explorer、FireFox、Opera、Safari、Chrome各有各的特色,至此到2008年間,大家使用網際網路,通常還是在個人電腦上,透過鍵盤滑鼠來瀏覽網路。

2007年底,人稱「Jesus phone」的第一代iphone誕生,開始快速且強烈、完整改變了人們瀏覽網路的習慣,因為緊接著,Google Android系統也趕上時代,行動裝置的用戶開始爆炸性的成長,短短數年間,甚至已經超越桌上型電腦用戶數的總和了!而行動裝置瀏覽大幅、快速的飆升,也推動網路生態的改變,讓各大網站必須盡快的趕上這樣的趨勢…

 │ 台灣 12 歲(含)以上持有智慧手機或平板電腦等行動裝置的比例高達 77.3%(資料來源http://www.find.org.tw/market_info.aspx?k=2&n_ID=8482)

 

 │自適應網頁設計的誕生│

現在的行動裝置普及,看看身邊的朋友,幾乎人手智慧型手機與平版,要找到傳統型手機,反而相對較困難了呢。於是乎,市場這些各式各樣的螢幕尺寸,有些甚至帶著非常高的解析度,並且螢幕還可以在直向(portrait)與橫向(landscape)之間切換,這樣的情況,進一步改變了目前的網路生態,網頁設計的重點,已經不只是相容於不同瀏覽器,甚至要進一步適合不同的解析度與行動裝置的瀏覽!

因此,RWD(Responsive Web Design)自適應網頁設計因應而生了。自適應網頁的特色,在於經由如此原則設計的網頁,不論是在比較大螢幕的桌面瀏覽器,還是在螢幕比較小的行動裝置瀏覽器上,都能夠自動適應瀏覽器的解析度,不至於因此產生嚴重的跑版或字體過小,使用不便的情況。

我們看看下圖時代雜誌的網頁,在正常的電腦螢幕或高解析的平版上顯示時,網頁上有三大區塊,分別展示了最近的文章、頭條新聞、視訊;但是當在手機版上顯示時,就將顯示聚焦在頭條新聞區塊,將選單收集在左上角的Tab中,由使用者自行點擊來選擇想看的區塊。

RWD自適應的網頁,可以避免過往可能一樣的網頁功能,但卻需要設計許多版本,例如電腦版、手機版、平版專用等等的缺點,並且除非有其他特別需求,亦可考慮不需另外開發手機版app;而整個資料維護也可以只要維護同一網頁即可,有效減少人力成本,因此越來越多的企業網站開始往RWD這個方向邁進。

 │ 自適應網頁的範例 – Time網站首頁(資料來源time.com)

 

 │舊版電子報│

慈濟醫療志業數位學習電子報,已經發刊超過五年,初期是希望將教學研發組的許多新idea,與院內同仁進行分享。於是,在設定的觀看族群為院內同仁的情況下,除分享新知外,各院推薦課程、新的衛教影片,都是我們的重點發表主題。

從下圖可以看到,我們設計了許多主題區塊,裡面利用了Flash的設計,帶來互動式與多采多姿的網頁瀏覽體驗。在2009年設計之初,網頁內嵌各式Flash設計,仍然有許多網站在使用。

但時代的巨輪是不會停止轉動的,轉眼間,2011年底,Adobe宣布停止開發電腦版以外的Adobe Flashplayer,並開始推行HTML5格式;而隨著行動瀏覽數的大幅增加,Flash內嵌的設計,已非趨勢;並且無法適應裝置解析度的設計,也無法帶給行動裝置使用者舒適的使用體驗。改版,已勢在必行!

 │ 舊版數位學習電子報網頁http://cms.tzuchi.com.tw/dl/e-learning/

 

 │逐步成長│

如前言所談,我們決定在今年將電子報改版,並且將電子報分享的目標,由院內同仁,進展到社會大眾。所以本次改版,希望能夠發展一個品質與使用者體驗兼具的電子報網站。

品質面:

除了固定的本期文章,如平台軌跡、活動分享、數位新知、慈院推薦、投稿文章等等,我們從新版開始,每一期將設定一個本期電子報主題,分成「焦點人物與專題企劃」,深入訪談專家與用心編寫的專題,都希望讓讀者可以開心的取得成長與學習。

程式面:

考慮過許多種自適應網頁設計框架後,我們最後決定採用Bootstrap進行設計與佈局,然後搭配php與mysql database,設計整個網站。

 

 │ Bootstrap首頁LOGO http://getbootstrap.com/

 

 下圖就是新版的電子報網頁版面,希望,新的電子報可以帶給大家一個全新的閱讀與使用體驗,讓大家可以有所學習與成長~~

 

 │ 新版數位學習電子報網頁http://lms.tzuchi.com.tw/e-paper/pages/