網(wǎng)頁(yè)設(shè)計(jì)未來(lái)是什么？

網(wǎng)頁(yè)設(shè)計(jì)未來(lái)是什么。?這是一個(gè)大課題。?我們從哪兒開(kāi)始的時(shí)候我們談?wù)摰臇|西不在這里還說(shuō)話(huà)？

在這篇文章中，我們將看一下未來(lái)的網(wǎng)絡(luò)可能看起來(lái)像，以及我們?nèi)绾文軌蜻m應(yīng)我們目前的技能，這種新的環(huán)境，以及如何創(chuàng)建是建立在一致的核心，適應(yīng)流體網(wǎng)站的限制和設(shè)備的功能上，他們被視為。?我們還將看看我們的理念和方法，如何設(shè)計(jì)網(wǎng)站應(yīng)該演變：從最簡(jiǎn)單的設(shè)計(jì)向上設(shè)計(jì)，而不是從最富有的網(wǎng)站了。

但在我們達(dá)到目標(biāo)，讓我們開(kāi)始一個(gè)問(wèn)題。?我們所說(shuō)的什么“未來(lái)網(wǎng)絡(luò)”？

什么是未來(lái)網(wǎng)絡(luò)？

早在舊天：類(lèi)似谷歌查詢(xún)將采取30天。?圖片：?dullhunk

一個(gè)字，我聽(tīng)到別人比任何此刻正在?移動(dòng)?。?移動(dòng)網(wǎng)站，移動(dòng)設(shè)備，移動(dòng)應(yīng)用程序：清單似乎繼續(xù)下去。?事實(shí)上，大膨脹的意見(jiàn)說(shuō)，未來(lái)的網(wǎng)絡(luò)?是?移動(dòng)的。

但是，盡管這一切，?只是集中行動(dòng)是不能解決問(wèn)題的?。

我們的方式接入互聯(lián)網(wǎng)正在改變，那我們可以肯定。?而在短期內(nèi)，這也意味著更多的移動(dòng)設(shè)備。?但長(zhǎng)遠(yuǎn)來(lái)說(shuō)，我們顯得有點(diǎn)寬。?托馬斯胡森，對(duì)于Forrester的高級(jí)分析師，他很好地總結(jié)它在?二千零十一移動(dòng)趨勢(shì)?的報(bào)告時(shí)，他說(shuō)：“長(zhǎng)期?移動(dòng)?將意味著更多的不是移動(dòng)電話(huà)?！皬拈L(zhǎng)遠(yuǎn)來(lái)看，我們應(yīng)該用這個(gè)詞，而不是手機(jī)是?便攜式?。

便攜式為什么？?怎樣改變?yōu)榱俗屵@個(gè)互聯(lián)網(wǎng)？

首先，互聯(lián)網(wǎng)的物理基礎(chǔ)設(shè)施正在迅速蔓延，使?我們能夠訪問(wèn)互聯(lián)網(wǎng)的任何地方，我們每天都在提高?。?在過(guò)去的10年里，互聯(lián)網(wǎng)用戶(hù)數(shù)?增長(zhǎng)了444.8％和28.7％的人口現(xiàn)在包括的?。?這是近2億人口，其中大部分亞洲的研究。?這一增長(zhǎng)是由投資推動(dòng)在基礎(chǔ)硬件，讓我們?cè)L問(wèn)互聯(lián)網(wǎng)：百萬(wàn)數(shù)百萬(wàn)臺(tái)電腦的，數(shù)百萬(wàn)英里的電纜，這幾百幾千的無(wú)線(xiàn)熱點(diǎn)和所有，在上面，成長(zhǎng)中的3G覆蓋全球各地（?約21％，由2010年年底?根據(jù)摩根士丹利）。

其次，我們使用互聯(lián)網(wǎng)的方式正在發(fā)生變化。?我們正?越來(lái)越多地面向我們的全方位服務(wù)的在線(xiàn)體驗(yàn)?，而不是搜索引擎。LinkedIn服務(wù)，如Facebook，Twitter和正在成為我們生活的中心線(xiàn)上，我們?nèi)诤纤麄儎?chuàng)造了自己獨(dú)特的網(wǎng)站內(nèi)容：生命趕快注冊(cè)Facebook，為我們的社會(huì)生活中的專(zhuān)業(yè)，LinkedIn為我們，Spotify的音樂(lè)，Netflix公司的電視和電影。?我們看到一個(gè)非常不同形式的信息消費(fèi)在這里，我們希望在其中的信息被推向社會(huì)的圈子，我們借著我們，而我們的人民的信任。?我們正在遠(yuǎn)離信息檢索的舊模式，在此我們將利用搜索引擎尋找信息和鏈接。

一些服務(wù)，這些都依賴(lài)于一個(gè)單一的設(shè)備，但是越來(lái)越多的人提供他們?cè)诙鄠€(gè)平臺(tái)，包括桌面，移動(dòng)應(yīng)用服務(wù)，互聯(lián)網(wǎng)功能的電視和。?就在上個(gè)月，三星創(chuàng)建了?第一個(gè)啁啾冰箱?。?好吧，這未必是最偉大的Internet連接使用一個(gè)，但它是一個(gè)。例子，如何將這些服務(wù)也開(kāi)始散開(kāi)，遠(yuǎn)離桌面，到日常生活中我們?Evrythng?，一啟動(dòng)，目前處于測(cè)試階段，是工作在一個(gè)平臺(tái)上，這將使?任何?有形物體的在線(xiàn)狀態(tài)，有效地使互聯(lián)網(wǎng)成為無(wú)所不在的實(shí)體包含任何數(shù)據(jù)，可以在任何地方和食用。

鑒于這些變化，是很重要的，我們不要過(guò)于我們的方法來(lái)創(chuàng)建新的Web內(nèi)容僵化，我們不能讓我們自己來(lái)思考的設(shè)備條件。?現(xiàn)在，我們生產(chǎn)的移動(dòng)應(yīng)用程序和標(biāo)準(zhǔn)的網(wǎng)站，以提供我們的服務(wù)，但在數(shù)年時(shí)間，我們可能會(huì)在一個(gè)完全不同的景觀來(lái)看，一個(gè)地方的確切位置，以及如何知道我們的內(nèi)容被視為是不可能的。?我們的內(nèi)容必須是可移動(dòng)的，它可以顯示任何地方的感覺(jué)。

媒體營(yíng)銷(xiāo)有回應(yīng)手機(jī)媒體越來(lái)越多地使用。?（圖片：?birgerking?）

我們也可能發(fā)現(xiàn)自己不得不決定是否集中在特定設(shè)備和渠道費(fèi)用的觀眾數(shù)量少，或采取獨(dú)特的方法和服務(wù)于最廣泛的頻譜可能。

無(wú)論我們采取的路線(xiàn)，?有能力提供一個(gè)跨所有渠道一致的體驗(yàn)是至關(guān)重要的?，和我們的能力為設(shè)計(jì)人員和開(kāi)發(fā)人員理解的選項(xiàng)，并提供這種一致性為我們的客戶(hù)將是至關(guān)重要的。

所以，這是未來(lái)的網(wǎng)絡(luò)，一個(gè)米什通道的設(shè)備和醪。?聽(tīng)起來(lái)不錯(cuò)，不是嗎？?讓我們回到關(guān)鍵詞，?可攜性?。

我們?nèi)绾卧O(shè)計(jì)為便攜式網(wǎng)站？

問(wèn)問(wèn)自己，你的最新項(xiàng)目將如何應(yīng)對(duì)在下列情況下：

1. 用戶(hù)正在看?內(nèi)務(wù)?其新的互聯(lián)網(wǎng)電視。?休勞瑞不是在屏幕上，因此用戶(hù)決定檢查他們的電子郵件。?一位朋友發(fā)來(lái)鏈接到您的網(wǎng)站，該網(wǎng)站的用戶(hù)打開(kāi)一個(gè)側(cè)邊欄和意見(jiàn)，方案同時(shí)使用。
2. 用戶(hù)是在火車(chē)上下班回來(lái)，可能延誤后，在一個(gè)iPad通過(guò)3G訪問(wèn)您的網(wǎng)站
3. 用戶(hù)是基于客戶(hù)的網(wǎng)站。?他們需要訪問(wèn)您的網(wǎng)站，閱讀一篇文章，但他們只有一個(gè)公司提供的索尼愛(ài)立信與Opera Mini的安裝。

每種情況提出解決我們這些用不同的問(wèn)題：（1）多寬高比和瀏覽器組合，（2）一個(gè)良好的展示區(qū)，但速度較慢的連接（3）一個(gè)非常小的顯示區(qū)域。?他們都是非?？赡艹霈F(xiàn)的情況。?通過(guò)大品牌的第一個(gè)互聯(lián)網(wǎng)電視，現(xiàn)已從大零售商。?Opera Mini的已超過(guò)8550萬(wàn)用戶(hù)?，是世界上占主導(dǎo)地位的瀏覽器，在許多領(lǐng)域，事實(shí)上，在亞洲，歌劇和諾基亞（與他們的聯(lián)合?66.33％的市場(chǎng)份額?）是遠(yuǎn)遠(yuǎn)領(lǐng)先于排名第三的瀏覽器（這是黑莓，以9.81％的股份）。?和德勤預(yù)測(cè)，?2011年將是平板的?，而50“％的”計(jì)算設(shè)備將不會(huì)被出售的個(gè)人電腦。

機(jī)會(huì)是，除非你真的想過(guò)這個(gè)問(wèn)題（如果你有，那么你可能不需要閱讀這篇文章），您的網(wǎng)站將無(wú)法在所有這些案件。

當(dāng)便攜式網(wǎng)頁(yè)設(shè)計(jì)，我們需要知道的三件事情：設(shè)計(jì)，內(nèi)容和集成。?以正確的方式走近，我們可以創(chuàng)建網(wǎng)站，是最廣泛的用戶(hù)群在訪問(wèn)和提供一致的體驗(yàn)，無(wú)論訪問(wèn)方法。

是否一致？?怎么樣？

當(dāng)面臨著一個(gè)規(guī)格眾多不同的設(shè)備設(shè)計(jì)，所有的最后一個(gè)目標(biāo)，可能會(huì)想到是一致性，并有很好的理由。?然而，我們?應(yīng)該?將努力實(shí)現(xiàn)的一致性。?沒(méi)有設(shè)計(jì)，但在經(jīng)驗(yàn)。

從概念上講，我們應(yīng)該思考我們的設(shè)計(jì)在兩個(gè)層次：核心內(nèi)容或服務(wù)，然后在顯示層。?我們的網(wǎng)站的核心不應(yīng)該改變從設(shè)備到設(shè)備，并應(yīng)提供一致的體驗(yàn)。?不久我們將看到，這意味著我們必須確保諸如內(nèi)容和導(dǎo)航模式的元素總是以同樣的方式工作。

Web的未來(lái)組成的巨大可能性，考慮到所有這些幾乎是不可能的。?這就是為什么我們需要保持一致！?圖片：?巨漢索寧

比方說(shuō)，我們的用戶(hù)是在工作，是我們的一個(gè)iPad瀏覽網(wǎng)站。?他們的工作，通過(guò)精心設(shè)計(jì)的導(dǎo)航層次去的內(nèi)容，他們想讀的作品，但他們是由一個(gè)電話(huà)打斷了，不得不停止瀏覽。?后來(lái)，在回家的火車(chē)，他們?cè)俅卧L問(wèn)該網(wǎng)站，通過(guò)他們的電話(huà)本的時(shí)間。設(shè)計(jì)的視覺(jué)元素會(huì)有所不同，根據(jù)需要，但是重要的是，他們的路線(xiàn)走上尋找內(nèi)容應(yīng)該是完全一樣的，他們所讀的內(nèi)容應(yīng)該當(dāng)他們到了那里。

這種體驗(yàn)的一致性，是什么讓我們創(chuàng)造一個(gè)完整的移動(dòng)網(wǎng)絡(luò)和用戶(hù)體驗(yàn)偉大的網(wǎng)站。

我從哪里開(kāi)始？?以及如何將我知道當(dāng)我到達(dá)那里？

如果一個(gè)一致的經(jīng)驗(yàn)是我們的目標(biāo)，這引出了一個(gè)問(wèn)題，我們應(yīng)該建立一個(gè)移動(dòng)網(wǎng)站，鱗片上或桌面網(wǎng)站，降低？

答案是?沒(méi)有?。?我們應(yīng)該努力建立一個(gè)單一的設(shè)計(jì)，可廣泛用于各種設(shè)備沒(méi)有改變。?但實(shí)際上，至少?gòu)哪壳翱?，我們?yīng)該從最簡(jiǎn)單的網(wǎng)站和的工作。

為什么呢？?讓我們回到了介紹。?在移動(dòng)網(wǎng)絡(luò)，我們沒(méi)有對(duì)我們的內(nèi)容將被如何使用或?yàn)g覽控制，因此我們必須拋棄的想法，我們正在尋找一個(gè)特定的設(shè)備或設(shè)備的尺寸設(shè)計(jì)。?我們必須以不同的方式方法對(duì)我們網(wǎng)站的設(shè)計(jì)，在其中我們創(chuàng)建的核心內(nèi)容或服務(wù)第一。?畢竟，這將決定我們的網(wǎng)站到了最后，而不是視覺(jué)元素。?起初，這似乎很難，但我們應(yīng)當(dāng)看到，桌面網(wǎng)站開(kāi)發(fā)的最佳做法很多持有真正的便攜式網(wǎng)絡(luò)，特別是結(jié)構(gòu)方面的內(nèi)容。

我們需要的辣椒，如內(nèi)部的一致性。?圖片由?肖恩羅杰斯

概括來(lái)說(shuō)，這里是關(guān)鍵的規(guī)則時(shí)，要記住通過(guò)一個(gè)便攜式網(wǎng)頁(yè)設(shè)計(jì)工作：

1. 網(wǎng)站應(yīng)該提供盡可能最廣泛的觀眾;
2. 網(wǎng)站應(yīng)該包含相同的內(nèi)容只要有看的，在可行的情況;
3. 該網(wǎng)站的結(jié)構(gòu)應(yīng)該是無(wú)論它被認(rèn)為是相同的;
4. 其內(nèi)容應(yīng)顯示在一個(gè)適當(dāng)?shù)姆绞?，是其環(huán)境。

一個(gè)網(wǎng)站能夠滿(mǎn)足所有這些標(biāo)準(zhǔn)將緊貼在未來(lái)便攜式網(wǎng)絡(luò)。?但是，我們?nèi)绾沃质刮覀兊木W(wǎng)站上做呢？

設(shè)計(jì)為可移植的Web

使用Web標(biāo)準(zhǔn)設(shè)計(jì)：即HTML5的

好消息是，這兩個(gè)最常見(jiàn)的移動(dòng)，Webkit和歌劇院，都支持HTML5的瀏覽器引擎非常好; WebKit已經(jīng)2007年11月開(kāi)始支持HTML5的至少部分。

使用標(biāo)準(zhǔn)和描述標(biāo)記注冊(cè)在我們的網(wǎng)站將擁有在大多數(shù)設(shè)備提供一致的產(chǎn)出的效益。?和HTML5的擴(kuò)展能力，提供媒體，動(dòng)畫(huà)和本地存儲(chǔ)使之成為移動(dòng)應(yīng)用的絕佳選擇。

這三種能力允許HTML5的網(wǎng)站，通常與重現(xiàn)本地移動(dòng)應(yīng)用相關(guān)的行為，結(jié)束兩國(guó)之間的經(jīng)驗(yàn)差距。?現(xiàn)在視頻播放本機(jī)通過(guò)使用視頻標(biāo)簽HTML5的，而動(dòng)畫(huà)可以發(fā)揮使用HTML5的畫(huà)布。?最后，本地存儲(chǔ)可以讓一個(gè)網(wǎng)站，存儲(chǔ)設(shè)備上的類(lèi)似數(shù)據(jù)庫(kù)的信息，功能齊全的網(wǎng)站，允許脫機(jī)使用。

YouTube上，Netflix和Gmail的所有HTML5的也有他們的網(wǎng)站是專(zhuān)為移動(dòng)體驗(yàn)，并采取了HTML5的新功能的優(yōu)勢(shì)版本。?他們是一個(gè)偉大的起點(diǎn)對(duì)于任何開(kāi)發(fā)誰(shuí)想看什么就可以實(shí)現(xiàn)點(diǎn)。

HTML5是現(xiàn)在已經(jīng)可以用于發(fā)展，而且也沒(méi)有理由你為什么不能馬上開(kāi)始。?很多優(yōu)秀的資源和教程可以幫助您入門(mén)：

• HTML5的潛入
  作者：HTML5的標(biāo)準(zhǔn)和一個(gè)很好的起點(diǎn)概述。
• HTML5的演示和實(shí)例
  了載HTML5的一系列示威活動(dòng)的能力，帶源代碼。
• HTML5的畫(huà)廊
  一個(gè)創(chuàng)建的網(wǎng)站展示在HTML5。

為了讓您的項(xiàng)目中開(kāi)始使用HTML5的，你可以利用任何的發(fā)展環(huán)境，支持它??的頭號(hào)優(yōu)勢(shì)。?最完整的實(shí)現(xiàn)是通過(guò)Adobe的Dreamweaver的CS5;一HTML5的支持包可以下載，它擴(kuò)展了內(nèi)置的編輯器。?Aptana的也支持在其測(cè)試版的Aptana Studio 3 HTML5的。?鏈接是提供在本文章的末尾。

從簡(jiǎn)單開(kāi)始，逐步建立

思維方式的思考便攜式干凈和簡(jiǎn)單。?寬屏幕尺寸變化從一個(gè)40英寸1920 × 1080像素的肖像導(dǎo)向在320 × 240像素的手機(jī)屏幕上運(yùn)行的液晶意味著我們必須創(chuàng)造設(shè)計(jì)，是可擴(kuò)展性和適應(yīng)性。?我們也必須認(rèn)識(shí)到，有人可能會(huì)通過(guò)一個(gè)遙控器或觸摸屏上的脂肪短粗的手指交互。?越簡(jiǎn)單的設(shè)計(jì)，它會(huì)更加適應(yīng)。

自下而上的概念化男性意識(shí)。?專(zhuān)注于基本要素，讓他們周?chē)沫h(huán)境演變。?圖片：?安德烈Bocan

創(chuàng)建您的第一個(gè)基本的網(wǎng)站結(jié)構(gòu)，并添加只有你的核心樣式，那些適用于所有設(shè)備和布局。?開(kāi)始簡(jiǎn)單的給我們一個(gè)偉大的基礎(chǔ)上建立。?從本質(zhì)上講，我們開(kāi)始從最基本的經(jīng)驗(yàn)，即使是最小的移動(dòng)設(shè)備上提供了與我們的工作方式到桌面瀏覽器的能力更強(qiáng)。

使用?@媒體?環(huán)境中查詢(xún)CSS將讓您的網(wǎng)站功能的桌面瀏覽器和認(rèn)識(shí)到這些額外的擴(kuò)展，呈現(xiàn)出更全面，更具交互性的體驗(yàn)在可能的情況。

警誡字和一個(gè)原因，我們不工作有辱人格的桌面網(wǎng)站的其他方式向周?chē)苿?dòng)一：?@傳媒?查詢(xún)不是每一個(gè)移動(dòng)設(shè)備的支持。?瑞秋安德魯斯提供了一個(gè)?很好的概述媒體詢(xún)問(wèn)了@?在這里碎雜志輪，盡管工作方式從桌面到移動(dòng)，而不是其他。

忘了專(zhuān)有

不管你做什么，遠(yuǎn)離專(zhuān)有技術(shù)，因?yàn)檫@是一種方式，以保證不一致的經(jīng)驗(yàn)。?Flash和Silverlight作為發(fā)展平臺(tái)是生活在借來(lái)的時(shí)間。?微軟已經(jīng)表示，它將?停止Silverlight開(kāi)發(fā)?集中于HTML5的，而閃光燈正在使用的機(jī)制主要是由于游戲開(kāi)發(fā)平臺(tái)和視頻傳輸。?如果我們要?jiǎng)?chuàng)建真正的跨平臺(tái)的網(wǎng)站始終顯示在所有設(shè)備，則Flash和Silverlight是不明智的選擇，因?yàn)槲覀儾荒艽_定，他們將設(shè)備安裝在用戶(hù)的。?不是說(shuō)沒(méi)有閃光的地方，作為一個(gè)游戲平臺(tái)，基于Web的，它是目前無(wú)可匹敵的。?這是關(guān)于擇業(yè)手頭最好的技術(shù)的。

要警惕的JavaScript ...當(dāng)其時(shí)

壞消息是，我們現(xiàn)在可能要犧牲一些理所當(dāng)然 ??的事情，我們需要的。?我們必須學(xué)會(huì)設(shè)計(jì)未知屏幕尺寸和比例，并允許內(nèi)容需要流動(dòng)。?少想設(shè)計(jì)結(jié)構(gòu)和頁(yè)面布局和?更多的?內(nèi)容?結(jié)構(gòu)。

我們可能不得不放棄使用JavaScript和AJAX（桌面發(fā)展兩主食），以創(chuàng)造更多的涉及用戶(hù)體驗(yàn)，因?yàn)橐恍┑投嗽O(shè)備將不具備硬件肌肉處理復(fù)雜庫(kù)。?修剪頁(yè)的重量也將是一個(gè)優(yōu)先事項(xiàng)，因?yàn)槲覀儾荒艽_定最終用戶(hù)有寬帶高速接入互聯(lián)網(wǎng)，所以大型圖書(shū)館將是不可接受的開(kāi)銷(xiāo)。

這是特別是在最近的“散列砰”的趨勢(shì)，重要的是，開(kāi)始與Gawker的媒體公司在其網(wǎng)站上有爭(zhēng)議的重新設(shè)計(jì)。?該網(wǎng)站（包括Gizmodo的，Lifehacker和Gawker的）提出了更多的應(yīng)用程序的體驗(yàn)給用戶(hù)，但不要依賴(lài)于JavaScript的內(nèi)容傳遞等。?實(shí)際上，該網(wǎng)站由一個(gè)單一的頁(yè)面是動(dòng)態(tài)的內(nèi)容與要求加載，而不是他們以前由多個(gè)頁(yè)面。?任何用戶(hù)的瀏覽器無(wú)法處理的JavaScript，無(wú)論何種原因，將無(wú)法瀏覽該網(wǎng)站，它們只有一個(gè)空白頁(yè)的歡迎。

然而，許多庫(kù)，現(xiàn)正在發(fā)展成為輕巧便攜設(shè)備上可用。?jQuery有一個(gè)?圖書(shū)館阿爾法其移動(dòng)?測(cè)試可用。?該項(xiàng)目已在Adobe支持Mozilla和行業(yè)的球員 ??，比如黑莓，所以它是值得密切注意的。

JavaScript支持將成熟的設(shè)備更現(xiàn)代化的平臺(tái)上的舊設(shè)備和服務(wù)采取了全球行動(dòng)。?但對(duì)于目前，保守的方法將意味著其使用為您的工作更廣泛的潛在觀眾。

測(cè)試，測(cè)試，然后再次測(cè)試

在移動(dòng)網(wǎng)絡(luò)，有一個(gè)很好的機(jī)會(huì)，我們將無(wú)法對(duì)每一個(gè)可能的測(cè)試平臺(tái)上，我們的內(nèi)容將被視為。?但是，這并沒(méi)有帶走你的需要測(cè)試。?我們必須和測(cè)試。

歌劇Mini的模擬器可以讓你在一個(gè)虛擬瀏覽器測(cè)試您的網(wǎng)站。

每個(gè)平臺(tái)購(gòu)買(mǎi)的設(shè)備將是廣大的設(shè)計(jì)師望而卻步。?但是替代品可供選擇。?對(duì)于大多數(shù)的主要平臺(tái)，可用的設(shè)備模擬器是模擬瀏覽體驗(yàn)。?見(jiàn)這個(gè)鏈接的文章結(jié)尾處的參考資料一節(jié)。

在另一端的規(guī)模，是付費(fèi)服務(wù)可從?的DeviceAnywhere?，使您可以測(cè)試您的網(wǎng)站在2000年的手機(jī)了。

不幸的是，沒(méi)有互聯(lián)網(wǎng)電視仿真器至今，但谷歌已發(fā)布了指南，?電視設(shè)計(jì)的谷歌?。

最后，當(dāng)然，我們絕不能忘記我們的桌面瀏覽器上測(cè)試了。?至于為便攜式網(wǎng)頁(yè)設(shè)計(jì)的目的是建立一個(gè)跨為盡可能廣泛的設(shè)備設(shè)置單一的經(jīng)驗(yàn)。?僅僅因?yàn)橛脩?hù)可以瀏覽網(wǎng)頁(yè)，在許多方面并不意味著他們將停止使用他們的臺(tái)式機(jī)，筆記本電腦或上網(wǎng)本。?要利用你的優(yōu)勢(shì)時(shí)，您的瀏覽器測(cè)試由大小只是為了確保你的設(shè)計(jì)規(guī)模和流動(dòng)得當(dāng)。?模擬器將提供一個(gè)你在其他設(shè)備上渲染你的網(wǎng)站準(zhǔn)確。

丑小鴨？

所以，請(qǐng)問(wèn)移植的Web違抗的優(yōu)秀設(shè)計(jì)的容貌和踢沙？?當(dāng)然不是。?偉大的設(shè)計(jì)不僅是視覺(jué)形象，而是清楚地表達(dá)信息，其中包括通過(guò)創(chuàng)新和深思熟慮的排版，布局和導(dǎo)航層次結(jié)構(gòu)和重要性。?這使我們要...

網(wǎng)站內(nèi)容為便攜式

內(nèi)容再次國(guó)王。?的興起?Quora?應(yīng)該足以說(shuō)服任何人的，它是內(nèi)容單純的服務(wù)為基礎(chǔ)的。?在移動(dòng)網(wǎng)絡(luò)，這是雙重的事實(shí)。?通過(guò)削下來(lái)的設(shè)計(jì)元素，你甚至把更多的內(nèi)容集中。

了解什么是重要的

確定什么是最關(guān)鍵的用戶(hù)應(yīng)該是您的第一個(gè)任務(wù)在開(kāi)發(fā)一種便攜式的網(wǎng)站。?有可能不適合復(fù)雜的導(dǎo)航空間，尤其是在較小的屏幕，所以要簡(jiǎn)單。?比較YouTube的起始頁(yè)的移動(dòng)和桌面版本：

YouTube的標(biāo)準(zhǔn)的主頁(yè)。

YouTube的HTML5的基于主頁(yè)的作品出色的小屏幕。

創(chuàng)建一個(gè)堅(jiān)實(shí)的信息層次

構(gòu)建我們的內(nèi)容很重要，既可讀性和搜索引擎優(yōu)化。?理解的內(nèi)容，我們提出必須建立明確的信息通過(guò)它來(lái)引導(dǎo)層次的用戶(hù)。

通過(guò)你的地圖內(nèi)容的用戶(hù)可能人次。?應(yīng)該有一個(gè)明確的路線(xiàn)，每一項(xiàng)內(nèi)容，首先是最高級(jí)別的信息種類(lèi)和每次點(diǎn)擊獲得更多的顆粒。

約翰劉易斯的移動(dòng)網(wǎng)站有一個(gè)明確的信息層次，以幫助導(dǎo)航。

一個(gè)很好的例子是約翰劉易斯，英國(guó)的百貨公司的移動(dòng)網(wǎng)站。?從主頁(yè)上，您可以很容易地深入到各個(gè)部門(mén)，并從那里向個(gè)別產(chǎn)品。?它的簡(jiǎn)單，而且也意味著對(duì)任何特定的網(wǎng)頁(yè)資料量不是很大，你知道你的確切位置在任何時(shí)間層次結(jié)構(gòu)。

保持內(nèi)容可

即使用戶(hù)在桌面上沒(méi)有，不視為二等公民。?提供盡可能多的內(nèi)容是可行的。?而對(duì)于有哪些內(nèi)容，目前它適當(dāng)。?刪除以下內(nèi)容：

• 多余的圖像
  如果圖像是沒(méi)有必要的內(nèi)容，擺脫它。
• 不支持的文件格式
  不包括Flash閃存占位，甚至如果該文件可能無(wú)法播放。
• 不必要的文本
  良好的桌面復(fù)制不一定良好的便攜副本。?那是第二個(gè)客戶(hù)推薦絕對(duì)必要的嗎？?如果沒(méi)有，刪除它。

同時(shí)，我們要?jiǎng)h除不必要的內(nèi)容，我們不希望刪除太多。?在下面的例子中，我們有一個(gè)簡(jiǎn)單易用的網(wǎng)站，而是一個(gè)有沒(méi)有深度。?第一個(gè)層次的信息，提出了很好，但在頁(yè)面的底部，為公司的服務(wù)標(biāo)題應(yīng)該鏈接到下一級(jí)的信息。?事情是這樣的，如果我想了解更多，我被迫訪問(wèn)非優(yōu)化的網(wǎng)站。?這是一個(gè)不好的用戶(hù)體驗(yàn)，因?yàn)樗沟脤ふ沂裁?，我需要更多的困難。

Sapient公司硝基的移動(dòng)網(wǎng)站展示真的很好，但削減從全網(wǎng)站的大量信息。

網(wǎng)絡(luò)集成和便攜式

如果服務(wù)成為新的互聯(lián)網(wǎng)樞紐，保持與這些服務(wù)我們的網(wǎng)站變得極為重要。

保持它的模塊化

服務(wù)將來(lái)去（雖然主要的會(huì)肯定會(huì)保持很長(zhǎng)一段時(shí)間沒(méi)有...是的，我看著你，臉譜看），所以讓您的模塊化設(shè)計(jì)。?能夠融入新的服務(wù)，他們來(lái)上網(wǎng)，并刪除他們那些在路邊倒下將確保您的內(nèi)容提供給盡可能多的觀眾。

我們的目標(biāo)是可以很容易地把你的服務(wù)內(nèi)容，從而在多個(gè)?網(wǎng)站的內(nèi)容整合成的織物?。?首先，這將是通過(guò)搜索引擎優(yōu)化和社會(huì)共享。

讓您的內(nèi)容搜索引擎友好

當(dāng)人們?cè)L問(wèn)內(nèi)容越來(lái)越少的社會(huì)和基于搜索的，搜索引擎仍然是巨大的流量來(lái)源。?保持您的內(nèi)容，便于檢索格式化是必須的。Quora已經(jīng)這樣做非常好，從而導(dǎo)致高排名在各大搜索引擎和產(chǎn)生下一代問(wèn)答服務(wù)的流量。?搜索引擎優(yōu)化可能是一些舊帽子，但作為內(nèi)容的質(zhì)量變得越來(lái)越重要，它會(huì)獲得新的生命。

Quora次與搜索引擎不錯(cuò)，以極大的結(jié)果。

輕松地分享

SEO是重要，但是要通過(guò)OAuth的，OpenGraph和OpenID等服務(wù)的直接連接。?如果這不是一個(gè)適合您的選項(xiàng)然后在最低限度，為用戶(hù)提供一些方式來(lái)分享您的內(nèi)容。?ShareThis的服務(wù)，如AddThis并使其易于添加共享功能;利用它們。?一個(gè)單一的鳴叫能產(chǎn)生大量的活動(dòng)。?如WordPress當(dāng)然，現(xiàn)代的發(fā)展和內(nèi)容平臺(tái)已經(jīng)內(nèi)置此功能

這三個(gè)因素將共同將創(chuàng)建網(wǎng)站，這些網(wǎng)站?發(fā)現(xiàn)的，一致的和可用的?。?現(xiàn)在只有一個(gè)問(wèn)題是提高其丑陋的頭...

怎么應(yīng)用？?難道他們前進(jìn)的道路？

應(yīng)用服務(wù)是個(gè)大生意。?Gartner預(yù)測(cè)，移動(dòng)應(yīng)用程序商店的收入將?在2011年最高15元億元?。?這并不奇怪，谷歌，微軟，諾基亞和其他國(guó)家正在設(shè)法讓行動(dòng)上。?但是僅僅因?yàn)槭巧虡I(yè)上的成功應(yīng)用商店，是否意味著他們應(yīng)該是我們的第一站時(shí)，網(wǎng)頁(yè)設(shè)計(jì)的未來(lái)？

讓我們來(lái)看看為什么一個(gè)人可能想創(chuàng)建一個(gè)應(yīng)用程序：

• 易于購(gòu)買(mǎi)，安裝，使用和丟棄
  可用的應(yīng)用程序是如此，即使你的奶奶可以使用它們。?智能手機(jī)上安裝它們是平穩(wěn)的過(guò)程，需要從用戶(hù)最少的參與。?而當(dāng)你已經(jīng)受夠了，只需刪除它，沒(méi)有一絲的應(yīng)用程序仍然存在。?這是一個(gè)偉大的用戶(hù)體驗(yàn)，期限。?這就是為什么蘋(píng)果公司目前正爭(zhēng)取通過(guò)MAC應(yīng)用程序商店的完整的Mac應(yīng)用程序相同的概念。?應(yīng)用程序還規(guī)定，在大多數(shù)情況下，良好的用戶(hù)體驗(yàn)與家鄉(xiāng)的控制和設(shè)計(jì)模式。
• 品牌聯(lián)想與鎖定
  Apps是設(shè)計(jì)用來(lái)做一件事，把它做好。?最成功的應(yīng)用程序都是協(xié)會(huì)行使的品牌：“我想尋找網(wǎng)頁(yè)，所以我將使用谷歌應(yīng)用程序”或“我要檢查在我的朋友，所以我將使用Facebook的應(yīng)用程序。”你品牌經(jīng)驗(yàn)應(yīng)用程序通過(guò)。?我可以很容易使用iPhone的Safari瀏覽器訪問(wèn)Facebook和谷歌，但這些軟件可以很容易對(duì)我來(lái)說(shuō)。?我被鎖進(jìn)經(jīng)驗(yàn)，這是偉大的公司，因?yàn)樗麄兊钠放频玫椒N植面積在屏幕中間，我在家，在這種情況下，一個(gè)大?F?和一個(gè)大???。
• 錢(qián)
  關(guān)于應(yīng)用程序最有吸引力的事情很多公司的利潤(rùn)。?蘋(píng)果的App Store已經(jīng)證明，貨幣化的內(nèi)容是可能的。?即使是獨(dú)立的開(kāi)發(fā)，使得在一個(gè)較短的時(shí)間內(nèi)很多錢(qián)是可能的。

最新消息關(guān)于所有這些問(wèn)題引人注目的是，他們沒(méi)有任何關(guān)系的信息消費(fèi)。?他們都對(duì)品牌和用戶(hù)體驗(yàn)。?不過(guò)，也有原因，你應(yīng)該三思而后行：

• 應(yīng)用服務(wù)是信息孤島：
  應(yīng)用程序做他們做的很好。?但他們不這樣做的在更廣泛的網(wǎng)絡(luò)帶來(lái)好工作。?要遵循一個(gè)鏈接？?你也許可以查看應(yīng)用程序頁(yè)，但你只是作為可能獲得扔進(jìn)瀏覽器。?這不是一個(gè)良好的用戶(hù)體驗(yàn)。?你也失去控制用戶(hù)的行為和他們對(duì)你的重點(diǎn)內(nèi)容。
• 應(yīng)用程序是特定于平臺(tái)的：
  編寫(xiě)一個(gè)程序自動(dòng)將您的平臺(tái)，你寫(xiě)它。?這立即限制您的潛在觀眾。?智能手機(jī)的普及率增長(zhǎng)，但仍然是手機(jī)市場(chǎng)的一小部分互聯(lián)網(wǎng)的整體功能。?要以美國(guó)市場(chǎng)為例，雖然31％的人口擁有智能手機(jī)中，只有6％的人口擁有的iPhone。?這出307萬(wàn)1900萬(wàn)。?如果你發(fā)布了一個(gè)應(yīng)用程序在美國(guó)IOS的唯一，你會(huì)立刻?失去76170000潛在用戶(hù)?。
• 應(yīng)用服務(wù)工作，大品牌和服務(wù)的最好成績(jī)：
  無(wú)論應(yīng)用程序是多么好，你必須找到一種方式來(lái)獲得它在該應(yīng)用程序商店分為每天發(fā)布的應(yīng)用程序浪潮發(fā)現(xiàn)。?大品牌可以把現(xiàn)有網(wǎng)絡(luò)的存在，通過(guò)他們的應(yīng)用程序，不過(guò)這是很多小品牌更困難。?除非你可以生成大量的相關(guān)內(nèi)容，定期為主要服務(wù)做什么，你的應(yīng)用程序?qū)⑽薪o日本的垃圾非?？臁?/span>?Pinch Media的（現(xiàn)在亂舞）研究表明，免費(fèi)軟件主要用于前10天以下的安裝，然后迅速關(guān)閉后70天徑約2％的安裝基礎(chǔ)。?繳付的申請(qǐng)使用更快脫落。
• 移動(dòng)用戶(hù)更喜歡應(yīng)用程序?yàn)g覽器：
  2010年10月一個(gè)系統(tǒng)的研究主題?表明，?手機(jī)用戶(hù)喜歡的網(wǎng)站網(wǎng)頁(yè)內(nèi)容的幾乎所有類(lèi)型?。?在上面只列在其中的應(yīng)用程序類(lèi)別來(lái)進(jìn)行社交，音樂(lè)和游戲，這是有意義的，因?yàn)檫@些應(yīng)用通常需要的功能充分利用本地的平臺(tái)。

所以，如果我們希望創(chuàng)造一些更持久，可以在一個(gè)高速發(fā)展適合我們和我們的客戶(hù)，那么我們需要看看，并遠(yuǎn)離移動(dòng)應(yīng)用?向移動(dòng)網(wǎng)絡(luò)?。?我們必須執(zhí)行好設(shè)計(jì)，周到的內(nèi)容和固體整合，以配合我們的便攜式的Web網(wǎng)站向社會(huì)基礎(chǔ)設(shè)施。

結(jié)論

完全便攜式Web可能不會(huì)在這里的權(quán)利，但它將會(huì)在我們知道這一點(diǎn)。?由于它與瀏覽器大戰(zhàn)，開(kāi)發(fā)人員和設(shè)計(jì)人員必須重新教育自己成為這些變化背后的驅(qū)動(dòng)力，敢于放手目前的設(shè)計(jì)思想和工作，以樹(shù)立新的標(biāo)準(zhǔn)。?了解如何創(chuàng)建采取了Web的未來(lái)形態(tài)充分利用所有平臺(tái)和網(wǎng)上準(zhǔn)備存在將使我們不僅是技術(shù)，而是因?yàn)槿藗冋l(shuí)可以提供真正的價(jià)值給客戶(hù)。