2011年5月1日 星期日

MozTW 首頁的各種面貌

隨著 Firefox 4 的上市,這次 MozTW (Mozilla Taiwan) 的首頁有了一些新的設計,成果目前已經上線;在上週日的 Firefox 4 Party 上半場的小科展中,藉由插花小B 的攤位,我也有小小的展示了一下 MozTW 首頁的各種樣貌

這次的主要工程有兩項:隨作業系統而提供不同的內容、因應行動裝置的螢幕尺寸提供行動版面。


隨 OS 呈現不同內容

最早 Piaip 所製作的 MozTW 網站首頁,早已有偵測透過瀏覽器 User Agent 偵測作業系統的機制,首頁的下載框中,使用者所用的平台會高亮突起,幫助使用者選擇下載的 Firefox 版本(如下圖),不過這個機制已經壞了好幾年。


在此次更新中,小B 先是修好了平台偵測的 Javascript,接著我們就加上了隨不同平台提供不同內容的設計。主要的區別有兩項:首頁的底圖、及下方第一欄推薦軟體的內容。

偵測的平台有 Windows、Linux、Mac、iOS 及 Android/Maemo 五種,每種平台都有專屬的頁手標頭圖。前三種桌面端平台中,下方第一欄維持原本的 Thunderbird,在 iOS 下此欄推薦的是 Firefox Home,在 Android/Maemo 中則當然推薦新的 行動版 Firefox 了。


行動裝置版面

隨著 iPhone 的發售與 Android 的釋出,智慧型手機在這兩年呈現爆炸性的發展,手機上網正式進入普及期,因此我們開始想要針對小螢幕的行動裝置瀏覽 MozTW 的體驗去最佳化。

手機版網頁的製作有兩個方式:第一是做一個完全獨立的專用網站,後端的內容或許是可以維持同一套,但前端的頁面則切割為桌面與手機兩個完全不同的網站,藉由轉址等手段讓行動裝置能瀏覽到專用網頁。好處是在裝置端能有最好的瀏覽效果,壞處則是維護的成本要多出一倍。

另一個方式,則是針對現有的桌面版網站,加掛上各種調整的設定,讓手機瀏覽時得到較佳的效果。好處是維護的成本較低,壞處則有設計上較多限制、相對不靈活、且手機瀏覽下載的頻寬需求與桌面相仿、聯繫成本高、瀏覽速度慢等問題。
 
MozTW 網站所使用的佈景從 2004 年沿用至今,除了一些諸如 CSS 圓角、頁面寬度的調整以外,一直沒什麼變化。是有點一成不變,不過倒是出現了一個意外的優點—這個佈景是以欄為主的版面,最上方是 Banner、中間有主要產品欄、接著有三個項目並排、再下方則是最新消息與快速捷徑,最下面則是版權資訊等,全部合計有八個欄位。


因為每個資訊都容納在獨立的欄位中(以 DIV 包裹),而欄位間的功用及區隔也很明確,因此我們可以很直截了當的,順應行動裝置的小螢幕、長螢幕來調整各欄位置,當然最簡單的方法就是由上到下各個欄位排成一直排。

經過兩個禮拜的施工,CQD 完成了 MozTW 首頁的行動版型,並透過 CSS Media Query,針對 500px 寬度以下的裝置上加掛上行動版型 CSS,以達到自動切換版面的效果。

行動版型中,除內容各欄的排列外,正中央主要產品欄的主圖與最上方 Banner 上的導覽按鈕也透過 CSS 調整大小與排列。此外,在 iOS 及 Android/Maemo 等行動裝置上,提供桌面版 Firefox 4 的安裝檔下載是無用、不合理、且容易讓一般用戶混淆的事,因此我們也直接把「下載 Firefox 4」框框隱藏起來了。



成果

經過以上兩步驟的改造之後,我們得到一個 (1) 會根據螢幕大小切換為行動版型或一般版型 (2) 根據瀏覽者的平台不同提供對應資訊 的全新首頁。以下是各平台下,開啟 Moztw 首頁的截圖。

桌面端

Windows (Win7)


Mac OS X (10.6)


Linux (Ubuntu 10.10)

 
行動裝置端

iPad (iOS 4.3)


 iPhone (iOS 4.3)


Android (2.3)



其他

這次的更新,還包含了將首頁的圖形式圓角按鈕及欄位圓角,以 CSS3 border-radius  取代,降低下載圖片的需求、增加美觀(同時在 IE6~IE8 下醜化,IE8 以前版本不支援 CSS 圓角XD)。

此次的更新只限於首頁,點擊其他內容後就會跳回原始的全畫面網站。

除了行動版頁面外,對應 Mozilla 的 http://mozilla.con/m,三月底時 CQD 也製作了 http://moztw/m ,作為行動裝置的 Firefox 快速下載頁。


很多人注意到,這次從 Firefox 4 公開,到 MozTW 網站更新完成,有好幾天的落差。更新太慢的原因很簡單,就是人力不足。如果您對 Firefox 有興趣,想要加入 MozTW 社群一同貢獻所長,並且了解 HTML、CSS,或者會使用美工軟體的平面設計,甚或是翻譯、打雜等任何其他技能者,請看 參與我們 頁面。


延伸閱讀

1 意見:

IKARi 提到...

good job!