响应设计的技巧、秘诀与最佳实践

Web设计者间广泛流行着一个概念，即响应设计（Responsive Design）。它是一种采用流体布局和Media queries（媒介查询）技术来创建网站，使其能够适应各种尺寸大小屏幕的技术，Ethan Marcotte使用 responsive design 这一术语描述它。如果你之前从未听说过响应设计，那么你可以好好读读Marcotte的介绍文章。


简而言之，响应设计就是运用流动网格、流体布局和@meta queries使得现在（及将来）的页面能够适应不同尺寸的屏幕。无论用户是通过手机、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的旧版本浏览器的用户。现在这样的用户已经越来越少了，如果他们在桌面浏览器中看到了移动版本的布局，这也并不就是世界末日。你的网站已经具备很好的可用性了。

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

英文来源： Tips, Tricks and Best Practices for Responsive Design



感谢 WebAppTrend 投递这篇资讯

已有 0 人发表留言，猛击->> 这里<<-参与讨论


ITeye推荐

• —软件人才免语言低担保 赴美带薪读研！—