如何設(shè)計(jì)一個(gè)移動(dòng)響應(yīng)式網(wǎng)站
建立一個(gè)移動(dòng)網(wǎng)站或建立一個(gè)移動(dòng)網(wǎng)站；這是許多討論的前沿問(wèn)題。有，然而，另一種選擇：響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)。什么時(shí)候，為什么，以及如何去響應(yīng)網(wǎng)站設(shè)計(jì)？

隨著移動(dòng)互聯(lián)網(wǎng)用戶將超過(guò)桌面互聯(lián)網(wǎng)用戶在美國(guó)2015，平板電腦變得越來(lái)越流行，甚至電視的互聯(lián)網(wǎng)使用的增加，對(duì)公司所有的游客無(wú)論什么設(shè)備他們提供出色的用戶體驗(yàn)是很重要的。如何響應(yīng)設(shè)計(jì)幫助我們做這件事嗎？好吧，讓我們創(chuàng)建一個(gè)網(wǎng)站解決方案，適用于不同的屏幕寬度。它采用靈活的網(wǎng)格和聰明的方式向用戶呈現(xiàn)相同的內(nèi)容，但顯示在一個(gè)適合該裝置的寬格式內(nèi)容。退房這個(gè)初學(xué)者的指南，響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)一個(gè)更詳細(xì)的介紹。

你為什么要設(shè)計(jì)一個(gè)響應(yīng)式網(wǎng)站？
有很多的選擇要考慮當(dāng)客戶要求為他們的網(wǎng)站和移動(dòng)解決方案，這些方案的適用性取決于業(yè)務(wù)需求和預(yù)算；考慮到任何現(xiàn)有的解決方案，或者他們已經(jīng)有網(wǎng)站也很重要。創(chuàng)建一個(gè)響應(yīng)式網(wǎng)站不是一個(gè)完整的移動(dòng)戰(zhàn)略，并不會(huì)回答每一個(gè)短暫的，但是，特別是如果你是從零開(kāi)始的一個(gè)網(wǎng)站，你應(yīng)該考慮這是一個(gè)非常嚴(yán)肅的選擇。
為什么你決定創(chuàng)建一個(gè)網(wǎng)站嗎？

你從零開(kāi)始
發(fā)展一個(gè)新的網(wǎng)站或Web應(yīng)用程序是一個(gè)具有挑戰(zhàn)性的過(guò)程。你不知道這個(gè)網(wǎng)站會(huì)成功，直到它的生活和世界，所以創(chuàng)建一個(gè)單獨(dú)的移動(dòng)網(wǎng)站或與網(wǎng)站項(xiàng)目串聯(lián)一個(gè)移動(dòng)應(yīng)用程序可以是一個(gè)很大的浪費(fèi)時(shí)間和金錢(qián)。在你創(chuàng)建一個(gè)額外的移動(dòng)網(wǎng)站或應(yīng)用程序把你的新網(wǎng)站表現(xiàn)良好，它的效率更高。

你想保持低成本
固體反應(yīng)的解決方案需要額外的設(shè)計(jì)和前端開(kāi)發(fā)的時(shí)間，但不太嚴(yán)重影響應(yīng)用程序的開(kāi)發(fā)。這可能需要大約20%再開(kāi)發(fā)一個(gè)響應(yīng)式網(wǎng)站，但這仍然比創(chuàng)建一個(gè)額外的移動(dòng)網(wǎng)站或應(yīng)用程序更快。開(kāi)發(fā)一個(gè)網(wǎng)站的這種方式，也意味著你只需要開(kāi)發(fā)、管理和維護(hù)的一個(gè)網(wǎng)站，所以它可以降低這些成本太。

你想讓它工作，即使新設(shè)備發(fā)布
手機(jī)網(wǎng)站需要能夠識(shí)別用戶的設(shè)備；在新設(shè)備發(fā)布，網(wǎng)站需要更新。為響應(yīng)解決方案只承認(rèn)瀏覽器的寬度，沒(méi)有新的更新將需要作出的。這意味著它更面向未來(lái)的可擴(kuò)展。

過(guò)程
讓我們通過(guò)使用酒店網(wǎng)站的例子創(chuàng)建一個(gè)網(wǎng)站響應(yīng)過(guò)程談。這是去年九月，赤道發(fā)布新的麥克唐納德酒店的網(wǎng)站。麥克唐納德酒店是一個(gè)在英國(guó)和西班牙的47家酒店和度假村的英國(guó)連鎖酒店。我們創(chuàng)造了新的網(wǎng)站，包括一個(gè)新的網(wǎng)站結(jié)構(gòu)、內(nèi)容廣泛的酒店，和一個(gè)新的預(yù)訂引擎。這里有步驟，我們經(jīng)歷了，你也應(yīng)該考慮設(shè)計(jì)一個(gè)響應(yīng)式網(wǎng)站的幾點(diǎn)思考。
 

這些都是關(guān)鍵的步驟：
•研究范圍：了解額外要求響應(yīng)的網(wǎng)站
•線框圖：電網(wǎng)結(jié)構(gòu)和布局的網(wǎng)站在不同的屏幕寬度
•外觀：風(fēng)格的考慮
•建筑工地：HTML和CSS的問(wèn)題

研究范圍
研究一直是一個(gè)非常重要的階段，在設(shè)計(jì)過(guò)程中，所以值得投入一點(diǎn)額外的考慮的人會(huì)使用不同的設(shè)備。了解這些不同的用戶可以使用網(wǎng)站上的各種設(shè)備將幫助你決定該項(xiàng)目的重點(diǎn)是什么。

•不同的目標(biāo)會(huì)在不同的設(shè)備上有一個(gè)用戶？
像這樣的問(wèn)題開(kāi)始變得多余。在過(guò)去我們認(rèn)為移動(dòng)用戶已經(jīng)任務(wù)驅(qū)動(dòng)，我想找到酒店的地址；我想訂的東西很快。但是現(xiàn)在，在任何設(shè)備上人們都會(huì)悠閑地瀏覽互聯(lián)網(wǎng)，因?yàn)樗麄冃枰焖偻瓿扇蝿?wù)。這是值得考慮的，因?yàn)橛脩舻哪繕?biāo)，這樣的思維可以幫助你優(yōu)先考慮網(wǎng)站的內(nèi)容，不相關(guān)的訪問(wèn)者是什么設(shè)備使用。
 

•我們需要做的功能和內(nèi)容，技術(shù)方面的考慮嗎？
想想任何復(fù)雜的功能，可以工作在不同的設(shè)備。雖然響應(yīng)網(wǎng)站只會(huì)改變CSS根據(jù)寬度如果有復(fù)雜的因素，在很大程度上依賴(lài)于JavaScript，他們可能沒(méi)有很好的轉(zhuǎn)化在一個(gè)較小的裝置，它可以隱藏這些價(jià)值。

線框圖
背后的邏輯是如何改變風(fēng)格應(yīng)該可以定義一個(gè)點(diǎn)硬和它的魔力就會(huì)出現(xiàn)在網(wǎng)站的建設(shè)，但我們需要一種方法來(lái)開(kāi)始定義布局的不同寬度的階段。我們?nèi)タ?的屏幕寬度，桌面，iPad和iPhone。我們覺(jué)得這些我們所要求的是什么，但對(duì)于你的項(xiàng)目，你應(yīng)該考慮什么寬度為你考慮你可能需要看大屏幕電視的互聯(lián)網(wǎng)使用重要的寬度。

在這一點(diǎn)上的項(xiàng)目，你應(yīng)該已經(jīng)到你需要在線核心模板，但你不需要所有這些模板的框架在不同的寬度。這里的主要目標(biāo)是幫助定義背后的邏輯如何CSS會(huì)改變頁(yè)面的外觀，所以重點(diǎn)有非常不同的布局頁(yè)面。我們看著我們的主頁(yè)，所有的預(yù)訂流程頁(yè)面，酒店提供的網(wǎng)頁(yè)頁(yè)面，以及一些通用的布局。這些覆蓋不同的列布局，內(nèi)容類(lèi)型和關(guān)鍵功能。

•入門(mén)指南
首先，每個(gè)按鍵寬度定義網(wǎng)格結(jié)構(gòu)。我們創(chuàng)造了3頁(yè)的屏幕寬度1024px（桌面），768px（iPad縱向），320px（iPhone畫(huà)像），然后我們需要為每個(gè)這些寬度定義網(wǎng)格結(jié)構(gòu)。
 
一個(gè)相等的列寬每個(gè)布局非常簡(jiǎn)單的網(wǎng)格結(jié)構(gòu)使我們?yōu)榻M件包的寬度變化的計(jì)劃更容易。

•創(chuàng)建主模板
當(dāng)你創(chuàng)建的每個(gè)線框，你需要考慮柱和如何在這些組件會(huì)適應(yīng)頁(yè)面寬度縮小與mdashe。你有更少的空間，會(huì)發(fā)生什么？如果你有四個(gè)欄目的內(nèi)容？當(dāng)你改變一三列的寬度？應(yīng)該有持續(xù)的溝通之間的設(shè)計(jì)師和前端開(kāi)發(fā)人員回答任何問(wèn)題，你可以做什么與視覺(jué)和CSS組件。

•從首頁(yè)
你可能會(huì)覺(jué)得有另一個(gè)網(wǎng)頁(yè)，比首頁(yè)更高的重要性，但這是我們開(kāi)始的地方。這是我們完成原線框。你可以看到移動(dòng)頁(yè)面長(zhǎng)度相當(dāng)大一點(diǎn)由于內(nèi)容包裝在一列。

•主導(dǎo)航
我們創(chuàng)建了一個(gè)簡(jiǎn)單的水平頂部導(dǎo)航會(huì)流體寬度與屏幕尺寸的變化。由于屏幕縮小菜單項(xiàng)會(huì)緊密地聯(lián)系在一起，然后換行到下一行在必要的時(shí)候。本工程為臺(tái)式機(jī)、筆記本電腦和平板的寬度，但會(huì)進(jìn)一步下跌，我們想創(chuàng)建一個(gè)菜單，適合的設(shè)備。這給了我們菜單波及的移動(dòng)設(shè)備的兩列。

其他頭組件是右對(duì)齊，只是移隨頁(yè)面寬度減小。
記得你是造型導(dǎo)航認(rèn)為它將如何工作的屏幕尺寸的變化。一定的風(fēng)格，如使用的標(biāo)簽，可能很難得到工作和好看的屏幕寬度減小。

•頁(yè)腳
我們的腳是很簡(jiǎn)單的，只是想著你想要的內(nèi)容，以及它將如何為寬度的變化，這種變化可以作為柱減少組件包裝在對(duì)方那么簡(jiǎn)單。

•其他組件
我們簡(jiǎn)單的網(wǎng)格結(jié)構(gòu)使其更容易規(guī)劃出我們的組件。在首頁(yè)我們使用水平滾動(dòng)條，有四個(gè)部件，滾動(dòng)在一次點(diǎn)擊。我們的平板布局讓我們保持這部分只是修改為只顯示三項(xiàng)，然后在我們的手機(jī)寬度去掉滾動(dòng)功能完全相反，顯示每個(gè)項(xiàng)目的垂直。每個(gè)組件的設(shè)計(jì)可能需要不同的行為，所以想想訪客將要使用的組件在不同的屏幕尺寸。手機(jī)用戶更舒適的向下滾動(dòng)頁(yè)面比使用小按鈕與頁(yè)面交互。

•測(cè)試了
一旦你已經(jīng)創(chuàng)建了你的第一個(gè)線框測(cè)試它在相關(guān)設(shè)備的直線距離。得到的圖像在一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)，看看如何看一看，感覺(jué)向下滾動(dòng)，很容易。這將讓你知道如果你的線框圖是早期工作。這樣的測(cè)試給我們的線索很早是什么和不工作。如果你看看這個(gè)框應(yīng)該很快看到我們的第一個(gè)問(wèn)題。

當(dāng)用戶導(dǎo)航通過(guò)他們的網(wǎng)站只會(huì)看到這兩個(gè)頁(yè)面元素和mdashthe導(dǎo)航和搜索面板。這意味著用戶可以如果頁(yè)面已經(jīng)被確定，以及在他們網(wǎng)站上。這是解決簡(jiǎn)單的把這些項(xiàng)目在顯示/隱藏面板讓用戶進(jìn)入內(nèi)容更快。
將平板電腦和手機(jī)版用戶測(cè)試的過(guò)程會(huì)給你很多有用的反饋。現(xiàn)在你的線框圖的創(chuàng)建，測(cè)試，修改和認(rèn)可它的時(shí)間，讓他們看看你的屏幕寬度好。

外觀和感覺(jué)的視覺(jué)效果
沒(méi)有必要?jiǎng)?chuàng)建一個(gè)線框的視覺(jué)效果。主要的目標(biāo)是覆蓋所有的風(fēng)格，將需要?jiǎng)?chuàng)建的HTML和CSS。會(huì)有一點(diǎn)點(diǎn)的一個(gè)線框和視覺(jué)交叉，一些風(fēng)格，將為移動(dòng)在沒(méi)有一個(gè)最初的線框需要。

•設(shè)計(jì)頁(yè)面：想保持你的風(fēng)格簡(jiǎn)單的手機(jī)版有什么了不起的CSS3，你不需要很多的圖像得到偉大的風(fēng)格的影響，但還需要一點(diǎn)時(shí)間來(lái)加載。

•思考字體：確保你的字體大小會(huì)對(duì)每個(gè)設(shè)備的可讀性。他們會(huì)有更大的移動(dòng)設(shè)備以確保可讀性。

同時(shí)，準(zhǔn)備好你的視覺(jué)改變當(dāng)它被翻譯成網(wǎng)站的建立。總是應(yīng)該在一個(gè)平面視覺(jué)和什么看起來(lái)很好的平衡工作，網(wǎng)站正在開(kāi)發(fā)中。最終網(wǎng)站沒(méi)有遠(yuǎn)離過(guò)我們的外觀和感覺(jué)的視覺(jué)效果，看看這里你可以用Live網(wǎng)站比較。

建筑工地
建立HTML和CSS是一個(gè)挑戰(zhàn)自己的一切，所以我不會(huì)討論這是太多的細(xì)節(jié)，但這里有一些事情要考慮。

•影響圖像大小：網(wǎng)站需要負(fù)載在全尺寸圖像即使CSS尺度下來(lái)，所以盡量保持圖像尺寸盡可能低。可以有一些漂亮的JavaScript技巧雖然使網(wǎng)站運(yùn)行順暢。在這個(gè)網(wǎng)站上我們最初裝在最小的圖像大小，然后使用JavaScript來(lái)決定是否一個(gè)較大的圖像，然后需要。

•采用先進(jìn)的CSS：
得到的背后，使用先進(jìn)的CSS樣式的理念客戶是很重要的，讓網(wǎng)站風(fēng)格為瀏覽器能力降低并。這可以讓你保持網(wǎng)站的加載時(shí)間低。

•不斷的溝通是必需的：該項(xiàng)目將永遠(yuǎn)走的順暢，球隊(duì)和對(duì)方說(shuō)話，從設(shè)計(jì)者和開(kāi)發(fā)者很好的討論問(wèn)題和解決方案，盡快為他們打開(kāi)。

所以，這一切意味著什么呢？
如果你想說(shuō)服你的客戶他們有新的網(wǎng)站設(shè)計(jì)和快速發(fā)展，首先應(yīng)該考慮它是否真的對(duì)他們來(lái)說(shuō)是正確的解決方案，那么你就需要能夠說(shuō)服他們的利益和交流，這將增加更多的時(shí)間項(xiàng)目。但是，我相信這是有更多的網(wǎng)站將在未來(lái)的發(fā)展。
我們都學(xué)到了很多，在這一敏感的網(wǎng)站開(kāi)發(fā)項(xiàng)目。我們很幸運(yùn)，有一個(gè)客戶誰(shuí)是我們熱衷于創(chuàng)造一些新的和創(chuàng)新的，我們已經(jīng)創(chuàng)建了一個(gè)網(wǎng)站，我們所有的驕傲。

牧羊人設(shè)計(jì)文章推薦：

集團(tuán)網(wǎng)站建設(shè)欄目設(shè)置及集團(tuán)公司網(wǎng)站建設(shè)方案
深入的圖像優(yōu)化事實(shí)與未來(lái)
作為一個(gè)自由設(shè)計(jì)師5個(gè)秘訣