對于很多人來說，移動設備，尤其是手機，正在迅速成為互聯網最熱門航線。他們希望能夠快速，方便地獲取信息，幫助他們在旅途中做出決策，包括是否光顧您的業務。
不幸的是，并不是每個小型商業網站在手機上運作良好。許多無法快速加載，證明難以導航，并使關鍵信息很難找到。
為了讓您的網站更多的移動友好的，請考慮以下三個步驟，它把一個優先考慮實用性，速度和輕松導航。
1.在蜂窩網絡上測試您的網站。
關閉手機的Wi-Fi連接，以便使用您的無線運營商的數據網絡。然后，啟動Web瀏覽器并鍵入您的商家網站的網址。
現在，開始計數。如果完全加載您的主頁需要5秒或更短時間，這是相當不錯。如果它是10秒或更多，有很大的改進空間。
如果您的網站首先顯示裝飾閃屏，視頻或大圖片，則不適合移動設備。這些項目需要額外的時間來加載和獲取有用的信息的方式。此外，如果您的首頁具有Flash動畫，它將不會在許多移動瀏覽器中顯示，您的網站可能似乎什么也沒有說。
如果您的手機只顯示完整網站的微縮版本，這意味著移動用戶必須捏合，縮放和滾動看看有什么。這是更多的工作，加上他們更可能意外點擊錯誤的鏈接或按鈕。當您的網站在移動設備上加載時，您的商家最基本且最重要的信息（例如地址，營業時間和電話號碼）應該立即可見。
要獲得最全面的結果，請對幾種類型的手機重復此練習。考慮讓您的朋友在觀看時通過手機訪問您的網站。觀察，但不要教導他們在哪里滾動或單擊。
2.從簡單的改進開始。
根據測試的結果，您的網站可能需要進行重大檢查或只是一些調整。如果重新設計似乎有必要，但是比你現在可以管理的更多，你可以開始一個快速和容易的修復。
如果尚未安裝，請將以下信息放在網站首頁的頂部：
商家名稱
簡要說明，如“稅務會計師”，“汽車修理”或“精致法國餐飲”
街道地址
營業時間
電話號碼查詢或預訂
電子郵件地址
鏈接到您的網站的移動版（我會在以后解釋）
此信息應顯示在任何背景或橫幅圖形上方，因此首先加載。畢竟，這是大多數移動訪問者想要知道的。
將此信息顯示為純文本而不是將其包含在圖像中有幾個優點。在大多數移動網絡瀏覽器中，只需點擊電話號碼即可開始通話。同樣，點擊街道地址即可啟動手機的地圖應用程序，點擊電子郵件地址即可打開移動電子郵件應用程序。如果您讓移動用戶更容易，他們更有可能與您做生意。
3.構建一個用戶友好的移動版網站。
創建網站的移動版本可以相當簡單。如果您使用提供移動主題布局的工具構建您的網站，則只需選擇一個主題并將其應用到您的網站。WordPress的，最流行的網站建設工具之一，有許多免費和廉價的手機主題。
您還可以構建一個單獨的移動網站。有許多廉價服務的非技術人員都可以使用，包括Mofuse.com和Landr.co。兩者都允許您創建并發布基本移動網站，每月不到10美元。
移動網站的網址與完整網站略有不同。移動版本通常以“m”開頭。在常規網址之前，或以“.mobi”而不是“.com”結尾。如果移動用戶鍵入您的常規網址或通過搜索引擎查看指向您網站的鏈接，則移動版本應自動加載。
但這并不總是發生在每個電話。在您的網站頂部包含指向您的移動網站的鏈接，反之亦然，以防萬一。
不要為移動設備設計您的網站。相反，設計您的網站的所有設備，從小手機到巨大的客廳平面屏幕。
“幾乎每個企業都需要適應任何屏幕上有效地到達消費者手中，說：” 珍妮華納，全球公認的數字化設計和互聯網發展趨勢的顧問誰我對她的方式阿布扎比，在那里她拿了世界信息峰會大獎階段，趕上了分享多屏戰略，國際移動專家組成的龐大的觀眾面前。
“有兩種基本的策略來構建在所有設備上顯示良好的網站：響應和自適應，”她解釋說。“響應式網站是大多數小型企業的最佳選擇。以下是對含醉句句意味著什么的翻譯，以及您的企業應該采取的關鍵步驟。
至少，調整您的現有網站為今天的Web用戶。 沒有一個企業不能忽視這樣一個事實：超過十億人主要從移動設備訪問網絡。即使您尚未準備好重新構建網站，以便在所有設備上實現最佳顯示，也至少需要執行以下兩個步驟之一：
簡化您的網站設計。拉起你的網站在智能手機上（或查看它在谷歌的GoMoMeter），你可能會看到設計變更的需要。為了在移動設備上顯示出色，華納推薦更簡單的頁面設計，大字體大小，關鍵信息放在“折疊”，以及大，可觸摸的按鈕，防止手指。最低限度，她說：“只要把你的姓名，電話號碼和一個地圖的鏈接放在你的主頁左上角就可以輕松找到。
創建您網站的移動版本。作為編輯網站的替代方法，您可以使用移動網站設計服務創建并行版本，其中許多是免費或低成本的。“但是有權衡，”華納說。“如果您的移動網站有第二個網址，例如帶有.m子域的網址，搜索引擎可能會找到它，也可能找不到它。Bing和Google都主張使用單一網址方法來實現可搜索性和搜索引擎優化。“但是，如果你喜歡你的網站或不能重建它，創建一個移動網站鏈接到你的主要網站不是最糟糕的策略，”華納說。“最糟糕的策略是完全忽視你的移動用戶。
更好的是，重建您的網站，以便在任何設備上顯示。 這里是適應和響應網站設計的術語：
自適應設計是網站設計的高端。它由大型公司使用，大量投資，以獲得最大的在線觀眾。“美國航空公司是一個很好的例子，”Warner說，自適應設計“檢測和識別用戶的設備，然后生成一個與設備能力匹配的頁面。
響應式設計是使用CSS（層疊樣式表）技術創建一個網站，自動調整以除最早的手機的所有設備正常顯示的單一版本更實惠的解決方案。“一個敏感的網站允許你到達最活躍的Web受眾，”華納說。作為一個例子，她拉起來的網站波士頓環球報，點擊瀏覽器窗口的右邊緣拖動到左側，從全屏頁面縮小到一個地區智能手機的大小。無論她做多大的顯示區域，地球儀的響應設計看起來不錯，很容易閱讀。
致力于面向未來您的網站
當您準備使您的業務拖延已久的投資，把網站重新設計的高名單上的，所以你就可以通過自己的手機，平板電腦，個人電腦，電視到達消費者手中，或者很快，冰箱門，浴室鏡子等。
即使是DIY平臺，從GoDaddy.com到WordPress和許多之間，開始提供工作在各種屏幕尺寸的設計。“只要確定你使用的主題標記為響應，”華納說。
或者，她說，對于幾千美元或更多，專業設計師可以創建一個良好的定制網站，“除非設計師不知道這個詞是響應，在這種情況下，你需要一個不同的設計師。
最后，一旦您獲得了技術正確，請注意創建偉大的網站內容。“記住，”華納說，“特別是在移動設備上，人們訪問您的網站有三個原因：節省時間，與他人聯系，浪費時間。讓他們快速，方便地訪問，將您的聯系信息放在前面和中心，給他們指向地圖和路線的鏈接，然后添加視頻或其他娛樂內容，讓他們在您的網站上逗留只要他們想留下來。
這是如何面向未來的您的網站。
移動導航菜單設計中的一個共同挑戰是導航菜單。如果該網站有很多的部分或網頁，它變得具有挑戰性，將所有的項目壓縮成一個小的移動分辨率。導航最有可能結束運行成多行或按鈕堆疊在頂部彼此。所以我要回顧一些設計解決方案，提供了一種快速教程如何創建一個jQuery移動導航。
問題
下面的截圖顯示移動的導航布局問題。如果導航有3個或4個按鈕，如網頁設計師墻，那么導航將不會包成2行。但如果導航包含6個或多個按鈕，它們將在頂部彼此堆疊。
解決方案
1）下拉
一種常用的解決方案是將導航到一個選擇下拉。我不喜歡這種方法因為<選擇>元素不可設置樣式和CSS。JavaScript插件選擇允許您修改下拉菜單，否則你最終的默認系統下拉菜單樣式。這也造成不一致的用戶體驗，桌面版和移動版顯示鏈接標簽顯示一個下拉菜單。如果你喜歡這個解決方案，這是通過CSS技巧教程如何將菜單下拉。
2）顯示為塊
另一個快速修復是將每個菜單項設置為塊元素，這樣他們就顯示垂直。但這種方法需要大量的頭空間。如果導航有很多按鈕，這是一個壞主意，因為在到達內容之前，讀者必須向下滾動導航列表。
3）菜單圖標
我要復習的最后一個解決辦法是使用一個菜單圖標/按鈕來切換導航。我喜歡這種方法，因為它節省了三的空間（移動非常重要），它給你的造型與CSS完全控制。菜單圖標可以與總體設計匹配。
jQuery移動導航（查看演示）
本教程向您展示如何創建一個jQuery在上面列出的網站看到移動導航。jQuery將用于在菜單圖標，切換導航。這一招，不需要任何額外的語義HTML標簽/聯合。
HTML
下面是本教程中使用的示例導航HTML：
<資產凈值ID =”導航包”>
< UL ID =值>
<李> < a href =“#”>按鈕</a> </李>
<李> < a href =“#”>按鈕</a> </李>
< / UL >
< /導航>
jQuery代碼
包括一份jQuery和下面的函數在<HEAD>標簽之間。該函數將前置<divid=“菜單圖標”>在<資產凈值=“#導航包ID標簽”>。當#菜單圖標元素被點擊時，它就會滑下導航。
<腳本type=“text/javascript”src=“HTTP：/ / Ajax。googleapis。COM / / / jQuery的Ajax庫1.7版jQuery。”> < /腳本>
<腳本type=“text/javascript”>
jQuery（document）。準備好（功能（$）{
/ * * /在菜單圖標
$（“#導航包”）。在（' <divid=“菜單圖標”>菜單中的< / DIV >”）；
/ * * /切換導航
$（“#菜單圖標”）。在（“點擊”，function() {
$（“#資產凈值”）。slidetoggle()；
$（這個）。toggleclass（“主動”）；
}）；
}）；
< /腳本>
這將使HTML這樣的代碼（你需要檢查元素或視圖來查看生成的源代碼）：
<資產凈值ID =”導航包”>
<divid=“>菜單中的< / DIV >菜單圖標
< UL ID =值>
<李> < a href =“#”>按鈕</a> </李>
<李> < a href =“#”>按鈕</a> </李>
< / UL >
< /導航>
CSS
我不打算解釋CSS代碼的每一個細節，因為它是非常直接的。相反，我會談論的關鍵部分。
的#菜單圖標的顯示設置為：沒有開始。我使用媒體查詢到#菜單圖標更改為顯示：塊如果視口的寬度小于600px。
CSS解釋
在媒體查詢中，我設置了導航顯示：沒有一個是在移動中隱藏的。當#菜單點擊圖標，可以切換導航為上述步驟在jQuery函數指定。
最后的演示
要看到最后的移動導航，查看演示，縮小您的瀏覽器窗口或檢查您的手機。