響應設計的技巧，秘訣和最佳實踐

　　除非你現在正處在世外桃源，否則你不可能沒有聽說過web設計者間最近廣泛流行的響應設計(Responsive Design)。Ethan Marcotte使用responsive design這一術語描述一種新興的技術，它采用易變的布局和媒體查詢擴展網站，使得網站能夠動態適應各種尺寸大小的屏幕。如果你之前從未聽說過響應設計，那麼你可以好好讀讀Marcotte的介紹文章。

　　簡而言之，響應設計就是使用非固定的網格、非固定的布局和@多媒體查詢使得現在的(以及將來的)web能夠適應不同尺寸的屏幕。無論你的用戶使用的是一個電話，一個iPad或是巨大的台式顯示器，你的網站都能夠適應。

　　響應設計將成為一個非常有吸引力的工具，正如Luke Wroblewski所說的，設計需要遵循移動優先原則。也就是，從小屏幕開始考慮。先理清你的網站的核心，然後一點點開始構建。從骨架開始構建能夠保證網站的質量，促使開發人員關注用戶所關注的問題。

　　你打算如何構建一個響應良好的網站呢?這個問題因人而異，但是還是存在一些通用的方法的。為了幫助你開始響應設計，這裡列出了一些初期設計時的最好實踐經驗，都是從大量的web資源中總結出來的：

　　使用@media控制你的屏幕布局，但是需要記住，只有這些並不是一個真正的響應設計。

　　使用非固定的布局適應各種屏幕的尺寸。不要將你的設計限制在iPhone或是Android上，不要將它切割為平板電腦版本和桌面電腦版本。布局設計需要更加靈活可變，否則，如果某個新的屏幕尺寸突然變成潮流，你的網站將無法應對。

　　根據你的網站的具體內容設定你的網格。封裝好的網格系統可能並不適用於你的應用。這類網格的最大問題就是它們可能與你的具體內容不符。根據網站內容設計你的布局，而不是根據canvas(或是網格)。

　　從小屏幕開始。從最新的屏幕開始設計，然後逐步在浮動元素中加入@media規則，滿足更大的平板或是桌面浏覽器的窗口需要。從一個窄的單列布局開始設計移動浏覽器網站，然後再逐步擴大。

　　使用Respond或是CSS3 Media Queries這類JavaScript庫引導@media查詢，因為在舊版本的浏覽器中可能不支持直接的@media查詢。從最小的屏幕開始然後逐步擴大意味著，桌面浏覽器需要處理@media，確保使用Respond這類輔助工具能夠支持舊版本的浏覽器處理@media。

　　不要指望Photoshop，在浏覽器中構建你的組件。使用Photoshop構建動態的布局壓根就沒有可能性，應該在浏覽器中實現。

　　使用img { max-width： 100%; }控制圖像大小。對於大規模的圖像，可以考慮在小屏幕中使用Responsive Images這類工具縮小圖像的大小，然後在大屏幕中使用JavaScript還原大圖像。

　　延遲下載。可能你的網站中有些輔助元素，能夠優化你的網站，但並不是必須的。這類元素可以在下載完基本內容後再使用JavaScript加載這些元素。

　　不用處處要求完美。即使做到了上述建議，你可能還是會漏掉某些使用不支持JavaScript的舊版本浏覽器的用戶。現在這樣的用戶已經越來越少了，如果他們在桌面浏覽器中看到了移動版本的布局，這也並不就是世界末日。你的網站已經具備很好的可用性了。

　　記住響應設計是一個非常年輕的概念——是一個新的工具——每天都會湧現出一些新的東西。不要將上面的建議當做是一些硬性或是速成的規則，它只是一些引導指南罷了。

　　本文編譯自byane，原文地址。

　　譯文出處webapptrend.com，轉載請注明出處鏈接。