如何使您的博客更適合移動設備的提示

已發表: 2017-02-25

谷歌最近宣布,他們將使用移動友好算法更新來檢查所有博客是否都對移動友好,並將懲罰那些不適合移動設備的博客。 這讓許多博主想知道,如何讓他們的網站更適合移動設備,以及如何知道您的博客是否適合移動設備。 這就是為什麼我們匯總了最重要的信息,說明為什麼讓您的博客更適合移動設備如此重要以及如何實際做到這一點。

如今,大部分博客訪問者都在使用他們的移動設備而不是計算機來這樣做。 由於谷歌已經發誓要提高適合在移動設備上查看的網站的排名,因此確保您的博客或網站對移動設備友好比以往任何時候都更加重要。

當然,這不僅僅是關於谷歌想要什麼。 使您的博客對移動設備友好也符合您和您的讀者的最大利益,因為由於有這麼多人使用他們的移動設備上網,這將使他們更方便地閱讀您的博客。 根據皮尤互聯網項目的研究,超過三分之一的手機用戶使用手機而不是台式機或筆記本電腦訪問互聯網。 因此,如果您希望在任何智能手機上輕鬆查看您的博客並增加博客的讀者群,那麼您需要考慮移動友好性。 它實際上比人們想像的更容易實現。

移動友好性測試

由於谷歌提出了這種移動友好算法,他們還讓每個人都可以使用他們的移動友好測試工具來測試他們的博客和網站的這個指標。 只需在“輸入要測試的網址”框中輸入您博客的網址,點擊“運行測試”,該工具就會告訴您您的博客是否適合移動設備。

如果您的網站適合移動設備,您可以放鬆一下,因為您無需執行任何操作。 但是,如果此 Google 工具確定您的博客在移動設備上不是最容易閱讀的,那麼您需要盡快在該部門進行一些改進。

對於那些使用內容管理軟件 (CMS) 來運行博客的人,例如 WordPress、Joomla!、Drupal、Blogger、Tumblr、Google Sites、Bitrix 等,定制應該不是問題,因為這些軟件系統中的大多數提供工具,這將自動使您的網站適合移動設備。 但是,如果您不使用任何 CMS 軟件來製作您的網站,或者您確實使用了 CMS,但您的網站仍然不符合移動標準,那麼這裡有一些關於如何改進的提示您網站的移動友好性。

1.更新CMS到最新版本,使用手機主題

如果您使用 CMS,您可能需要做的就是更新您的軟件或更改您用於博客的主題。 大多數 CMS 已經提供了使您的網站適合移動設備的所有工具,但您必須確保將您的 CMS 更新到最新版本。 例如,Joomla 提供移動支持,只有當它更新到最新版本的軟件時。 但是,其他軟件可能需要您更改網站的主題以使其對移動設備友好,因為一些較舊的主題在移動設備上看起來不太好,因此它們也不適合它們。 為此,請轉到 CMS 的管理面板,在儀表板上找到主題選項卡,然後將博客的主題更改為響應式且適合移動設備的主題。 例如,WordPress 提供了數百個不同的主題,其中很大一部分是免費且響應迅速的。 可悲的是,如果您使用的是不提供移動支持的 CMS,則需要進行更多改進,並且只切換您的內容管理軟件可能會更聰明。

2.使用副標題

對於方便移動用戶的博客內容,一條經驗法則是讓他們吸收較小段落中的文本,而不是將您的文章放在一個長文本中。 因此,您的博客文章的文本應該結構良好,以便讀者可以輕鬆地在文本中定位。 這可以通過使用副標題輕鬆完成。 當您使用副標題時,文本會自動分成許多子章節,讀者在閱讀文章時失去位置的可能性較小。 並且由於在智能手機上閱讀內容時丟失位置對於許多移動設備用戶來說是一個很常見的問題,因為移動滾動使閱讀長而單調的文本變得困難,因此可以通過使用標題來解決它。

使用標題標籤可以輕鬆插入標題。 最大和最重要的標題的標籤是 <h1>。 這個標籤最常用於文本的標題。 其他標題具有從 <h1> 到 <h6> 的自上而下的層次結構,這是一個幾乎不引人注意的標題,但仍然可以幫助您拆分內容並使其更易於閱讀。

3.為圖片選擇合適的尺寸

博主通常會根據正常的電腦屏幕尺寸來選擇他們將在博客文章中使用的圖片大小,但是當在較小的屏幕上查看博客文章時,例如手機屏幕,圖片通常會全部結束大小相同。 這意味著移動設備用戶看不到適當比例的圖像。 所以讓你的圖片不僅尺寸更小,通常低於 1500 x 2500 像素的圖片是最好的,而且尺寸也更小——建議低於 500 KB。 除了擁有適合移動設備的照片之外,縮小圖像的文件大小還可以讓用戶更快地加載頁面,因為較小的圖片使用更少的數據來加載。

要使您的圖片更小,請使用您手頭的任何照片編輯器,因為您不需要 Photoshop 就可以做到這一點。 我們建議使用JPEGminiPixlr ,因為使用這些照片編輯器,您可以在不影響質量的情況下減小圖像的大小。

4.使用響應式設計

博客或網站的響應式設計提供了從許多不同平台和設備以不同屏幕尺寸查看它的機會,因為它會自動使您的網站適應瀏覽器窗口的寬度。 並且,為了方便博客訪問者閱讀,在此適配期間,博客的設計通常會發生變化,例如圖片縮小,欄目垂直排列,菜單也會發生變化。 但是,如果這些更改不是自己發生的,那麼您可以使用一些工具自己進行更改。

例如, Foundation 3SkeletonBootstrap 。 這些框架會自動調整您的博客,因此在任何設備上都易於閱讀。 使用這些比自己編寫每個可能的組合要容易得多。 當然,您也可以通過使用 CSS3 的新相對長度單位來做到這一點,例如視口的寬度 (vw)、視口的高度 (vh)、視口的高度和寬度的最小值 (vmin) 以及視口的高度和寬度的最大值 (vmax)。 但是,編碼需要技巧和時間,如果您不是經驗豐富的程序員,我建議您選擇前一種選擇。

5.使用簡單的設計

移動用戶更喜歡簡單的網站設計,因為大型而復雜的設計網站在移動設備上會變得很慢。 簡單的設計還可以很容易地將讀者的注意力集中在內容上,而不是用花哨的設計分散他們的注意力,因為從統計上講,大多數移動用戶的注意力持續時間都很短。

這意味著使您的網站佈局簡單易懂。 如果您使用的是服務提供商提供的主題,您只需將其更改為更簡單的主題即可。 例如,WordPress 提供了許多優雅、簡單的設計,它們不會壓倒移動設備,但在桌面上仍然看起來不錯。 但是,如果您的網站使用 HTML 製作,您可以下載簡單的模板,這將使您的網站看起來很棒並且對移動設備友好。 例如, Envato Market提供許多不同的簡單設計供您選擇並在您的網站上使用。

6.使用標準字體

有趣的字體可以讓博客看起來更有創意,但這些字體也會讓博客的移動閱讀者感到煩惱,因為並非所有移動設備都支持精美的桌面字體。 因此,要查看內容,移動設備用戶將不得不將新字體下載到他們的手機上,這對許多人來說是不值得的麻煩。 最重要的是,即使它們預先安裝了所有字體,由於尺寸較小,一些更具創意的字體可能難以在智能手機上閱讀。

因此,請選擇 Times New Roman、Verdana、Comic Sans MS、WildWest 或 Bedrock 等傳統字體。 還要檢查您決定使用的字體的可讀性,以確保在智能手機的較小屏幕上查看文本後不會變得不可讀。 一般的經驗法則是,網站上的任何文本至少應為 14 像素,因為這樣文本將足夠大,即使您使用屏幕非常小的移動設備也可以輕鬆閱讀。

7. 最小化每頁內容

當頁面加載到任何設備上時,無論是計算機、平板電腦還是智能手機,設備都會下載頁面的所有內容。 如果您使用的是計算機,它通常不會造成任何問題,但大量數據可能會使移動設備不堪重負。 為避免這種情況,您應該盡量減少每個頁面上的內容量,因為這將確保您的博客可以在每台移動設備上運行。

建議將頁面上的內容減少到每頁 5 MB 以下。 您可以在任何瀏覽器上輕鬆檢查頁面內容的大小。 只需使用在線提供的眾多網頁大小檢查工具之一即可。 如果超過 5 MB,請手動減少頁面的文本、圖像和其他組件的大小和數量,或者使用博客摘錄讓訪問者更容易查看您的博客。

8. 使用 YouTube 視頻

如果您傾向於在博客上的文章中發布大量視頻,則需要記住,它們在移動設備上的外觀與在計算機上的外觀大不相同。 此外,某些移動設備甚至不支持某些視頻格式,因此為避免用戶無法在您的網站上播放視頻,請使用嵌入式 YouTube。 YouTube 為他們的每個視頻提供的嵌入代碼已經是響應式的,這意味著您將能夠在幾乎任何設備上觀看視頻,並且您不必再擔心視頻大小和格式。

您可以通過單擊位於“訂閱”按鈕下方的“共享”按鈕獲取 YouTube 視頻的嵌入代碼,然後單擊“嵌入”選項卡並將提供的代碼複製到您的站點中。 而且您在帖子中擁有一個完美尺寸的視頻,甚至無需轉換或以其他方式調整它。

9.用可點擊的按鈕和菜單替換鏈接

很多時候,網站上的鏈接太小,移動用戶無法用手指輕鬆準確地點擊。 對於博客閱讀者來說,這真的很煩人,當他們無法準確地點擊內容時,他們想要查看。 這就是為什麼您應該用至少 44 x 44 像素大小的按鈕替換您網站上的所有鏈接。

如果您使用的是 CMS,例如 WordPress,您可以只使用插件來創建這些按鈕。 轉到您的 CMS 控制面板,找到合適的插件,安裝它並按照說明正確使用它。 但是,如果您自己編寫了網站代碼,則可以使用其中一個免費的鏈接按鈕生成器,這將節省您在自己編寫按鈕時使用的時間。

10. 繼續測試

最後,當您完成所有改進並且您認為您的博客盡可能適合移動設備時,請使用 Google 測試工具或其他一些您可以在互聯網上找到的移動設備友好性測試工具再次測試您的博客。 如果現在一切正常,並且該工具向您保證您的博客不會受到處罰,因為它不適合移動設備,那麼您可以放鬆並通過創建出色的內容來繼續發展您的網站。 但可以肯定的是,我建議您從多種不同的設備測試您的網站。

請朋友或家人通過手機和平板電腦查看您的博客。 從 Android 和 IOS 設備以及可能具有完全不同操作系統的設備測試您的站點。 並在這些設備上瀏覽您博客上的所有主頁。 只有通過在現實生活中測試您博客的移動友好性,您才能確定您的網站實際上很容易從所有小工具中查看和閱讀。

移動友好性不僅僅在於擁有一個漂亮的網站設計,還在於改善用戶在您網站上的體驗。 這就是為什麼當您使您的博客對移動設備更友好時,更多的人會願意回到您的網站,因為它很容易查看和理解。 而且由於使用手機作為主要上網設備的人數每年都會增加,因此確保您的網站對這些智能手機用戶友好並將內容顯示給它們以方便和易於閱讀的方式。