1. 以桌面电脑为中心的设计思想,应该转变成为未知设备而设计的思想。首先为最小的可视区域设计版式然后在此基础上渐进增强用户体验。
2.如果预算充足且形势需要,做一个真正的“手机版”是网站是首选。(完全专注移动平台、为移动设备用户提供不同内容/体验的解决方案称之为“移动网站”。)这样就可以基于用户的设备、位置、连接速度,以及包括技术特性在内的其他变量来提供不同的内容、设计和交互。
3.响应式设计是将已有的三种开发技巧(弹性网格布局、弹性图片、媒体和媒体查询)整合起来得到的。
一句话概括响应式:针对任意设备对网页内容进行完美布局的一种展示机制。
4. 下载视口调试工具
引导客户:网站不必在所有浏览器中表现一致。
5. 是否要采取做响应式的网站?
- 客户是否想支持互联网用户增长最迅猛的市场?如果想,那响应式方法就很适合;
- 客户是否想要最简洁、快速且易于维护的代码, 如果想,那响应式方法就很适合;
- 客户能否理解用户体验可以且本应该根据浏览器不同而不同? 如果可以理解,那响应式方法就很适合;
- 客户是否要求设计效果在所有浏览器中都保持一致,包括IE8以及更低版本? 如果是,那响应式方法就不适合;
- 该网站的当前或预期客户中,是否有百分之七十以上的人可能使用IE8及更低版本, 如果是,那响应式方法就不适合;
6.打你接受新项目,不论响应式是否合适,应试着向客户说明几点:
- 允许页面显示效果在老旧浏览器中有细微的差别,这样代码更易维护,将来更新的成本更低;
- 让页面元素在那些老旧浏览器中表现一致会导致网站增加大量的图片,是网站变慢,制作成本变高且更难维护;
- 现代浏览器可以理解的简洁代码等同于更快速的网站。快速响应的网站在搜索引擎中的评级高于慢腾腾的网站;
- 使用老旧浏览器的用户越来越少,使用现代浏览器的用户越来越多——我们应该支持大多数!
- 更重要的是,支持现代浏览器,就能尽情享受响应式网页设计,能响应不同设备的不同浏览器窗口。
7. 视口是指浏览器窗口内的内容区域,不包含工具栏、标签栏等。也就是网页实际显示的区域。
屏幕尺寸指的是设备的物理显示的区域。
有些浏览器调整工具显示的尺寸包含浏览器的其他元素,如地址栏、标签栏和搜索栏,有些工具则不是