關于響應式設計的常見誤區(qū)
我每天瀏覽互聯(lián)網(wǎng),在多個設備。我用我的MacBook Pro、iMac,PC、iPad、iPhone和甚至是我的電視。所以它真的困擾我,當我看到網(wǎng)站,不適合大屏幕分辨率優(yōu)化,或者花兩分鐘我的移動設備的負載。
我們都接受了響應式設計的概念。很少有人反對它。事實上,唯一有說服力的報告,最近聽說是客戶不愿意支付額外的時間。但與任何新的實踐,神話已經(jīng)長大,對位它。
讓我們看看能不能破產(chǎn)的幾個誤區(qū)…
響應式設計是所有關于移動
對移動網(wǎng)絡的爆炸,是響應設計背后的驅動力,但當我們認為響應式設計需要考慮的不僅僅是手機。隨著視網(wǎng)膜顯示器和視頻游戲瀏覽器的推出,互聯(lián)網(wǎng)用戶正在觀看大屏幕分辨率和不同情景的網(wǎng)站。
要考慮到不同的用戶環(huán)境,設計和開發(fā)網(wǎng)站響應。你需要考慮什么設備用戶使用:是在移動設備上或在家里看電視的用戶?你需要考慮用戶所在的地方:是在荒野里的雜貨店或露營在線用戶?有了好的內容意味著什么,如果你的網(wǎng)站需要十分鐘的負載而你的用戶是坐在沙灘上有一個瑪格麗塔。
內容就是一切但環(huán)境到處都是,這是你完全無法控制。這就是為什么,實際上,你的內容應擴大到任何分辨率,大的或小的。我們有一套工具,將使我們能夠操縱布局,優(yōu)化文本大小和提高性能的任何語境,記得使用它們。
記得上下文轉換所有的時間,這就是為什么它是平衡的視覺布局很重要,用戶的需求,當接近一個響應式設計和性能。這不只是關于移動。
響應式設計并不適合每一個使用案例
我曾經(jīng)認為,響應的網(wǎng)頁設計并不適合每一個項目,這取決于使用情況。嗯,我最近修改了我的觀點,我堅信,如果我們要以用戶為中心的設計,我們需要考慮每個項目的開發(fā)商響應的設計方法。
固定寬度的網(wǎng)站可以在較大和較小的屏幕分辨率的限制。底線是,我們的網(wǎng)站應該是每個人無論什么設備或屏幕分辨率是使用方便,不受限制。
響應式設計是關于設備的斷點
我注意到一種趨勢,新興的工業(yè)設計師和開發(fā)商正在建設網(wǎng)站響應規(guī)模一定的設備分辨率,我有罪,這也。三種最常見的設備當然是臺式電腦/筆記本電腦、iPad和iPhone手機(或其他移動設備)。作為設計師,我們需要意識到響應式設計是關于設計斷點和制作內容的可讀性與向所有人開放,不只是特定設備的用戶。
也就是說,如果你是一個軟件程序的網(wǎng)站設計,它是有某種框架與斷點工作重要。我建議創(chuàng)建你自己的。根據(jù)內容的優(yōu)化你的布局。找出斷點工作最好的最好方式是素描的線框圖首先得到一個想法,然后你就可以開始制定你的軟件選擇像素。確保你的工作時,相同的網(wǎng)格線框圖設計。
如果你像我一樣,那么你的代碼,你的線框圖和創(chuàng)造一個生活原型。這給了我很大的幫助,因為我可以與我的響應工作流創(chuàng)建流體模型和添加斷點的設計作為設計打破滿像素PS圖象處理軟件。
響應式設計對字體
一個我在很多網(wǎng)站響應發(fā)現(xiàn)最大的問題就是字體拋出當設計師和開發(fā)者選擇使用設備在設計斷點斷點的狼。在我看來,選擇設備在設計顯示了一個完全無視你發(fā)布的內容和用戶消費內容。內容應保持其可讀性,直到它已調整保持可讀性。內容永遠是王的易用性和內容的可讀性應該是最優(yōu)先的。
一個我喜歡處理保持內容的可讀性響應的設計是使用相對字體大小的單位如EMS、填充方式、空間布局。響應式設計是所有關于均衡布局,在我看來,EMS是一個完美的結合。
EMS是擴展到父元素的字體大小的相對單位,他們可以幫你節(jié)省很多時間和麻煩,它們有助于保持你的整個布局結構。這是否意味著你問什么?這意味著,作為基礎字體大小的增加或減少,布局調整均勻無回避什么了。
下面是一個例子,比方說我們發(fā)現(xiàn)了兩個設計的斷點,一個非常大的桌面顯示器在超分辨率和一個小型的平板。我們還說我們根據(jù)字體大小16px等于1.0em我們撞基礎字體大小到22px當網(wǎng)站被認為是在分辨率為3840×2160(高分辨率)和我們降低基礎字體大小為14px在分辨率800 x 600(小筆記本/平板)。我們已經(jīng)大大改變的類型和在兩個指定斷點我們網(wǎng)站布局的大小,一大一小。在一個22px基礎字體大小大的決議1.4em標題意味著1.4em等于30.8px和在較小的基礎字體大小的部分,1.4em等于19.6px。盡管我們的字體大小有顯著更大的3840×2160我們不必擔心布局打破了因為它也調整。比方說我們有一個50em包含元素的寬度,分辨率為800 x 600,將700px但在3840 x 2160的分辨率,它將創(chuàng)建。我們的填充和邊緣將調整為好。在更大的分辨率有字體大小和布局設置在EMS允許我們設計大規(guī)模的比例使我們的內容更容易和更具可讀性。
響應式設計意味著隱藏的內容
響應式設計的目的是讓你的內容對所有人開放,甚至是殘疾的,在所有的屏幕分辨率和設備。隱藏的內容從來就不是一個好主意,機會是,如果你要隱藏它,你不需要這樣的開始。隱藏的內容使其無法讀取到屏幕閱讀器和你現(xiàn)在使你的內容與視覺或認知障礙的訪問。記住,內容應在所有設備是通用的,不要懲罰你的用戶通過限制他們可以在一個單獨的設備視圖。
也就是說,我還發(fā)現(xiàn)一些使用情況顯示:無;就派上用場了。幾乎所有的用例處理一些導航,我使用顯示:無;在導航元素的變化形式不同的設備。這是不是一個好辦法來限制或隱藏在不同設備上的內容,因為你最有可能的基礎上,一些用戶,在一個假設的決定,將有一個非常壞的經(jīng)驗。
響應式設計犧牲性能
有一些網(wǎng)站,我最近看的,表明缺乏同情心,對低帶寬的用戶。這些網(wǎng)站多數(shù)有相同的東西,大量的圖片和大量的JavaScript庫,很多這些網(wǎng)站可能已被優(yōu)化,如果他們設計了一個移動的方法。
因為還有很多關于響應圖像的討論,對任何人承諾任何一個解決方案是很困難的。我理解的困境,但在等待一個完美的解決方案,是標準的在所有瀏覽器和設備是不是你當前的網(wǎng)站更容易使用在有限帶寬的設備。找到一個解決方案,最好的解決你的問題并運行它。沒有找到一個解決方案意味著性能問題的人,而完全失敗的響應式設計的目的。
大型的JavaScript庫,也可以在較小的設備導致的問題。試著找出一個方法叫他們有條件根據(jù)屏幕分辨率或設備類型。性能不應該說到響應式設計是一個事后的想法。
結論
Web已經(jīng)爆炸了,隨著手機和智能手機技術我們可以訪問任何地方,在任何上下文內容的出現(xiàn)。為了確保我們能夠達到我們所有的用戶,給他們想要的東西是很重要的,當他們想要的。響應式設計是一個很新的技術,在我看來它是統(tǒng)一的網(wǎng)絡內容的完美技術。
牧羊人設計文章推薦: