响应设计的技巧,秘诀和最佳实践

摘要:响应设计(Responsive Design)一种新兴的技术,它采用易变的布局和媒体查询扩展网站,使得网站能够动态适应各种尺寸大小的屏幕。

除非你现在正处在世外桃源,否则你不可能没有听说过web设计者间最近广泛流行的响应设计(Responsive Design)。Ethan Marcotte使用responsive design这一术语描述一种新兴的技术,它采用易变的布局和媒体查询扩展网站,使得网站能够动态适应各种尺寸大小的屏幕。如果你之前从未听说过响应设计,那么你可以好好读读Marcotte的介绍文章。

简而言之,响应设计就是使用非固定的网格、非固定的布局和@多媒体查询使得现在的(以及将来的)web能够适应不同尺寸的屏幕。无论你的用户使用的是一个电话,一个iPad或是巨大的台式显示器,你的网站都能够适应。

响应设计将成为一个非常有吸引力的工具,正如Luke Wroblewski所说的,设计需要遵循移动优先原则。也就是,从小屏幕开始考虑。先理清你的网站的核心,然后一点点开始构建。从骨架开始构建能够保证网站的质量,促使开发人员关注用户所关注的问题。

你打算如何构建一个响应良好的网站呢?这个问题因人而异,但是还是存在一些通用的方法的。为了帮助你开始响应设计,这里列出了一些初期设计时的最好实践经验,都是从大量的web资源中总结出来的:

使用@media控制你的屏幕布局,但是需要记住,只有这些并不是一个真正的响应设计。

使用非固定的布局适应各种屏幕的尺寸。不要将你的设计限制在iPhone或是Android上,不要将它切割为平板电脑版本和桌面电脑版本。布局设计需要更加灵活可变,否则,如果某个新的屏幕尺寸突然变成潮流,你的网站将无法应对。

根据你的网站的具体内容设定你的网格。封装好的网格系统可能并不适用于你的应用。这类网格的最大问题就是它们可能与你的具体内容不符。根据网站内容设计你的布局,而不是根据canvas(或是网格)。

从小屏幕开始。从最新的屏幕开始设计,然后逐步在浮动元素中加入@media规则,满足更大的平板或是桌面浏览器的窗口需要。从一个窄的单列布局开始设计移动浏览器网站,然后再逐步扩大。

使用Respond或是CSS3 Media Queries这类JavaScript库引导@media查询,因为在旧版本的浏览器中可能不支持直接的@media查询。从最小的屏幕开始然后逐步扩大意味着,桌面浏览器需要处理@media,确保使用Respond这类辅助工具能够支持旧版本的浏览器处理@media。

不要指望Photoshop,在浏览器中构建你的组件。使用Photoshop构建动态的布局压根就没有可能性,应该在浏览器中实现。

使用img { max-width: 100%; }控制图像大小。对于大规模的图像,可以考虑在小屏幕中使用Responsive Images这类工具缩小图像的大小,然后在大屏幕中使用JavaScript还原大图像。

延迟下载。可能你的网站中有些辅助元素,能够优化你的网站,但并不是必须的。这类元素可以在下载完基本内容后再使用JavaScript加载这些元素。

不用处处要求完美。即使做到了上述建议,你可能还是会漏掉某些使用不支持JavaScript的旧版本浏览器的用户。现在这样的用户已经越来越少了,如果他们在桌面浏览器中看到了移动版本的布局,这也并不就是世界末日。你的网站已经具备很好的可用性了。

记住响应设计是一个非常年轻的概念——是一个新的工具——每天都会涌现出一些新的东西。不要将上面的建议当做是一些硬性或是速成的规则,它只是一些引导指南罢了。

本文编译自byane,原文地址。