十四年前，iPhone改變了我們的瀏覽，購物和行為方式。這就是為什麼小企業主必須使用適合移動裝置的網站的原因，或者說為什麼現在大部分網站都支援響應式。
2007年1月，史蒂夫·喬布斯（Steve Jobs）邁入Macworld Expo的舞臺。蘋果公司的聯合創始人，執行長以他的標誌性風格向世界承諾了三件事：更新的iPod，一部電話和一部微型計算機。
他列出了每個專案的屬性：“帶觸摸控制的寬屏iPod，革命性的手機，以及突破性的網際網路通訊裝置。”
但是，當該大曝光的時候了，他沒有推出三款獨立的產品。他勝利地推出了一個小工具：iPhone。原喬布斯指的不是三個獨立的裝置，而是一臺裝置！我們稱之為iPhone。”
憑藉全觸控介面和時尚美觀，iPhone在市場上的其他智慧手機中脫穎而出。十一年後，已售出超過10億隻。專家稱讚它是本世紀最重要的裝置之一。
iPhone引領了智慧手機的革命，並改變了網站的構建和使用方式，引入了移動和響應式設計。今天，我們幾乎可以做的所有事情-從訂購外賣食品到招募Lyft到在社交媒體上分享照片再到在部落格上釋出-都可以通過智慧手機來完成。iPhone是這一轉變的關鍵。
距iPhone釋出14年後的移動設計
如今，許多人將智慧手機用作唯一的計算機。擁有智慧手機的人口為30億，擁有計算機的人口為13億。
總部位於新澤西州Little Falls的數字設計和營銷機構Clikz Digital的首席營銷官Pete Polgar說，行動通訊量逐年增加，並有望超越桌上型電腦通訊量。
他說：“與計算機相比，電話具有更多的用途，併為終端使用者提供了更多的價值。” “隨著該技術的價格越來越便宜，您將在未來幾年看到電話使用量的大幅增加。”
Polgar說，如果您的網站不是針對移動裝置優化的，那麼您會錯失良機。他指出， 如果您的網站不適合移動裝置瀏覽，則Google不會給到您的網站很好的排名。他補充說：“如果使用者的移動體驗很差，他們很可能直接不收錄你的網站頁面。”
移動Web設計意味著什麼？
響應式網站設計意味著，無論螢幕有多大（從手機到手錶，再到平板電腦再到桌上型電腦），該網站都將填充螢幕並以清晰的方式顯示資訊。
洛杉磯的產品設計師Matt Felten解釋說：“這並不意味著您要製作傳單或印刷時事通訊並具有恆定的畫布大小。” “ iPhone的激增意味著設計師必須適應可變的螢幕尺寸，併為多種不同的裝置提出新的方法。”
從頭開始建立網站？以移動為先
GreenPal的執行長Bryan Clayton花了九個月的時間從頭開始建立公司的網站。他說：“就在大門口，這裡存在重大問題。” “我們假設大多數使用者會從桌上型電腦或膝上型電腦上購買草坪護理服務。但是很快就變得非常清楚，與臺式或膝上型電腦（4比1）相比，有更多的人通過手機和平板電腦訪問網站。”
原始的全功能桌面體驗包括各種鈴聲，例如動畫。他回憶說：“我們擁有各種其他功能，使桌面體驗令人愉悅。” “這種方法的問題在於，桌面體驗不會轉換為移動Web瀏覽器。”
結果，該網站was腫，無法在移動裝置上正常執行。使用者發現他們必須捏和縮放才能完成註冊過程。
他說：“在重建我們的網站以提供移動優先體驗之前，在移動瀏覽器上的轉化率不到4％。” “這意味著嘗試註冊的人在此過程中有96％的時間被拋棄了。”
在將網站重建為移動優先之後，Clayton發現發起註冊過程以獲取免費價格估算的人中有82％的人通過移動裝置和平板電腦完成了整個過程。
他說：“我們的移動裝置至上產品是我們今天參與遊戲的唯一原因。”
摸清網站受眾
Polgar發現許多客戶仍然要求基於桌面的站點。但他說：“這些企業中很多都沒有分析其客戶是如何在移動裝置上找到他們的。”
對於任何網站的啟動或重新設計，他建議企業主首先弄清楚客戶如何使用他們的網站。一旦確定了他們將如何使用該網站，就可以制定適當的策略。
此外，請確保所有讀者都可以訪問您的網站-從調整對比度以使色盲人員可以閱讀內容，到使視障人士可以通過螢幕閱讀器進行理解。
尋求客戶反饋
洛杉磯Blu Skincare的所有者Zondra Wilson僅在開始徵詢客戶反饋時才發現自己的網站不適合移動裝置使用。
她回憶說：“我要我的客戶寫一篇評論，他們會說找不到在哪裡寫評論。” “我會問他們有關我釋出的部落格或文章的資訊，他們很難找到它們。他們無法在手機上檢視我的網站。 在我出現第一張照片或有關我公司的任何資訊之前，他們必須向下滾動很多。他們不知道如何瀏覽我的網站。許多人感到沮喪，沒有走過首頁。”
威爾遜（Wilson）最近將其網站升級到了更便於移動的版本，並且已經注意到使用者在該網站上瀏覽的頁面比平時更多。
考慮小螢幕
在移動領域，少即是多。由於手機功能不如桌上型電腦瀏覽器強大，因此您應該確保將站點優化為可以快速載入，並且您的虛擬主機可以處理流量，Polgar解釋說。
最終，最佳設計策略很簡單：消除所有多餘的雜物。
“您需要為小型產品設計，” Felten說。“您必須更加專注。您必須減少資訊和內容。” 放置好移動網站之後，您可能會發現根本不需要為桌面版本新增更多內容。
波爾加爾說：“小型企業將不得不改變其當前的營銷策略，因為其螢幕房地產已大幅縮水。”
Modern Place Lighting執行長Vitaliy Vinogradov發現，與桌上型電腦相比，切換到移動優先設計帶來了30％的轉換。他說：“要做的一件重要的事情是刪除網站移動版上多餘的外掛，彈出視窗或任何其他螢幕抑制劑。”
他的團隊對網站進行了梳理，並刪除了一些社交共享外掛，這些外掛佔用了螢幕上的寶貴資源。
完善您的設計美學
行動電話的興起刺激了蘋果和谷歌等以設計為中心的公司的興起。Felten說，當今的消費者期望更復雜的設計。
他說：“看到一個漂亮而效能良好的網站的商業案例大有推動力。” “如果我是一家小企業主，並且所有競爭都擁有一個非常不錯的，響應迅速的網站，而我卻在不到一秒鐘的時間內沒有對我的產品做出負面評價。”
另一方面，如果您擁有一個設計精美的網站，則人們會認為您重視並在產品中給予同樣多的關注。
一致的使用者體驗
在進行移動優先設計之前，人們先建立了一個可以在桌上型電腦上瀏覽的網站，然後設計了一個移動版本。
問題？
與移動網站相比，您的桌面網站的外觀可能會完全不同。例如，手機上的Gmail應用程式與移動網站和桌面網站不同。Felten說，一種簡單的響應式設計消除了使用者體驗中的重大差異。
考慮社交媒體
Felten說，絕大多數部落格都是通過社交閱讀和共享的。
想想看：從貓照片到產品評論再到模因，如果有人分享他們從部落格中讀取的內容，則很可能是通過社交平臺進行的。Felten建議，在這種情況下，您需要確保您具有響應式設計。
您的企業應該在適當的平臺上擁有社交媒體，因此您可以吸引最多的人。他說：“對於某些企業來說，擁有一個Facebook是有意義的，而其他企業則需要一個Instagram。” “這為您的站點建立了多個入口點，並且是展示您全方位服務的一種方式。”
是否需要應用程式？
iPhone還引入了公司可以為客戶構建的APP應用程式的概念。但是您的公司需要一個嗎？Felten說您應該確保您的網站嚴格提供資訊。
如果您的公司提供日常功能（例如預訂服務，檢查餘額或訂購產品），則最好建立一個配套應用。
下一步是什麼？
“對於任何小型企業來說，都需要一個網站，並且所有瀏覽器都必須適合移動裝置，” Felten說。除此之外，Polgar預計雲將變得更加重要，這意味著公司將不得不圍繞使您的檔案可以通過Internet連線輕鬆訪問進行設計。
優化網站以適應移動端的7種方法
既然我們已經闡明瞭為什麼必須對您的網站進行移動用途的準備了，讓我們更實際一些。在接下來的幾節中，我們將引導您完成建立針對移動裝置進行優化的網站的一些最關鍵方面，從簡單到技術複雜。
我們建議您花時間實施儘可能多的這些方法，以提高您的網站在所有裝置上都能正常執行的可能性（並受到Google移動優先索引的青睞）。讓我們開始工作吧！
1.使用Google的移動裝置友好工具測試網站
在採取進一步行動之前，明智的做法是檢視您的網站在移動友好性方面的表現。這樣做將幫助您熟悉需要工作的站點的特定區域，併為您提供有關如何進行改進的有用資訊。
一種方法是簡單地在幾種不同的裝置上使用您的網站。使用您自己的智慧手機或平板電腦訪問該網站，並檢視其外觀和使用感覺。這樣做可以讓您瞭解載入時間，設計在較小螢幕上的執行狀況，內容是否仍然可讀以及導航是否易於使用。
完成此操作後，您可以使用專用的測試工具進一步深入研究。幸運的是，Google建立了一個您可以免費使用的網站，它將向您顯示您的網站是否符合其移動頁面的標準。適當地，這被稱為“移動裝置友好測試工具”。
要測試您的站點，只需輸入其URL並選擇Run Test。該過程通常會在幾秒鐘內完成，此時您將看到結果。
如果您的網站適合移動裝置瀏覽，您會看到一條訊息，告知您，同時您的網站在智慧手機上的顯示螢幕截圖也將顯示在螢幕上。另一方面，如果您的網站不適合移動裝置使用，則結果將向您顯示需要調整哪些元素。
即使您的網站獲得了總體良好的結果，它仍然可能難以載入某些資產。在這種情況下，您會看到“頁面載入問題”通知。
這將開啟一個頁面，您可以在其中準確檢視Google無法載入哪些資源。
此時，您可以依次處理每個列出的問題。例如，您可以編輯你的robots.txt檔案，以允許谷歌訪問被阻止的檔案，或修復任何重定向錯誤。
2.使用響應式WordPress主題
在選擇WordPress主題時，需要牢記一些注意事項。首先，您將要確保它進行了優化，並且不會對網站的效能產生負面影響。它還需要安全，併為您提供自定義它所需的設定。當然，它也需要具有吸引人的外觀和風格。
在此過程中容易忽略的一個標準是主題是否支援響應式。這意味著無論您在哪個裝置，瀏覽器和螢幕尺寸上瀏覽，都將正確呈現您網站的設計。幸運的是，這些天的大多數主題都可以完全響應。對於WordPress主題市場中的許多選項尤其如此。
但是，您需要在安裝給定主題之前確保給定主題能夠響應。在大多數情況下，開發人員會在主題描述中明確提及此內容，因此請確保仔細檢查其功能列表。
其他網站將讓您過濾主題以僅顯示響應式選項。ThemeForest就是這樣的一個地方。
找到喜歡的主題並提供響應式設計後，您可能想看看您的網站在每臺裝置上的實際外觀。如果已安裝主題，則可以通過導航至儀表板中的“外觀” >“自定義”來執行此操作。如果您檢視螢幕的左下角，則會看到一組代表不同裝置的圖示。
單擊其中之一將更改檢視，並顯示您的網站，該網站將顯示在所選裝置的型別上。
現在，您可以精確地看到主題的響應速度，以及是否可以進行進一步的配置以改善移動體驗。找到正確的響應主題並將其設定為可在各種裝置上使用可能需要一些時間，但最終結果將是值得的。
3.選擇一個可靠的虛擬主機
我們之前已經說過，我們會很高興再說一遍-為您的網站選擇合適的Web主機是您要做的最關鍵的決定之一。一個簡單的事實是，如果您選擇的主機或計劃無法提供所需的速度和資源，那麼您的任何工作都無法阻止您的網站表現不佳。
您的網路主機將在確定網站效能方面做很多工作，而在進行移動優先的優化時，速度顯得尤其重要。我們稍後將討論為什麼會更詳細地說明這一點。現在，需要了解的重要一點是，選擇一個可以使您的網站保持快速執行的主機將對您的網站的移動友好性有很大幫助。
考慮到這一點，您需要選擇一個可以保證始終如一的高效能和絕對最少的停機時間的計劃。在大多數情況下，最好的選擇是採用VPS託管計劃，因為它們往往可以負擔得起，但始終可以提供出色的效能。
但是，如果您需要更多的網路託管服務，則可能需要使用託管專用伺服器-這意味著您將能夠使用專門為您的站點保留的伺服器。這不僅使您可以根據自己的確切要求自定義伺服器，而且還意味著提高了安全性和速度-兩者都是移動友好型網站上的關鍵要素。
4.縮短網站載入時間
正如我們在上一節中所暗示的那樣，在移動優先世界中，網站速度特別重要。當然，保持站點的載入時間最少是一個重要的考慮因素。實際上，優化網站的速度不僅可以幫助您降低跳出率，還可以改善使用者的體驗。
但是，當您為移動使用者優化網站時，效能變得更加重要。不久前，谷歌推出了“Speed Update”，使網站速度成為移動頁面的排名因素。因此，如果您希望在搜尋引擎中輕鬆找到您的網站，那麼考慮您的網站在移動裝置上的效果至關重要。
測試網站移動端速度
您需要做的第一件事就是找出您的網站目前的執行狀況。Google再次在這裡為您提供“移動端速度測試”工具，以助您一臂之力。
您需要在這裡輸入站點的URL，然後單擊箭頭按鈕。該工具將訪問並掃描您的網站，以檢視其在移動裝置上載入的速度。
您也可以向下滾動以查詢更多詳細資訊。在這裡，您將看到您的網站與競爭對手相比如何，甚至可以節省幾秒鐘的載入時間。
如果您希望縮短這些時間，可以採用多種方法來優化網站，以提高桌上型電腦和移動裝置的效能。
優化網站載入時間
讓我們看一下可以用來提高網站速度的一些基本方法。
- 實現快取。使用快取時，某些網站檔案將儲存在更方便的位置（例如，在每個訪問者的本地裝置上），因此不需要在每次訪問新頁面時都下載它們。有許多免費的快取外掛可用，儘管預設情況下某些託管計劃包括此功能。
- 使用CDN。CDN無需從一箇中央伺服器傳遞檔案，而是使您可以將它們的副本儲存在按地理位置分佈的一系列伺服器中。無論給定使用者的位置在哪裡，這都使載入時間更加平衡，同時還減少了頻寬使用量。
- 壓縮影象。較大的影象檔案通常是導致載入時間緩慢的罪魁禍首。通過壓縮它們，可以減小它們的大小而不會影響它們的質量。有許多免費和高階的解決方案可以幫助您完成此任務，其中包括ShortPixel外掛和TinyPNG工具。
- 最小化程式碼。通過優化網站的CSS，HTML和JavaScript程式碼，您可以使其效率更高，並節省寶貴的時間。
- 保持更新。使用過時的軟體來執行您的網站不僅使您容易受到安全問題的影響，而且還使網站無法以最高效率執行。通過隨時更新外掛，主題和CMS，可以避免這些問題。
儘管這似乎是一項艱鉅的工作，但實際上，其中大多數技術都可以使用簡單的免費解決方案來實現，而這些解決方案几乎不需要您進行任何配置。因此，您的網站在移動裝置上的效果應該會明顯更好，並且在搜尋引擎排名中具有優勢。
5.重新設計用於移動裝置的彈出視窗
儘管彈出式視窗受到了很多批評，但它們仍然是吸引訪問者注意力的最有效方法之一。因此，如果您的網站至少包含一個或兩個具有戰略意義的彈出式視窗（旨在增加轉化次數或將重要資訊傳遞給使用者），我們就不會感到驚訝。
但是，當在移動裝置上檢視您的站點時，這可能會成為問題。在較小的裝置上，螢幕空間變得更加重要，甚至中型彈出視窗也可能比在您的網站的桌面版本中顯示的彈出視窗更具破壞性。
為了打擊以這種方式損害使用者體驗的彈出式視窗，Google最近實施了一些彈出式視窗處罰措施。這些實際上是彈出視窗必須遵循的一組規則，以避免使移動使用者感到沮喪或覆蓋過多的站點。
為了避免受到處罰，您需要確保您的移動彈出視窗遵守這些準則。簡單來說，您將需要按以下方式配置彈出視窗。
- 彈出視窗必須儘可能無障礙。在移動裝置上，彈出視窗應僅覆蓋螢幕的一小部分。
- 彈出視窗必須易於關閉。應該清楚的是，移動使用者通常可以通過清晰可見，大小合適的按鈕來關閉彈出視窗。
- 包含必要資訊的彈出視窗是可豁免。以上指導並不適用於登入對話方塊，年齡驗證表單，或者顯示的必要資訊等的彈出視窗（如餅乾通知）。
只要在設計彈出視窗時牢記這些注意事項，就不會有受到懲罰的風險。
6.啟用加速的移動頁面（AMP）
作為使移動衝浪體驗更加流暢的Google使命的一部分，谷歌公司還啟動了其“加速移動網頁”（AMP）專案。自2015年推出以來，該專案已取得了巨大的發展，許多站點現在都在使用AMP以確保其移動版本以最佳效能執行。
那麼，什麼是移動頁面加速？簡而言之，這是一種建立網站頁面的移動裝置友好版本的方法。這涉及剝離內容，以及刪除不必要的媒體檔案和高階佈局。 然後，將向使用移動裝置訪問您的網站的使用者提供AMP版本。
當然，AMP還有很多其他功能，包括站點HTML和JavaScript檔案的特殊建立版本，但是幸運的是，您無需瞭解所有技術細節即可自己使用此技術。如果要建立自己的AMP頁面，AMP WordPress外掛是一個很好的起點。
儘管此外掛提供了許多功能，但它將向您介紹使用AMP的基礎知識，並且非常易於使用。您只需要下載並安裝外掛，它將自動生成頁面的AMP版本。您甚至可以更改頁面的外觀，從而更好地控制頁面在移動裝置上的外觀。
7.建立一個移動應用
最後，我們得出一個乍看之下似乎過於激烈的解決方案。畢竟，不久前，移動應用程式是大型網站和服務所獨有的。但是，市場已經發生了巨大變化，如今，除了標準的響應式網站外，幾乎所有型別的企業或組織都提供移動應用程式已變得司空見慣。
建立專用的應用程式會帶來簡單網站無法提供的許多獨特優勢。例如，它使您可以提供訂閱並直接通過自己的介面處理它們。當您釋出內容或想要共享一些新聞時，您還可以使用推送通知來吸引使用者的注意力。
儘管可以從頭開始編寫移動應用程式（或僱用開發人員來編寫程式碼），但更簡單的解決方案是使用一種工具來幫助您將網站轉變為應用程式。其中一種針對WordPress使用者進行了優化的解決方案是AppPresser。
這是一種高階工具，其計劃起價為每月19美元。為此，您將獲得一個直觀的應用程式構建器介面，如果您已經熟悉WordPress，則該介面應該易於使用。
使用該介面，您可以針對特定的網站（適用於Android和iOS）快速組合應用程式，然後與使用者共享。例如，您可以將其提交到應用商店，或直接將其提供給網站的訪問者或訂閱者。
小結
我們現在生活在行動網路優先的世界中。與桌上型電腦相比，大多數網際網路使用者對移動裝置的依賴更多，這意味著您需要仔細考慮網站的工作方式以及在較小螢幕上的外觀。優化您的網站，使其效能良好並且仍可輕鬆在移動裝置上使用是關鍵，尤其是如果您不想受到搜尋引擎的懲罰時。
評論留言