about 3 years ago

今天在 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 端上的功能面做出「全要」「全仿」的決策。甚至害怕砍功能會變成「太單薄」「缺乏互動」。

而造成現在所謂讀者看到的「亂象」。

所以在跟 某科技網站 討論了一下之後,決定把當年的設計細節放出來。歡迎交流...

← 由 RailsConf CFP 2014 談客觀的海選辦法 談成長中 CMS 的 Scaling 之道 (1) →
 
comments powered by Disqus