本節書摘來自異步社群《html5觸摸界面設計與開發》一書中的第2章，第2.1節,作者： 【美】stephen woods 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
内容型網站組成了internet的很大一部分。畢竟，網站就是為了浏覽文本而建立的，人們在網上做的最多的事情就是閱讀文字。内容型網站在觸摸裝置上保持良好的體驗固然很重要，但實際上它們還不夠好。 在本章中，我們将為客戶—awesome鳥類基金會，建立一個關于加州鳥類的網站。鑒于人們普遍無法在家中觀賞鳥類，我們網站目标就是通過移動裝置和桌面電腦，使之成為可能。客戶想讓數以百萬計的網站文章被連結到twitter上，使用者通過單擊即可閱讀關于鳥類的精彩文章。我們不希望讀者在網站加載完成之前流失，必須争分奪秒。在對伺服器端進行一切優化之後，還需要網頁能盡快加載。
顯然，網站在高延遲的3g網絡下的加載速度會比在辦公室的100mb的寬帶網絡下慢。但是，一旦開始接收資料，就必須立刻吸引住使用者。我們将從基本要素開始制作這個網站：文檔對象模型（dom）和層疊樣式表（css）。
設計師給了我們兩個模拟樣式圖：一個桌面版本（圖2.1）和一個移動版本（圖2.2）。
我們來看這些模拟的樣式圖。很明顯，開發這個網站的難度不大。但不要忘了，此網站要在移動裝置和桌面裝置上都能使用。作為開發者，我們喜歡盡可能地減少代碼量，因為我們知道，寫的所有代碼都要自己維護。同時，我們還希望網站在任何螢幕上的體驗都是最好的。 理想的情況下，我們隻寫一次代碼就可以用在所有的裝置上。在許多情況下，我們完全可以利用css3的新特性—媒體查詢來避免分支。如同我們在第1章“移動裝置概述”中讨論的，移動裝置與桌面裝置相比，性能還有一定差距。一些美好但複雜的互動，在桌面裝置上可以良好地運作，在比較差的移動裝置上可能會卡死。對每種情況單獨處理是有必要的。但作為一般規則，簡單的内容型網站應該能在桌面裝置和移動裝置上共用一些代碼。加州鳥類網站就是一個完美的例子。
短語“移動優先”是指在web開發中的幾個趨勢。它是一個設計理念，一個開發方式，也是一個建構css的方法。
這種設計理念僅僅是一個觀念，即首先針對移動裝置設計，然後通過調整使它适應桌面裝置。因為本書不講設計，是以我将這部分留給其他更有資格的人來講（luke wroblewski的書《mobile first》是一部偉大的開山之作）。開發方式是一個類似的觀點：先為移動裝置編寫代碼，然後再适應桌面裝置。在實踐中，一個互動複雜的移動網站，肯定會與桌面網站的運作方式截然不同，是以會産生大量的不能共用的代碼。這沒有什麼不好，隻是我不認為它能節省時間。
真正的移動優先，對于大多數生産環境的網站而言還為時過早，因為internet explorer 8不支援媒體查詢。（我們會在本章後面的部分詳細地探讨媒體查詢）。對于這個網站，我們會使用一些html5标簽。這意味着，為了正确地支援ie浏覽器，需要做一些額外的工作，或引入一個庫，比如modernizr。本書不是關于如何支援ie浏覽器的，是以我不打算涉及這一點，但在實際生産中，支援移動裝置和桌面裝置的網站，就必須支援ie8。