開發者和設計師如何搶占移動互聯網先機
原創【51CTO獨家譯稿】當前無論你身在何方，Web訪問都是十分重要的。讓你的客戶可以方便地訪問你的Web站點是至關重要的。讓你的Web站點在一臺計算機上擁有良好的用戶體驗和讓它在移動平臺上可用完全是兩回事了。
移動互聯網是開發者和設計師的下一個戰場，同時它也應該是廣告商應該認真考慮的領域。常規的Web站點在手機上不會被裁剪。要讓你的Web站點可以在移動網絡上訪問，需要做一些額外的工作。如果你做了這個前瞻性的工作，那么你將會在這次大潮中占盡先機。
在本文中，我們將會看到一些可以讓你的移動Web站點正常工作的基本技術。
傳統的Web站點在移動設備上無法正常工作
當人們通過手機訪問常規的Web站點的時候，為什么這些常規的Web站點不能正常工作呢？好的，讓我們多談一些這方面的內容。傳統的Web站點是針對傳統的瀏覽器創建的，移動設備沒有這樣的瀏覽器或功能；移動設備比較小，它們的外觀和尺寸也不盡相同，所以，它們可能無法顯示常規的Web站點。你的移動Web站點應該是常規的Web站點的“簡化版本”。
幾乎所有的Web站點都可以從移動版本中獲得好處，但是某些類型的站點可以獲得更多的好處，就像Andy Scherer在EzineArticles.com上的一篇文章中寫道的那樣：
◆提供本地服務和超級本地服務的站點
提供本地服務和超級本地服務的站點（例如餐館）可以從移動Web站點中獲得明顯的好處，因為要和公眾進行溝通，這是一種高效而友好的方式。
◆電子商務站點
電子商務站點是有傾向性的；它們必須要接觸到客戶，然后盡可能地讓他們購買產品。
◆以新聞為主導的Web站點和博客
以新聞為主導的Web站點和博客都希望讓它們的內容保持***，有時，需要及時地進行“爆料”。一個移動Web站點可以幫助它們實現這個目標。
很明顯，對于每個企業來說，擁有一個優秀的Web站點都是頭等大事。為你的Web站點創建一個移動版本是具有一定的前瞻性的，這可以讓你在競爭之中領先一步；毫無疑問，這是企業站點的未來。
如果你還是不相信，你可以繼續閱讀這篇文章。這是可以說服你的幾件事：
◆iPhone在移動市場中占有很大的市場份額——但是它無法顯示任何基于Flash的組件（傳統的Web瀏覽器是可以做到這一點的）。
◆根據來自于AdMob（移動廣告網絡的***之一）的統計數據數據，在2010年4月，全球差不多有4000萬個Android和iPhone移動設備正在使用中——這只是所有主流的移動設備中的兩個而已（也就是說，這個統計數據不包括Blackberry等移動設備）。
在2010年***季度，總共賣出了5470萬部智能手機，這個數據比去年同期增長了56%。
◆許多人開始通過它們的移動設備來訪問互聯網了。Web市場正在急速地增長和膨脹，雖然傳統的Web瀏覽器還在使用，但是，比起計算機來，它們在移動設備上使用得更多一些。
有什么教訓需要吸取嗎？
如果你使用一個基于Flash的設計，并且你的Web站點沒有移動版本，那么你可能會遇到一些麻煩。你的移動訪問者們可能無法看到完整的Web站點。
如果你的Web站點圖形化比較嚴重，或者使用了多媒體，或者功能比較復雜，那么它在移動設備上的表現是不會太好的。要時刻牢記：并非所有的移動用戶都使用***的高速數據網絡。此外，移動設備的處理器也不像家用或辦公用PC的處理器那樣強悍。
雖然簡潔的，干凈的，不花哨的Web站點無需做什么額外的修改就可以在大多數的移動設備上正常工作，但是測試還是十分重要的。在移動瀏覽器上，輕量級的符合標準的Web站點肯定比重量級的Web站點表現的要好。
我怎樣進入移動領域？
為你的Web站點創建一個移動版本并不想聽上去那么困難。要在一個移動設備中顯示一個現代的，帶有CSS代碼的Web站點，通常可以通過創建一個無CSS樣式的版本，然后使用自動的代碼把用戶轉向這個新版本來實現。一些提供內容管理系統（content management systems）的Web站點（例如：WordPress）有現成的移動模板，這樣的話，可以省去這個麻煩的過程。在其他更復雜的應用場景中，這可能是一個比較大的挑戰。
有些Web站點的站長只對他們的站點的主要區域進行改造，讓這些區域對移動用戶更加友好。這個選擇也是你的***選擇。如果可能的話，盡量咬緊牙關這樣做。你的移動訪問者們肯定會因為你的站點可以支持他們的設備而心懷感激的。#p#
為什么你的Web站點要對移動用戶更加友好？
由于移動設備的便利性，以及即時滿足性（現在的用戶基本沒有什么耐心），移動產業正在穩步地增長。這是必須針對移動設備優化你的Web站點的5個主要原因。
考慮一下你的客戶
通常來說，傳統的Web站點內容都比較豐富，一般都包括Flash和視頻內容，這些內容在移動平臺上是無法正常顯示的。如果你不為你的站點提供一個移動版本，那么你的站點的用戶體驗會比較差，并且很有可能會造成用戶的不滿，這只會有一種結果：措施銷售良機。
移動設備上的搜索
當你在移動設備上進行搜索的時候，這個查詢會訪問針對移動內容做過優化的索引。移動搜索還處于“幼兒期”；索引相對少一些，這意味著幾乎沒有其他的Web站點會和你進行競爭。如果對你的Web站點進行優化，創建一個移動版本，那么這會讓你的排名更加靠前的，在將來，當索引數急劇增加，競爭日漸激烈的時候，你的排名也會很高的。實際上，在將來，你有更好的機會來提高排名，因為在這個領域，你已經形成品牌優勢了。
在競爭中處于優勢地位
在2010年年底，移動用戶的數量有望突破10億大關，可以預見，在接下來的幾年里，移動Web的普及情況會達到一個***的程度。如果你沒有對你的Web站點進行優化，并且沒有注意到現在的統計學數據的話，那么你一定會錯過這次可以開拓流量之源的大好良機的。
以“移動達人”為目標用戶群
你肯定見過他們：如果你把這些人和他們的BlackBerrys, PDAs 或 iPhones分開哪怕一分鐘，那么他們就活不下去了。這些“移動發燒友”使用移動設備的時間比他們使用PC的時間要多，他們更喜歡通過他們的移動設備來訪問互聯網。一般來說，他們是移動領域的“一等公民”，他們不在乎花費更多的錢，一些研究表明，應該以他們為目標用戶群，除此之外的其他方式都是在浪費時間。如果你還沒有構建一個移動Web站點，也沒有相應地對營銷策略進行調整的話，那么你是無法抓住這個高消費的用戶群的。
移動廣告的點擊率(CTR)更高
在最近這幾年里，各種研究都表明，和在線廣告比起來，移動廣告的點擊率(CTR)更高；移動廣告的點擊率在5%到15%之間，而基于計算機的點擊率平均只有2%。在互聯網營銷這個領域中，移動領域還是一個新興的領域，它給你提供了大量的機會，可以讓你的營銷效果邁向一個新的臺階。#p#
讓你的Web站點移動化
設計一個移動Web站點有一套特殊的流程。構建一個移動Web站點的最容易的方法是對你現有的Web站點進行修改，讓它可以兼容移動設備。在開始之前，有一些原則和要點需要首先搞清楚。
布局
瀏覽一個移動Web站點可能會比較耗費時間，所以，應該把最重要的信息放到頁面的頂部。在布局方面，應該注意以下這些要點：
Logo：Logo應該是引人注目的，但是請注意它的體積；你要確保它不會超過2KB，因為在移動網絡上載入圖像需要花費很長時間，你也不希望對某些人來說，你的站點看起來不完整吧！
Web站點導航：讓左右滾動的范圍最小化；在一個手機上，這很難做到。作為一個替代方案，你可以把你的內容放在一個單獨的列中。對于輸入來說，大多數的移動設備都會提供一個小型的，或虛擬的“QWERTY”鍵盤，但是它是很難使用。如果你想讓你的Web站點對移動用戶更加友好的話，你必須提供一個完整的導航系統。
內容：在你的移動Web站點上的信息應該是容易閱讀的，同時，它們也應該是容易導航的，你的Web站點不應該讓訪問者花費太長的時間來思考，因為在瀏覽你的Web站點的時候，他們隨時都有可能離開。應該只選擇那些應該被顯示出來的內容，并且通過調整文本大小的方式來設計菜單，免除用戶進行縮放的麻煩。在排版方面，可以考慮使用標頭來控制字體的大小。
如果你想把圖像放到移動Web站點上，應該用JPEG, GIF 或 PNG 格式的圖片；這些格式的圖片相對來說，體積會小一些。壓縮的圖片可以避免縮放，同時，還可以讓用戶在瀏覽的時候把圖像關掉。這些格式的圖像都可以使用“alt”文本屬性。
編碼
移動Web站點可以用XML, XHTML 或 基本的 HTML 和 CSS來編碼。在用target keywords增大內容的可用性的時候，title標簽，description meta標簽，heading標簽和文件名的定義都應該小心一些。
當提到編碼的時候，許多缺乏經驗的移動界面開發者都會很頭痛，下面這些技巧可以幫助你擺脫這些煩惱。
確保你的代碼是合適的，并且是100%有效的，因為大多數移動瀏覽器都不像對應的PC瀏覽器那樣強大。
要想看到你的布局在各種現有的移動瀏覽器上都是什么樣子并不是一件很容易的事情。解決這個問題的一種方法是使用“動態布局”，這種布局方式可以針對不同的屏幕尺寸自動地對布局進行調整。為了達到這個目的，應該避免用像素來設置寬度，取而代之，應該使用百分比或ems來設置寬度。
樣式表單：你可以針對不同移動設備創建更好的用戶體驗。例如，對于使用手持設備來瀏覽你的Web站點的用戶來說，你可以在你的Web站點的<head>中使用如下代碼：
- <link rel="stylesheet" href="handheld.css" type="text/css" media="handheld">
廣告
在你的移動站點或主站點中，不要讓廣告充滿整個頁面。
應用程序
如果你的用戶群比較龐大，可以針對不同的移動設備創建專用的應用程序。如果你為特定的手機創建了一個專用的應用程序，那么你無需再擔心花哨的腳本了，你可以隨意地對這個應用程序進行強化。
頁面的體積
當為一個移動Web站點指定一個樣式的時候，盡量讓它簡單一些，同時，讓頁面的體積更小一些。對于一個移動頁面來說，頁面體積的上限是25KB，所以，為了適應各種條件，如果可能的話，***使用小于10KB的頁面。要時刻謹記：在按照KB來計費的情況下，用戶通常會做一些數據計劃的。
頁面的鏈接
一個設計優秀的移動Web站點會帶有“返回”按鈕和鏈接。在一個手機上進行導航并不是一件容易的事情，許多手機都沒有“返回”按鈕，所以提供“返回”按鈕和鏈接可以幫助訪問者擺脫各種“死胡同”。所以，要確保每個頁面都可以鏈接到另外一個頁面。
測試
應該在多種設備上（***是在不同的平臺上）對你的Web站點的移動版本進行測試；這是確定你的Web站點可以提供良好的用戶體驗的唯一方法。如果你無法使用多種設備來進行測試，可以使用基于Web的模擬器（例如：iPhoneTester.com）#p#
可以幫助你完成這個任務的一些應用程序和工具
讓我們來討論一些具體的技術，使用這些技術，你可以創建一個干凈的，看上去比較專業的移動Web站點。
MoFuse
MoFuse通過你的Web站點的RSS feed來創建一個移動版本。這個名字的意思是：“Mobile Fusion”，它提供了一個平臺，這個平臺可以讓企業，博主和其他的發布者提供更好的移動用戶體驗。
MoFuse可以讓你充分地進行定制：你可以改變顏色，也可以為你的移動Web站點添加新的頁面，Logo和鏈接。它使用它自己的跟蹤工具（和Google Analytics類似）來保存訪問者的訪問痕跡。相對于0元的價格來說，它可以滿足你的一切需求。
MoFuse的官方站點：http://www.mofuse.com/
Mobify
Mobify可以快速地對一個Web站點進行優化，讓它更適合通過移動設備來訪問。內容發布者，Web設計師和博主都使用Mobify為現有的Web站點設計外觀和可用的移動布局。
Mobify的官方站點：http://mobify.me/
Mowser
Mowser通過獲取可以在PC上正常瀏覽的HTML頁面，然后針對移動設備對它們調整來讓Web站點移動化。在轉換過程中，Mowser通過一種可以預知的，線性的方式來轉換一個頁面。為了確保質量***，最有用的Web頁面可以在移動設備上顯示，Mowser可能會對某些圖像，文本格式，或某些方面的頁面功能，以及把訪問者轉向移動版本（如果存在的話）的方式進行修改。
Mowser的官方站點：http://mowser.com/
Wirenode
Wirenode是一個非常基礎的移動Web站點創建工具。定制化的選項也比較有限；Wirenode提供了一些現成的模板，可以對Web站點做一些小的修改（例如：改變字體顏色和背景顏色）。它不支持自定義域名，但是它提供了一個跟蹤工具。
Wirenode的官方站點：http://www.wirenode.com/
Instant Mobilizer
Instant Mobilizer是dotMobi公司的產品，它可以在一眨眼的功夫里把你的Web站點移動化。它為現有的Web站點提供方便而便宜的服務，讓這些站點可以通過移動設備來訪問。Instant Mobilizer可以通過調整圖像的尺寸，文本格式和插入其他可以對移動設備提供更好的用戶體驗的功能的方式，來確保你的Web站點可以在任何一部手機上都正常工作。
Instant Mobilizer的官方站點：http://instantmobilizer.com/
Mippin
Mippin也是一個把RSS feed轉換成移動Web站點的工具。它比較簡單，但是定制化選項十分有限；雖然你無法使用自定義的域名或跟蹤移動訪問者，但是你可以上傳一個Logo，改變字體顏色和類型，以及讓站點盈利（保持你現有的利潤水品）。
Mippin的官方站點：http://www.mippin.com/web/
Google Mobile Optimizer
Google Mobile Optimizer是讓一個站點移動化的最快方法。只需提供URL，它就會通過移出標頭和廣告以及調整所有圖像內容的尺寸等方式來優化這個Web站點，讓它可以通過手機來瀏覽。這實際上是一個即時的創建工具。它無需注冊，也無法對外觀進行定制。
Google Mobile Optimizer的官方站點：http://www.google.co.uk/gwt/n
MoSync
MoSync是一個用于開發移動應用程序的SDK（Software Development Kit），它是建立在通用的編程實踐和標準（例如：完整的Eclipse集成和C/C++）基礎之上的。使用MoSync，你可以很容易地開發出一些相對復雜的應用程序，只需幾次點擊，就可以為許多不同的移動平臺和數百個不同的移動設備構建出專用的應用程序。
MoSync的官方站點：http://www.mosync.com/
Wapple
Wapple為移動Web站點和服務可以在所有的移動瀏覽器上正常工作提供了技術和解決方案。在Canvas方面，Wapple擁有先進的技術，這些技術可以讓你用極低的成本來完成這個任務，我們是移動Web設計，移動用戶體驗和移動廣告方面的專家，在這些方面，我們提供了一個完全托管的服務。
Wapple Architect可以讓開發者使用一種革命性的編程語言，快速而準確地對現有的Web內容和應用程序進行調整，讓他們對移動設備更加友好。
Wapple Exhibit可以對你的移動Web站點進行調整和優化，確保它們在所有的移動設備上都可以提供***的用戶體驗和完整的品牌忠誠度。
Wapple的官方站點：http://wapple.net/##p
WordPress插件
對于那些使用WordPress平臺的人來說，有很多免費的和付費的插件可以使用。下面介紹一下其中的一些插件。
MobilePress
你可以對這個插件進行設置，讓它可以針對特定的設備模型或移動瀏覽器（例如Safari for iPhone 或 Opera Mini）顯示特定的主題；你的博客可以根據設備的特性來顯示。這個插件允許主題開發者們為WordPress博客開發他們自己的移動主題。
（MobilePress的官方站點：http://wordpress.org/extend/plugins/mobilepress/
WordPress Mobile Edition
WordPress會自動探測出使用移動瀏覽器的訪問者，然后自動地載入你的Web站點的移動版本。你可以在“Settings”中編輯移動瀏覽器的列表。這個插件可以針對特定的移動瀏覽器或設備（包括：iPhone, Windows Mobile 和 Opera Mini）載入特定的主題。
WordPress Mobile Edition的官方站點：http://wordpress.org/extend/plugins/wordpress-mobile-edition/
WordPress Mobile Pack
這個插件也提供了移動識別和設備適應的功能，提供了一些現成的widget。通過這些功能，它可以自動地調整圖像的尺寸，自動地把文章或博文分到多個頁面中。它提供的管理員面板可以讓你更加輕松地管理你的Web站點，那個廣告widget可以在你的Web頁面的移動版本上顯示移動廣告或AdSense。
WordPress Mobile Pack的官方站點：http://wordpress.org/extend/plugins/wordpress-mobile-pack/
WPhone Admin Plug-in
使用這個插件，你可以通過一個移動瀏覽器來管理你的WordPress。它提供了兩個管理員界面。其中一個是針對iPhone，iPod和其他支持JavaScript, CSS, AJAX和滑動菜單的設備的。另外一個“精簡”版本是針對不支持JavaScript的手機的。這個插件可以根據用戶使用的瀏覽器，自動地在完整版本和精簡版本之間進行切換。
WPhone Admin Plug-in的官方站點：http://wordpress.org/extend/plugins/wphone/
Wetomo WordPress to Mobile
Wetomo可以對復雜的Web站點進行簡化，讓它們可以通過手機來訪問。這個插件可以對手機進行探測，在你和用戶之間充當代理的角色，對博客進行修改，讓它更適合通過這個手機來瀏覽。
Wetomo WordPress to Mobile的官方站點：http://wordpress.org/extend/plugins/wetomo/
Mobile Admin
這個WordPress插件可以讓你用一種用戶友好性較高的方式在移動設備上訪問管理員界面。它是專門針對iPhone 和 iPod Touch來開發的，在基礎水平上，它支持大多數其他的瀏覽器。Mobile Admin支持大多數的WordPress管理員功能（例如：自動保存，添加標簽以及評論審核）。
Mobile Admin的官方站點：http://wordpress.org/extend/plugins/mobileadmin/
總結
關于移動技術是否，以及何時能進步，讓用戶可以訪問完整的Web站點的爭論還在繼續。我們不應該假設所有人的觀點都是一致的。現在確保你的關鍵性內容可用可以幫助你在將來獲得你想要的流量。當那些現在可以訪問你的Web站點的移動版本的人可以訪問完整的Web站點的時候，他們還會回來的。
【51CTO譯稿，非經授權謝絕轉載，合作媒體轉載請注明原文出處、作者及51CTO譯稿和譯者！】
原文名稱：How to Create a Mobile Version of Your Website
原文地址：http://www.instantshift.com/2010/12/20/how-to-create-a-mobile-version-of-your-website/
【編輯推薦】
