《Disney +》 迪士尼、Marvel、彼思、星球大戰…  觀看1月22日「Resident Evil Showcase」直播節目   多多自走棋S12賽季即將開啟   聯邦地方法院承認Epic Games控訴 蘋果要更改App store條款   與PlayStation 一同慶祝你的2020年遊玩紀錄回顧   伊織萌成為日本LoL激鬥峽谷電競官方大使!   PlayStation Store將在PS3和PS Vita上繼續經營   《F.I.S.T. 暗影火炬城》:9大遊戲攻略助你在火炬城探索通關   「寶可夢 晶燦鑽石・明亮珍珠」FINAL PV & 新情報公開! 

2013 內容網站設計新趨勢:自適應網頁設計、HTML5,以及推薦閱讀機制

商業
website design 每年年底是網站改版最密集的時候,初創公司或成長迅猛的網站尤其需要不斷改進以滿足用戶的普遍需求。 科技博客改版最具代表性。從成立之初幾人的團隊博客,成長到具備一定規模的媒體平台,技術需要不斷革新、設計體驗需要不斷完善、內容沉澱和更新數量上的增長,也需要重新考慮內容的整合方式。 本文從 Techmeme Leaderboard 梳理了 Top100 資訊網站,最終篩選 Mashable!PandoDailyThe Next Web 這三家(以下分別簡稱MA 、PD、TNW)作為出發點,結合 36 氪此次改版,分享我個人的 2013 設計、技術、內容整合趨勢的預測。
  • 響應式設計(Responsive Web Design)將被全面採用
《TO》編按:「響應式設計」即台灣所稱「自適應網頁設計」,意指個網頁在不同解析度下,會呈現不同的介面形式,了解更多可見:http://fundesigner.net/responsive-web-design-explain/
2013 之前,網站設計首要考慮的是屏幕分辨率的問題,大體會將網站分為電腦桌面版和手機 WAP 版本,使用不同的二級域名訪問或者鏈接跳轉,也有 WebApp 形式的移動版,存在的問題是電腦、手機訪問的體驗、可用性都存在巨大差異。 近兩年移動設備飛速發展,在路上、床上,茶餘飯後使用手機或平板設備瀏覽資訊網站,與使用電腦瀏覽的頻率基本一致,36 氪網站有 25% 讀者是通過移動設備訪問的,這個比例還在增加,而且移動設備中一半屬於平板。平板屏幕橫屏和桌面電腦分辨率一致,豎屏卻更接近手機分辨率的比例,這時響應式設計需求就體現出來了。 現代的網站應同時、實時響應和兼容桌面、平板、手機的不同分辨率的排版。 從訪問統計中可以看出,不同階段移動設備型號有 1000~3000 種,屏幕分辨率大體分幾種,但個別差異也很大。 網站設計,特別是內容為主的網站,響應式設計能夠很好滿足最基本的閱讀需求。MA,PD,TNW 最新改版都採用了響應式設計,Techmeme Leaderboard 前 100 家網站,有超過 10% 是響應式設計排版,我相信明年這個數字會有很大幅度增長。36 氪從最近兩次改版均採用響應式設計,科技博客內應用目前在中國尚屬首家。
  • HTML5 趨於標準並被大幅度採用,包括 pushState、localStorage、Full-Screen API 等技術增強瀏覽體驗
儘管 HTML5 還沒有很完善的標準化,但不少特性能夠大幅度提升用戶瀏覽體驗。 科技博客以內容為主,技術上的嘗試會更加前衛,現代瀏覽器性能和對 HTML5 特性的支持愈來愈完善,讓網站表現更像一個 App,可以滿足一些更加個性化的需求,而且會愈來愈多。 訪問 PD 首頁,腳本會在後台自動預加載文章列表內容,當你點擊查看文章的時候,實際內容已經加載完畢,可以非常快查看頁面內容,包括圖片,瀏覽體驗有很大幅度提升。 TNW 在切換文章的時候,也可以達到接近實時的效果,同樣是採用了HTML5 技術; MA 使用了 HTML5 離線緩存增強瀏覽體驗,使用 Infinite Scrolling(《TO》編按:無限捲頁,Google 圖片搜尋已經使用此功能)方式載入更多內容。 36 氪新版嘗試了 Turbolinks 技術,第一次加載頁面後,訪問其他頁面無需重複執行 Javascript 腳本,無需重繪 CSS ,頁面渲染速度比通常快 2~3 倍(由於兼容性等細節問題改技術已暫停使用),另外查看 36 氪文章頁面,可以通過熱鍵進入全屏閱讀模式。 HTML5 語義化標籤也開始被採用,目前語義化標籤還不會被搜索引擎增加排名權值,但仍然可以讓搜索引擎更好地識別內容。
  • 使用推薦機制驅動信息流排序
這是一個信息爆炸的時代,各種信息如潮湧襲來,讀者獲取信息的方式也發生了巨大的改變,愈來愈多的讀者通過微博、推送等快餐形式消費內容,RSS 訂閱用戶更多抱怨更新頻繁、數量太多無法適從。 MA、PD、TNW 改版均開始將最新文章放到側邊欄,主體欄目採用編輯推薦、熱門精選方式展現新文章,其中MA 還首次採用了社會化分享驅動排序,推薦文章,熱門文章由Facebook、 Twitter ,Google Plus 等分享數據作為主要依據。 36 氪此次改版也類似的嘗試,首頁第一屏主要為推薦內容,包括編輯推薦、熱門自動推薦和主題化推薦;側邊欄除首頁導航之外,我們還新增了「推薦」和「分類瀏覽」頁面。 推薦頁面採用讀者閱讀文章後表示「喜歡」和點擊數據、評論數量和實效性等綜合排序,羅列出你不應該錯過的重要文章;分類瀏覽頁面,我們將文章按主題細分到領域,精確到具體內容相關的話題進行整理,這樣你可以通過兩三次點擊即可查找到你感興趣的話題,發現更多你需要的內容。36 氪關注創業,報導創業公司,這方面的內容會有最高的排序和展現機會。 技術上的改進,一定程度減小內容瀏覽的負擔,如使用新的加載方式更快載入內容,使用快捷鍵瀏覽等;36 氪目前支持← → 方向鍵翻頁和瀏覽上下篇,使用t、b、/ 跳轉頁面頂部、底部、返回首頁。 網站改版並不是一年一度的慣例,更多是改進以往不足的地方,同時對新的方式進行探索的過程。 36 氪此次改版是從去年 8 月份開始策劃的(查看原型圖),9 月份開始設計,11 月份設計交付後才開始正式開發,11 月 24 日開始線上測試並於 12 月 8 日兩週年正式上線。 PD、MA、TNW 最近的改版也都花費了 3 個月左右的時間。網站後端,PD 和 TNW 繼續採用WordPress平台,36 氪和 MA 一樣,基於 Ruby On Rails 框架開發。 一不小心還發現 Pandodaily 的header 信息還投放了廣告:
X-hacker: If you’re reading this, you should visit automattic.com/jobs and apply to join the fun, mention this head (如果您看到這裡,不妨到 automattic.com/jobs 找一份有趣的工作,說你是從這看到的喔!)
最近你看到的改版網站都有哪些令你印象深刻呢?對於未來一年,你的預測都有哪些,歡迎在評論中和我一起探討! 相關鏈接: http://pandodaily.com/2012/11/14/welcome-to-the-new-more-reader-and-device-aware-pandodaily/ http://thenextweb.com/voice/2012/10/31/welcome-to-the-next-web-reader-edition/ http://mashable.com/2012/12/04/new-mashable/ http://www.36kr.com/about (圖片來源:頭圖 By mymobileinnovations / Flickr、設計部分配圖 By R2i / Flickr、技術部分配圖 By MSDN Deutschland / Flickr、內容部分配圖 By Sean MacEntee / Flickr) 轉載網站

別再錯過TechNow的文章,今天就訂閱「TechNow電子報

TechNow 當代科技

隨機商業新聞

Addidas