关于响应式设计的三个理念

响应式设计(Responsive Design)无疑是当下最受关注的行业话题之一。所谓响应式设计,实质是网页设计的一种方法,基于CSS3的媒介查询特性使得网页适应不同设备,即根据设备的分辨率和缩放自动重新布局使网页适应各种不同的屏幕尺寸。随着越来越多的用户使用平板电脑和智能手机设备访问互联网,响应式设计这个概念空前白热化。对于开发人员来说,做好响应式设计的一个关键就是事先设想到他们的信息可能会以哪些方式被浏览。关于响应式设计,有三个非常重要的理念你需要知道。

响应式设计不等同于移动设计

虽然响应式设计对于网页在移动设备上的呈现是一门很炫的技术,但它并不只是移动设计。响应式设计涵盖了一个网站的整个网页设计。无可否认,响应技术能在移动设备上运行,甚至你还可以从移动设备上开始你响应式设计的第一关。然而,响应式设计远不止此。作者认为,最好的响应式网站应该是可以在各种分辨率的桌面上查看,且在平板电脑和智能手机上也有相当惊艳的浏览效果。如果开发人员在响应式设计中只看重移动设备这一块,那将错失很多用户体验网站的机会。

好的SEO也应包括响应式设计

网站建设人员都很看重SEO,而响应式设计对于SEO有很大的帮助。使用响应式设计你的网站会有更靠前的排名,还能避免内容重复。进行响应式设计和SEO最简单的方法就是参考Google浏览器。

Google支持智能手机优化网站这三种配置:

使用响应式网页设计,同一组URL能在所有设备上查看,每个URL在所有设备上的HTML都是一样的,仅使用CSS来改变网页在设备上的呈现。这是Google推荐的配置。

同一组URL能在所有设备上查看,但这些URL在不同设备上的HTML(和CSS)是不同的,取决于是在台式机上还是移动设备上。

对于移动设备和桌面平台有不一样的URL。

网格——你的终极武器

早在出版业问世时,使用网格来进行页面设计就已经兴起了。网格解决一个基本的对齐问题。作者认为,最好的响应项目应该是能够基于任何一个百分比按比例扩展或缩放而保持像素不变。在这里,作者建议从网站最多被浏览的宽度来开始你的响应式设计。多数响应式网格包括三种不同的浏览器宽度:768像素及以上、480×768像素, 320×480像素。一些开发人员也选择其他的宽度,如1000像素以上的,以支持桌面的宽屏显示器。如今,无论分辨率多大,流体背景都可用来填充任何屏幕的剩余空间。对于流体网格,选择也不只几种,开发人员可以依据情况选择最适合的。

最后,对于响应式设计,作者推荐Twitter推出的Bootstrap和ZURB推出的Foundation,它们算得上是时下最先进的响应式框架,开发人员可以借助这些优秀的开发框架进行网站设计。