Categories
程式開發

2020 年響應式 Web 設計備忘清單


如今,智能手機和移動設備依舊是人們訪問互聯網時使用最廣泛的平台,因而企業會特別注意,確保用戶在使用這些設備訪問自家網站時能獲得無縫的體驗。但並非所有網站都適合移動設備使用,這意味著如果在移動設備上訪問這些網站,它們的大多數功能還是無法正常工作。這就會導致這樣的狀況:訪問者無法充分體驗到網站上的一些設計和功能,這將導致用戶參與度降低和銷售額的下降。

你知道嗎,全世界超過 50%的搜索查詢是來自移動設備的。基於這種趨勢,谷歌在 2018 年引入了“移動網頁速度更新”指標;需要注意的是,網站加載速度現在被視為移動搜索結果的主要排名參考因素之一。因此,如果你仍然遲遲不肯將網站轉換為與移動設備兼容的版本(這也稱為自適應網頁設計),則很可能會導致業務不斷流失。

我們先來研究一下響應式網頁設計通常意味著哪些內容,然後再來討論這份參考清單。

什麼是響應式網頁設計?為什麼需要它?

我們使用的智能設備大小不同,形狀各異。智能設備的尺寸可能像手錶這樣小,也可能像電視那樣大。世界各地的人們都在使用各種類型的智能設備來訪問我們的頁面。因此,無論用戶使用何種智能設備訪問企業的網站,企業都應確保自家網站向用戶顯示正確的內容,且易於使用。

採用響應式網頁設計後,企業就可以確保自己的網站在所有設備上都能顯示正常,並保持完整的功能。響應式網站可以輕鬆地適應所有智能設備的規格,並且網頁設計在任何設備上都具有同樣的吸引力和功能屬性。

設計響應式網站的綜合參考清單

如果你在過去幾年中重新設計了自己的網站,或者開發了一個全新的網站,那麼你可能已經在使用響應式網站設計了。響應式網頁設計已成為了一種標準,如今大多數網頁設計公司都在創建響應式網站。但你的職責不僅是要確保網站適合移動設備,還可能需要經常測試你的網站,使其保持最新狀態,同時還要檢查它的響應能力。

如果的網站是 WordPress 類型的,那麼在測試過程中可以參考下面這個清單:

在多種瀏覽器和設備上測試你的網站

從 Google Analytics 獲取移動和 Web 流量數據。這樣你就能了解訪問者使用了哪些設備和移動瀏覽器來訪問你的網站。

定期更新設備 – 瀏覽器組合

使用你從 Google Analytics 收集的數據將舊的設備 – 瀏覽器組合替換為新的、優化更好的組合。

檢查重要內容是否在所有設備上可見

你必須確保自己認為最有影響力和最關鍵的內容在所有平台上正確可見。可以讓不太重要的內容在小型移動設備上”移出視線外”。

確保網站根據內容的重要性來安排內容順序

你必須確定內容的展示順序,以使內容的最重要部分在小型設備上優先顯示出來,而相對不那麼重要的部分則排在後面。

檢查網站加載速度

請注意你的網站在不同設備、瀏覽器和互聯網接入帶寬上加載所需的時間。你可能需要壓縮體積較大的資源,以便用戶可以在較小的設備上正確查看它們。你可以嘗試使用緩存來提升網站性能。

對你的網站進行徹底的顯示測試

圖像、文本和控件之間應該完美對齊。確保內容不會溢出屏幕邊緣。理想情況下,內容應在所有設備上都能向下滾動,並展示出專業的效果。

評估內容版式是否適合所有設備

頁面字體應與現有的所有平台保持兼容。換句話說,內容應在所有設備上保持可讀性。此外,樣式、字體和顏色應在不同設備上保持一致。

重新評估設備字體

在評估字體在多種操作系統和設備上的適用性之後,你需要選出合適的字體。你應該在網站的樣式表中定義設備的默認字體。

檢查你的網站是否能流暢導航

導航元素不得與屏幕邊緣重疊。使用漢堡菜單圖標來提供隱藏的導航元素。訪問者應該能使用滑動動作來瀏覽網站。

檢查網站的彈出窗口

你需要檢查瀏覽器彈出窗口和嵌入式彈出窗口是否能在不同平台上都正確響應。

檢查各個交互層級

用戶會使用多種輸入方式(例如鼠標、鍵盤、手寫筆甚至指尖)與設備交互。你必須檢查你的控件是否能對手指的點擊做出響應。

使你的網站針對小型移動設備優化

在重新設計網站的過程中,必須首先考慮針對小型移動設備的優化工作,然後再考慮兼容較大屏幕的設計選項。

你可能需要注意的是,許多因素(例如瀏覽器的渲染引擎和設備功能,包括 GPU、顯示分辨率和圖形 API 等)都會在很大程度上影響最終用戶訪問你的網站的體驗。正因如此,你可能需要在移動設備上測試網站,這樣就能提前找到不同平台上的不一致狀況。

如何測試設計資產的一致性

你應該注意,自己的品牌設計是否在所有媒體平台和內容格式中都能保持一致性。例如,當我們聽到“可口可樂”、“Apple”、“百事可樂”或“耐克”這些品牌名稱時,我們的腦海中就能立刻浮現出它們的徽標。這就是強大、令人難忘且保持一致的設計所產生的力量。你的設計資產應該在所有平台上看起來都一樣,即使在縮放或調整大小之後也是如此。你應確保圖標、顏色和版式在不同平台上保持一致。測試時要小心如下元素:

字體:某些字體在放大或縮小時會顯得笨拙或不均勻,並且往往會在不同瀏覽器之間,以及在不同設備之間產生變化。例如,macOS 系統能夠以一致的方式縮放字重,而 Windows 就無法做到這一點。值得注意的是,與 Chrome 上顯示的效果相比,字體在 Safari 上的外觀可能會有些“暗淡”。因此在使用字體之前,必須測試它們並根據上述參數進行評估。

媒體文件:你需要確保圖像的多個版本與不同的瀏覽器、設備分辨率和視口保持兼容。使用 Chrome 開發工具測試圖像是否會對網站性能或 SEO 產生負面影響。還要在慢速網絡條件下做檢查。檢查顏色是否能顯示一致。

代碼:雖然你可以使用 Bootstrap 等框架來構建網站,但必須承認的是,總會有一些功能無法正確對齊,或者可能會在調整大小時出錯。這可能是由於瀏覽器供應商的錯誤,他們沒有應用一種單一的機制來生成網頁。

下面是一份小清單,供你在代碼測試過程中參考:

  • 檢查某些瀏覽器是否支持特定的 JS、CSS 或 HTML 屬性;
  • 你可以考慮使用 ESLint 和 CSSLint 編寫可兼容主要瀏覽器的 CSS 和 JavaScript;
  • 你可以考慮使用 Normalize.css 來記下基礎規則,收錄那些在不同瀏覽器中顯示效果都不一樣的樣式。整理完代碼後,你需要手動找出顯示差異。

你應該特別注意以下幾點:

佈局:檢查整體佈局是否可以適當地匹配不同大小的視口。

間距:元素不應相互重疊。

對齊:確保以適當的方式對齊動態元素。

高度:元素的高度通常在響應式設計中不受影響;但是,你可能仍需要定義元素相對於移動設備上視口的高度。

寬度:確保每個元素的寬度與視口保持兼容。

按條件渲染:檢查是否能夠根據視口大小調整元素。確保元素能輕鬆出現、隱藏或調整大小。

按條件滾動:確保註冊按鈕和輸入字段不受移動屏幕上的鍵盤遮擋。

文本的可讀性:你的字體應該能正確縮放,並且它們應該具有適當的大小和足夠的清晰度,以便從多個視口輕鬆查看。還要消除像素渲染問題。

水平滾動:檢查長鏈接或句子。它們可能會在小型屏幕上引入非必要的水平滾動。在各種視口和瀏覽器上測試文本的可讀性。

響應式圖像:圖像應適應分配給它們的空間。使用可展開的圖像。優化你的 JS 和 CSS 圖像文件;根據具體需求最小化或壓縮它們。

圖標定位:如果你有一些圖標 – 字體組合,則必須確保將其正確放置在瀏覽器和視口上。

用於測試響應式網頁設計有效性的工具

有很多工具可以讓你測試網站的響應能力,我們列出了使用最廣泛的三種:

Mobile-Friendly:這是谷歌的工具,不僅支持搜索引擎優化,還可以分析網站的響應速度。你所要做的就是輸入頁面 URL,然後就能了解頁面在移動平台上是否兼容。就是這麼簡單!

Am I Responsive:此工具可讓你知道你的網站在常見設備上的顯示方式。只需在平台上輸入你網站的 URL,就會看到網站在筆記本電腦、平板電腦、手機和台式機上的顯示效果。

下載地址:http://ami.responsivedesign.is/

Responsive Design Checker:如果你想在多種設備上測試網站的響應能力,這個工具非常有用。該工具與 Am I Responsive 工具有一定程度的相似性,但是前者提供了自定義屏幕分辨率選項。該工具還允許你測試頁面在 Google Pixel 手機以及 Amazon Kindle 上的顯示效果。

下載地址:http://responsivedesignchecker.com/

最佳響應式網頁設計實例

網站響應能力是確保穩定的網站流量和增加銷售可能性的關鍵所在。我們列出了響應式 Web 設計的三個最佳示例,這些示例可幫助你找到靈感,並採用最適合你業務的設計。

DropBox

號召用語(call-to-action)和 Dropbox hero 區域在不同的屏幕尺寸下調整得很好。 Hero 區域下方有一個箭頭,其僅會在大屏幕上顯示。如果你正在較小的設備上查看 Dropbox,就不會看到這個箭頭了。這是因為用戶會自然地向下滾動來移至內容的下一部分。

Treehouse

Treehouse 的網站具有高度響應的導航菜單設計。屏幕尺寸不一樣,導航菜單項也會相應地更改其尺寸。對於較小的屏幕,導航菜單項會隱藏在標題的漢堡圖標按鈕後面。

Dribble

該網站的設計能很好地適應用戶的屏幕尺寸。屏幕尺寸越小,設計網格中的列數也越少,以確保與屏幕大小良好兼容。

所以你決定了嗎?

全世界現有超過 85 億的活躍移動設備,這意味著你的網站必須具有適合移動設備的設計,這樣才能不受阻礙地獲取流量。根據 ComScore 的數據,大約 80%的互聯網用戶在使用智能手機;而根據 SocPub 的數據,有 57%的用戶表示他們不會選擇那些網站對移動設備不友好的企業。

你應該注意的是,響應式 Web 設計是一個漸進的過程,需要根據最新的技術發展趨勢和消費者行為的變化來定期更新。你需要在新的設備、瀏覽器和操作系統上測試網站的響應能力。如果你要設計一個全新的網站,則可以考慮參考響應式 WordPress 主題。

那麼,你最近是否測試了網站的響應能力?你執行了哪些流程?歡迎大家分享經驗。

延伸閱讀

https://hackernoon.com/responsive-web-design-checklist-for-2020-k3r3zgm