響應式網頁設計如何改善所有訪問者的用戶體驗
花點時間考慮一下您可以用來查看網站的所有設備。 如果你像大多數人一樣,這份名單在過去幾年中一直在增長。 它可能包括桌面和/或筆記本電腦等傳統設備以及過去幾年突出顯示的設備,包括智能手機,平板電腦,可穿戴設備,遊戲系統等。 您甚至可以在家中安裝電器,或者在汽車中安裝屏幕,以便連接到互聯網! 最重要的是,設備格局一直在變得越來越大,越來越多樣化,這意味著為了在今天(以及未來)在網絡上茁壯成長,網站必須採用響應式方法和CSS媒體查詢來構建,並且必須考慮如何人們可能會將這些不同的設備組合成一個網絡瀏覽體驗。
輸入多設備用戶
我們看到的一個事實是,如果人們有多種方式訪問Web,他們將使用它們。 人們不僅使用大量不同的設備訪問網站內容,而且同一個人使用這些不同的設備訪問同一個網站。 這就是“多設備”用戶的概念來自何處。
典型的多設備場景
考慮許多人每天都會遇到的常見網絡互動 - 瀏覽房地產網站以尋找新家。 這種體驗可以在台式計算機上開始,在台式計算機上有人輸入他們正在尋找的標準,並查看與該查詢匹配的不同的房產列表。 在這一天,這個人可能會在他們的移動設備上再次查看特定屬性,或者他們可能會收到他們的電子郵件(他們將檢查他們的移動設備)的提醒,以尋找符合其搜索參數的新列表。 他們甚至可以將這些警報提供給可穿戴設備,如智能手錶,並在該小屏幕上查看基本信息。
這一過程可能會持續一整天,並可能在其他台式計算機上訪問該網站,也可能從他們的辦公室工作。 那天晚上,他們可能會使用平板電腦設備向他們的家人展示任何特別感興趣的物品,以獲得他們對這些物品的反饋。
在這種情況下,我們的網站客戶可能已經使用了四台或五台不同的設備,每台設備的屏幕尺寸都非常不同,可以訪問相同的網站並查看相同的內容。 這是一個多設備用戶,如果他們訪問的網站在所有這些不同的屏幕上都無法容納他們,他們只會離開並找到一個可以訪問的網站。
其他方案
搜索房地產只是用戶在網站整體體驗期間從設備跳到設備的唯一例子。 其他例子包括:
- 搜索要購買的汽車
- 計劃度假
- 閱讀新聞文章
- 研究家裝改進的想法
- 尋找當地的承包商/服務
- 策劃婚禮或其他重大活動
- 在運動隊或體育賽事之後
在每種情況下,網絡體驗可能會延長到超過一個會話,這意味著用戶有可能會在任何給定時間使用不同的設備,並根據哪個設備方便。
遵循的最佳實踐
如果今天的網站需要迎合越來越多的使用觀眾的設備,那麼應該遵循一些基本原則和最佳實踐 ,以確保這些網站準備好妥善處理這些訪問者,並且他們在搜索引擎中排名很好 。
- 響應式網站 -可針對不同屏幕尺寸調整和改變的響應式佈局 ,對於支持當今可用的各種網絡連接設備至關重要。
- 所有內容都應該可用 - 如果某人訪問某個設備上的某些內容或功能時,他們希望這些內容或功能在其他設備上返回時也可以使用。 應該以適合每個設備的方式呈現內容,但是對於某些設備不應該“隱藏”或“關閉”內容。
- 可讀性是關鍵 - 無論使用什麼類型的設備或使用什麼尺寸的屏幕訪問網站,閱讀該網站的便捷性都很重要。 這意味著排版是重點關注的重要設計元素。 如果有人很難閱讀網站的內容,他們可能會完全離開網站。
- 多樣性中的一致性 - 雖然每種不同屏幕尺寸的佈局會有所不同,但應該從一個設備到另一個設備保持一致。 應該連接整體體驗,以便用戶不必每次在新屏幕上訪問該網站時重新學習該網站。
- 優先考慮性能 - 網站應該能夠快速加載並在所有設備上都能很好地運行,包括下載速度不盡如人意的移動設備。 總體網站性能應該是網站設計和開發各個方面的優先事項 - 畢竟,沒有人會說網站加載速度太快或工作得太好 !
17/17/17由Jeremy Girard編輯