我們不的(de)不承認一(yī)個事實，在web設計和(hé)開發領域，我們将會無法跟上設備與分辨率革新的(de)步伐。對于多數網站 來說，為(wèi)每種新設備及分辨率創建其獨立的(de)版本根本就是不切實際的(de)；結果就是，我們将會赢得使用某些設備的(de)用戶群，而失去(qù)那些使用其他設備的(de)用戶。不過，或 許會有(yǒu)另外一(yī)種方式，可(kě)以幫助我們避免這種情況的(de)發生。
響應式網頁設計(Responsive Web design)的(de)理(lǐ)念是，頁面的(de)設計與開發應當根據用戶行(xíng)為(wèi)以及設備環境(系統平台、屏幕尺寸、屏幕定向等)進行(xíng)相應的(de)響應和(hé)調整。具體的(de)實踐方式由多方面組成，包括彈性網格和(hé)布局、圖片、CSS media query的(de)使用等。無論用戶正在使用筆(bǐ)記本還是iPad，我們的(de)頁面都應該能夠自(zì)動切換分辨率、圖片尺寸及相關腳本功能等，以适應不同設備；換句話說，頁面應該有(yǒu)能力去(qù)自(zì)動響應用戶的(de)設備環境。這樣，我們就可(kě)以不必為(wèi)不斷到來的(de)新設備做(zuò)專門的(de)版本設計和(hé)開發了。
web建設似乎已經有(yǒu)了一(yī)個共識，就是為(wèi)大量設備建立不同的(de)網站幾乎是不可(kě)能的(de)。響應式網站是未來的(de)趨勢，除非這個移動設備需要一(yī)些非常具體的(de)功能或完全不同的(de)內(nèi)容值得開發。
你可(kě)能已經知道(dào)響應設計，移動第一(yī)方針，和(hé)得體的(de)退化。這些都是建立廣泛可(kě)訪問站點和(hé)網絡應用程序的(de)主要工具和(hé)技術。在這篇文章(zhāng)中，我将集中着重讨論移動設計方面和(hé)一(yī)些亮(liàng)點技術，從而能改善您的(de)桌面站點。移動第一(yī)并不意味着，你應該開始從320px屏幕寬度的(de)向上延伸擴展。更多考慮的(de)是從工作流程中所有(yǒu)可(kě)能的(de)使用情況。
即使在一(yī)個很小的(de)屏幕，一(yī)個簡單而整潔的(de)布局，也能确保用戶得到最好的(de)體驗。但是你隻有(yǒu)這一(yī)種方法為(wèi)手持設備的(de)用戶考慮嗎？一(yī)旦你創建了一(yī)個偉大的(de)無障礙和(hé)良好的(de)流動性的(de)移動網站，再回頭看看對比下你的(de)桌面版本。不要忘了觸摸和(hé)鼠标是完全不同的(de)性質。不要讓您的(de)桌面用戶僅僅因為(wèi)需要在兩個菜單項之間移動200px而扭傷了手腕。媒體查詢是你的(de)朋(péng)友。
放棄它，隐藏它因此你應該決定要花費比别人更多的(de)代價為(wèi)這些看似不太重要的(de)體驗上建立一(yī)個移動網站。最好的(de)做(zuò)法就是擺脫他們，不僅僅是為(wèi)了節省一(yī)些像素和(hé) 提供更好的(de)用戶體驗。現在問你自(zì)己，有(yǒu)必要把桌面版本上的(de)東西全部展現出來嗎？那樣可(kě)能讓用戶感到迷惑或分心？也許這些選項應該是為(wèi)高(gāo)級用戶而設計為(wèi)隐藏 在子(zǐ)菜單？也許用戶會體會到隻有(yǒu)4個主菜單，而不是6個主菜單項？
桌面浏覽器的(de)響應對于公司而言，尤其是當多任務時，更喜歡頻繁的(de)調浏覽器窗口大小。有(yǒu)時，你不能浪費時間在某一(yī)個站點上，使用媒體查詢創建網頁時，要把桌 面用戶考慮在內(nèi)。如(rú)果讓我重新調整站點來适應視(shì)頻或圖像，我想，我不是唯一(yī)一(yī)個會發瘋的(de)。所以，請開始使用響應媒體，這麽做(zuò)會給站點帶來更多變化。
方位方位是一(yī)個基于當前正在縱向或橫向位置看設備的(de)規範。通過媒體查詢，你可(kě)以在不同方位分配不同的(de)布局。一(yī)些桌面浏覽器是“僞造”的(de)方向，根據窗口的(de)寬度和(hé)高(gāo)度的(de)比例。這使您可(kě)以添加一(yī)些很好的(de)調整，以增強用戶體驗。
輸入類型HTML5有(yǒu)一(yī)些新特性能幫助移動用戶填寫表格。例如(rú)：如(rú)果你添加類型為(wèi)email的(de)字段，它會告訴移動浏覽器提供像“@”字符或“.com”擴展性的(de)電子(zǐ)郵件地(dì)址。請記住，它也有(yǒu)助于桌面用戶。他們将得到他們以前使用的(de)電子(zǐ)郵件地(dì)址提供的(de)一(yī)個下拉菜單，甚至根據他們以前使用的(de)細節，自(zì)動填充整體表格。
少的(de)導航，更好的(de)用戶預測在移動設備上浏覽，如(rú)果我有(yǒu)從主頁丢失了印象深刻的(de)幾個鏈接，我會很惱火并感到失落。我會問自(zì)己：我在正确的(de)地(dì)方嗎？我應該回去(qù)并開始了嗎？這是不應該出現的(de)，用完整的(de)URL欄和(hé)臃腫的(de)文字描述當切換标簽對于移動用戶來說是不明智的(de)。
滾動似乎比通過浏覽菜單項更适合觸摸屏用戶。在可(kě)能的(de)情況下，避免創建一(yī)個複雜的(de)網站結構，不要試圖預測用戶可(kě)能尋找并嘗試相關的(de)菜單或命令。
擁抱新标準沒有(yǒu)通過不必要的(de)“哦，flash，為(wèi)什麽”的(de)辯論，網站面向未來，盡可(kě)能地(dì)利用新興的(de)标準。CSS3的(de)過渡和(hé)其他花哨的(de)視(shì)覺效果，先進的(de)互動HTML5的(de)。這似乎是以後要走的(de)，除了一(yī)些過時的(de)标簽，W3C已經支持相當一(yī)部分新特性了，從長(cháng)遠看來這是一(yī)個不錯的(de)選擇。
