在Web設計(jì)和(hé)開(kāi)發領域，很(hěn)快的，我們将會(huì)無法跟上(shàng)設備與分辨率革新的步伐。對于多(duō)數(shù)網站(zhàn)來(lái)說，為(wèi)每種新設備及分辨率創建其獨立的版本根本就是不切實際的；結果就是，我們将會(huì)赢得(de)使用某些(xiē)設備的用戶群，而失去那(nà)些(xiē)使用其他設備的用戶。不過，或許會(huì)有(yǒu)另外一種方式，可(kě)以幫助我們避免這種情況的發生(shēng)。

響應式Web設計(jì)(Responsive Web design)的理(lǐ)念是，頁面的設計(jì)與開(kāi)發應當根據用戶行(xíng)為(wèi)以及設備環境(系統平台、屏幕尺寸、屏幕定向等)進行(xíng)相應的響應和(hé)調整。具體(tǐ)的實踐方式由多(duō)方面組成，包括彈性網格和(hé)布局、圖片、CSS media query的使用等。無論用戶正在使用筆記本還(hái)是iPad，我們的頁面都應該能夠自動切換分辨率、圖片尺寸及相關腳本功能等，以适應不同設備；換句話(huà)說，頁面應該有(yǒu)能力去自動響應用戶的設備環境。這樣，我們就可(kě)以不必為(wèi)不斷到來(lái)的新設備做(zuò)專門(mén)的版本設計(jì)和(hé)開(kāi)發了。

網頁設計(jì)師(shī)似乎已經有(yǒu)了一個(gè)共識，就是為(wèi)大(dà)量設備建立不同的網站(zhàn)幾乎是不可(kě)能的。響應式網站(zhàn)是未來(lái)的趨勢，除非這個(gè)移動設備需要一些(xiē)非常具體(tǐ)的功能或完全不同的內(nèi)容值得(de)開(kāi)發。

你(nǐ)可(kě)能已經知道(dào)響應設計(jì)，移動第一方針，和(hé)得(de)體(tǐ)的退化。這些(xiē)都是建立廣泛可(kě)訪問站(zhàn)點和(hé)網絡應用程序的主要工具和(hé)技(jì)術(shù)。在這篇文章中，我将集中着重討(tǎo)論移動設計(jì)方面和(hé)一些(xiē)亮點技(jì)術(shù)，從而能改善您的桌面站(zhàn)點。移動第一并不意味着，你(nǐ)應該開(kāi)始從320px屏幕寬度的向上(shàng)延伸擴展。更多(duō)考慮的是從工作(zuò)流程中所有(yǒu)可(kě)能的使用情況。

簡單

即使在一個(gè)很(hěn)小(xiǎo)的屏幕，一個(gè)簡單而整潔的布局，也能确保用戶得(de)到最好的體(tǐ)驗。但(dàn)是你(nǐ)隻有(yǒu)這一種方法為(wèi)手持設備的用戶考慮嗎？一旦你(nǐ)創建了一個(gè)偉大(dà)的無障礙和(hé)良好的流動性的移動網站(zhàn)，再回頭看看對比下你(nǐ)的桌面版本。不要忘了觸摸和(hé)鼠标是完全不同的性質。不要讓您的桌面用戶僅僅因為(wèi)需要在兩個(gè)菜單項之間(jiān)移動200px而扭傷了手腕。媒體(tǐ)查詢是你(nǐ)的朋友(yǒu)。

放棄它，隐藏它

因此你(nǐ)應該決定要花(huā)費比别人(rén)更多(duō)的代價為(wèi)這些(xiē)看似不太重要的體(tǐ)驗上(shàng)建立一個(gè)移動網站(zhàn)。最好的做(zuò)法就是擺脫他們，不僅僅是為(wèi)了節省一些(xiē)像素和(hé)提供更好的用戶體(tǐ)驗。現在問你(nǐ)自己，有(yǒu)必要把桌面版本上(shàng)的東西全部展現出來(lái)嗎？那(nà)樣可(kě)能讓用戶感到迷惑或分心？也許這些(xiē)選項應該是為(wèi)高(gāo)級用戶而設計(jì)為(wèi)隐藏在子菜單？也許用戶會(huì)體(tǐ)會(huì)到隻有(yǒu)4個(gè)主菜單，而不是6個(gè)主菜單項？

桌面浏覽器(qì)的響應

對于我而言，尤其是當多(duō)任務時(shí)，更喜歡頻繁的調浏覽器(qì)窗口大(dà)小(xiǎo)。有(yǒu)時(shí)，你(nǐ)不能浪費時(shí)間(jiān)在某一個(gè)站(zhàn)點上(shàng)，使用媒體(tǐ)查詢創建網頁時(shí)，要把桌面用戶考慮在內(nèi)。如果讓我重新調整站(zhàn)點來(lái)适應視(shì)頻或圖像，我想，我不是唯一一個(gè)會(huì)發瘋的。所以，請(qǐng)開(kāi)始使用響應媒體(tǐ)，這麽做(zuò)會(huì)給站(zhàn)點帶來(lái)更多(duō)變化。

方位

方位是一個(gè)基于當前正在縱向或橫向位置看設備的規範。通(tōng)過媒體(tǐ)查詢，你(nǐ)可(kě)以在不同方位分配不同的布局。一些(xiē)桌面浏覽器(qì)是“僞造”的方向，根據窗口的寬度和(hé)高(gāo)度的比例。這使您可(kě)以添加一些(xiē)很(hěn)好的調整，以增強用戶體(tǐ)驗。

輸入類型

HTML5有(yǒu)一些(xiē)新特性能幫助移動用戶填寫表格。例如：如果你(nǐ)添加類型為(wèi)email的字段，它會(huì)告訴移動浏覽器(qì)提供像“@”字符或“.com”擴展性的電(diàn)子郵件地址。請(qǐng)記住，它也有(yǒu)助于桌面用戶。他們将得(de)到他們以前使用的電(diàn)子郵件地址提供的一個(gè)下拉菜單，甚至根據他們以前使用的細節，自動填充整體(tǐ)表格。

少(shǎo)的導航，更好的用戶預測

在移動設備上(shàng)浏覽，如果我有(yǒu)從主頁丢失了印象深刻的幾個(gè)鏈接，我會(huì)很(hěn)惱火(huǒ)并感到失落。我會(huì)問自己：我在正确的地方嗎？我應該回去并開(kāi)始了嗎？這是不應該出現的，用完整的URL欄和(hé)臃腫的文字描述當切換标簽對于移動用戶來(lái)說是不明(míng)智的。

滾動似乎比通(tōng)過浏覽菜單項更适合觸摸屏用戶。在可(kě)能的情況下，避免創建一個(gè)複雜的網站(zhàn)結構，不要試圖預測用戶可(kě)能尋找并嘗試相關的菜單或命令。

擁抱新标準

沒有(yǒu)通(tōng)過不必要的“哦，flash，為(wèi)什麽”的辯論，我隻是建議你(nǐ)讓您的網站(zhàn)面向未來(lái)，盡可(kě)能地利用新興的标準。CSS3的過渡和(hé)其他花(huā)哨的視(shì)覺效果，先進的互動HTML5的。這似乎是以後要走的，除了一些(xiē)過時(shí)的标簽，W3C已經支持相當一部分新特性了，所以我認為(wèi)從長遠看來(lái)這是一個(gè)不錯的選擇。

正如你(nǐ)看到的我沒討(tǎo)論過多(duō)的技(jì)術(shù)細節，但(dàn)我一般都認為(wèi)，擁有(yǒu)這方面技(jì)術(shù)的眼光會(huì)讓你(nǐ)更加節省開(kāi)發時(shí)間(jiān)。要考慮跨平台而不僅僅為(wèi)移動設備。讓您手持設備和(hé)桌面站(zhàn)點在某個(gè)內(nèi)容上(shàng)的行(xíng)為(wèi)更加接近。