網頁設計未來是什么？

網頁設計未來是什么。?這是一個大課題。?我們從哪兒開始的時候我們談論的東西不在這里還說話？

在這篇文章中，我們將看一下未來的網絡可能看起來像，以及我們如何能夠適應我們目前的技能，這種新的環境，以及如何創建是建立在一致的核心，適應流體網站的限制和設備的功能上，他們被視為。?我們還將看看我們的理念和方法，如何設計網站應該演變：從最簡單的設計向上設計，而不是從最富有的網站了。

但在我們達到目標，讓我們開始一個問題。?我們所說的什么“未來網絡”？

什么是未來網絡？

早在舊天：類似谷歌查詢將采取30天。?圖片：?dullhunk

一個字，我聽到別人比任何此刻正在?移動?。?移動網站，移動設備，移動應用程序：清單似乎繼續下去。?事實上，大膨脹的意見說，未來的網絡?是?移動的。

但是，盡管這一切，?只是集中行動是不能解決問題的?。

我們的方式接入互聯網正在改變，那我們可以肯定。?而在短期內，這也意味著更多的移動設備。?但長遠來說，我們顯得有點寬。?托馬斯胡森，對于Forrester的高級分析師，他很好地總結它在?二千零十一移動趨勢?的報告時，他說：“長期?移動?將意味著更多的不是移動電話?！皬拈L遠來看，我們應該用這個詞，而不是手機是?便攜式?。

便攜式為什么？?怎樣改變為了讓這個互聯網？

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

其次，我們使用互聯網的方式正在發生變化。?我們正?越來越多地面向我們的全方位服務的在線體驗?，而不是搜索引擎。LinkedIn服務，如Facebook，Twitter和正在成為我們生活的中心線上，我們融合他們創造了自己獨特的網站內容：生命趕快注冊Facebook，為我們的社會生活中的專業，LinkedIn為我們，Spotify的音樂，Netflix公司的電視和電影。?我們看到一個非常不同形式的信息消費在這里，我們希望在其中的信息被推向社會的圈子，我們借著我們，而我們的人民的信任。?我們正在遠離信息檢索的舊模式，在此我們將利用搜索引擎尋找信息和鏈接。

一些服務，這些都依賴于一個單一的設備，但是越來越多的人提供他們在多個平臺，包括桌面，移動應用服務，互聯網功能的電視和。?就在上個月，三星創建了?第一個啁啾冰箱?。?好吧，這未必是最偉大的Internet連接使用一個，但它是一個。例子，如何將這些服務也開始散開，遠離桌面，到日常生活中我們?Evrythng?，一啟動，目前處于測試階段，是工作在一個平臺上，這將使?任何?有形物體的在線狀態，有效地使互聯網成為無所不在的實體包含任何數據，可以在任何地方和食用。

鑒于這些變化，是很重要的，我們不要過于我們的方法來創建新的Web內容僵化，我們不能讓我們自己來思考的設備條件。?現在，我們生產的移動應用程序和標準的網站，以提供我們的服務，但在數年時間，我們可能會在一個完全不同的景觀來看，一個地方的確切位置，以及如何知道我們的內容被視為是不可能的。?我們的內容必須是可移動的，它可以顯示任何地方的感覺。

媒體營銷有回應手機媒體越來越多地使用。?（圖片：?birgerking?）

我們也可能發現自己不得不決定是否集中在特定設備和渠道費用的觀眾數量少，或采取獨特的方法和服務于最廣泛的頻譜可能。

無論我們采取的路線，?有能力提供一個跨所有渠道一致的體驗是至關重要的?，和我們的能力為設計人員和開發人員理解的選項，并提供這種一致性為我們的客戶將是至關重要的。

所以，這是未來的網絡，一個米什通道的設備和醪。?聽起來不錯，不是嗎？?讓我們回到關鍵詞，?可攜性?。

我們如何設計為便攜式網站？

問問自己，你的最新項目將如何應對在下列情況下：

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

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

機會是，除非你真的想過這個問題（如果你有，那么你可能不需要閱讀這篇文章），您的網站將無法在所有這些案件。

當便攜式網頁設計，我們需要知道的三件事情：設計，內容和集成。?以正確的方式走近，我們可以創建網站，是最廣泛的用戶群在訪問和提供一致的體驗，無論訪問方法。

是否一致？?怎么樣？

當面臨著一個規格眾多不同的設備設計，所有的最后一個目標，可能會想到是一致性，并有很好的理由。?然而，我們?應該?將努力實現的一致性。?沒有設計，但在經驗。

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

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

比方說，我們的用戶是在工作，是我們的一個iPad瀏覽網站。?他們的工作，通過精心設計的導航層次去的內容，他們想讀的作品，但他們是由一個電話打斷了，不得不停止瀏覽。?后來，在回家的火車，他們再次訪問該網站，通過他們的電話本的時間。設計的視覺元素會有所不同，根據需要，但是重要的是，他們的路線走上尋找內容應該是完全一樣的，他們所讀的內容應該當他們到了那里。

這種體驗的一致性，是什么讓我們創造一個完整的移動網絡和用戶體驗偉大的網站。

我從哪里開始？?以及如何將我知道當我到達那里？

如果一個一致的經驗是我們的目標，這引出了一個問題，我們應該建立一個移動網站，鱗片上或桌面網站，降低？

答案是?沒有?。?我們應該努力建立一個單一的設計，可廣泛用于各種設備沒有改變。?但實際上，至少從目前看，我們應該從最簡單的網站和的工作。

為什么呢？?讓我們回到了介紹。?在移動網絡，我們沒有對我們的內容將被如何使用或瀏覽控制，因此我們必須拋棄的想法，我們正在尋找一個特定的設備或設備的尺寸設計。?我們必須以不同的方式方法對我們網站的設計，在其中我們創建的核心內容或服務第一。?畢竟，這將決定我們的網站到了最后，而不是視覺元素。?起初，這似乎很難，但我們應當看到，桌面網站開發的最佳做法很多持有真正的便攜式網絡，特別是結構方面的內容。

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

概括來說，這里是關鍵的規則時，要記住通過一個便攜式網頁設計工作：

1. 網站應該提供盡可能最廣泛的觀眾;
2. 網站應該包含相同的內容只要有看的，在可行的情況;
3. 該網站的結構應該是無論它被認為是相同的;
4. 其內容應顯示在一個適當的方式，是其環境。

一個網站能夠滿足所有這些標準將緊貼在未來便攜式網絡。?但是，我們如何著手使我們的網站上做呢？

設計為可移植的Web

使用Web標準設計：即HTML5的

好消息是，這兩個最常見的移動，Webkit和歌劇院，都支持HTML5的瀏覽器引擎非常好; WebKit已經2007年11月開始支持HTML5的至少部分。

使用標準和描述標記注冊在我們的網站將擁有在大多數設備提供一致的產出的效益。?和HTML5的擴展能力，提供媒體，動畫和本地存儲使之成為移動應用的絕佳選擇。

這三種能力允許HTML5的網站，通常與重現本地移動應用相關的行為，結束兩國之間的經驗差距。?現在視頻播放本機通過使用視頻標簽HTML5的，而動畫可以發揮使用HTML5的畫布。?最后，本地存儲可以讓一個網站，存儲設備上的類似數據庫的信息，功能齊全的網站，允許脫機使用。

YouTube上，Netflix和Gmail的所有HTML5的也有他們的網站是專為移動體驗，并采取了HTML5的新功能的優勢版本。?他們是一個偉大的起點對于任何開發誰想看什么就可以實現點。

HTML5是現在已經可以用于發展，而且也沒有理由你為什么不能馬上開始。?很多優秀的資源和教程可以幫助您入門：

• HTML5的潛入
  作者：HTML5的標準和一個很好的起點概述。
• HTML5的演示和實例
  了載HTML5的一系列示威活動的能力，帶源代碼。
• HTML5的畫廊
  一個創建的網站展示在HTML5。

為了讓您的項目中開始使用HTML5的，你可以利用任何的發展環境，支持它??的頭號優勢。?最完整的實現是通過Adobe的Dreamweaver的CS5;一HTML5的支持包可以下載，它擴展了內置的編輯器。?Aptana的也支持在其測試版的Aptana Studio 3 HTML5的。?鏈接是提供在本文章的末尾。

從簡單開始，逐步建立

思維方式的思考便攜式干凈和簡單。?寬屏幕尺寸變化從一個40英寸1920 × 1080像素的肖像導向在320 × 240像素的手機屏幕上運行的液晶意味著我們必須創造設計，是可擴展性和適應性。?我們也必須認識到，有人可能會通過一個遙控器或觸摸屏上的脂肪短粗的手指交互。?越簡單的設計，它會更加適應。

自下而上的概念化男性意識。?專注于基本要素，讓他們周圍的環境演變。?圖片：?安德烈Bocan

創建您的第一個基本的網站結構，并添加只有你的核心樣式，那些適用于所有設備和布局。?開始簡單的給我們一個偉大的基礎上建立。?從本質上講，我們開始從最基本的經驗，即使是最小的移動設備上提供了與我們的工作方式到桌面瀏覽器的能力更強。

使用?@媒體?環境中查詢CSS將讓您的網站功能的桌面瀏覽器和認識到這些額外的擴展，呈現出更全面，更具交互性的體驗在可能的情況。

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

忘了專有

不管你做什么，遠離專有技術，因為這是一種方式，以保證不一致的經驗。?Flash和Silverlight作為發展平臺是生活在借來的時間。?微軟已經表示，它將?停止Silverlight開發?集中于HTML5的，而閃光燈正在使用的機制主要是由于游戲開發平臺和視頻傳輸。?如果我們要創建真正的跨平臺的網站始終顯示在所有設備，則Flash和Silverlight是不明智的選擇，因為我們不能確定，他們將設備安裝在用戶的。?不是說沒有閃光的地方，作為一個游戲平臺，基于Web的，它是目前無可匹敵的。?這是關于擇業手頭最好的技術的。

要警惕的JavaScript ...當其時

壞消息是，我們現在可能要犧牲一些理所當然 ??的事情，我們需要的。?我們必須學會設計未知屏幕尺寸和比例，并允許內容需要流動。?少想設計結構和頁面布局和?更多的?內容?結構。

我們可能不得不放棄使用JavaScript和AJAX（桌面發展兩主食），以創造更多的涉及用戶體驗，因為一些低端設備將不具備硬件肌肉處理復雜庫。?修剪頁的重量也將是一個優先事項，因為我們不能確定最終用戶有寬帶高速接入互聯網，所以大型圖書館將是不可接受的開銷。

這是特別是在最近的“散列砰”的趨勢，重要的是，開始與Gawker的媒體公司在其網站上有爭議的重新設計。?該網站（包括Gizmodo的，Lifehacker和Gawker的）提出了更多的應用程序的體驗給用戶，但不要依賴于JavaScript的內容傳遞等。?實際上，該網站由一個單一的頁面是動態的內容與要求加載，而不是他們以前由多個頁面。?任何用戶的瀏覽器無法處理的JavaScript，無論何種原因，將無法瀏覽該網站，它們只有一個空白頁的歡迎。

然而，許多庫，現正在發展成為輕巧便攜設備上可用。?jQuery有一個?圖書館阿爾法其移動?測試可用。?該項目已在Adobe支持Mozilla和行業的球員 ??，比如黑莓，所以它是值得密切注意的。

JavaScript支持將成熟的設備更現代化的平臺上的舊設備和服務采取了全球行動。?但對于目前，保守的方法將意味著其使用為您的工作更廣泛的潛在觀眾。

測試，測試，然后再次測試

在移動網絡，有一個很好的機會，我們將無法對每一個可能的測試平臺上，我們的內容將被視為。?但是，這并沒有帶走你的需要測試。?我們必須和測試。

歌劇Mini的模擬器可以讓你在一個虛擬瀏覽器測試您的網站。

每個平臺購買的設備將是廣大的設計師望而卻步。?但是替代品可供選擇。?對于大多數的主要平臺，可用的設備模擬器是模擬瀏覽體驗。?見這個鏈接的文章結尾處的參考資料一節。

在另一端的規模，是付費服務可從?的DeviceAnywhere?，使您可以測試您的網站在2000年的手機了。

不幸的是，沒有互聯網電視仿真器至今，但谷歌已發布了指南，?電視設計的谷歌?。

最后，當然，我們絕不能忘記我們的桌面瀏覽器上測試了。?至于為便攜式網頁設計的目的是建立一個跨為盡可能廣泛的設備設置單一的經驗。?僅僅因為用戶可以瀏覽網頁，在許多方面并不意味著他們將停止使用他們的臺式機，筆記本電腦或上網本。?要利用你的優勢時，您的瀏覽器測試由大小只是為了確保你的設計規模和流動得當。?模擬器將提供一個你在其他設備上渲染你的網站準確。

丑小鴨？

所以，請問移植的Web違抗的優秀設計的容貌和踢沙？?當然不是。?偉大的設計不僅是視覺形象，而是清楚地表達信息，其中包括通過創新和深思熟慮的排版，布局和導航層次結構和重要性。?這使我們要...

網站內容為便攜式

內容再次國王。?的興起?Quora?應該足以說服任何人的，它是內容單純的服務為基礎的。?在移動網絡，這是雙重的事實。?通過削下來的設計元素，你甚至把更多的內容集中。

了解什么是重要的

確定什么是最關鍵的用戶應該是您的第一個任務在開發一種便攜式的網站。?有可能不適合復雜的導航空間，尤其是在較小的屏幕，所以要簡單。?比較YouTube的起始頁的移動和桌面版本：

YouTube的標準的主頁。

YouTube的HTML5的基于主頁的作品出色的小屏幕。

創建一個堅實的信息層次

構建我們的內容很重要，既可讀性和搜索引擎優化。?理解的內容，我們提出必須建立明確的信息通過它來引導層次的用戶。

通過你的地圖內容的用戶可能人次。?應該有一個明確的路線，每一項內容，首先是最高級別的信息種類和每次點擊獲得更多的顆粒。

約翰劉易斯的移動網站有一個明確的信息層次，以幫助導航。

一個很好的例子是約翰劉易斯，英國的百貨公司的移動網站。?從主頁上，您可以很容易地深入到各個部門，并從那里向個別產品。?它的簡單，而且也意味著對任何特定的網頁資料量不是很大，你知道你的確切位置在任何時間層次結構。

保持內容可

即使用戶在桌面上沒有，不視為二等公民。?提供盡可能多的內容是可行的。?而對于有哪些內容，目前它適當。?刪除以下內容：

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

同時，我們要刪除不必要的內容，我們不希望刪除太多。?在下面的例子中，我們有一個簡單易用的網站，而是一個有沒有深度。?第一個層次的信息，提出了很好，但在頁面的底部，為公司的服務標題應該鏈接到下一級的信息。?事情是這樣的，如果我想了解更多，我被迫訪問非優化的網站。?這是一個不好的用戶體驗，因為它使得尋找什么，我需要更多的困難。

Sapient公司硝基的移動網站展示真的很好，但削減從全網站的大量信息。

網絡集成和便攜式

如果服務成為新的互聯網樞紐，保持與這些服務我們的網站變得極為重要。

保持它的模塊化

服務將來去（雖然主要的會肯定會保持很長一段時間沒有...是的，我看著你，臉譜看），所以讓您的模塊化設計。?能夠融入新的服務，他們來上網，并刪除他們那些在路邊倒下將確保您的內容提供給盡可能多的觀眾。

我們的目標是可以很容易地把你的服務內容，從而在多個?網站的內容整合成的織物?。?首先，這將是通過搜索引擎優化和社會共享。

讓您的內容搜索引擎友好

當人們訪問內容越來越少的社會和基于搜索的，搜索引擎仍然是巨大的流量來源。?保持您的內容，便于檢索格式化是必須的。Quora已經這樣做非常好，從而導致高排名在各大搜索引擎和產生下一代問答服務的流量。?搜索引擎優化可能是一些舊帽子，但作為內容的質量變得越來越重要，它會獲得新的生命。

Quora次與搜索引擎不錯，以極大的結果。

輕松地分享

SEO是重要，但是要通過OAuth的，OpenGraph和OpenID等服務的直接連接。?如果這不是一個適合您的選項然后在最低限度，為用戶提供一些方式來分享您的內容。?ShareThis的服務，如AddThis并使其易于添加共享功能;利用它們。?一個單一的鳴叫能產生大量的活動。?如WordPress當然，現代的發展和內容平臺已經內置此功能

這三個因素將共同將創建網站，這些網站?發現的，一致的和可用的?。?現在只有一個問題是提高其丑陋的頭...

怎么應用？?難道他們前進的道路？

應用服務是個大生意。?Gartner預測，移動應用程序商店的收入將?在2011年最高15元億元?。?這并不奇怪，谷歌，微軟，諾基亞和其他國家正在設法讓行動上。?但是僅僅因為是商業上的成功應用商店，是否意味著他們應該是我們的第一站時，網頁設計的未來？

讓我們來看看為什么一個人可能想創建一個應用程序：

• 易于購買，安裝，使用和丟棄
  可用的應用程序是如此，即使你的奶奶可以使用它們。?智能手機上安裝它們是平穩的過程，需要從用戶最少的參與。?而當你已經受夠了，只需刪除它，沒有一絲的應用程序仍然存在。?這是一個偉大的用戶體驗，期限。?這就是為什么蘋果公司目前正爭取通過MAC應用程序商店的完整的Mac應用程序相同的概念。?應用程序還規定，在大多數情況下，良好的用戶體驗與家鄉的控制和設計模式。
• 品牌聯想與鎖定
  Apps是設計用來做一件事，把它做好。?最成功的應用程序都是協會行使的品牌：“我想尋找網頁，所以我將使用谷歌應用程序”或“我要檢查在我的朋友，所以我將使用Facebook的應用程序?！蹦闫放平涷瀾贸绦蛲ㄟ^。?我可以很容易使用iPhone的Safari瀏覽器訪問Facebook和谷歌，但這些軟件可以很容易對我來說。?我被鎖進經驗，這是偉大的公司，因為他們的品牌得到種植面積在屏幕中間，我在家，在這種情況下，一個大?F?和一個大???。
• 錢
  關于應用程序最有吸引力的事情很多公司的利潤。?蘋果的App Store已經證明，貨幣化的內容是可能的。?即使是獨立的開發，使得在一個較短的時間內很多錢是可能的。

最新消息關于所有這些問題引人注目的是，他們沒有任何關系的信息消費。?他們都對品牌和用戶體驗。?不過，也有原因，你應該三思而后行：

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

所以，如果我們希望創造一些更持久，可以在一個高速發展適合我們和我們的客戶，那么我們需要看看，并遠離移動應用?向移動網絡?。?我們必須執行好設計，周到的內容和固體整合，以配合我們的便攜式的Web網站向社會基礎設施。

結論

完全便攜式Web可能不會在這里的權利，但它將會在我們知道這一點。?由于它與瀏覽器大戰，開發人員和設計人員必須重新教育自己成為這些變化背后的驅動力，敢于放手目前的設計思想和工作，以樹立新的標準。?了解如何創建采取了Web的未來形態充分利用所有平臺和網上準備存在將使我們不僅是技術，而是因為人們誰可以提供真正的價值給客戶。