近年來，隨著移動互聯網的飛速發展，移動多用户的數量也在不斷的超過 PC 多用户。那除了智慧手機之外，使用平板電腦甚至是電視機進行上網的多用户也在持續增加。在這種形勢下，怎樣讓我們的網站儘量相容各種類型的裝置，並確保優良的多用户體驗，這將是越來越重要的問題。那通過響應式的設計開發方式，就可以使網站頁面隨瀏覽裝置的不同而自行響應，動態的調整佈局結構、元素規格樣式，將相同的內容以不同的格式呈現給不同裝置的多用户。那下面就來分享超級實用的 html5 網頁製作的流程。

　　1. 瞭解目標多用户的裝置類型和屏幕尺寸
 
　　分析並統計目標多用户使用裝置的基本情況，清楚明確裝置的類型和屏幕大小，例如，移動裝置手機端以及平板端，在設計以及實現的時候要注意新增收拾功能，至於屏幕的尺寸，在設計時要注意手機以及平板端的橫向以及縱向的大小，電腦端則要注意屏幕的普屏及寬屏。
 
　　裝置類型：包括移動裝置（手機、平板）和 PC 。對於移動裝置，設計和實現的時候注意增加手勢的功能。屏幕尺寸：包括各種手機屏幕的尺寸（包括橫向和豎向）、各種平板的尺寸（包括橫向和豎向）、普通電腦屏幕和寬屏。需要考慮的問題：某個頁面進行響應式設計時其適用的尺寸範圍是哪些？例如，某搜索網站的搜索結果頁面，跨度可以從手機到寬屏，而該首頁，由於結構過於複雜，想直接遷移到手機上，不太現實，不如直接設計一個手機版的首頁。結合多用户需求和實現成本，對適用的尺寸進行取捨。比如一些功能操作的頁面，多用户一般沒有在移動端進行操作的需求，沒有必要進行響應式設計。
 

 
　　2. 製作線框原型
 
　　html5 網頁製作流程。針對確定下來的幾個尺寸分別製作不同的線框原型，需要考慮清楚不同尺寸下，頁面的佈局如何變化，內容尺寸如何縮放，功能、內容的刪減，甚至針對特殊的環境作特殊化的設計等，這個過程需要設計師和前端開發人員保持密切的溝通。
 
　　需要強調一下，響應式設計的目的在於，針對不同裝置的屏幕規格區間，進行功能及內容的輸出格式預設，所以 WordPress 網站製作中只需要選取一些具有代表性的裝置，而不必顧全所有已知的規格類型，我們製作線框原型的主要目標是規劃樣式背後的邏輯。
 

 
　　3. 測試線框原型
 
　　將圖片匯入到相應的裝置進行一些簡單的測試，可幫助我們儘早發現可訪問性、可讀性等方面存在的問題。
 

 
　　4. 視覺設計
 
　　html5 網頁製作的流程中注意，移動裝置的屏幕畫素密度與傳統電腦屏幕不一樣，在設計的時候需要保證內容文字的可讀性、控制元件可點選區域的面積等。
 
　　(1) 、儘量保持小屏幕規格樣式的簡潔。在 UI 元素風格方面，可以多與前端開發人員交流，儘量採用可以通過 CSS3 實現的常規風格樣式，減少背景圖片的使用。
 
　　(2) 、要保證內容的字型字號在所有裝置中都足夠可讀，尤其是在手機上。
 
　　(3) 、與傳統 Web 設計開發相似，最終產出的頁面必定會與視覺稿有所出入，尤其對於響應式站點來説，由於在佈局結構和細節樣式等方面都需要有調整變化的能力，所以在開發過程中產生設計還原度方面問題的機率會更大。
 

 
　　5. 前端實現
 
　　與傳統的 web 開發相比，響應式設計的頁面由於頁面佈局、內容尺寸發生了變化，所以最終的產出更有可能與設計稿出入較大，需要前端開發人員和設計師多溝通。

       如果您還想了解更多關於 WordPress 外貿獨立站網站建設的內容，還可以看看：WAPWooCommerce 建站的要點分析。