響應式網頁設計面臨的挑戰

2016-05-09 閱讀：深圳網站建設設計

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

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

響應式網頁設計面臨的挑戰
增加了潛在的大屏幕的問題是，很多游戲的系統和新的電視現在已經可以上網。這些其實都有很好的內置瀏覽器，它是完全有可能的，你的一些網站的訪問者將在55″高清電視觀看您的網站。

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

響應式網頁設計面臨的挑戰

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

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

創建一個流體網格是創建一個更棒的方式響應設計。最好的流體網格將調整大小和重新定位的內容是必要的，因為屏幕寬度的變化

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

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

流體圖像
創建圖像調整到列或div大小，他們是在一個流體布局，創造一個更敏感的設計的另一個重要方面。為列進行調整，它們包含的圖像可以調整使他們仍符合該列的約束。

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

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

響應式網頁設計面臨的挑戰

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

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

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

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

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

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

信息過載
廣泛的內容可以很容易地使你的網頁看起來很雜亂，像是有太多的事情。這也使得它更容易添加額外的列，部件，或其他內容，可能不是真的在頁面中添加任何價值。保持良好的內容設計原則建立你的網站時，它是重要的。寬敞的白色空間也讓你的網站看起來不雜亂的幫助。
更寬的寬度，給你更多的選擇當談到設計，但它也使你會做出糟糕的設計決策的機會。太簡約和看起來是乏味和空洞。太多的事情，它只是看起來忙碌和混亂。
注重規模，白色的空間，在你的設計和結構比例，確保良好的最終產品。小心你的更廣泛的設計并不起太多一般。

為什么不是每個人都做了響應的設計嗎？
而響應式設計是解決很多問題的核心設備被用來訪問Internet的廣泛，它也可以創建一些新的問題。
將移動設備，例如。如果一個人正在訪問他們的智能手機看電影的網站，這可能是他們最關心的是演出時間，方向去看戲，或者去劇院的電話號碼。他們希望立即訪問這些信息。裝載了整個網站，也包括像電影評論和其他信息，只有隱藏其中很大一部分來自移動用戶是浪費資源。
所以重要的是要看在個案基礎上響應式設計，找出如果它是一個特定的網站的最佳解決方案。在許多情況下，它是，但仍有一些情況下，一個更傳統的移動網站是可取的。
作為設計師，雖然，了解響應式設計是很重要的，能夠知道什么時候是你的項目的合適的解決方案。由于大部分響應的設計是建立在創造良好的、靈活的網站，它可以作為設計師的一種最佳實踐指南作為我們前進與網頁設計和Web標準。

創建響應設計更多的資源
flurid：flurid是流體網格設計能適應在各種窗口的寬度。雖然不是特別敏感，對自己的（除了調整列寬），它可以作為骨干創建響應式網站。
流體網格：本文從列表分開討論的優點和流體網格工作詳情。
流體網格系統：另一種流體網格框架。
硬漢CSS3媒體查詢另一個很好的指南，媒體查詢。

響應式網站設計實例
不是所有下面的設計適應了移動的大小，但有些人，他們都可以給你，你如何使你的網站設計跨設備更敏感。