隨著 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 意見:
good job!
張貼留言