響應式Web設計是大勢所趨還是時代的產物
原創在你身上是否發生過如此一件事,就是在你休息的時間用瀏覽器最大化的看一些文章、玩一些網頁游戲正入迷的時候,時間一點點的過去了,馬上到了下午工作的時間了,卻發現還差一點就看完,于是乎,你把瀏覽器縮小了一些尺寸,瞬間,網頁進行的重組,最后你發現你想看的內容就這樣消失了,或是以一種難以閱讀的方式呈現在你面前。這時你會希望,這要是響應式Web設計…該多好。
現今,無論是移動設備還是平板電腦亦或是PC屏幕,都有著各異的屏幕大小,若是針對每個屏幕大小單獨設計一個解決方案會顯得如此的繁瑣和笨拙。響應式Web設計的概念就是可以讓網頁根據用戶的使用環境進行自動調整,并有效的解決掉了用戶體驗度這一問題。
如此一說,響應式Web究竟是現今的大勢所趨,還是因為各種設備的產生而誕生出的一種時代產物呢?下面,我們先了解一下響應式設計。
傳統網頁如何變成響應式
響應式Web設計已經成為目前主流的設計模式,那么對于那些以前固定好寬度和像素的頁面來說,很多人都在想應該如何讓它實現響應式?是否要進行網頁的重構?那么傳統網頁如何變成響應式設計呢?51CTO的記者從采訪中了解到,在傳統的web設計中,就提倡在CSS文件里將頁面的布局、顏色、字體設計等分開,如果在當初進行設計時遵守了這一原則,那么在響應式web設計中,只需要更改頁面布局這一部分的CSS內容即可。對于固定好寬度和像素的頁面,也只需要按比例換算成百分比模式便可。
響應式Web設計的基本原理就是寬度使用百分比制以及利用CSS3 Media Queries語句事先設定各種分辨率下的頁面布局。相當于對同一個網頁,設計師要進行好幾份設計(例如寬屏下的三欄設計、普通屏幕下的兩欄設計以及移動設備上的單欄設計等)。但現在似乎還沒有一個比較統一的CSS框架或設計模式來減少CSS設計師的工作量。
對于是否需要進行頁面重構,這就需要看網頁在“裸奔”情況下是否可以有序的展示,如果在CSS無效的情況下網頁無法有序地展示內容,那么是必須重構的,其實這跟是否進行web響應式設計無關,是對頁面結構的最基本要求。
一般而言,出于展示的原因,移動設備可能不太適合諸如內嵌網頁地圖等元素,這就需要在CSS文件里面做相應的屏蔽設置。另外,若從用戶的手機流量方面考慮的話,大頁面最好還是進行重構,以減小用戶向服務器請求的數據量。因為過大的數據請求一方面會增加用戶在手機流量上的開銷,更重要的一方面會降低頁面的加載速度,導致移動設備的用戶體驗變差。
淺談響應式Web設計的用戶體驗
一個網站若是沒有一個良好的用戶體驗度,那么就算里面的內容在誘人,也無心閱讀下去。響應式Web設計雖然可以合理的呈現給我們想要閱讀的內容,但并不是將整個網頁完美的縮放給我們,對于那些沒有呈現出來的內容,我們是否也需要加載出來?這樣對于移動設備來說是否也是一種弊端呢?
51CTO的記者通過采訪中了解到鑒于移動設備屏幕大小的限制,在其上進行顯示的內容一般是經過精心篩選的,過多的內容會使頁面看起來雜亂不堪,用戶也很難找到自己想要的東西,比較好的做法是留下少部分最重要的內容直接進行展示,其余的部分可以先隱藏起來,用戶點擊時再展開,這樣信息都保留在了頁面上,但是不會一次性的全都推到用戶面前,用戶可以按需索取想要了解的內容。對于移動設備流量上的考慮,最好還是設計成ajax模式,而不是預先加載過多的頁面數據,這樣可以節省很大一部分的流量。
支持響應式Web設計的條件
響應式設計之所以會產生是由于新出現的各種設備(如智能手機、Pad、Tablet、寬屏電視、普通電腦顯示器等)的瀏覽器(或瀏覽器模塊,如android系統的webView等)支持對CSS3 Media Queries的解析。
響應式Web設計或許還是無法普及到傳統的非智能手機,但是對于采用主流移動OS的手機都是可以支持的。看到這里我們就會想一個問題,未來是否會出現一種新的設備,是響應式Web設計無法實現的?其實對于將來的新設備,只要其中的瀏覽器支持CSS3特性,那么它依然可以支持響應式Web設計。
響應式Web設計究竟是大勢所趨還只是時代的產物?
響應式Web設計是在展示設備日趨多樣化這一背景下產生的,可以預見,只要設備生產廠商一日不統一,響應式Web設計就會一直發展以滿足不同規格設備的頁面展示,如此看來確實給我們呈現出一種時代產物的感覺。
但對于未來幾年內不斷發展的移動設備、電腦設備、平板設備,若是沒有響應式Web設計誰知道我們誰會知道究竟還要開發多少個不同的頁面。并且說道大勢所趨,我們就不得不想到和響應式Web設計比較緊密且十分火熱的HTML 5 了,HTML5可以用來做一些很酷的Web應用。而響應式web設計利用CSS3的特性可以彈性布局頁面上的元素,對HTML5開發的Web應用而言是一大助力。雖然和HTML 5 一樣,響應式Web設計還沒有得到很好的普及,但兩者皆已成為一種趨勢,就讓我們拭目以待的看他們會為我們帶來什么樣的驚喜吧。
【編輯推薦】