Scott Jehl在敏感的波士顿环球报站上

这篇文章最初出现在十一月号(221).net杂志 - 世界上最畅销的网页设计师和开发者。

布鲁斯劳森:谁和你一起工作过?
SJ细丝集团Ethan MarcotteUpstatementMat Marquis和米兰达穆利根,数字设计总监波士顿环球报,包括主要的'设计 - 发展'团队。与此同时,Globe的内部团队非常精通将我们的前端代码转换为现在的全功能站点。

BL:Ethan Marcotte是响应式网页设计的典型代表;他在这个过程中有多大的影响力?
SJ:很多开发过程都是由Ethan关于设计“响应性”的思考所驱动的。为了在大型网站上使用这种思想,我们不得不将主要应用于布局的原始技术扩展到其他领域,如行为,标记增强,条件资产加载和性能。

BL:最初的技术挑战是什么?
SJ:主要是,我们希望页面在功能不足的设备上运行良好,这意味着找出一种有效且响应性地加载资产的方法,这样我们就不会在没有得到适当支持或需要的情况下增加显着的开销。该网站的每个关键功能都旨在独立于JavaScript工作,但在功能强大的浏览器中通过更丰富的JavaScript驱动交互进行了增强。我们专注于提供最少量的JavaScript,我们需要执行重要的polyfill,检测功能,并根据环境条件有条件地加载更多JavaScript。

BL:你为什么选择使用HTML5?
SJ:我们使用HTML5有很多原因。大多数情况下,它是未来友好的,并提供在我们的功能集中有用的功能。例如,我们广泛使用数据属性来配置行为选项或关联内容增强功能。我们还欣赏能够使用更新的语义元素代替div / p / span它们才有意义。

BL:你是如何在旧版浏览器上优雅地降低网站质量的?
SJ:为了使响应式布局在缺乏媒体查询支持的浏览器中工作,例如IE6-IE8,我们需要一个快速的CSS3媒体查询polyfill。我们发现现有的解决方案太重了,并没有足够快地翻译布局,所以我们需要编写自己的解决方案。结果是Respond.js Polyfill,这是在Github上开源的。

BL:你对图像的处理方式是什么?
SJ:我们希望预先提供适合移动设备的图像,在较慢的连接上负责带宽,但我们需要在屏幕更大的设备上提供更大的图像。我们设计了一种称为响应式图像的方法,它允许我们检测屏幕尺寸,并且在大屏幕上,将移动大小的图像交换为较大的图像而不加载两者。

另一个挑战是广告,因为许多第三方广告服务并未考虑流畅的布局,而且从性能角度来看,它们的嵌入机制和请求数量可能非常昂贵。最后,我们设计了一些动态加载广告的模式,这样他们就不会阻止内容立即加载。我认为需要重新考虑第三方服务,以适应未来网站的制作方式。

BL:那么旧的IE /无JavaScript浏览器如Opera Mini呢?
SJ:我们花了很多时间确保网站在没有JavaScript的情况下使用起来很有用,因为移动网络使这个问题再次变得更加相关。

需要对Internet Explorer浏览器进行填充以支持媒体查询。除此之外,我们偶尔会遇到特定于Internet Explorer的CSS解决方法,但没有太多。

我发现如果你使用渐进增强功能构建Opera Mini,它往往非常容易支持:它是一个很棒的浏览器,包含很多性能优化,当然它非常受欢迎,所以支持它是一个明智的选择。

我们定期测试的基准浏览器是BlackBerry 4.6,它可以像大多数其他支持非媒体查询的浏览器一样获得基本的无JavaScript体验。有人给我们发了截图地球网站最近在牛顿上运行!



翻译字数超限