隨著時間的推移,響應式設計已經非常成熟。 一開始,它只是提供適應不同螢幕的東西 – 即使它不是那麼好。但現代的響應式設計釋放了大量的創造力。許多設計師沒有將小螢幕視為負擔,而是尋找新的方法來迎接創造具有美感和功能的東西的挑戰。
有了這個既定的歷史,在結合之前對上海自適應 WordPress 外貿獨立站網站建設的優缺點分析,我們認為看一些真正處於響應式設計前沿的網站會很有趣。
在這裡,他們是完整的響應檢視和他們帶到桌面的一些想法(或者我應該說,平板電腦?):
1. 華盛頓郵報
響應式設計面臨的巨大挑戰之一就是佔用內容豐富的網站並使其在較小的螢幕上執行。 “華盛頓郵報” 在充分利用螢幕房地產方面做得非常出色。
雖然桌面版本利用了多列網格,但平板電腦(人像)和手機版本可以很好地應對壓縮內容的挑戰。小螢幕上的樣式簡單滑出式標題導航因其易用性而受到讚揚,這種體驗主要針對移動裝置進行。
2.99U
99U 是 Adobe 的創意專業人士線上雜誌。喜歡這個網站的一個方面是它在任何螢幕尺寸上的佈局都非常簡單。
使用淺色背景和大型黑色排版使得從桌面到移動裝置都易於閱讀。 一個獨特的功能是,在移動裝置上,網站的頁尾實際上隱藏在漢堡選單中。這個小技巧可以節省一些空間並保留它以保持對內容的關注。
3.VOX
Vox 是一個新聞網站,採用移動導航的不同路線。
標準文字導航欄不再是無處不在的漢堡選單,而是隨著螢幕變小而縮小。但是,不是試圖在一個小空間中擠壓幾個專案,而是逐漸從選單中刪除類別,並將其隱藏在名為 “更多” 的下拉選單中。
4.Etsy
也許沒有人比 Etsy 更好地為他們的多使用者設計。狡猾的市場也做出了正確的響應。移動亮點中的標題是以極其清晰簡潔的方式為您提供所有基礎知識(徽標,銷售連結,登入和購物車圖示)。
他們的分類商店部分從多列照片卡轉換為乾淨的垂直圖示選單。這是工作中漸進式增強的一個很好的例子。
5. 肯德基
肯德基是一個很好的雞肉供應商,也在他們的網站上做了一些出色的工作。
多使用者體驗在不同裝置和螢幕尺寸之間非常一致。在所有視口上同時使用漢堡選單和水平滾動也意味著多使用者將確切知道該做什麼,無論他們用什麼來瀏覽網站。
6. 本田
作為眾多產品的製造商,本田擁有多個產品線和多使用者可能感興趣的品牌。他們在每個交替橫幅中使用顏色使得找到您想要的東西變得非常簡單(在平板電腦和手機上看起來特別酷)。
同樣,這是一個在不同視口上帶來非常相似體驗的網站。
7.The National
獨立搖滾樂國家大都會充分利用螢幕房地產。 實際上,他們的網格式新聞和資訊佈局橫跨高畫質螢幕的整個寬度。
這種型別的佈局非常適合在頁面寬度上全力以赴。較小的螢幕被視為類似的氛圍,新聞專案並排列出並且仍然足夠容易閱讀。該網站提醒您,響應式設計還包括利用更高的螢幕解析度,而不僅僅是確保所有內容都適合較小的解析度。
最後,響應革命
看看我們上面提到的網站,它們都不是特別具有革命性的。 但每個人都有自己有趣的技術和理念,以確定響應式設計應該如何工作(更不用說要達到目標時需要克服的許多挑戰)。 它們可能不是革命性的,但它們肯定是革命的一部分。