近幾年來，隨著移動因特網(wǎng)的迅速發(fā)展，移動用戶的數(shù)量也不斷超過PC用戶。這就意味著，除了智能手機(jī)，使用平板電腦和電視機(jī)上網(wǎng)的用戶也在不斷增長。如何使我們的網(wǎng)站在這種情況下盡可能地兼容各種設(shè)備，并確保良好的用戶體驗，將變得越來越重要。那么通過響應(yīng)式的設(shè)計開發(fā)方式，就可以使網(wǎng)站頁面根據(jù)不同的瀏覽設(shè)備而自行響應(yīng)，動態(tài)調(diào)整布局結(jié)構(gòu)，元素規(guī)格樣式，將相同內(nèi)容以不同格式呈現(xiàn)給不同設(shè)備的用戶。接下來就分享一下html5網(wǎng)頁制作的超實用流程。
了解目標(biāo)用戶的設(shè)備類型和屏幕尺寸；
對目標(biāo)用戶使用設(shè)備的基本情況進(jìn)行分析和統(tǒng)計，明確設(shè)備的類型和屏幕大小，例如，移動設(shè)備手機(jī)端以及平板端，在設(shè)計和實現(xiàn)時要注意增加收集功能，至于屏幕的尺寸，在設(shè)計時要注意手機(jī)的橫向、縱向以及平板端的尺寸，而電腦端則要注意普屏和寬屏屏幕。
裝置類型：包括移動裝置(手機(jī)，平板電腦)和電腦。對移動設(shè)備來說，在設(shè)計和實現(xiàn)時要注意增加手勢功能。屏面大?。喊ǜ鞣N手機(jī)屏幕(橫屏和豎屏)，各種平板的尺寸(橫屏和豎屏)，普通電腦和寬屏。要考慮的問題：當(dāng)頁面用于響應(yīng)式設(shè)計時，它適用于哪種尺寸？比如，某搜索網(wǎng)站的搜索結(jié)果頁，頁面跨度可以從手機(jī)到寬屏，而首頁，由于結(jié)構(gòu)過于復(fù)雜，想直接移植到手機(jī)，也不太現(xiàn)實，不如直接設(shè)計一個手機(jī)首頁。將用戶需求與實現(xiàn)成本相結(jié)合，確定適用尺寸。如有些功能操作頁面，用戶一般不需要在移動端進(jìn)行操作，無需響應(yīng)式設(shè)計。
二、制作線框原型。
html5網(wǎng)頁制作過程。對于確定下來的幾個尺寸分別制作不同的線框原型，需要考慮清楚不同尺寸下的頁面布局是如何變化的，內(nèi)容尺寸是如何調(diào)整的，功能，內(nèi)容的刪減，甚至特殊環(huán)境的特殊設(shè)計等等，這一過程需要設(shè)計師和前端開發(fā)人員保持密切的溝通。
必須強(qiáng)調(diào)的是，響應(yīng)式設(shè)計的目的在于，針對不同設(shè)備的屏幕規(guī)格區(qū)間，對功能和內(nèi)容的輸出格式進(jìn)行預(yù)設(shè)，因此在網(wǎng)站制作中，只需選擇一些典型的設(shè)備，而不必考慮所有已知的規(guī)格類型，我們制作線框原型的主要目的是規(guī)劃出樣式背后的邏輯。

三、測試線框原型。
把照片導(dǎo)入相應(yīng)的設(shè)備中進(jìn)行一些簡單的測試，可以幫助我們盡早發(fā)現(xiàn)易訪問性、可讀性等方面的問題。
四、視覺設(shè)計
在html5網(wǎng)頁制作過程中注意到，移動設(shè)備的屏幕像素密度不同于傳統(tǒng)的計算機(jī)屏幕，在設(shè)計時需要保證內(nèi)容文本的可讀性，控制可點擊區(qū)域的面積等等。
(1)盡可能保持小屏幕規(guī)格樣式簡潔明了。關(guān)于UI元素的風(fēng)格，可以多和前端開發(fā)人員溝通，盡量采用CSS3可以實現(xiàn)的常規(guī)風(fēng)格，減少背景圖片的使用。
要保證內(nèi)容的字體字號在所有設(shè)備上都是可讀的，特別是在手機(jī)上。
與傳統(tǒng)的Web設(shè)計開發(fā)類似，最終生成的頁面必然會與視覺效果不一致，特別是對響應(yīng)式網(wǎng)站而言，由于在布局結(jié)構(gòu)和細(xì)節(jié)樣式等方面都需要有能力進(jìn)行更改，因此在開發(fā)過程中產(chǎn)生設(shè)計還原度問題的可能性更大。
五、前端實施。
響應(yīng)式設(shè)計的頁面相對于傳統(tǒng)的web開發(fā)而言，由于頁面布局、內(nèi)容大小的改變，所以最終的輸出更可能與設(shè)計稿不一致，這需要前端開發(fā)人員和設(shè)計師進(jìn)行多方面的溝通。