對(duì)于很多人來說，移動(dòng)設(shè)備，尤其是手機(jī)，正在迅速成為互聯(lián)網(wǎng)最熱門航線。他們希望能夠快速，方便地獲取信息，幫助他們?cè)诼猛局凶龀鰶Q策，包括是否光顧您的業(yè)務(wù)。

不幸的是，并不是每個(gè)小型商業(yè)網(wǎng)站在手機(jī)上運(yùn)作良好。許多無法快速加載，證明難以導(dǎo)航，并使關(guān)鍵信息很難找到。

為了讓您的網(wǎng)站更多的移動(dòng)友好的，請(qǐng)考慮以下三個(gè)步驟，它把一個(gè)優(yōu)先考慮實(shí)用性，速度和輕松導(dǎo)航。

1.在蜂窩網(wǎng)絡(luò)上測(cè)試您的網(wǎng)站。

關(guān)閉手機(jī)的Wi-Fi連接，以便使用您的無線運(yùn)營(yíng)商的數(shù)據(jù)網(wǎng)絡(luò)。然后，啟動(dòng)Web瀏覽器并鍵入您的商家網(wǎng)站的網(wǎng)址。

現(xiàn)在，開始計(jì)數(shù)。如果完全加載您的主頁(yè)需要5秒或更短時(shí)間，這是相當(dāng)不錯(cuò)。如果它是10秒或更多，有很大的改進(jìn)空間。

如果您的網(wǎng)站首先顯示裝飾閃屏，視頻或大圖片，則不適合移動(dòng)設(shè)備。這些項(xiàng)目需要額外的時(shí)間來加載和獲取有用的信息的方式。此外，如果您的首頁(yè)具有Flash動(dòng)畫，它將不會(huì)在許多移動(dòng)瀏覽器中顯示，您的網(wǎng)站可能似乎什么也沒有說。

如果您的手機(jī)只顯示完整網(wǎng)站的微縮版本，這意味著移動(dòng)用戶必須捏合，縮放和滾動(dòng)看看有什么。這是更多的工作，加上他們更可能意外點(diǎn)擊錯(cuò)誤的鏈接或按鈕。當(dāng)您的網(wǎng)站在移動(dòng)設(shè)備上加載時(shí)，您的商家最基本且最重要的信息（例如地址，營(yíng)業(yè)時(shí)間和電話號(hào)碼）應(yīng)該立即可見。

要獲得最全面的結(jié)果，請(qǐng)對(duì)幾種類型的手機(jī)重復(fù)此練習(xí)。考慮讓您的朋友在觀看時(shí)通過手機(jī)訪問您的網(wǎng)站。觀察，但不要教導(dǎo)他們?cè)谀睦餄L動(dòng)或單擊。

2.從簡(jiǎn)單的改進(jìn)開始。

根據(jù)測(cè)試的結(jié)果，您的網(wǎng)站可能需要進(jìn)行重大檢查或只是一些調(diào)整。如果重新設(shè)計(jì)似乎有必要，但是比你現(xiàn)在可以管理的更多，你可以開始一個(gè)快速和容易的修復(fù)。

如果尚未安裝，請(qǐng)將以下信息放在網(wǎng)站首頁(yè)的頂部：

商家名稱

簡(jiǎn)要說明，如“稅務(wù)會(huì)計(jì)師”，“汽車修理”或“精致法國(guó)餐飲”

街道地址

營(yíng)業(yè)時(shí)間

電話號(hào)碼查詢或預(yù)訂

電子郵件地址

鏈接到您的網(wǎng)站的移動(dòng)版（我會(huì)在以后解釋）

此信息應(yīng)顯示在任何背景或橫幅圖形上方，因此首先加載。畢竟，這是大多數(shù)移動(dòng)訪問者想要知道的。

將此信息顯示為純文本而不是將其包含在圖像中有幾個(gè)優(yōu)點(diǎn)。在大多數(shù)移動(dòng)網(wǎng)絡(luò)瀏覽器中，只需點(diǎn)擊電話號(hào)碼即可開始通話。同樣，點(diǎn)擊街道地址即可啟動(dòng)手機(jī)的地圖應(yīng)用程序，點(diǎn)擊電子郵件地址即可打開移動(dòng)電子郵件應(yīng)用程序。如果您讓移動(dòng)用戶更容易，他們更有可能與您做生意。

3.構(gòu)建一個(gè)用戶友好的移動(dòng)版網(wǎng)站。

創(chuàng)建網(wǎng)站的移動(dòng)版本可以相當(dāng)簡(jiǎn)單。如果您使用提供移動(dòng)主題布局的工具構(gòu)建您的網(wǎng)站，則只需選擇一個(gè)主題并將其應(yīng)用到您的網(wǎng)站。WordPress的，最流行的網(wǎng)站建設(shè)工具之一，有許多免費(fèi)和廉價(jià)的手機(jī)主題。

您還可以構(gòu)建一個(gè)單獨(dú)的移動(dòng)網(wǎng)站。有許多廉價(jià)服務(wù)的非技術(shù)人員都可以使用，包括Mofuse.com和Landr.co。兩者都允許您創(chuàng)建并發(fā)布基本移動(dòng)網(wǎng)站，每月不到10美元。

移動(dòng)網(wǎng)站的網(wǎng)址與完整網(wǎng)站略有不同。移動(dòng)版本通常以“m”開頭。在常規(guī)網(wǎng)址之前，或以“.mobi”而不是“.com”結(jié)尾。如果移動(dòng)用戶鍵入您的常規(guī)網(wǎng)址或通過搜索引擎查看指向您網(wǎng)站的鏈接，則移動(dòng)版本應(yīng)自動(dòng)加載。

但這并不總是發(fā)生在每個(gè)電話。在您的網(wǎng)站頂部包含指向您的移動(dòng)網(wǎng)站的鏈接，反之亦然，以防萬一。

不要為移動(dòng)設(shè)備設(shè)計(jì)您的網(wǎng)站。相反，設(shè)計(jì)您的網(wǎng)站的所有設(shè)備，從小手機(jī)到巨大的客廳平面屏幕。

“幾乎每個(gè)企業(yè)都需要適應(yīng)任何屏幕上有效地到達(dá)消費(fèi)者手中，說：” 珍妮華納，全球公認(rèn)的數(shù)字化設(shè)計(jì)和互聯(lián)網(wǎng)發(fā)展趨勢(shì)的顧問誰我對(duì)她的方式阿布扎比，在那里她拿了世界信息峰會(huì)大獎(jiǎng)階段，趕上了分享多屏戰(zhàn)略，國(guó)際移動(dòng)專家組成的龐大的觀眾面前。

“有兩種基本的策略來構(gòu)建在所有設(shè)備上顯示良好的網(wǎng)站：響應(yīng)和自適應(yīng)，”她解釋說。“響應(yīng)式網(wǎng)站是大多數(shù)小型企業(yè)的最佳選擇。以下是對(duì)含醉句句意味著什么的翻譯，以及您的企業(yè)應(yīng)該采取的關(guān)鍵步驟。

至少，調(diào)整您的現(xiàn)有網(wǎng)站為今天的Web用戶。 沒有一個(gè)企業(yè)不能忽視這樣一個(gè)事實(shí)：超過十億人主要從移動(dòng)設(shè)備訪問網(wǎng)絡(luò)。即使您尚未準(zhǔn)備好重新構(gòu)建網(wǎng)站，以便在所有設(shè)備上實(shí)現(xiàn)最佳顯示，也至少需要執(zhí)行以下兩個(gè)步驟之一：

簡(jiǎn)化您的網(wǎng)站設(shè)計(jì)。拉起你的網(wǎng)站在智能手機(jī)上（或查看它在谷歌的GoMoMeter），你可能會(huì)看到設(shè)計(jì)變更的需要。為了在移動(dòng)設(shè)備上顯示出色，華納推薦更簡(jiǎn)單的頁(yè)面設(shè)計(jì)，大字體大小，關(guān)鍵信息放在“折疊”，以及大，可觸摸的按鈕，防止手指。最低限度，她說：“只要把你的姓名，電話號(hào)碼和一個(gè)地圖的鏈接放在你的主頁(yè)左上角就可以輕松找到。

創(chuàng)建您網(wǎng)站的移動(dòng)版本。作為編輯網(wǎng)站的替代方法，您可以使用移動(dòng)網(wǎng)站設(shè)計(jì)服務(wù)創(chuàng)建并行版本，其中許多是免費(fèi)或低成本的。“但是有權(quán)衡，”華納說。“如果您的移動(dòng)網(wǎng)站有第二個(gè)網(wǎng)址，例如帶有.m子域的網(wǎng)址，搜索引擎可能會(huì)找到它，也可能找不到它。Bing和Google都主張使用單一網(wǎng)址方法來實(shí)現(xiàn)可搜索性和搜索引擎優(yōu)化。“但是，如果你喜歡你的網(wǎng)站或不能重建它，創(chuàng)建一個(gè)移動(dòng)網(wǎng)站鏈接到你的主要網(wǎng)站不是最糟糕的策略，”華納說。“最糟糕的策略是完全忽視你的移動(dòng)用戶。

更好的是，重建您的網(wǎng)站，以便在任何設(shè)備上顯示。 這里是適應(yīng)和響應(yīng)網(wǎng)站設(shè)計(jì)的術(shù)語：

自適應(yīng)設(shè)計(jì)是網(wǎng)站設(shè)計(jì)的高端。它由大型公司使用，大量投資，以獲得最大的在線觀眾。“美國(guó)航空公司是一個(gè)很好的例子，”Warner說，自適應(yīng)設(shè)計(jì)“檢測(cè)和識(shí)別用戶的設(shè)備，然后生成一個(gè)與設(shè)備能力匹配的頁(yè)面。

響應(yīng)式設(shè)計(jì)是使用CSS（層疊樣式表）技術(shù)創(chuàng)建一個(gè)網(wǎng)站，自動(dòng)調(diào)整以除最早的手機(jī)的所有設(shè)備正常顯示的單一版本更實(shí)惠的解決方案。“一個(gè)敏感的網(wǎng)站允許你到達(dá)最活躍的Web受眾，”華納說。作為一個(gè)例子，她拉起來的網(wǎng)站波士頓環(huán)球報(bào)，點(diǎn)擊瀏覽器窗口的右邊緣拖動(dòng)到左側(cè)，從全屏頁(yè)面縮小到一個(gè)地區(qū)智能手機(jī)的大小。無論她做多大的顯示區(qū)域，地球儀的響應(yīng)設(shè)計(jì)看起來不錯(cuò)，很容易閱讀。

致力于面向未來您的網(wǎng)站

當(dāng)您準(zhǔn)備使您的業(yè)務(wù)拖延已久的投資，把網(wǎng)站重新設(shè)計(jì)的高名單上的，所以你就可以通過自己的手機(jī)，平板電腦，個(gè)人電腦，電視到達(dá)消費(fèi)者手中，或者很快，冰箱門，浴室鏡子等。

即使是DIY平臺(tái)，從GoDaddy.com到WordPress和許多之間，開始提供工作在各種屏幕尺寸的設(shè)計(jì)。“只要確定你使用的主題標(biāo)記為響應(yīng)，”華納說。

或者，她說，對(duì)于幾千美元或更多，專業(yè)設(shè)計(jì)師可以創(chuàng)建一個(gè)良好的定制網(wǎng)站，“除非設(shè)計(jì)師不知道這個(gè)詞是響應(yīng)，在這種情況下，你需要一個(gè)不同的設(shè)計(jì)師。

最后，一旦您獲得了技術(shù)正確，請(qǐng)注意創(chuàng)建偉大的網(wǎng)站內(nèi)容。“記住，”華納說，“特別是在移動(dòng)設(shè)備上，人們?cè)L問您的網(wǎng)站有三個(gè)原因：節(jié)省時(shí)間，與他人聯(lián)系，浪費(fèi)時(shí)間。讓他們快速，方便地訪問，將您的聯(lián)系信息放在前面和中心，給他們指向地圖和路線的鏈接，然后添加視頻或其他娛樂內(nèi)容，讓他們?cè)谀木W(wǎng)站上逗留只要他們想留下來。

這是如何面向未來的您的網(wǎng)站。

移動(dòng)導(dǎo)航菜單設(shè)計(jì)中的一個(gè)共同挑戰(zhàn)是導(dǎo)航菜單。如果該網(wǎng)站有很多的部分或網(wǎng)頁(yè)，它變得具有挑戰(zhàn)性，將所有的項(xiàng)目壓縮成一個(gè)小的移動(dòng)分辨率。導(dǎo)航最有可能結(jié)束運(yùn)行成多行或按鈕堆疊在頂部彼此。所以我要回顧一些設(shè)計(jì)解決方案，提供了一種快速教程如何創(chuàng)建一個(gè)jQuery移動(dòng)導(dǎo)航。

問題

下面的截圖顯示移動(dòng)的導(dǎo)航布局問題。如果導(dǎo)航有3個(gè)或4個(gè)按鈕，如網(wǎng)頁(yè)設(shè)計(jì)師墻，那么導(dǎo)航將不會(huì)包成2行。但如果導(dǎo)航包含6個(gè)或多個(gè)按鈕，它們將在頂部彼此堆疊。



解決方案

1）下拉

一種常用的解決方案是將導(dǎo)航到一個(gè)選擇下拉。我不喜歡這種方法因?yàn)?lt;選擇>元素不可設(shè)置樣式和CSS。JavaScript插件選擇允許您修改下拉菜單，否則你最終的默認(rèn)系統(tǒng)下拉菜單樣式。這也造成不一致的用戶體驗(yàn)，桌面版和移動(dòng)版顯示鏈接標(biāo)簽顯示一個(gè)下拉菜單。如果你喜歡這個(gè)解決方案，這是通過CSS技巧教程如何將菜單下拉。

 

2）顯示為塊

另一個(gè)快速修復(fù)是將每個(gè)菜單項(xiàng)設(shè)置為塊元素，這樣他們就顯示垂直。但這種方法需要大量的頭空間。如果導(dǎo)航有很多按鈕，這是一個(gè)壞主意，因?yàn)樵诘竭_(dá)內(nèi)容之前，讀者必須向下滾動(dòng)導(dǎo)航列表。

 

3）菜單圖標(biāo)

我要復(fù)習(xí)的最后一個(gè)解決辦法是使用一個(gè)菜單圖標(biāo)/按鈕來切換導(dǎo)航。我喜歡這種方法，因?yàn)樗?jié)省了三的空間（移動(dòng)非常重要），它給你的造型與CSS完全控制。菜單圖標(biāo)可以與總體設(shè)計(jì)匹配。

 
jQuery移動(dòng)導(dǎo)航（查看演示）

本教程向您展示如何創(chuàng)建一個(gè)jQuery在上面列出的網(wǎng)站看到移動(dòng)導(dǎo)航。jQuery將用于在菜單圖標(biāo)，切換導(dǎo)航。這一招，不需要任何額外的語義HTML標(biāo)簽/聯(lián)合。

HTML

下面是本教程中使用的示例導(dǎo)航HTML：

<資產(chǎn)凈值ID =”導(dǎo)航包”>

< UL ID =值>

<李> < a href =“#”>按鈕</a> </李>

<李> < a href =“#”>按鈕</a> </李>

< / UL >

< /導(dǎo)航>

jQuery代碼

包括一份jQuery和下面的函數(shù)在<HEAD>標(biāo)簽之間。該函數(shù)將前置<divid=“菜單圖標(biāo)”>在<資產(chǎn)凈值=“#導(dǎo)航包ID標(biāo)簽”>。當(dāng)#菜單圖標(biāo)元素被點(diǎn)擊時(shí)，它就會(huì)滑下導(dǎo)航。

<腳本type=“text/javascript”src=“HTTP：/ / Ajax。googleapis。COM / / / jQuery的Ajax庫(kù)1.7版jQuery。”> < /腳本>

<腳本type=“text/javascript”>

jQuery（document）。準(zhǔn)備好（功能（$）{

/ * * /在菜單圖標(biāo)

$（“#導(dǎo)航包”）。在（' <divid=“菜單圖標(biāo)”>菜單中的< / DIV >”）；

/ * * /切換導(dǎo)航

$（“#菜單圖標(biāo)”）。在（“點(diǎn)擊”，function() {

$（“#資產(chǎn)凈值”）。slidetoggle()；

$（這個(gè)）。toggleclass（“主動(dòng)”）；

}）；

}）；

< /腳本>

這將使HTML這樣的代碼（你需要檢查元素或視圖來查看生成的源代碼）：

<資產(chǎn)凈值ID =”導(dǎo)航包”>

<divid=“>菜單中的< / DIV >菜單圖標(biāo)

< UL ID =值>

<李> < a href =“#”>按鈕</a> </李>

<李> < a href =“#”>按鈕</a> </李>

< / UL >

< /導(dǎo)航>

CSS

我不打算解釋CSS代碼的每一個(gè)細(xì)節(jié)，因?yàn)樗欠浅Ｖ苯拥摹Ｏ喾矗視?huì)談?wù)摰年P(guān)鍵部分。

的#菜單圖標(biāo)的顯示設(shè)置為：沒有開始。我使用媒體查詢到#菜單圖標(biāo)更改為顯示：塊如果視口的寬度小于600px。

CSS解釋

在媒體查詢中，我設(shè)置了導(dǎo)航顯示：沒有一個(gè)是在移動(dòng)中隱藏的。當(dāng)#菜單點(diǎn)擊圖標(biāo)，可以切換導(dǎo)航為上述步驟在jQuery函數(shù)指定。

最后的演示

要看到最后的移動(dòng)導(dǎo)航，查看演示，縮小您的瀏覽器窗口或檢查您的手機(jī)。