趋势造就响应式网页—— RWD
移动设备占了现代互联网流量的一半以上,且这一趋势只会越来越高,随着移动设备的普及,像手表、手机、平板……等设备,连接上网页的设备只会越来越多元零碎,而每个设备又有不同的解析度与尺寸,因此市场对 「能够适应各种设备」 的网页需求是大幅增加,因此出现了响应式网页设计 (RWD) 的做法。
在这之前是比较土炮的方式,就是设计好几种尺寸的网站,并且在不同的设备上分别呈现,这样的方式也称为自适应网页设计 (AWD),因为主要维护起来很麻烦,所以现在越来越少见了,但仍有其合适的使用时机,就是比较不通用。
可以说在 2022 年制作任何网站,都期望多少有这样兼容各种尺寸设备的功能,不过仅代表整体趋势,主要还是看网站的用户群来决定要不要导入相关功能。
RWD 如何制作?从哪里起步?
不用想太多,网页本来就是自适应的
不相信吗?来看看这个简单戏谑的网站:This is a motherf*cking website.
但如果要制作一个「能让内容自动适应各种设备尺寸的网站 」aka 「RWD 网站」,会需要哪些方面的努力呢?
- 设计师 - 提早规划不同网页尺寸的设计稿件。
- 前端工程师 - 实践设计师在不同网页尺寸达成规划好的布局。
如果已经对网站的客群十分的明了,甚至可以特别为某几个尺寸的网页做视觉上的优化。大致上就是 —— 「让网页内容可以顺应着设备做合理的配置」 就是好的 RWD。
制作 RWD 网站需考虑不同尺寸与设备下网页能以一个舒适好用的角度与用户互动,因此在设计阶段,设计师会需要为此多绘制几个尺寸版本的平面稿件(通常有:桌面、平板、手机,视情况增加) ;前端也需要考虑更多实践布局的方式,与应对的技能。
响应式网页(RWD)可以指……
- 设计网页的模式方法 (这个网站使用 RWD 技术)
- 一种技能技巧 (他会制作 RWD 网站)
RWD 的优势与缺点
优势
- 提高不同设备用户的使用体验:内容会随着设备缩放与调整版面,因此并不会有需要放大缩小网页才看得清楚的问题。
- 降低开发成本、一致的设备体验:由于是同个网站的内容重新布局,因此方便维护修改。传统网站如果遇到大、中、小尺寸的设备浏览需求,会分别制作三个版本的网站,也代表前端多了三倍的页面要维护,这样的开发方式也称为自适应网页设计 (AWD) 。
- 方便分享网页:不用思考这个网站是「网页版」还是「手机版」才能分享。
缺点
- 较为制式化:由于 RWD 制作上通常避不开规矩的区块布局,奇形怪状的特殊设计可能就要多花时间和技巧去调整。
- 稍微较高的加载时间:由于 RWD 将内容改为浮动的,通常会需要多撰写一些代码来设置物件在不同尺寸下的版面状况,因此理论上档案会大一些些。
当然如果是抓已经事先做好的组件库即不会有这样的问题,网页是高度自动化、可复制的,除非有真的特别特殊的需求,否则差别并不会太大,总体来说使用 RWD 并不会有什么太大的缺点,只是会费些功夫而已。