响应式网页设计中的八个问题

James Young 最近研究了设计师在设计响应式网页设计中遇到的最大的问题，以下是他的报告：

今年早些时候，我做了一个调查，是关于设计师在创建响应式网页设计中遇到的问题。本文将列出一些最常见的问题，并提供可能的解决方案，希望会对你的下一个项目有所帮助。

这里的信息是基于数以百计的调查结果（如果你想要添加自己的答案，我们始终欢迎），同样也有我在 Offroadcode 工作中所遇到的问题。下面我们就来详细说说响应式网页设计中最常见的问题，并且该如何避免它们。

废话不多说，然我们来见识下响应式设计中最常见的问题，以及如何处理这些问题。

初出茅庐

尽管响应式设计已经出现了两年多了，但它始终还只是刚出现的事物，设计师所面临的是瞬息万变的设备，代码框架和脚本。当然，在工作中，在与客户管理网站的创建过程中需要新的工作方式。

这些常见的功能如下：

1. 向客户解释后驱
2. 缺乏静态设计阶段
3. 导航栏
4. 图像
5. 表格
6. 对旧的固定宽度网站进行转换
7. 对老版本IE 的支持
8. 测试的时间和成本

01.向客户解释后驱

传统的网页设计过程是线性的，客户可以很方便的理解。最初他们会得到一份简报，里面包含了一些框架图和各个阶段的规划，然后再得到一组关于网页的大致视觉效果，并从中做出选择。当他们签字的时候，网站本身就已经结束了。

我相信许多人都已经发现了，这已经是简单到不能再简单的事情了。许多设计师花费大把的经历来和客户解释，不可能有真的“视觉舞台”。

响应式网页设计是一周流体的过程和框架，草图和线框图可以提供很强大的帮助。

解决方案：展示响应式设计的力量

向客户解释响应式好处的最好办法，就是要让客户知道，响应式到底可以做什么。不要谈论 breakpoints ，不要谈论 media queries ，不要太论跨平台支持，他们很快会忘记这些枯燥无味的术语，有一些虽然听起来很好理解。

响应式布局，由 Adobe公司 的 James Mellers 设计

如果你现在还无法展示一个可以适应各种设备的网站，那么选择一个经典的响应式网站，例如：responsive.is ，Responsive Layouts, Responsively Wireframed （见上图）

02.缺少静态设计阶段

如前所述，在设计师的报告中，一个最大的问题就是，相对“旧”的设计进程所做出的改变，响应式设计需要更加灵活的设计。

相比于以前的静态设计图，先做的设计师更加依赖于快速表现方式，包括草图，线框图或者直接在浏览器中设计出HTML+CSS 的原型图。

解决方案：更多元素和更少布局

每件事情都有着不同的解决方法， 你可以选择自己喜欢的方式，只要能够达到目的，也就是让客户满意，九成其实就已经足够了。

不过，我的个人偏好是尽可能的利用纸来尝试各种不同的想法。如果你按照Sam Hardacre 的关于素描的建议的话，这一切就会变得简单快速。

我建议尽可能早的使用 HTML 在浏览器中进行测试，然后使用 Fireworks/Photoshop 来创建素材，而不是整体布局。

素描，线框图和原型图。这三者并不意味着你不需要用纸了，只是去尝试不同的方式来实现。

在一个大的项目中，你可能会纠结于绘制线框图。Dan Mall 在重新设计 Crayola.com 中所学到的中给出了不少好的建议，同时，你可以制作一些可以随身携带的线框模型。这些东西可以带来极大的灵活性，从而使客户更容易接受。

对于其他一些有用的个人经验，你可以查看Stephen Hay 的响应式设计流程，如果你需要更详尽的信息，可以查看Yellow Pencil 的网站。

03. 导航

在过去，导航栏通常位于网页的顶部，也有些在左侧栏。而现在，对于导航栏我们需要思考更多。

在我们的调查中，多数设计师提到导航栏确实是一个比较棘手的问题。而且并没有一个通常的解决方案。

解决方案：好用，一致

对于导航栏的策划需要经过深思熟虑，并且要基于网站的内容和信息体系结构，以及大量的设计因素。

与其下载一个Demo 或者脚本，不如去好好研究一下这个 Demo/ 脚本 是如何工作的，为什么它要被设计成这个样子。而且最重要的是，它对你的网站有什么帮助。

这里有一些有用的文章：

• 响应式导航栏组建， by Brad Frost
• 正确的显示导航栏图标， by Andy Clarke
• 不要让你的菜单被覆盖， by Stu Robson
• 针对响应式设计的可扩展的导航栏， by Palantir’s Michael Mesker

被激活的响应式导航栏：星巴克官网

要记住：尽可能多的使用不同的设备来测试你的导航栏，并且测试越多的情况越好。一直以来我经常会浏览整个网站来检查导航栏是否正常工作，不要仅在意其中的一个。

04. 图像

就像导航栏一样，在响应式设计中，图片的处理也是多种多样的。目前为止，W3C 组织还没有对此制定出一种规范，所以我们只好从如此之多的脚本中选择一种适合我们自己的，以此来兼容多种设备。

更进一步思考，为了兼容下一代高分辨率设备，例如Retina 屏幕的 iPad 和 Macbook Pro ，以及一些非苹果的硬件。

代码，图片以及图标应尽可能的灵活，在高分辨率的屏幕他会被放大，因此应当确保他们不会因此而变得模糊。

解决方案：脚本，SVG 和 图标字体

虽然有很多非官方的响应式图片的解决方案，而且有相当一部分已经十分优秀了，这让我们不必费神通过各种代码来去适应了。

Oak Studio 的 Symbolset 图标字体已经可以很好的适配不同大小的屏幕了

这里有一些技术和资源，对于项目中的自适应图片和高分辨率环境比较有帮助：

• Adaptive Images by Matt Wilcox
• Using SVG graphics today, by Josh Emerson
• Resolution independence with SVG, by David Bushell
• Using CSS sprites to optimize your website for Retina displays, by Maykel Loomans
• Flowchart: how to retinafy your website, by Thomas Fuchs
• Symbolset icon fonts, by Oak Studios

05. 表格

大量的调查显示表格也成了一个十分棘手的问题，尤其是当表格内包含了大量的信息或者是大量的单元格。这些信息在小屏幕上显示的时候会被挤压，目前为止仍然没有一个完美的解决方案。不过，我们也正在尝试一种很有前途的方法。

解决方案：选择适合你的方式

Chris Coyier 在他的博客中有一篇文章，关于表格的一些好的想法：

• Responsive Tables, from Zurb
• Responsive Tables, from David Bushell
• Break a table out of its container（佚名）

我曾经遇到过一些 状况，可选的方案是隐藏一些“不重要的数据”。当然，这些都还是实验性的表格解决方案，但是我个人会建议还是不要这么做。

06. 转换传统的固定式网站

调查中另一个比较棘手的问题就是如何更新那些传统的固定式的网站，让这些网站也实现响应式——当然，你也应该这么做。正如我上文提到的，响应式设计的流程与传统的固定式设计师大不相同的，代码也不够灵活。

问题是当你面对一个需要升级的网站的时候，你是打算反编译现有的模板和样式表，还是重新开始。

解决方案：重建才是硬道理

多数受访者表示他们更愿意重新写一份模板和样式表，除非是别无选择的特殊情况，他们才会反编译现有的模板。

通常情况下，传统的固定式网站并没有考虑移动优先的设计方案。有些时候内容的编排是通过精心策划的。虽然说，还是可以进行反编译来实现响应式的，但是在一些大型的网站上，重建工程可能会更容易。

07. 如何满足旧的IE 使用者

我敢肯定你一直都在期待我说一说IE 不光彩的一面，我敢确定，在旧的IE （IE8 以及更早的版本）里，你遇到的问题是缺少对 CSS 的媒体查询（media queries）的支持。所以你的移动优先设计不能够在桌面浏览器中正确的显示。也就是说在大的桌面屏幕上，你的网页布局依然保持着手机模式。

解决方案：修补或者放弃

不幸的是，尽管设计师们一厢情愿（取决于微软的行动）希望可以摆脱旧版的IE ，但就目前来说，当我们在设计网站的时候，还是需要去考虑一下旧版的IE 浏览器（尤其是 IE8 ）。好消息是，我们仍有一些办法来让旧版的 IE 兼容响应式设计。

如果你希望可以在旧版的IE6 中尽可能的保持版式的话，可以考虑下在首页加入respond.js polyfill from Scott Jehl。如果你想要更全面的了解这方面的知识的话，我强烈见你去阅读Techniques For Gracefully Degrading Media Queries, by Lewis Nyman。

浏览器缺乏对宽度变量的支持会导致很多问题。Lewis Nyman 详细的阐述如何解决这些问题。

如果你希望逐步淘汰旧的浏览器，只需要保持它的可访问性即可，那么你可能需要考虑的是……什么也不做。如果你没有使用 respond.js ，那么旧版的IE 用户也是可以看到网站的移动版。

这样做的用户体验并不完美，但至少在大的显示器上，网站依旧是可以被访问的。如果行不通，你也可以考虑为网站添加条件性的语句，仅针对旧版IE ，并添加一些样式（固定宽度），毕竟在移动设备上那种垂直式的布局对多数用户来说并不友好。

在我看来，质疑客户要求对旧版的IE 提供兼容的人，我想要问问你，你过你考虑过正在使用旧版 IE 用户的感受的话，你不会认为说兼容是一件不重要的事情。

08. 测试时间和成本

调查中的另一个被提及最多的问题是：如何测试？应当使用什么设备来测试？因为这些测试设备需要投入的巨大成本。

对于多数设计师来说，特别是那些自由设计师和小型企业，去建立一套测试机制是很难得，有时候很难去投入你现有的设备之外的设备去测试。这个问题在调查中的反馈异常明确。多数人测试的时候只是调整浏览器的窗口大小，顶多再自己的手机或者平板上看看。建立一套测试机制是一项十分必要的支出。

测试时间同样也是一个问题。尽管时间会比较长，但是我觉得这样可以抵消一部分的原型测试，在设计的过程中不断的调整浏览器来检查视觉效果。

解决方案：共享设备，继续调整

很高兴能够看到Clearleft 分享了他们大量的测试设备，任何想要去访问他们公司的人都可以拿来测试。当然这并不是一个普遍的解决方案，我希望一些当地的社区可以做一些这样的倡议。

Clearleft 为那些能够来他们公司的人提供了大量可供测试的设备，其他机构赶紧行动起来。

如果你想知道其他的设计师是使用哪些测试工具的，我建议你去看一下 Stu Robson 的测试套件。Brad Forst 也写一篇很不错的指南，如何不花钱在真正的设备上测试。

真是设备的测试不是不可替代，但是如果你是在没有办法负担这么多的设备，你至少可以通过这些响应式测试工具，小书签以及框架。它们都很有帮助。

**投稿：**James Yound
**图片：**dConstruct archive, by Jeremy Keith. 查看原图
文字：Tom May
**翻译：**Max Cheung

Tom May 是  Creative Bloq 的副主编

原文链接：The 8 biggest responsive web design problems (and how to avoid them)