跨设备网页设计开发策略一览

2017年5月23日——随着移动设备的普及，很多网站在已经有PC端的情况下，为了提供移动浏览体验、获得更高的覆盖率，开始了面向不同设备的网页设计。为了获得不同平台上相同的显示效果，需要为多个设备制作不同版本的网页，增加了维护成本和架构设计的难度。因此为了提高网页设计的实效性，节省开发成本，需要进行跨设备设计，科学地选择开发策略。

一是响应式网站设计布局。这是当前最受欢迎的多设备自适应开源响应式前端框架，最早出现在推特网用于保持内部解决响应与网页一致性的工具Twitter Blueprint，之后转变理念从移动设备友好转变为移动设备优先，并将其融入了框架内核。流式格栅系统响应式网页设计使用了行和列的组合来进行页面布局，在布局块中填充内容，但不再使用像素进行尺寸标记，而是使用比例和模块的思想，不要求较高个性化配置的网站推荐使用这种网页设计方法。

二是独立移动站。这种设计方式适用于没有严格同步要求或者强烈移动终端使用意图的，但是想要提供类似APP体验的应用场景。一些大规模网站如京东、当当等有着十分复杂的系统结构，网页设计时全站响应难度非常大，因此更希望为移动端提供和APP统一的交互方式，倾向于选择独立建站，称作WAP站或者H5版本来单独运维。这种建站方法保留了原有PC站，重新建设移动网站，确保了移动设备、分辨率以及产品用户可控，成本也易于控制。缺点是网站内容更新及整体维护成本偏高，分开维护的方式容易导致坏链和错链。

三是移动优先。这种建站策略使用了全新的渐进增强式代码基础，能够充分发挥跨设备网页设计的所有优势，获得无缝对接一致性用户体验，可拓展性强、全屏幕适应、运维成本低、SEO统一；但这样的网页设计策略也面临着很多风险，计划、开发和测试工作量远远大于普通PC站，需要权衡优势和风险。

四是自上而下响应。网站原有的设计标准已经比较先进时，就可以充分利用现有代码适应更多分辨率，这种网页设计策略对原网站编码基础有很高要求，调整分辨率之后还要重新测试原分辨率页面，其设计成本和原网页编码基础有关，实际工作之前首先要评估原网站编码质量。