近几年来，随着移动因特网的迅速发展，移动用户的数量也不断超过PC用户。这就意味着，除了智能手机，使用平板电脑和电视机上网的用户也在不断增长。如何使我们的网站在这种情况下尽可能地兼容各种设备，并确保良好的用户体验，将变得越来越重要。那么通过响应式的设计开发方式，就可以使网站页面根据不同的浏览设备而自行响应，动态调整布局结构，元素规格样式，将相同内容以不同格式呈现给不同设备的用户。接下来就分享一下html5网页制作的超实用流程。
了解目标用户的设备类型和屏幕尺寸；
对目标用户使用设备的基本情况进行分析和统计，明确设备的类型和屏幕大小，例如，移动设备手机端以及平板端，在设计和实现时要注意增加收集功能，至于屏幕的尺寸，在设计时要注意手机的横向、纵向以及平板端的尺寸，而电脑端则要注意普屏和宽屏屏幕。
装置类型：包括移动装置(手机，平板电脑)和电脑。对移动设备来说，在设计和实现时要注意增加手势功能。屏面大小：包括各种手机屏幕(横屏和竖屏)，各种平板的尺寸(横屏和竖屏)，普通电脑和宽屏。要考虑的问题：当页面用于响应式设计时，它适用于哪种尺寸？比如，某搜索网站的搜索结果页，页面跨度可以从手机到宽屏，而首页，由于结构过于复杂，想直接移植到手机，也不太现实，不如直接设计一个手机首页。将用户需求与实现成本相结合，确定适用尺寸。如有些功能操作页面，用户一般不需要在移动端进行操作，无需响应式设计。
二、制作线框原型。
html5网页制作过程。对于确定下来的几个尺寸分别制作不同的线框原型，需要考虑清楚不同尺寸下的页面布局是如何变化的，内容尺寸是如何调整的，功能，内容的删减，甚至特殊环境的特殊设计等等，这一过程需要设计师和前端开发人员保持密切的沟通。
必须强调的是，响应式设计的目的在于，针对不同设备的屏幕规格区间，对功能和内容的输出格式进行预设，因此在网站制作中，只需选择一些典型的设备，而不必考虑所有已知的规格类型，我们制作线框原型的主要目的是规划出样式背后的逻辑。

三、测试线框原型。
把照片导入相应的设备中进行一些简单的测试，可以帮助我们尽早发现易访问性、可读性等方面的问题。
四、视觉设计
在html5网页制作过程中注意到，移动设备的屏幕像素密度不同于传统的计算机屏幕，在设计时需要保证内容文本的可读性，控制可点击区域的面积等等。
(1)尽可能保持小屏幕规格样式简洁明了。关于UI元素的风格，可以多和前端开发人员沟通，尽量采用CSS3可以实现的常规风格，减少背景图片的使用。
要保证内容的字体字号在所有设备上都是可读的，特别是在手机上。
与传统的Web设计开发类似，最终生成的页面必然会与视觉效果不一致，特别是对响应式网站而言，由于在布局结构和细节样式等方面都需要有能力进行更改，因此在开发过程中产生设计还原度问题的可能性更大。
五、前端实施。
响应式设计的页面相对于传统的web开发而言，由于页面布局、内容大小的改变，所以最终的输出更可能与设计稿不一致，这需要前端开发人员和设计师进行多方面的沟通。