響應式網站設計是什么意思

  • 響應式網站設計是什么意思已關閉評論
  • A+
所屬分類:網站制作方案

響應式網站設計是什么意思響應式網站設計是什么

響應式網頁設計(RWD)是一種Web開發方法,可根據屏幕大小和用于查看網站的設備的方向,對網站外觀進行動態更改。RWD是針對客戶可用的眾多設備設計問題的一種方法,從小型手機到大型臺式機顯示器。

RWD使用所謂的斷點來確定站點布局的顯示方式:在斷點上方使用一個設計,在斷點下方應用另一個設計。斷點通?;跒g覽器的寬度。

相同的HTML供應到所有設備,使用CSS(決定網頁的布局)改變頁面的外觀。單個代碼庫可以為具有不同大小視口的用戶提供支持,而不是為各種規模的寬屏顯示器,臺式機,筆記本電腦,平板電腦和手機創建單獨的站點和相應的代碼庫。

在響應式設計中,頁面元素隨著視口的增大或縮小而重新洗牌。三列桌面設計可以重新布局為平板電腦的兩列和智能手機的一列。響應式設計依賴于基于比例的網格來重新排列內容和設計元素。

雖然響應式設計是一種無論設備如何都能提供對信息的平等訪問的方式,但也可以在較小的屏幕上隱藏某些項目 - 例如背景圖像,如上面的倫敦交通局例子,輔助內容或輔助導航。關于隱藏內容和功能或改變不同設備類型外觀的決定應基于有關您的用戶及其需求的知識。

與為不同設備類型開發單獨的站點相比,RWD具有潛在的優勢。與開發3個或4個不同的站點相比,使用單個代碼庫可以使開發更快,并且隨著時間的推移使維護更容易,因為一組代碼和內容需要更新而不是3或4. RWD也相對“未來” “非?!?,因為它可以隨時支持新的斷點。如果5英寸設備或15英寸設備在市場上起飛,代碼可以支持新設備。RWD不會將設計與特定設備聯系起來。

響應式網站設計是什么意思
響應式網站設計是什么意思
波士頓環球報以使用響應式設計而聞名。3列桌面版(頂部)更改為平板電腦上的2列設計(左下角)和單個移動列(右下角)。

由于元素需要能夠調整大小和隨機播放,因此在專注于內容而非功能的網站上實現響應式設計通常更容易。復雜的數據或交互可能難以適應易于在頁面周圍移動的模塊化部分,同時保持清晰度和功能。

創造可用的體驗

由于響應式設計依賴于頁面周圍的隨機元素,因此設計和開發需要緊密協作以確??缭O備的可用體驗。響應式設計通常會變成解決難題 - 如何重新組織較大頁面上的元素以適應更瘦,更長的頁面,反之亦然。但是,確保元素適合頁面是不夠的。要使響應式設計獲得成功,該設計還必須能夠在所有屏幕分辨率和尺寸下使用。

當元素在頁面中移動時,用戶體驗可能與站點的一個視圖完全不同。重要的是,設計和開發團隊必須協同工作,不僅要確定內容應該如何改組,還要看看這種轉變的最終結果是什么以及它如何影響用戶體驗。

許多團隊都在尋求流行的響應式設計框架,例如Bootstrap來幫助創建設計。這樣的框架可以幫助推動發展。但是,請仔細考慮該框架如何與您網站的內容和功能協同工作,而不是一般如何工作。

我們始終建議對設計進行可用性測試。對于響應式設計,我們建議跨平臺進行測試。設計一個可在桌面上使用的網站是非常棘手的。設計一個可用于許多重新布置或其元素配置的網站,跨越各種屏幕尺寸和方向甚至更為棘手??梢栽谧烂嫔嫌斡镜南嗤O計元素可能在智能手機上可怕地工作,反之亦然。

專注于內容

內容優先級是做好響應式設計的一個關鍵方面。很多更多的內容是可見而無需滾動一個大的桌面顯示器上不是一個小的智能手機屏幕上。如果用戶沒有立即在桌面顯示器上看到他們想要的內容,他們可以輕松瀏覽頁面以發現它。在智能手機上,用戶可能不得不無休止地滾動以發現感興趣的內容。智能內容優先排序可幫助用戶更有效地找到所需內容。

考慮性能

性能也可能是響應式設計的問題。無論代碼是否適用于該設計,RWD都會向所有設備提供相同的代碼。設計的變化發生在客戶端,這意味著每個設備 - 手機,平板電腦或計算機 - 都會收到所有設備的完整代碼并獲得所需的功能。

4英寸智能手機接收與24英寸臺式機顯示器相同的代碼。這可能會降低智能手機的性能,這可能依賴于較慢的spottier數據連接。(這就是為什么有些網站轉向自適應設計,托管網站的服務器會檢測發出請求的設備,并根據該設備提供不同批次的HTML代碼。)

要真正評估響應式設計的用戶體驗,請不要僅在舒適的辦公室和高速連接上測試響應式設計。使用智能手機進入野外 - 在城市的高層建筑之間,室內會議室或地下室,偏遠地區,連接點不穩定,在您自己的手機網絡連接的已知故障點 - 并查看您的網站在各種條件。許多響應式設計的目標是無論設備如何都能提供對信息的等效訪問。如果下載時間無法忍受,則智能手機用戶與桌面用戶的體驗不同。

結論

響應式設計是一種工具,而不是萬靈藥。雖然使用響應式設計在跨設備進行設計時有很多好處,但使用該技術并不能確??捎玫捏w驗(就像使用美食配方無法確保創造美味的餐點一樣。)團隊必須關注內容,設計,和性能,以支持所有設備上的用戶。