移動(dòng)端網(wǎng)站是為智能手機(jī)和平板電腦設(shè)計(jì)和優(yōu)化的網(wǎng)站。由于移動(dòng)設(shè)備具有許多不同的屏幕尺寸和分辨率，因此適合移動(dòng)設(shè)備的網(wǎng)站的內(nèi)容應(yīng)能夠相應(yīng)地進(jìn)行調(diào)整，以便用戶(hù)可以閱讀適當(dāng)大小的內(nèi)容并使用不同的設(shè)備輕松瀏覽網(wǎng)站。
在發(fā)明智能手機(jī)之前，人們使用臺(tái)式電腦瀏覽網(wǎng)站。網(wǎng)站管理員用于設(shè)計(jì)可以在桌面上很好顯示的網(wǎng)站。但是，隨著智能手機(jī)的普及，越來(lái)越多的人改變了習(xí)慣。截止到2019年7月，全球移動(dòng)設(shè)備市場(chǎng)份額為55％，領(lǐng)先于臺(tái)式電腦市場(chǎng)份額（45％）。為了使移動(dòng)用戶(hù)與您的網(wǎng)站保持互動(dòng)，您網(wǎng)站上的文字應(yīng)易于閱讀，鏈接和導(dǎo)航也應(yīng)易于點(diǎn)擊。這將有助于降低跳出率并提高移動(dòng)用戶(hù)的轉(zhuǎn)化率。
1、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)
響應(yīng)式網(wǎng)站可以識(shí)別正在查看其的設(shè)備，并自動(dòng)更改其布局以適應(yīng)該設(shè)備的屏幕尺寸和分辨率。市場(chǎng)上有數(shù)百種適用于主要CMS的響應(yīng)主題，例如wordPress/ target=_blank class=infotextkey>WordPress，Magento，Drupal和Joomla。您可以安裝自適應(yīng)主題，然后再次檢查新主題在臺(tái)式機(jī)和移動(dòng)設(shè)備上的外觀是否都很好。
2、大字體和按鈕
當(dāng)您在6英寸的屏幕上瀏覽網(wǎng)站時(shí)，發(fā)現(xiàn)內(nèi)容太小而無(wú)法閱讀很煩，您必須不斷放大和縮小內(nèi)容。更糟糕的是，您可能還會(huì)發(fā)現(xiàn)按鈕彼此之間的距離太近，并不斷點(diǎn)擊錯(cuò)誤的按鈕。為了使訪問(wèn)者免于受此困擾，適合移動(dòng)設(shè)備的網(wǎng)站應(yīng)使用至少14像素的字體，以便于閱讀。號(hào)召性用語(yǔ)按鈕應(yīng)放在醒目的位置，并且要大到足以用手指輕敲。確保在按鈕之間留出足夠的空間，以防止訪問(wèn)者意外點(diǎn)擊錯(cuò)誤的按鈕。
3、堅(jiān)持使用標(biāo)準(zhǔn)字體
字體是網(wǎng)站設(shè)計(jì)的關(guān)鍵元素之一。自定義的，有創(chuàng)意的字體可能會(huì)幫助您的網(wǎng)站看起來(lái)更好，但是您的移動(dòng)訪問(wèn)者必須將新字體下載到他們的手機(jī)和平板電腦上才能正常訪問(wèn)該網(wǎng)站。這會(huì)減慢您網(wǎng)站的加載時(shí)間。更糟糕的是，某些訪問(wèn)者可能只是拒絕下載請(qǐng)求而立即離開(kāi)您的網(wǎng)站。一個(gè)適合移動(dòng)設(shè)備瀏覽的網(wǎng)站應(yīng)使用大多數(shù)設(shè)備中預(yù)先安裝的標(biāo)準(zhǔn)字體。您還必須確保所使用的字體清晰且易于在您的網(wǎng)站上閱讀。
4、消除彈出窗口
適合移動(dòng)設(shè)備瀏覽的網(wǎng)站應(yīng)避免使用彈出式窗口。用于關(guān)閉彈出窗口的“ X”按鈕通常很小，無(wú)法用手指輕敲。當(dāng)訪問(wèn)者試圖關(guān)閉它時(shí)，他們可能會(huì)不小心單擊彈出窗口并轉(zhuǎn)到新的著陸頁(yè)。這很煩人并且阻礙了用戶(hù)體驗(yàn)。如果您需要使用彈出窗口，請(qǐng)僅在訪問(wèn)者單擊鏈接時(shí)顯示它。訪客更有可能接受帶有所需信息的彈出窗口。另外，請(qǐng)確保彈出窗口易于關(guān)閉，以便它們可以繼續(xù)無(wú)縫瀏覽您的網(wǎng)站。
5、不要使用Flash
Android和IOS設(shè)備均不支持Flash。您顯示為Flash動(dòng)畫(huà)的網(wǎng)站內(nèi)容無(wú)法在任何移動(dòng)設(shè)備上正確顯示。它還會(huì)減慢頁(yè)面的加載時(shí)間并對(duì)網(wǎng)站的seo產(chǎn)生不好影響。如果您的網(wǎng)站仍在使用Flash，則應(yīng)改用html之類(lèi)的兼容技術(shù)。
6、簡(jiǎn)化菜單和表格
移動(dòng)網(wǎng)站的菜單應(yīng)該簡(jiǎn)潔明了，并且適合一個(gè)屏幕，這樣訪問(wèn)者就不必滾動(dòng)或放大和縮小即可查看所有導(dǎo)航選項(xiàng)。您還應(yīng)該使表格盡可能短，因?yàn)樵谥悄苁謾C(jī)上鍵入更加困難。消除表單中不需要的字段。當(dāng)要求您的訪客填寫(xiě)移動(dòng)表格上的數(shù)字字段時(shí)，可以選擇使用鍵盤(pán)而不是全鍵盤(pán)。為每個(gè)表單字段禁用自動(dòng)更正，以避免智能手機(jī)將用戶(hù)輸入的名稱(chēng)更改為其他常用詞。
7、壓縮圖像和css
對(duì)于移動(dòng)設(shè)備，加載時(shí)間通常更長(zhǎng)，因?yàn)橐苿?dòng)設(shè)備的帶寬比臺(tái)式機(jī)的帶寬小得多。為了使頁(yè)面加載時(shí)間盡可能短，您應(yīng)該將圖像壓縮到盡可能小的文件大小，同時(shí)在所有設(shè)備上仍保持清晰的外觀。消除不必要的沉重圖像和閃爍的燈光。通過(guò)縮小文件大小，您的頁(yè)面將加載得更快，并改善用戶(hù)體驗(yàn)。
8、使用百分比
通過(guò)百分比配置HTML元素的寬度，可以使這些元素適合不同的屏幕尺寸。這有助于在許多不同的設(shè)備上提供一致的觀看體驗(yàn)。相反，如果以像素為單位指定寬度，則當(dāng)屏幕尺寸更改時(shí)，這些元素的寬度不會(huì)更改。如果您設(shè)置的寬度（以像素為單位）大于手機(jī)屏幕的尺寸，則訪問(wèn)者將不得不水平滾動(dòng)。用戶(hù)體驗(yàn)將被破壞。
總而言之，一個(gè)適合移動(dòng)設(shè)備的網(wǎng)站應(yīng)該具有響應(yīng)能力，簡(jiǎn)化的菜單和表格，使用標(biāo)準(zhǔn)字體，大字體和按鈕。應(yīng)避免彈出窗口和Flash。使用百分比來(lái)配置寬度，并使圖像和CSS文件的尺寸盡可能小。
