如何設(shè)計一個移動響應(yīng)式網(wǎng)站

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

外觀和感覺的視覺效果
沒有必要創(chuàng)建一個線框的視覺效果。主要的目標(biāo)是覆蓋所有的風(fēng)格，將需要創(chuàng)建的HTML和CSS。會有一點點的一個線框和視覺交叉，一些風(fēng)格，將為移動在沒有一個最初的線框需要。

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

•思考字體：確保你的字體大小會對每個設(shè)備的可讀性。他們會有更大的移動設(shè)備以確?？勺x性。

同時，準(zhǔn)備好你的視覺改變當(dāng)它被翻譯成網(wǎng)站的建立?？偸菓?yīng)該在一個平面視覺和什么看起來很好的平衡工作，網(wǎng)站正在開發(fā)中。最終網(wǎng)站沒有遠(yuǎn)離過我們的外觀和感覺的視覺效果，看看這里你可以用Live網(wǎng)站比較。

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

•影響圖像大?。壕W(wǎng)站需要負(fù)載在全尺寸圖像即使CSS尺度下來，所以盡量保持圖像尺寸盡可能低?？梢杂幸恍┢恋腏avaScript技巧雖然使網(wǎng)站運行順暢。在這個網(wǎng)站上我們最初裝在最小的圖像大小，然后使用JavaScript來決定是否一個較大的圖像，然后需要。

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

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

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

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

陜西網(wǎng)站建設(shè)公司網(wǎng)站建設(shè)方案
四川廣漢做網(wǎng)站
貴州網(wǎng)站建設(shè)

網(wǎng)站欄目：如何設(shè)計一個移動響應(yīng)式網(wǎng)站
當(dāng)前鏈接：http://muchs.cn/news/20238.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項目有網(wǎng)站設(shè)計、響應(yīng)式網(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)