響應式網(wǎng)頁設計面臨的挑戰(zhàn)
隨著設備的數(shù)量和種類的增加，我們訪問互聯(lián)網(wǎng)，新的網(wǎng)頁設計挑戰(zhàn)自己。
它不再僅僅有一個移動版本和瀏覽器版本?，F(xiàn)在，我們必須考慮是否人訪問我們的網(wǎng)站是從平板電腦訪問，智能手機（無論智能手機有一個高分辨率的屏幕或不），上網(wǎng)本，臺式電腦或全尺寸筆記本電腦（無論是一個具有高分辨率和低分辨率的屏幕），或一些其他的設備完全。
和所有這些不同的可能性優(yōu)化經(jīng)驗越來越精明的互聯(lián)網(wǎng)用戶之間的預期。
幾年前，一個設計師可以通過設備列表他們設計并創(chuàng)建為每個設備的個人網(wǎng)站設計。但隨著設備的數(shù)量和種類增加，成為一個不切實際的，費時的事情。
相反，設計師要設計出適應每個瀏覽器的需要，無論設備。

屏幕越來越大
臺式機和筆記本電腦的屏幕分辨率越來越大。就在幾年前，一個1280 x 800像素的分辨率似乎很大?，F(xiàn)在，那是相當多的筆記本電腦上常見的屏幕分辨率的底端，它的情況并不少見新顯示器擁有全高清的屏幕分辨率（1920 x 1080像素）。
我們達到了什么對顯示器的實際上限（目前的接口技術，但未來的發(fā)展可能會改變），但即使設計1920像素的寬度比的屏幕只有1024像素寬的設計有很大不同?；蛑辽偈撬鼞摰?。

增加了潛在的大屏幕的問題是，很多游戲的系統(tǒng)和新的電視現(xiàn)在已經(jīng)可以上網(wǎng)。這些其實都有很好的內(nèi)置瀏覽器，它是完全有可能的，你的一些網(wǎng)站的訪問者將在55″高清電視觀看您的網(wǎng)站。

但在移動設備
在光譜的另一端是平板電腦的互聯(lián)網(wǎng)用戶正在訪問的網(wǎng)站主要是從他們的智能手機，數(shù)量巨大，或上網(wǎng)本。這些設備屏幕的范圍可以從240×320像素（在一些低端的老年智能手機）1024 x 600或768（在一些上網(wǎng)本和平板電腦）。

顯然，一個網(wǎng)站設計一個監(jiān)控的1280像素寬，不去看屏幕上的只有320像素寬。甚至一個600或800像素寬。水平滾動，尤其是在觸摸屏設備，是惱人的。
一個手機網(wǎng)站使用的是解決方案，不同的屏幕分辨率設計。但是現(xiàn)在有一個巨大的尺寸范圍，而不僅僅是“正常的”和“小”，這是不是主意了。移動網(wǎng)站設計為240×320像素的屏幕不會在iPad上看起來很好（或甚至與視網(wǎng)膜顯示新的iPhone）。如果你設計的視網(wǎng)膜顯示屏分辨率更高的屏幕或類似的裝置，你會疏遠了很多使用其他智能手機，沒有游客有這樣高分辨率的屏幕。

柔性基礎
從一個靈活的基礎是很重要的。單獨的流體網(wǎng)格是不夠的。你還需要一個網(wǎng)格或布局，可以根據(jù)屏幕分辨率和設備類型的變化。簡單的布局，這可不是一個高階。但如果你想要的東西更復雜一點，使用不同數(shù)目取決于屏幕寬度的列，有幾件事你必須考慮。
靈活的布局

創(chuàng)建一個流體網(wǎng)格是創(chuàng)建一個更棒的方式響應設計。流體網(wǎng)格將調(diào)整大小和重新定位的內(nèi)容是必要的，因為屏幕寬度的變化

例如，只要你的屏幕分辨率高于800px寬，一個三柱布局會在3列，每列的簡單調(diào)整的服務內(nèi)容的寬度。但當屏幕寬度低于第三列為，你會放棄你的第二列下，使每一列可以留下一個易讀的寬度。

如果屏幕變得更窄，比方說480px（典型的在許多智能手機），整個設計滴一列，第二和第三列出現(xiàn)以下主要內(nèi)容。如果導航是包含在其中的一列，它可能會遷移到網(wǎng)頁的頂端，所以它仍然是容易。
使用CSS3媒體查詢，讓我們的目標不只是一個特定的設備（如移動設備），而且在這些設備的特殊規(guī)范。所以我們可以有許多不同的尺寸的設備獨立的樣式。
雖然在CSS3媒體查詢的美，是他們也可以在CSS的使用權(quán)。所以，如果我們需要改變的是列數(shù)，或類似的東西，我們可以定義一個“媒體在樣式表中的規(guī)則。webdesignerwall有一個偉大的概述如何使用CSS3媒體查詢。

流體圖像
創(chuàng)建圖像調(diào)整到列或div大小，他們是在一個流體布局，創(chuàng)造一個更敏感的設計的另一個重要方面。為列進行調(diào)整，它們包含的圖像可以調(diào)整使他們?nèi)苑显摿械募s束。

寬屏幕的考慮
根據(jù)statowl在過去的三個月，而非73%的移動互聯(lián)網(wǎng)用戶使用電腦的分辨率高于1024×768。如果你看看數(shù)據(jù)統(tǒng)計為1024 x 768而言，你會發(fā)現(xiàn)它是失去市場份額。很明顯，已經(jīng)有更高的屏幕分辨率，設計師會忽略不明智的一個巨大的轉(zhuǎn)變。
當然，只是因為有一些用戶有誰已經(jīng)轉(zhuǎn)移到更大的屏幕分辨率并不意味著在每一個設計師應該跳上寬的行列，開始重新設計他們的客戶。手機采用的是更重要的比此刻更寬的寬度。但由于我們希望說服你現(xiàn)在的反應是新網(wǎng)站設計方法設計方法和設計，重要的是要考慮如何讓網(wǎng)站更大的寬度。

誰用更高分辨率的屏幕？
任何人工作的設計或創(chuàng)意領域可能有一個屏幕分辨率至少為1280像素寬（如果不是更大）。這包括網(wǎng)絡和圖形設計師，導演，攝影師，和其他。懂技術的用戶也更可能使用更高分辨率的屏幕，因為他們更容易升級自己的電腦設備進行定期。
富有的消費者是另一組可能使用更高分辨率的顯示器。喜歡和精通技術的用戶，這是因為有更多的可支配收入的人更可能定期購買新電腦。當然，這種影響是增加消費者都是有錢人和技術嫻熟。

MAC的球迷將是另一組更可能使用更高的屏幕分辨率，由于新的MacBook，iMac，和其他的蘋果電腦都有至少1280 x 800的屏幕分辨率。當然，這不包括他們運行在iOS產(chǎn)品（iPhone，iPod touch和iPad）。

誰不是用更高的分辨率的屏幕？
雖然有很多用戶在使用更高分辨率的屏幕，仍然有很多互聯(lián)網(wǎng)用戶誰沒有這些分為幾個不同的組。
學生可能是一個低分辨率的用戶的大群體。學校經(jīng)常要做五年或十年的電腦，并且在許多情況下，電腦他們甚至不是先進的當他們購買。如果你的網(wǎng)站是針對教育用戶（包括學校的教師和管理人員，除了學生），你可能會看很多的屏幕只有1024像素寬的用戶，甚至有些人還有監(jiān)視器設置為800像素寬。

企業(yè)用戶往往有較低的屏幕分辨率，太。許多非科技企業(yè)將堅持直到它完全過時的電腦設備升級之前。這是有道理的，尤其是考慮到升級數(shù)十或數(shù)百臺計算機在一次成本。如果你瞄準的是企業(yè)用戶，你可能要堅持一個基于1024的寬度設計。
最后一組，可能有較低分辨率的屏幕上人不重視技術。而這些人用不碰計算機，現(xiàn)在很多人都在家中有電腦看到的價值。但他們也不可能去花費幾百美元的PC上，或者如果你的網(wǎng)站是專注于非技術用戶從一個家庭成員或分類廣告會使用電腦，特別是在農(nóng)村地區(qū)，你要仔細考慮可能的屏幕分辨率是什么，并據(jù)此設計。

跟蹤訪問者
上面提到的所有東西給我們帶來了一個采取最重要的步驟，如果你正在考慮一個更大的屏幕分辨率設計：跟蹤誰來到你的網(wǎng)站，看看他們使用的訪客屏幕分辨率。任何好的分析程序會給你這個信息，這是非常有價值的決策這樣。
如果你發(fā)現(xiàn)你的用戶絕大多數(shù)都是來自更高的屏幕分辨率的電腦，然后你可以設計你的網(wǎng)站對于用戶沒有看到太多的影響。但如果你發(fā)現(xiàn)大量的訪問者仍然使用1024或更窄的屏幕分辨率，那么你可能要重新考慮。

更寬的寬度是重要的創(chuàng)新
我相信有很多設計師有誰真的看不見的點在較寬的寬度。他們在960像素的快樂設計。他們有合適的系統(tǒng)設計的寬度。他們有前960像素的CSS文件的所有設置。他們?yōu)槭裁匆邌?？尤其是當大量的互?lián)網(wǎng)用戶仍然有屏幕，1024像素寬的工作。
簡單的答案是，只要我們堅持設計1024，沒有激勵對大多數(shù)消費者升級。這意味著沒有激勵制造商創(chuàng)造更高分辨率的產(chǎn)品。
例如，如果1280是標準的，如果大多數(shù)網(wǎng)站有1140像素寬或更寬，很可能會與iPad的分辨率至少1280開發(fā)。但因為1024的標準是，iPad不需要比這更高的分辨率。同樣的原則也適用于上網(wǎng)本。由于網(wǎng)絡的設計是圍繞屏幕寬度為1024像素，主要用于網(wǎng)絡使用的設備不需要比這更高的分辨率。
通過推動網(wǎng)站設計更廣泛的寬度，我們鼓勵升級和創(chuàng)新。另外，這些額外的180個像素（960和1140之間的差異）可以開辟新的可能性在用戶界面設計和用戶體驗的世界。就像160像素獲得了當我們從800到960更可能的事。

廣寬的缺點
雖然有一定的優(yōu)勢，創(chuàng)造更廣闊的設計，也有一定的缺點的實踐。這些都是很容易克服的，但重要的是要意識到他們是什么如果你想阻止他們。
寬線長度減少的可讀性
這是誘人的創(chuàng)造更廣泛的設計時，利用額外的屏幕房地產(chǎn)讓你的主要內(nèi)容范圍廣。這并不總是一個好主意，但。較長的線的長度是難以閱讀，因為眼睛有進一步的旅行在一行的末尾到下一行的開始，這意味著讀者可以更容易迷路，上錯線。這是由較小的字號加劇。走線的長度，一個快樂的中等字體很重要，和線高度。
有一對夫婦的不同的方法為適當?shù)木€長度的計算。第一個是alphabet-and-a-half規(guī)則，結(jié)果在一個39個字符的長度（字母表中26個字母x 1.5）。適應你的字體大小，大約39字適合你選擇的線的長度（或反之亦然）。
最優(yōu)線路長度計算的第二種方法是“分兩次”規(guī)則的適用。這是從世界絕版的繳稅，但可以適應網(wǎng)絡容易。這條規(guī)則，你花點大小的字體，乘以二，然后讓你的線路長度在活字（其中，打印，12分）。所以，你要計算線的長度以像素為單位，你會把你的字體大小乘以24（12點字體將擁有288像素的線的長度）。
它可以幫助這兩種方法計算你的線的長度，然后進行比較。讓你的最后一行的長度介于兩者之間。

信息過載
廣泛的內(nèi)容可以很容易地使你的網(wǎng)頁看起來很雜亂，像是有太多的事情。這也使得它更容易添加額外的列，部件，或其他內(nèi)容，可能不是真的在頁面中添加任何價值。保持良好的內(nèi)容設計原則建立你的網(wǎng)站時，它是重要的。寬敞的白色空間也讓你的網(wǎng)站看起來不雜亂的幫助。
更寬的寬度，給你更多的選擇當談到設計，但它也使你會做出糟糕的設計決策的機會。太簡約和看起來是乏味和空洞。太多的事情，它只是看起來忙碌和混亂。
注重規(guī)模，白色的空間，在你的設計和結(jié)構(gòu)比例，確保良好的最終產(chǎn)品。小心你的更廣泛的設計并不起太多一般。
為什么不是每個人都做了響應的設計嗎？
而響應式設計是解決很多問題的核心設備被用來訪問Internet的廣泛，它也可以創(chuàng)建一些新的問題。
將移動設備，例如。如果一個人正在訪問他們的智能手機看電影的網(wǎng)站，這可能是他們最關心的是演出時間，方向去看戲，或者去劇院的電話號碼。他們希望立即訪問這些信息。裝載了整個網(wǎng)站，也包括像電影評論和其他信息，只有隱藏其中很大一部分來自移動用戶是浪費資源。
所以重要的是要看在個案基礎上響應式設計，找出如果它是一個特定的網(wǎng)站的解決方案。在許多情況下，它是，但仍有一些情況下，一個更傳統(tǒng)的移動網(wǎng)站是可取的。
作為設計師，雖然，了解響應式設計是很重要的，能夠知道什么時候是你的項目的合適的解決方案。由于大部分響應的設計是建立在創(chuàng)造良好的、靈活的網(wǎng)站，它可以作為設計師的一種實踐指南作為我們前進與網(wǎng)頁設計和Web標準。
創(chuàng)建響應設計更多的資源
flurid：flurid是流體網(wǎng)格設計能適應在各種窗口的寬度。雖然不是特別敏感，對自己的（除了調(diào)整列寬），它可以作為骨干創(chuàng)建響應式網(wǎng)站。
流體網(wǎng)格：本文從列表分開討論的優(yōu)點和流體網(wǎng)格工作詳情。
流體網(wǎng)格系統(tǒng)：另一種流體網(wǎng)格框架。
硬漢CSS3媒體查詢另一個很好的指南，媒體查詢。
響應式網(wǎng)站設計實例
不是所有下面的設計適應了移動的大小，但有些人，他們都可以給你，你如何使你的網(wǎng)站設計跨設備更敏感。

從一個很寬的屏幕，屏幕尺寸為最窄寬度不同的流體一個固定寬度的設計固定列寬流體寬度設計局設計的變化。

創(chuàng)新互聯(lián)設計文章推薦：

IPv4地址

網(wǎng)站搬家數(shù)據(jù)遷移

域名注冊,中文域名注冊

文章名稱：響應式網(wǎng)頁設計面臨的挑戰(zhàn)
文章地址：http://jinyejixie.com/news/20158.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、外貿(mào)網(wǎng)站建設、網(wǎng)站改版、電子商務、軟件開發(fā)、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)