響應式網頁設計 RWD 和用戶體驗

響應式網頁設計 RWD 和用戶體驗

響應式網頁設計 RWD 有哪些不一樣的做法?看完這篇讓你更明白RWD
響應式網頁設計 RWD 和用戶體驗
響應式網頁設計 Rwd

文章索引

響應式網頁設計 RWD 有什麼作用

基於設計/內容而不是設備創建斷點可以為讀者(內容的消費者)提供更好的體驗。 重要的是要理解響應式網頁設計不是一項單獨的技術——它是一個用於描述網頁設計方法或一組最佳實踐的術語,用於創建可以響應用於查看的設備的佈局內容。 在 Marcotte 最初的探索中,這意味著靈活的網格和媒體查詢,然而在這篇文章撰寫後的近 10 年裡,響應式工作已成為默認設置。 現代 CSS 佈局方法本質上是響應式的,我們在 Web 平台中內置了新的東西,以使設計響應式網站更容易。

網頁 設計

延伸閱讀:行銷公司這樣選、幫你省下50%預算

隨著屏幕變小,重新排列元素以適應移動指南;例如,使用腳本或備用樣式表來增加空白或替換移動設備上的圖像導航源以獲得更好的可用性。 響應式網頁設計是一種網頁設計方法,旨在提供靈活的網頁佈局,以在各種設備上提供最佳查看效果。 RWD 允許在各種不同尺寸的設備上輕鬆閱讀和導航——從超大的桌面顯示器到手機屏幕——只需最少的調整大小和滾動。 RWD 不是為多種設備類型構建多個站點,而是允許設計人員創建一個站點來響應訪問它的每種類型的設備並提供適當的輸出。

響應式網頁設計 RWD1

響應式網頁設計的基石

響應式設計原則,包括流暢的佈局,有利於桌面和移動設備上的殘障用戶。 店面保留了 Aurora 原型商店的結構,並增加了對底層流體網格的視覺強調。 簡化、更開放的網格設計和擴大的功能用戶界面元素有助於在任何屏幕尺寸或設備類型上分離內容。 我喜歡使用基於網站內容而不是設備大小的斷點來設計我的響應式網站。 例如,當 4 列變得太窄而無法閱讀時,有時需要將 4 列更改為 2 列。 有時您需要在字體開始變得不可讀時調整字體大小,其寬度可能不是基於設備斷點的。

響應式網頁設計 RWD2

商店頁面的展示元素被簡化,以擴大跨多個平台的支持、一致性和性能。 這導致強大的店面在功能上可與設備功能和屏幕尺寸相媲美。 Cameron Adams 在 2004 年創建了一個仍然在線的演示。 到 2008 年,一些相關的術語如“靈活”、“液體”、“流體”和“彈性”被用於描述佈局。 CSS3 媒體查詢幾乎在 2008 年末/2009 年初的黃金時段準備就緒。

常見的響應模式

隨著數以千計的不同設備訪問互聯網,設計原生應用程序以在所有這些平台上工作並不總是可行的。 此外,許多用戶只是更喜歡使用瀏覽器而不是應用程序。 根據皮尤研究中心 2012 年 10 月發布的一項關於移動新聞未來的研究,大約 60% 的平板電腦和智能手機用戶更喜歡使用瀏覽器在其設備上訪問新聞。 精心設計的網站可以響應用戶的設備以及用戶的需求。 例如,漸進增強和漸進顯示等相關技術在移動設備上很常見,並且有利於殘疾用戶。

響應式網頁設計 RWD3

Cameron Adams 在 2004 年創建了一個演示。 到 2008 年,一些相關的術語,如“柔性”、“液體”、“流體”和“彈性”被用於描述佈局。 響應式網頁設計通過層疊樣式表工作,根據屏幕尺寸、方向、分辨率、顏色能力和用戶設備的其他特性,使用各種設置來提供不同的樣式屬性。 一些與響應式網頁設計相關的 CSS 屬性示例包括視口和媒體查詢。 3 列桌面版本更改為平板電腦上的 2 列設計和移動設備的單列設計。 由於元素需要能夠調整大小和隨機播放,因此在專注於內容的網站上實施響應式設計通常更容易,而不是功能。

簽名檔

相關文章