非商业转载请注明作译者、出处,并保留本文的原始链接:http://www.ituring.com.cn/article/72202
Ben Frain从1996年开始开发网页,是一名有着丰富经验的网页设计师和前端工程师,他与世界各地的客户和设计机构并肩工作。他在响应式设计领域的造诣尤其深厚,精于前端代码性能优化,著有《响应式Web设计:HTML5和CSS3实战》和Sass and Compass for Designers。于此同时,他还是一名科技记者,定期为一些关注Mac平台、前沿科技、网页设计和航空技术的刊物撰稿。在此之前,他曾是一名电视演员,毕业于索尔福德大学的媒体与表演专业。
图灵社区:是什么促使你放弃自己的表演事业成为一位web设计师的?
因素很多。最终让我决定从事web设计的原因是我想开始努力巩固自己在某一方面的技术,从而成为这个领域的专家。表演需要到处旅行,这样陪家人的时间就少了。
图灵社区:你能列举几个响应式设计网站最好的例子吗?
现在这样的例子太多了!CodeKit最近刚刚推出了新的网站,我非常喜欢。
但是,我认为列举一些具体的站点是不太合适的(虽然我刚刚这么做了),因为设计是为解决问题而存在的。所以这是一个你可以自问的问题:你正在寻找的响应式设计是否很好地解决了你已有的问题。
图灵社区:当开发原生应用的时候,流量是开发者考虑的主要问题之一,他们会为这些应用做一些有针对性的优化。在进行响应式设计时,我们怎么才能把流量考虑进去?
像Google Page Speed Insights这样的工具是一个很好的开始。然后我们就需要考虑CDN,使用工具来优化资源。但那就完全是另一码事儿了,一言难尽。
图灵社区:你认为适应性设计和响应式设计的区别是什么?
我认为适应式设计并不一定会用到流式布局;从根本上它是两个响应式设计的核心组件(流式图像,流式网格布局,媒体查询)。所以,最后你在视图间的设计会存在“断点”。
图灵社区:你认为渐进增强的web设计可以和响应式设计融合吗?
渐进增强以恪守Web标准的标签为基础,意味着它在所有浏览器中均可用。然后通过CSS样式和必要的JavaScript来为更先进的浏览器提供渐进式的增强体验。
我认为所有的响应式设计都是渐进设计的;从最低规格的设备的承载能力开始,然后以此为基础构建,渐进地为更有能力的设备增加更多功能。如果你发现自己需要从网页上去除很多元素,比如视口或者性能变更,那么你的前进方向很可能是错误的!
图灵社区:现在的移动设备,不仅尺寸千差万别,分辨率也越来越高,响应式设计可以为高分辨率设备提供支持吗?
设备及其性能总是与时俱进。iPhone 4是第一款被广泛使用的高分辨率设备。它的屏幕大小为960乘以640像素,分辨率为每英寸326个像素,是上一个版本iPhone(iPhone 3GS)及2011年的15" MacBook Pro笔记本分辨率的两倍。预计其他设备,从平板电脑到笔记本电脑再到台式机都会跟风。
响应式工具已经提供了一些解决方法,可以为这类设备提供增强支持。但是使用这个技巧时需要慎重。图片尺寸越大,文件体积也越大,所需的加载时间会更长,所以再重申一遍:你可以这么做,但不一定应该这么做。
另外,如果浏览器支持可缩放矢量图形(SVG),那使用该技术替代图片可以解决我们目前面临的很多图片缩放问题。顾名思义,可缩放矢量图形能生成可任意缩放但显示清晰的矢量图片。不过,媒体查询和SVG对嵌入在页面中的高分辨率图片无能为力。在这种情况下你需要考虑基于JavaScript的解决方案。
图灵社区:可穿戴移动设备比如Google Glass和iWatch吸引来越来越多的关注。你认为响应式设计可以应用到这些设备上吗?
我坚信,对目前的大多数网站来说,采用HTML5和CSS3的响应式网站设计,绝对是最佳方案。只要对现有的工作流程、实际做法和开发技巧稍作调整,就可以制作出快速、灵活、易维护的网站,最重要的是,无论在何种视口下网站都能表现完美。
我认为响应式web设计给了你一个最好的机会,让你可以在任何设备上很好地展现自己的网站。总会有新的设备,新的技术和科技出现,这是进步。我们必须时刻准备着拥抱新的事物,并为此调整自己。
图灵社区:你认为原生应用和web应用在未来哪个会占领市场?为什么?
我认为(希望)web应用会最终赢得市场,因为它们有无所不在的本质(可以被用在更多地方),但是web还有一段路要走。比如,我们需要去掉移动浏览器的300毫秒滞后,然后提供一种更强健的布局机制。这些问题虽然存在,但并不存在于所有设备。这同时也是web的强项,它可以让人们体验到所有功能,而不是向一部分用户提供一个二元的体验(有还是没有)。
图灵社区:有些人确实预测web应用在未来会超过原生应用。但是响应式设计还有自己的局限性。你认为最终的解决方案是什么?
我们必须要等一等才能看到未来,让自己适应到发展中。我不太喜欢猜测。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。