早在2010年,Ethan Marcotte就開始鼓勵設計師和開發(fā)者實踐“響應式網(wǎng)頁設計：與其將每個越來越多的網(wǎng)絡設備定制為不連貫的設計，我們可以將它們視為相同體驗。使我們的設計更方便呈現(xiàn)它們。
Ethan Marcotte認為，通過設計就完全可以適配到任何的網(wǎng)站，而設計師和開發(fā)人員是可以對他們的工作進行驗證的。
八年后，響應式網(wǎng)頁設計已達到技術高峰?，F(xiàn)在，標準做法是在每種設備上創(chuàng)建一致，量身定制，包括那些尚未發(fā)布的設備。
但什么是響應式網(wǎng)頁設計？在實踐中，響應式網(wǎng)頁設計最好的例子是什么？
“手機和平板電腦占全球互聯(lián)網(wǎng)使用量的56.74％?！?/a>
什么是響應式網(wǎng)站？
嚴格地說，響應式網(wǎng)站有三個明確的特征：
1. 媒體查詢
“媒體查詢使我們不僅可以定位某些設備類別，而且還可以實際檢查我們工作的設備特征，”（Marcotte的解釋）
因此，媒體查詢允許開發(fā)人員使用查詢條件，檢查用戶設備的屬性更改網(wǎng)頁設計。它為用戶提供了更加個性化的體驗。
2. 流體網(wǎng)格
當使用CSS創(chuàng)建靈活的網(wǎng)格時，無論用戶使用的是21英寸臺式計算機，13英寸筆記本電腦，9.7英寸平板電腦還是5.5英寸的手機。
“流體布局將我們設計的控制牢牢掌握在我們的用戶和他們的瀏覽習中，”（Marcotte的解釋）。
這使設計師能夠在多個設備上保持一致的外觀和感覺。此外，允許設計人員更新網(wǎng)站的一個版本或許多版本，可以節(jié)省每個人的時間和金錢。
3.靈活的視覺效果
Marcotte提到：使用代碼，防止豐富的媒體文件從超過其容器的尺寸。其中的視覺也是如此。
鑒于目前存在超過8.48b的獨特設備，該功能允許團隊創(chuàng)建永恒的設計能夠適應任何設備，無論其大小或形狀。
這三種類型的功能一起使設計人員能夠制作響應式網(wǎng)站?！傲鲃泳W(wǎng)格，靈活的圖像和媒體查詢是響應式網(wǎng)頁設計的三大技術要素
下面，我們列出了11個超出響應式網(wǎng)頁設計基本標準的例子。每個網(wǎng)站都提供了適合用戶的獨特體驗。
響應式網(wǎng)頁設計示例
1. Dropbox
Dropbox利用流暢的網(wǎng)格和靈活的視覺效果來設計出色的響應式網(wǎng)站方面做得非常出色。從桌面切換到移動設備時，不僅字體顏色會隨著背景顏色的變化而變化，而且圖像也會改變方向。
考慮到上下文，Dropbox為每款設備提供量身定制的體驗。例如，為了防止用戶反彈，一個小箭頭指示桌面用戶向下滾動以查看更多內(nèi)容。但箭頭沒有在移動設備中存在，因為根據(jù)習慣，用戶會在具有觸摸屏功能的設備上滾動。同樣，他們的注冊形式在桌面設備上是可見的，但它隱藏在平板電腦和移動設備上的號召性用語按鈕后面，因為移動設備的空間有限。
2. Dribbble
Dribbble的網(wǎng)站擁有一個響應式網(wǎng)頁設計的特點：靈活的網(wǎng)格，它可以從臺式機和筆記本電腦上的五列到平板電腦和手機上的兩列。
為了防止他們的網(wǎng)站在移動設備上感到混亂，Dribbble已經(jīng)刪除了多個項目。例如，作品不再歸因于作者，視圖，評論和數(shù)目不再嵌套在每一項。他們還將菜單隱藏在漢堡圖標后面，并刪除了搜索欄。
3. GitHub
GitHub的網(wǎng)站為所有設備提供一致的體驗。但是，有一些明顯的差異：
從桌面平板設備切換到平板設備時，從兩列布局更改為單欄布局的區(qū)域，副本位于注冊表單上方而不是旁邊。
不同于臺式機和平板設備，在他們的注冊形式為焦點，GitHub只提出一個叫移動動作按鈕。用戶必須單擊動作調(diào)才能顯示表單。
和Dribbble一樣，GitHub也刪除了搜索欄，并將菜單隱藏在手持設備上的漢堡圖標后面。這是一種非常常見的做法，因為它有助于減少空間有限，防止移動設備上的混亂。
4. Klientboost
這是響應Web設計的又一個極好的例子。他們的網(wǎng)站在四秒內(nèi)使用3G連接的速度非?？?。更重要的是，外觀和感覺的網(wǎng)站保持一致klientboost跨所有設備，并且已經(jīng)成功的把每個設備量身定制其用戶體驗
雖然桌面和筆記本電腦可以查看包括“Get Proposal”號召性用語按鈕和“We're hiring！”的完整菜單，但平板電腦和移動設備可以看到菜單的精簡版本。從平板電腦訪問其網(wǎng)站的用戶會看到一個漢堡菜單圖標和標注，而從手機訪問的用戶可以看到菜單圖標和號召性用語按鈕。
5. Magic Leap
Magic Leap設計了一個簡單移動網(wǎng)頁，并帶有視差滾動功能，為他們帶來了驚人的插圖。鑒于手機和平板電腦現(xiàn)在負責全球互聯(lián)網(wǎng)使用量的56.74%，他們的方法是有道理的。
Magic Leap的用戶體驗在所有設備中都是一致的，但有一個例外：引導用戶滾動的顯微鏡，是包括在臺式電腦和平板電腦，但不包括移動設備，用戶可以自然滾動。
即使有3G連接，他們的網(wǎng)站也會在7秒內(nèi)加載 - 遠低于22秒全球平均值。對于一個具有響應式動畫的網(wǎng)站來說，這是非常棒的體驗。
6. Shopify
Shopify的用戶體驗在所有設備中都是一致的。只有號召性用語按鈕和插圖在桌面到移動設備之間發(fā)生了變化。
在個人電腦和平板電腦上，號召性用語按鈕位于表單字段的右側(cè)。在移動設備上，它在下面。
同樣，插圖位于個人計算機和平板電腦上的副本右側(cè)，而它們位于移動設備上副本的下方。
像大多數(shù)網(wǎng)站一樣，Shopify的菜單也被移動設備上的漢堡圖標取代。
盡管使用圖像輪播來炫耀他們的客戶，但他們已經(jīng)設法將他們的頁面加載速度保持五秒以下。
Smashing Magazine,為所有設備提供量身定制的體驗。他們的網(wǎng)站在桌面上采用了兩列布局，全部菜單和組合標記，可將其轉(zhuǎn)換為平板電腦和移動設備上帶有字母標記的單列布局和濃縮菜單。
Smashing雜志的網(wǎng)站也是一個包容性設計的榜樣。顯示給桌面用戶的菜單同時具有標簽和圖標。不是使用普通的菜單圖標，而是選擇了帶有“菜單”一詞和搜索圖標的號召性用語按鈕。數(shù)字原生態(tài)從移動設備導航網(wǎng)站沒有問題，但其他幾代人不一定知道漢堡包圖標代表什么。
他們的網(wǎng)站加載在3G網(wǎng)絡設備上也只有短短2秒內(nèi)與3G網(wǎng)絡設備，GSMA說將手機連接到2020年的70%可以防止用戶因等待過久而離開。
8. Slack
Slack的品牌以簡單和人性而著名。毫無疑問,他們的網(wǎng)站遵循相同的指導方針。其靈活的網(wǎng)格很容易適應各種尺寸和形狀的視口。例如，盡管客戶標識在臺式機和筆記本電腦上的三列布局中顯示，但它們在移動設備上以單列布局顯示。
Slack的網(wǎng)站設計也被稱為易于使用。例如，他們的號召性用語按鈕覆蓋平板電腦和手機上的整個專欄，這有助于用戶避免點擊下面的“登錄”超鏈接。
9. Treehouse
Treehouse提供跨所有平臺的無縫體驗。他們的菜單在各種設備上逐漸變小 - 臺式機和筆記本電腦具有四項菜單，平板電腦具有兩項菜單和漢堡包圖標，手機提供單項菜單和圖標。
他們的表單域經(jīng)歷了相同的變化。它們在桌面和筆記本電腦上以兩列顯示，在平板電腦和手機上顯示為一列。
10. WillowTree
與其他公司一樣，WillowTree在桌面設備上包含完整菜單，在移動設備上包含精簡菜單。但與其他人不同的是，他們在頁面頂部引入了一個靜態(tài)導航欄，為使用手持設備的用戶帶來更愉快的體驗。他們還在其網(wǎng)站的移動版本上添加了基于文本的號召性用語，以增加便利性。
與其他響應式網(wǎng)站一樣，他們?yōu)檎故究蛻魳俗R而構(gòu)建的網(wǎng)格非常靈活。它從臺式電腦上的五列折疊到平板上的四列到手機上的兩列。
與Treehouse類似，折疊區(qū)域上方的區(qū)域從桌面上的兩列轉(zhuǎn)換為手機上的一列，并且號召性用語按鈕從副本旁邊轉(zhuǎn)移到下方。
11. WIRED
WIRED的網(wǎng)站具有動態(tài)布局，在桌面設備上具有多列和側(cè)欄，可在移動設備上轉(zhuǎn)換為單列。
從平板電腦切換到移動設備時，它們的菜單會縮小，僅包含其標識，菜單圖標和訂閱鏈接。為了保持簡單，搜索功能和按部分篩選WIRED新聞源的功能在移動設備上不可用。
WIRED最厲害的一個領域是使用靈活的圖像。他們的功能圖像可以跨平臺變化。在臺式機和筆記本電腦上，圖像在正方形和長方形之間變化，讓用戶可以充分利用自己的眼睛去探索。然而，在移動設備上，所有特征圖像都以16：9的比例裁剪。
