你應該避開的 3 個響應式 Web 設計的陷阱
設計師們無法迴避移動裝置的大勢所趨,當然在網站設計上有大量新的概念來迎合移動裝置。但是單獨的網站,無法在移動裝置層出不窮的大潮中站穩腳跟。無論是在個人電腦、筆記本、智慧手機、平板電腦、大螢幕手機、智慧電視、上網本以及其它有前景的裝置,都需引人入勝的設計。
響應式佈局是這種情況下唯一理智的方式。
儘管不是所有人確信響應式Web設計是未來的方向,但是響應式Web設計已經獲得全世界Web設計師的廣泛支援。 而我們許多人還是通過簡單使用響應式Web設計來解決不同大小螢幕的佈局問題——這解決了普通設計量使用者體驗差的問題。在我頭幾個響應式Web設計專案中,按我的工作方式已經犯了很多錯誤。 這裡有我或其他響應式網頁設計師曾經犯的3個錯誤。
陷阱 1: 網站載入時間過長
構建響應式網站的缺點之一是你被迫將太多的資源壓縮在一個頁面中。你需要這些資源以便在不同裝置上展示你的網站。大部分響應式網站在頁面載入之前首先載入這些資源。毫無疑問,這個過程需要耗費大量時間。
針對大部分使用筆記本、PC訪問你網站的使用者來說,似乎沒什麼問題。但如果在智慧手機載入你的網站需要5至7秒之久,那麼你將失去大量使用者。智慧手機使用者不喜歡等,即便是1秒鐘——短短的等待將產生致命的後果。所以,如何處理該問題呢?參照最佳實踐,刪減贅餘,使用conditional loading這樣的先進技術。
陷阱 2: 為小螢幕裝置刪減內容
為智慧手機提供更少的內容,已被廣泛採納。故意為移動使用者提供低質量的使用者體驗,無疑是在折損你網站的利益。實際上,使用者總是在不停地切換裝置來完成各種任務。這就意味著,如果使用者在他們的智慧手機上找不到某一特定內容,那你也就失去了銷售機會。
更好的解決方案是以一種緊湊的、易於導航的格式顯示所有資訊。在設計中,可能需要花費更多努力,但這是值得去做的。請記住,即便你用CSS隱藏了特定資訊,它仍會被下載的。所以要為移動使用者提供完整的Web體驗,不要丟棄任何東西。
陷阱 3: 忽視各裝置間的相通之處
響應式Web設計不僅僅針對PC和智慧手機。在進行設計時,還要考慮到其他的眾多裝置。使用者如何與平板電腦、網際網路電視、智慧手機進行互動,都需要考慮在內。這並不是說你要為所有的裝置建立一個本地化的UI體驗,但你可以根據各裝置的環境為它們建立一個響應式導航,再分別建立出使用者易於理解的設計。
總結
雖然響應式Web設計仍處於發展初期,但已經有很多指導和最佳實踐,當你建立可跨裝置工作的設計時可以採用。對於那些希望為使用不同裝置的使用者提供頂尖Web體驗的設計師來說,則需要更多的思考與努力。
相關文章
- 響應式Web設計Web
- Spring響應式Reactive程式設計的10個陷阱 -Jeroen RosenbergSpringReact程式設計ROS
- 響應式 Web 設計技巧Web
- 18個最好的響應式Web設計工具和庫Web
- 5個常見響應式設計陷阱及解決方案
- 符號營銷的規劃設計,那些應該被規避的營銷陷阱符號
- 你應該成為 WEB 程式設計師的5個理由Web程式設計師
- 自適應網頁設計/響應式Web設計網頁Web
- 最佳的 14 個免費的響應式 Web 設計測試工具Web
- 學習之響應式Web設計---一個例項Web
- 14個支援響應式設計的前端框架前端框架
- 十大響應式Web設計框架Web框架
- 響應式Web設計實戰總結Web
- 有關響應式Web設計的7點啟發Web
- Web前端程式設計師應該遵循的15個開發原則!Web前端程式設計師
- 通過CSS3 Media Query實現響應式Web設計CSSS3Web
- 14個支援響應式設計的流行前端開發框架前端框架
- 你應該知道的未來web設計7大趨勢Web
- 響應式程式設計與響應式系統程式設計
- 設計出色響應式網站的十個技巧網站
- 響應式設計的5個CSS實用技巧CSS
- Responsive Web Design 響應式網頁設計Web網頁
- 談響應式web設計程式碼實現Web
- 響應式設計?響應式設計的基本原理是什麼?如何做?
- 響應式網頁中的高度設計,你認真的嗎?網頁
- 響應式設計的6個免費測試工具
- SpringBoot中的響應式web應用Spring BootWeb
- <HTML5和CSS3響應式WEB設計指南>譯者序HTMLCSSS3Web
- [譯] 響應式 Web 應用(四)Web
- [譯] 響應式 Web 應用(五)Web
- [譯] 響應式 Web 應用(三)Web
- [譯] 響應式 Web 應用(二)Web
- [譯] 響應式 Web 應用(一)Web
- 推薦15款響應式Web設計測試工具Web
- 網頁設計中的響應式佈局設計網頁
- 你應該知道的 5 種 TypeScript設計模式TypeScript設計模式
- 新手Web設計師應該避免的 6 宗罪Web
- 專業Web設計師應該避免的6個關鍵錯誤Web