DIV CSS 佈局教程網

注：此文雖未舊文，但仍具有參考意義。

2013年8月份，谷歌官方在Google AdSense十周年講座上發布了移動建站十大原則，由於是PPT形式，所以小生把它整理成文字版的移動網站建站原則(也可以看做是谷歌手機站優化指南)，供廣大站長參考。

有興趣的站長也可以對比下百度的 SEO這麼難！百度移動搜索推《移動友好度標准V1.0》，看一看立足於中文本地搜索引擎的百度與有國際視野的谷歌在移動網站優化上有哪些共同點和區別，在此僅總結谷歌發布的移動網站建站原則，當然這份移動建站原則也是偏向於中文站長的。

1、簡單快捷

所謂簡單快捷，就是要在手機有限的屏幕上以最簡單最實用最快捷的形式展示給用戶最需要的東西，讓用戶方便。谷歌的建議是：

• 優先提供用戶最需要的內容和功能
• 減法，減法，減法（解釋一下，這一點其實就是在強調手機網站要去掉一切可以去掉的內容、功能、板塊、按鈕等，只留下最精華的部分，記住是最精華的部分。谷歌舉例了淘寶的移動網站）
• 精簡文字
• 壓縮圖片以提升網站加載速度

2、簡化導航

• 明確的目錄結構，避免用戶橫向滾動頁面
• 提供醒目的“後退”和“首頁”按鈕

對於導航的目錄結構，谷歌列出了四種常見的手機網站的導航形式，分別是：

• 橫條式（谷歌指出，根據手機屏幕尺寸以及統計數據顯示，橫條最好不要超過7個）
• 大按鈕式（這種形式是手機站最常見且應用最多的導航形式）
• 列表式
• 選項式

3、拇指操作

• 較大的按鈕，降低操作難度
• 適當的空間，避免意外點擊（與加寬間距目的一樣，都是為了擴大點擊范圍，防止用戶因為按鈕較小而誤點其它選項或內容而造成的不便。也就是在有限的手機屏幕上再適當給按鈕做些留白）
• 間距加寬，擴大點擊范圍
• 使用顏色和陰影凸顯按鈕

這一點不僅僅是針對搜索引擎的優化設計，更是手機站針對用戶體驗的人性化設計，在這一點上，谷歌考慮的更周全些。

4、一目了然

• 確保內容與屏幕大小一致
• 背景和文字顏色的鮮明反差
• 使用留白空間
• 整齊的排版
• 舒服的字型大小

這一點同樣是考慮用戶體驗的問題，如果是第三點是考慮用戶手感或者說觸感的話，第四點就是考慮用戶的觀感。

5、廣泛適應

• 網站能在不同的移動設備上運行
• 移除flash，使用HTML5來實現互動內容和動畫
• 根據屏幕方向調整顯示

很多站長可能不太懂HTML5相關技術以及自適應網頁技術，沒關系，百度的手機站優化指南有相關知識，還是不明白的話，百度一下，你就知道。

6、輕松轉化

• 簡化注冊登錄流程
• 減少使用者輸入：使用表單、菜單、選擇框
• 著重提供有助於轉化/注冊的信息

還是盡可能的給用戶提供方便，減少給用戶帶來的麻煩，節約用戶的時間和浏覽成本，要知道，時間就是金錢。

7、立足本地

• 與用戶位置相結合的個人化信息
• 地圖、路線、電話、本地信息等

在所有提供內容當中，除非用戶是找尋通用信息，所以本地化信息是最對用戶有幫助的。

8、流暢體驗

• 允許用戶保存搜索、書簽、購買等信息
• 盡可能在所有平台提供相同信息和功能（即無論是PC端、平板端還是手機端都保持網站信息的一致性）

9、重新定向

• 自動判斷移動設備，重新定向相應適合的網站內容（自適應網頁技術，根據不同的移動設備和屏幕尺寸，來顯示相應的網站內容）
• 讓用戶可以切換電腦版與移動版網站
• 讓用戶選擇下次訪問的版本

10、持續改進

• 使用分析工具，了解用戶如何使用網站
• 收集用戶意見並反復測試，追蹤表現

移動網站不是移動應用，所以可以持續的改進並調整。