今天在 FB 上看到這篇文章 為什麼新聞網站長這樣。看了覺得有點手癢來回一下。
某科技網站 願意讓我用「某科技網站」的形式，分享 2011 實作該網站首頁和內頁的細節。所以這裡就不截圖了。
首頁版面的編排
由 為什麼新聞網站長這樣 該文章指出的重點，和該網站的編排對照，應該就相當明顯，所以在此文不細述。
Responsive Web Design
RWD 在「概念」上講的是用同一套 CSS 表現同一個網站在不同螢幕尺寸觀看下的效果。這點在當今的時代，尤其重要。因為
- 不少使用者現在的入口媒體幾乎已完全不是入口網站，而是 Facebook
- 相當高的比例使用者在「手機」瀏覽 FB 的時候，會點擊 FB 上的新聞連結進去瀏覽。
而
- 以 Desktop 為中心設計的網頁在 Mobile Client 上開的亂七八糟是非常有可能的狀況
因此在 2011 Mobile Client 開始興起之時，我們就決定把所有旗下所有的新聞和論壇網站全部改版成 RWD 形式結構。
設計重點
決定什麼不要，什麼可以留下來
RWD 絕非只是把比例和板塊調到 Mobile Client 可以呈現。其實更重要的是什麼可以留下來，什麼是要扔掉的。
- 首頁流動橫幅很酷？抱歉在 Mobile Client 上render不出來，也無法被使用，它一定要被砍掉。
- 側欄資訊？抱歉就算用 CSS 擠到最下面，也沒有人要看。所以也要被砍掉。
原則大概就是「只有真正的主體」可以被留下來。而且是「基於閱讀體驗」所作的優先排序。
（可以到 某科技網站 對視窗放大縮小，觀看 RWD 砍了哪些區塊）
調整細節
Mobile 囿於版面的寬度，以及操作行為的不同。很多細節是要特殊調整的。
- 首頁選單從列表改為 Dropdown Menu
- Logo 的大小調整
- 主文字型的放大縮小加粗。
- 圖片的 size 縮放
- Disable Social Sharing ( 基本上 FB 就有 FB 再分享，所以一般人不會點相對小的要死的 social sharing bar )
網頁長度
特別要提的是基本上建議 Mobile 頁面都做 3-4 個 scoll 就好（一般頁面如首頁）。如果是長內文的話，則是除了內文本體外，最多只能有 2 個左右的 scoll 元素。
多的只會造成使用者的不耐煩。
Disable Input
當初在是否要禁掉留言進行了多次 debate。最後還是決定關掉變成唯讀狀態。考慮的想法是在 Mobile 的 Input （好）體驗，非常非常的難實作。而且使用的情境比率也非常非常的低。
所以陸續把「進行留言」「分享」等等動作都砍掉...
調整 Rendering 速度
這一個部分在 RWD 實作細節上是最容易被忽略的。因為 RWD 本身其實是用 CSS3 的 Media Query 進行實作。利用偵測螢幕 Device 寬度調整 字型 / 板塊的縮放以及隱藏顯示。
值得注意的是他們是被用 CSS 「隱藏」掉的。這意味著其實在網路傳輸中，這部份的 HTML 還是有被傳輸出去，圖還是有下載，只是你沒發現而已。
而在 Mobile Client，跟「顯示區域」一樣珍貴的就是「網路頻寬」。
- Mobile CSS 與 Application CSS 切開。利用後端偵測 client 決定吐出去的 CSS 與 JS 版本。
- 利用後端偵測 client 把不會顯示到的區域直接隱藏
- 利用後端偵測 client 吐相對 size 較小的圖檔。
小結
其實 Desktop 端與 Mobile 端的網站設計想法和閱讀體驗調整重點是非常不一樣的。但相當可惜的是多半的網站規劃流程時，常常會在 Mobile 端上的功能面做出「全要」「全仿」的決策。甚至害怕砍功能會變成「太單薄」「缺乏互動」。
而造成現在所謂讀者看到的「亂象」。
所以在跟 某科技網站 討論了一下之後，決定把當年的設計細節放出來。歡迎交流...