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