SitePoint播客＃132：《波士顿环球报》React灵敏

Episode 132 of The SitePoint Podcast is now available! This week our regular interview host Louis Simoneau (@rssaddict) interviews Ethan Marcotte (@beep or @rwd) the designer widely credited with originating the term Responsive Design. He was also part of the team to put this into action for the first time on what could be called a ‘mainstream’ site, The Boston Globe. You can download this episode as a standalone MP3 file. Here’s the link:

SitePoint Podcast的第132集现已发布！ 本周，我们的常规采访主持人Louis Simoneau( @rssaddict )采访了Ethan Marcotte( @beep或@rwd )，该设计师被广泛认为是响应式设计这一术语的来源。 他也是该团队的成员之一，首次在所谓的“主流”网站“波士顿环球报 ”上将其付诸实践。 您可以将本集下载为独立的MP3文件。 这是链接：

• SitePoint Podcast #132: The Boston Globe Goes Responsive with Ethan Marcotte (MP3, 37:34, 36.1MB)

  SitePoint播客＃132：Ethan Marcotte对《波士顿环球报》 做出回应(MP3，37:34，36.1MB)

剧集摘要 (Episode Summary)

Louis and Ethan get to grips with how the Boston Globe design job came about, how the idea of Responsive Design appeared and the question “is everything that’s not responsive simply behind the times?”.

Louis和Ethan掌握了波士顿环球报设计工作的来龙去脉，响应式设计的想法如何出现以及“是否所有不响应时代的事物都只是落后于时代？”的问题。

Browse the full list of links referenced in the show at http://delicious.com/sitepointpodcast/132.

浏览http://delicious.com/sitepointpodcast/132中显示的参考链接的完整列表。

面试成绩单 (Interview Transcript)

Louis: Hello and welcome to another episode of the SitePoint Podcast. This week on the show an interview with a special guest; regular listeners to the SitePoint Podcast will have noticed that over the past few months, say, we’ve focused quite a lot in a lot of our episodes on the general concept of Responsive Web Design, so it’s a great pleasure to have on the show today a person who many would claim is the originator of that concept, Ethan Marcotte, hi and welcome to the show, Ethan.

路易斯：您好，欢迎收看SitePoint播客的另一集。 这周的演出是对一位特别嘉宾的采访。 定期收听SitePoint Podcast的听众会注意到，在过去的几个月中，我们在很多情节中都将很多精力集中在响应式Web设计的一般概念上，因此，很高兴能在节目中今天，一个被许多人宣称是该概念的创始人的人Ethan Marcotte，您好，欢迎参加展览Ethan。

Ethan: Thank you so much for having me.

伊桑：非常感谢您拥有我。

Louis: Absolutely it’s a pleasure. The idea for having you on the show has been sort of in the back of my mind for some time, and it was brought sort of in the forefront recently by the redesign of the Boston Globe website which we discussed on a recent panel show. How have you been going, Ethan?

路易斯：绝对很高兴。 让您参加这次展览的想法已经有一段时间了，在我脑海中已经浮现了一些想法，最近，由于我们在最近的一次小组展览中讨论了Boston Globe网站的重新设计，这种想法就出现在了最前沿。 你最近好吗，伊桑？

Ethan: Good, good. It’s been kind of a crazy month, launched a little website like you said, and yeah immediately thereafter went on a very belated honeymoon with my wife, so I’m kind of jetlagged and tired and a little bit of a flu, but otherwise yeah just really good to be back and online.

伊桑：很好，很好。 这真是一个疯狂的月份，像您说的那样开设了一个小网站，之后很快就和我的妻子度过了一个很晚的蜜月，所以我有点头疼，疲倦，有点感冒，但是是的回到网上真的很好。

Louis: How belated of a honeymoon?

路易斯：度蜜月如何？

Ethan: We’re having our two-year anniversary this Monday actually.

伊桑：实际上，这个星期一我们要迎来两年的生日。

Louis: Alright, well, you get around to it eventually.

路易斯：好吧，好吧，您最终可以解决它。

Ethan: I am so good at time management (laughter).

伊森：我在时间管理方面非常擅长(笑)。

Louis: Like I said, I’ll get to talking about the Boston Globe redesign later because that’s the main reason I wanted to have you on the show.

路易斯：就像我说的那样，稍后我将讨论波士顿环球报的重新设计，因为这是我希望让您参加展览的主要原因。

Ethan: Sure.

伊桑：当然。

Louis: But maybe just back peddle a little bit, talk about Responsive Design in general, it’s something we’ve been touching on a lot on the show, it’s kind of become the topic of the day in the circles of web design and development over the past let’s say a year. And this all sort of stems out of an article that you wrote for A List Apart, when was that about two years ago, right?

路易斯：但是也许只是稍作讨论，在一般情况下谈论响应式设计，这是我们在展会上经常涉及的话题，它已经成为Web设计和开发领域中的当今话题。过去的一年。 这些都是源于您为A List Apart撰写的一篇文章，大约在两年前的时候，对吗？

Ethan: Yeah, May of last year actually.

伊桑：是的，实际上是去年五月。

Louis: Oh, so not even that long.

路易斯：哦，所以还没那么久。

Ethan: No, not too much. I think I coined the term April of last year at An Event Apart in Seattle, and then kind of followed it up with an article about a month later.

伊桑：不，不是太多。 我想我是在去年的西雅图活动盛会上创造了去年四月这个词的，然后大约一个月后写了一篇文章。

Louis: Right. The obvious question that springs to mind is a question you probably get asked a lot, is the degree of let’s say acceptance that the idea is found in the web design community, and the degree to which people have been willing to play around with it, implement it, we’ve seen frameworks adopt it, galleries on the Internet; does any of this come as a great surprise to you or when you came up with it did you think, oh, this is gonna be the next big thing or what was the –?

路易斯：对。 一个显而易见的问题是您可能会经常问到的一个问题，比如说人们对这个想法在Web设计社区中找到的接受程度，以及人们乐于接受的想法的程度，实施它，我们已经看到框架采用了它，互联网上的画廊； 这有没有给您带来很大的惊喜，还是当您想到它时，您是否认为，这将是下一件大事，或者是什么？

Ethan: (Laughs) Um, I’m still kind of astonished by how much people are really excited about it I guess. Yeah, it was just something I’ve always been passionate about, being a little bit more I guess I don’t know, flexible, stupid term, but yeah with my purchase design anyway, and it was something that I was kind of just excited about combining flexible layouts and media queries. So, that and in it just seemed to be — we seemed to be hitting a point where especially at the time where I was writing it a lot of our approaches for designing across different devices or different quote/unquote contexts definitely felt like it was getting pretty fragmented. That’s not to say that there’s anything wrong with device specific design, I think there’s a fantastic business case or fantastic argument to have there, but at the time anyway it definitely felt like that was kind of the default like everyone had their sort of m. sites or their WebKit dot sites or redirecting iPhone users and kind of ignoring everyone else. So, you know it was just kind of a — putting another option on the table, kind of an alternative, so the fact that a lot of people have kind of run with it is really heartening, I mean they’ve done things with it that I never would have imagined. So, yeah, it’s kind of exciting.

伊桑：(笑)嗯，我仍然为有多少人对此感到非常兴奋而感到惊讶。 是的，这只是我一直热衷的东西，我猜我还不知道，灵活，愚蠢的用语，但无论如何，我的购买设计都是这样，我只是对于将灵活的布局和媒体查询结合起来感到很兴奋。 因此，这似乎是-我们似乎快要达到了一个点，尤其是在我编写它的时候，我们在不同设备或不同引号/非引号上下文中进行设计的许多方法肯定感觉像是在逐渐相当分散。 这并不是说针对特定设备的设计有什么问题，我认为那里有一个很棒的商业案例或一个很棒的论据，但无论如何在当时肯定感觉像是默认的，就像每个人都有自己的m。 网站或他们的WebKit点网站，或者重定向iPhone用户，而忽略了其他所有人。 因此，您知道这只是一种-在桌面上放另一个选择，另一个选择，所以很多人对此颇有信心，这确实令人振奋，我的意思是他们已经做了一些事情我从未想过。 所以，是的，这很令人兴奋。

Louis: Definitely. When you first saw let’s say the addition of more sophisticated media queries to the CSS specs, was it something that immediately leapt into your mind like, oh wait, I think we can do something clever with screen size or did that have to kind of brew for a while?

路易斯：当然。 当您初次看到说在CSS规范中添加更复杂的媒体查询时，是您立即想到的事情，例如，哦，等等，我认为我们可以在屏幕尺寸上做一些聪明的事情，或者做些必须做的事情一阵子？

Ethan: I don’t know, I mean that’s a great question, I think I’d actually just finished up a mobile specific website for — I was working at Happy Cog at the time and a couple months earlier I had finished up an event site for a South-by-Southwest party they were hosting, and part of that was actually designing kind of an event experience around it. And for the night of the event there was actually going to be some sort of like live voting app that was going to be accessible to people in the audience and, you know, so there was this need to kind of create this mobile specific experience. And so I was reading a lot of kind of great articles at the time about how to do that because I’d been so focused on the desktop at the time, and yeah, I think it just kind of came out of that; I had John Allsopp’s A Dao of Web Design up in one tab and then some great stuff on media queries in the other, and I kind of really feel like that’s sort of where it happened, you know we have all these great tools to kind of build a little bit more flexibly but all these constraints we keep introducing in the medium, I don’t know, it kind of feels like we can design to the flexibility of the Web as a strength rather than a, I don’t know, some sort of limitation or characteristic that we need to work around.

Ethan：我不知道，我的意思是，这是一个很大的问题，我想我实际上刚刚完成了一个专门针对移动设备的网站的工作-当时我在Happy Cog工作，而几个月前我已经完成了一项活动他们主持的一个西南偏南聚会的站点，其中一部分实际上是围绕该聚会设计一种活动体验。 在活动的当晚，实际上将有某种像现场投票应用程序那样的应用程序，将可供观众使用，并且，您知道，因此有必要创建这种针对移动设备的体验。 因此，当时我读了很多有关如何执行此操作的优秀文章，因为当时我一直专注于台式机，是的，我认为这只是从中得出的。 我在一个选项卡中放置了John Allsopp的“ A Web of Dao Web Design”，然后在另一个选项卡中放置了一些关于媒体查询的好东西，我真的感觉像是发生了这种情况，您知道我们拥有所有这些很棒的工具灵活一点地构建，但是我们不停地引入所有这些限制，我不知道，感觉就像我们可以将Web的灵活性设计为一种优势，而不是一种，我不知道，我们需要解决的某种限制或特征。

Louis: Yeah, absolutely. I guess that brings up another question I had which is do you feel like there’s been any kind of misunderstanding of the direction that you went initially with the idea of Responsive Web Design? What I mean to say by that it seems to have been taken as a sort of this is the way to just bridge the gap between mobile and large screens. So if you look at your initial example in the article on A List Apart and various other examples like that, they’re very fluid designs that sort of just look very good at a variety of widths, and a lot of people have followed on from that and it seems like it’s more like it’s a fixed width layout and then another fixed width layout and there’s just a cutoff between the two. Do you feel like it’s not quite what you were meaning or is that just a different way of doing the same thing?

路易斯：是的，绝对。 我想这又引出了我一个问题，那就是您是否对响应式Web设计的最初发展方向有任何误解？ 我的意思是说，它似乎已被视为一种弥合移动屏幕和大屏幕之间的鸿沟的方式。 因此，如果您在A List Apart和类似的其他示例文章中看到您的初始示例，它们是非常流畅的设计，在各种宽度上看起来都非常好，许多人从此开始那似乎更像是一个固定宽度的布局，然后是另一个固定宽度的布局，两者之间只有一个界限。 您是否感觉这不完全是您的意思，或者只是做同一件事的另一种方式？

Ethan: I mean it’s definitely a different way of designing beyond the desktop. I think media queries are an incredibly powerful tool for that. For me I’ve been sort of talking a little bit about this recently but like I kind of think that there’s like this larger class of quote/unquote adaptive designs that use some sort of front end technology whether it’s JavaScript, whether it’s style sheet switchers, whether it’s media queries to sort of change the layout depending on some parameters on the client side. And then responsive design has always been for me specifically the union of flexible layouts and media queries, so I like to keep those two terms kind of distinct, and that’s not to imply any kind of judgment, like one of my favorite adaptive sites is probably informationarchitects.jp, it’s a beautiful site with fantastic content, the designs lovely, but they’re sort of shuttling between three distinct fixed width layouts and that’s fine. (Laughs) I think it’s kind of up to the designer and the site owner to figure out what’s the best fit for their comfort level, for their content and you know just because it’s not responsive doesn’t mean it’s not beautiful, so that’s kind of where I fall. So the Globe I think is, you know, a good example of traditional like definition of a Responsive Design, it’s a completely fluid grid with kind of an upper ceiling attached to it, you know, with a maximum width applied because — and that was more of a time constraint than anything else, but the actual foundation is flexible even if media queries weren’t available to it you know the content will kind of fill the screen accordingly, so yeah, that’s kind of where I sort of draw the line in my mind, but there’s no like judgment implied there.

伊桑：我的意思是，这绝对是台式机以外的另一种设计方式。 我认为媒体查询是一个非常强大的工具。 对我来说，最近我一直在谈论一些有关此的内容，但就像我想的那样，这类更大的报价/取消报价自适应设计类使用了某种前端技术，无论是JavaScript还是样式表切换器，是否取决于客户端的某些参数是通过媒体查询来改变布局。 然后响应式设计对我来说一直特别是灵活布局和媒体查询的结合，因此我喜欢将这两个术语保持不同，这并不意味着任何判断，就像我最喜欢的自适应网站之一informationarchitects.jp，这是一个漂亮的网站，内容奇妙，设计可爱，但是它们可以在三种不同的固定宽度布局之间穿梭，这很好。 (笑)我认为这取决于设计师和网站所有者，以找出最适合他们的舒适水平，适合他们的内容的方法，并且您知道仅仅因为它没有响应能力并不意味着它并不美观，所以我跌倒的地方 因此，我认为地球仪是传统的类似响应式设计定义的一个很好的例子，它是一个完全流动的网格，上面附有某种天花板，并且应用了最大宽度，因为-时间限制比什么都重要，但是即使没有媒体查询，实际的基础还是很灵活的，您知道内容会相应地填满整个屏幕，所以是的，这就是我划清界限的地方在我心中，但那里没有暗示的判断。

Louis: Yeah. One of the things you brought up about the Globe site is that, as you said, there’s an upper ceiling to the flexibility, so there’s a point past which you won’t reshuffle the content any further because it’s at a sort of reasonably maximum width.

路易斯：是的。 正如您所说，您在Globe网站上提出的一件事是灵活性有一个上限，因此有一点您不能再对内容进行重新洗改了，因为它具有某种合理的最大宽度。

Ethan: Yeah.

伊桑：是的。

Louis: That’s something which keeps occurring to me as I look at responsive web design, the focus seems to be on how do we take these sort of desktop-centric sites that we’ve been designing for the past ten years and make them fit on iPads and smaller screens.

Louis：在我看响应式Web设计时，这一直在我身上发生，重点似乎在于如何处理过去十年来我们一直在设计的以桌面为中心的这类网站，并使其适合iPad和较小的屏幕。

Ethan: Yep.

伊桑：是的 。

Louis: But I think anyone will have had the experience where you come across an 800 pixel fixed width website on your 24inch cinema display.

路易斯：但是我想任何人都会有您在24英寸影院显示器上遇到800像素固定宽度网站的经验。

Ethan: (Laughs) Yeah, totally.

伊桑：(笑)是的，完全是。

Louis: And like, whoa, this is an incredibly poor use of space.

路易斯：而且，哇，这是对空间的极差使用。

Ethan: Sure.

伊桑：当然。

Louis: And it seems like not a lot of people have taken it in that direction, in the direction of like now we’ve got more space how do we fill that out?

路易斯：似乎没有很多人朝这个方向发展，就像现在我们拥有更多空间的方向一样，我们如何填写呢？

Ethan: Yeah, totally, I mean I think that there’s definitely like I think there’s a number of people that sort of find responsive design attractive because they sort of see it as kind of a shortcut to being mobile friendly, and at the end of the say it could definitely be used as such, you know, you could kind of cram this desktop specific design into a tinier screen using a flexible layout media query, that’s totally awesome. But for the Globe, I mean — and I talk a lot about this in the book without actually talking about the project, but basically a large part of the design process for us was taking these very desktop-centric designs and then kind of letting the use of the design inform the rest of the design process, like actually moving from comps into a responsive template framework, you know, basically pouring all the content in, pouring all the images in and then actually using devices and browsers and actual live interaction with the design as part of our design reviews from that point forward, so we could actually have a lot of great discussions about sort of using Luke Wroblewski’s Mobile First concept as sort of a wedge for does this content — does this module with 58 links in it actually have any value to our mobile users, if not, what value does that have to any of our readers, you know; does this actually belong on the page. And that’s not to say that there’s like an easy binary there, but it’s really about taking a hard look at the content we’re designing and making sure that — making a commitment to it, kind of across every context, across every device. I mean the front end technology’s there to kind of make the design fit on any screen, but it’s really you know if you can start the project with a hard look at the content you’re designing and asking yourself whether it’s really valuable I think the overall experience is going to be much better for all your readers.

伊森(Ethan)：是的，总的来说，我的意思是，我认为肯定有很多人认为响应式设计具有吸引力，因为他们将其视为移动友好的捷径，并且最终说它肯定可以这样使用，您知道，您可以使用灵活的布局媒体查询将特定于桌面的设计塞进更小的屏幕中，这真是太棒了。 但是对于地球仪来说，我的意思是-我在书中谈论了很多这件事，而没有实际谈论该项目，但是对于我们来说，基本上设计过程的很大一部分是采用这些以桌面为中心的设计，然后让设计的使用会通知其余的设计过程，例如实际上是从comps移入到响应模板框架中，您知道，基本上是将所有内容倒入其中，将所有图像倒入其中，然后实际使用设备和浏览器以及与从那时起，该设计就成为我们设计审查的一部分，因此实际上我们可以进行很多精彩的讨论，以了解如何使用Luke Wroblewski的Mobile First概念作为该内容的楔子—该模块中是否包含58个链接实际上对我们的移动用户有任何价值，如果没有，那对我们的任何读者有什么价值？ 这是否真正属于页面。 这并不是说那里有一个简单的二进制文件，而是要认真研究一下我们正在设计的内容，并确保对它的承诺–涉及到每种环境，每种设备。 我的意思是前端技术可以使设计适合任何屏幕，但实际上您知道是否可以通过仔细查看正在设计的内容并询问自己是否真正有价值来开始项目。对于所有读者来说，整体体验将会更好。

Louis: Yeah. You mentioned in there the idea of design comps, and I guess that’s something that’s interesting in terms of these very flexible layouts and include a number of different ways of organizing the content on the screen. Does it pose a big challenge in terms of the traditional workflow of design where you’d usually have sort of a Photoshop comp that is this is what the site will look like?

路易斯：是的。 您在其中提到了设计补偿的想法，我想就这些非常灵活的布局而言，这很有趣，并且包括了许多在屏幕上组织内容的方式。 在传统的设计工作流程中，这通常会给您带来很大的挑战吗？在这种情况下，您通常会拥有一个Photoshop comp，这就是网站的外观吗？

Ethan: Right.

伊桑：对。

Louis: And then just pass that along to the stakeholders, the decision makers, and they can say yes this is what we want the site to look like, whereas when you’re doing Responsive Design there’s either, as we said earlier, there can be three or four different fixed layouts or there can be sort of an infinite gradient of different ways the content can be arranged on the screen; how do you present that and how does it affect the workflow of design?

路易斯：然后将其传递给利益相关者，决策者，他们可以说是的，这就是我们希望网站的外观，但是当您进行响应式设计时，就像我们前面说的那样，可以可以是三种或四种不同的固定布局，也可以是某种无限梯度，可以在屏幕上排列内容的不同方式； 您如何介绍它以及它如何影响设计工作流程？

Ethan: Yeah, no, I mean that’s a fantastic question. So for the Globe specifically I mean there’s a fair amount of creative work done by the time I came on the scene, and when Filament Group, who’s actually my client for the project, and I sort of met with the Globe they’d already done a number of sort of desktop specific designs for certain sections of the site and kind of had an understanding of like this is kind of our catalog of all these brand assets and all the functionality that we need to include. So one of the first discussions we kind of had with them were we tried to sort of position the comps as kind of like, okay, here’s a catalog of our understanding of what we think the design needs to be, you know, kind of like here’s our best guess of how this design is gonna work responsively because it’s not feasible for us to kind of comp out say how the homepage is gonna look on tablet and on phone across all these different resolution ranges, across different orientations, so it mostly about, okay, we’re going to be moving into HTML CSS prototyping really quickly and continue to basically vet these design assumptions, you know, live in the browser. So, that allowed up to kind of like iterate over certain components that didn’t necessarily work all that well initially when we sort of ported them into all these different screens and fine-tune the content, but it also helped us be a little bit more I guess agile by — and I don’t mean like capital A methodology agile, but like —

伊桑：是的，不，我是说这是一个很棒的问题。 因此，对于地球仪而言，我的意思是我到场时已经完成了大量的创意工作，而实际上是我的项目客户的菲拉门特集团和我已经与地球仪见面时，他们已经完成了对于网站的某些部分，有一些针对桌面的特定设计，并且对此有所了解，这是我们所有这些品牌资产和我们需要包括的所有功能的目录。 因此，我们与他们进行的首批讨论之一是我们尝试对comps进行某种定位，好吧，这是我们对我们认为设计需要什么样的理解的目录这是我们对这种设计将如何做出响应的最佳猜测，因为对于我们而言，要说出如何在所有这些不同分辨率范围，不同方向上在平板电脑和手机上查看首页是不可行的，因此这主要是关于，好的，我们将非常Swift地进入HTML CSS原型制作，并继续基本上审查这些设计假设，就像您在浏览器中一样。 因此，当我们将它们移植到所有这些不同的屏幕中并对其内容进行微调时，这可能允许对某些不一定能很好地工作的某些组件进行迭代。我猜想更多的是敏捷-而且我的意思不是像资本那样的方法敏捷，而是

Louis: (Laughs)

路易斯：(笑)

Ethan: Which I’m told is a thing (laughter). Yeah, I keep presenting this sort of like more iterative workflow when I’m talking about responsive design and everyone’s like have you guys heard of agile methodology, that’s not something I have a lot of formal training in, but we sort of settle on this hybrid process where like the design and development teams will basically be working really closely together throughout the process, and one half of the table would be sort of articulating design recommendations in Photoshop and in Illustrator, and the others would be designing in HTML and CSS, but both are sort of making I guess recommendations for how the design needs to evolve, and then they just kind of need to be I guess vetted in as like a unified group.

伊桑：我被告知是一件事(笑声)。 是的，在谈论响应式设计时，我一直在介绍类似迭代的工作流，每个人都像你们听说过敏捷方法论，这不是我受过很多正式培训的事情，但是我们对此有所解决像设计和开发团队将在整个过程中基本上紧密合作的混合过程，其中一半是在Photoshop和Illustrator中明确提出设计建议，而其他则是在HTML和CSS中进行设计，但我想两者都是针对设计需要如何发展提出的建议，然后我认为它们就像一个统一小组一样经过审核。

Louis: Do you find yourself doing a larger share of design work and design thinking directly in the browser now than you did say a few years ago?

路易斯：与几年前相比，您现在发现自己直接在浏览器中从事更多的设计工作和设计思想吗？

Ethan: Oh, yeah, even a year ago. I don’t know, this waterfall process is, you know, that’s every shop that I’ve worked in has used some variation of it, and the Globe was definitely like the biggest departure for me, you know; what do you mean we’re not gonna get a signoff on the comps and then produce them? (Laughter) So it was — I mean it was nice to be a little bit more flexible about how we were working because, I don’t know, the example I keep coming back to is the masthead on the Globe is — it might not look like it but it’s probably one of the more complicated parts of the whole design. I don’t know, we made some initial visual recommendations in the CSS about how the content that was sort of specked out at the desktop level could actually adapt itself to the different breakpoints and we weren’t really happy with it. So we kind of when we had our design review we kind of called this out as an area of the design that might actually need some more love, and everyone kind of agreed that what we’d built sucked. So basically what happened was you know it was a really good exercise for us to sort of treat the prototypes in a scenario where we could fail quickly with design, but we’re always asking ourselves like does anything need more art direction, does it need more further visual refinement, and so kind of the design half of the team decamped and came up with these fantastic sketches about what the masthead would look like at 480 pixels or 600 pixels or something like that, so we could implement from there but you know if we hadn’t kind of identified that as a really complex area of the layout, and we iterated over this like about a dozen times pretty quickly because we were just sort of like always, okay, let’s see if this works, we’ll move into HTML and CSS, move things back, you know sort of refine from there.

伊桑：哦，是的，甚至在一年前。 我不知道，这个瀑布式流程是，我所工作的每家商店都使用了它的一些变体，您知道，Globe绝对是我最大的选择。 您是什么意思，我们不会在comps上签收然后产生它们？ (众笑)所以-我的意思是，对我们的工作方式更加灵活一点是很好的，因为我不知道，我一直回到的例子是地球仪上的标头广告-可能不会看起来像它，但它可能是整个设计中较复杂的部分之一。 我不知道，我们在CSS中提出了一些初步的视觉建议，这些建议是关于如何在桌面级别挑选出的内容如何实际适应不同的断点，而我们对此并不满意。 因此，当我们进行设计审查时，我们将其称为设计领域，实际上可能需要更多的爱，每个人都同意我们所构建的内容糟透了。 所以基本上发生了什么事，您知道这对我们来说是一个非常好的练习，可以在我们可能因设计而Swift失败的情况下对原型进行处理，但是我们一直在问自己，是否需要任何更多的美术指导，是否需要进一步改善视觉效果，因此团队的一半设计人员进行了探索，并提出了这些奇妙的草图，有关标头在480像素或600像素或类似像素时的外观，因此我们可以从那里开始实施，但是您知道如果我们还没有将其识别为布局的一个非常复杂的区域，那么我们很快就对其进行了大约12次迭代，因为我们就像往常一样，好吧，让我们看看这是否可行，我们将移入HTML和CSS，将内容移回原处，您会从中了解一些改进。

Louis: Right. Coming back to something you said earlier, you mentioned that you were brought on sort of late in the project, there was an amount of design that had already been done.

路易斯：对。 回到您之前说的内容，您提到您刚进入项目后期，已经完成了许多设计。

Ethan: Hmm-mm.

伊森：嗯。

Louis: Did the agency that was hired to do the job and then went out and hired you, had they had it in their mind that they were going to do a Responsive Design and that’s why they came to you or how did that work out exactly?

路易斯：是不是被雇来做这份工作然后走出去并雇用了您的公司，是他们是否想到要进行响应式设计，这就是他们来找您的原因，或者是如何做到的？ ？

Ethan: That’s a fantastic question. So Upstatement was the design firm in Boston, they do incredible work and they were really great to work with throughout the process. But the Globe was pretty committed I think fairly early on to this notion of we need to get our content out there to as kind of like a broad audience as possible, so there was always going to be some sort of like multi-device component in there, by the time Filament Group got involved, they were the ones who were going to be actually doing a large amount of the production work, and they brought me along, I think the expectation was already there in part thanks to Filament that this was going to be kind of a responsive framework but they still needed to kind of proceed internally with building consensus around a specific look for the site. So, I mean and the design is fairly straightforward, and I haven’t really worked with a comp yet that hasn’t actually I guess lent itself to some sort of responsive approach, it’s kind of like the discussions you have after that point like if you are sort of thinking primarily from a desktop context then there are all sorts of questions that pop up about content, about how the design’s going to be, how the experience is going to adapt to different devices and you know those are going to change from project to project.

伊桑：这是一个很棒的问题。 因此Upstatement是波士顿的一家设计公司，他们做得非常出色，在整个过程中都非常出色。 但是，Globe相当投入，我认为很早就意识到我们需要尽可能广泛地吸引我们的内容，因此在其中总是会有某种类似多设备的组件在那里，当Filament Group参与进来时，他们实际上将要从事大量的生产工作，他们把我带到了一起，我想我的期望已经在一定程度上归功于Filament将会是一个快速响应的框架，但他们仍需要在内部进行一些工作，以围绕网站的特定外观建立共识。 所以，我的意思是说，设计相当简单，而且我还没有真正使用过伴奏，但实际上我还没有想过要采用某种响应式方法，就像是在那之后的讨论如果您主要是从桌面环境中进行思考，那么就会出现关于内容的各种问题，关于设计的方式，体验如何适应不同的设备，并且您知道这些都会改变从一个项目到另一个项目。

Louis: There’s a couple things interesting about this project in particular, most notably a lot of people have come out and sort of pointed to it as a sort of watershed moment for the concept of Responsive Web Design because up until this point most of the sites we’ve seen using these techniques have been either small agency sites or personal blogs of web designers, places where people are free to experiment.

路易斯：这个项目特别有趣，最引人注目的是很多人提出来，并指出这是响应式Web设计概念的分水岭，因为到目前为止，大多数站点我们已经看到使用这些技术的地方是小型代理网站或Web设计师的个人博客，人们可以自由地进行实验。

Ethan: Right.

伊桑：对。

Louis: But in terms of a major site with a lot of visibility going down this route, people have made the comparison to I think it was ESPN.com when the shift away from table based layouts to CSS based layouts was happening.

路易斯：但是对于这条沿途可见度很高的主要站点，人们已经将它与ESPN.com进行了比较，当时正发生从基于表的布局向基于CSS的布局转变。

Ethan: Hmm, okay.

伊桑：嗯，好的。

Louis: Does it feel that way to you or are you aware of other projects out there that are high visibility and have done this already?

路易斯：对您而言，您是否有这种感觉？或者您是否知道其他一些知名度很高的项目，并且已经做到了？

Ethan: I definitely wasn’t thinking of it that way when I was working on it (laughter). I mean like the Wired News redesign and ESPN, you know those are — I mean those are fantastic moments in our industry. I think like for me working on a site of this scale was kind of exciting regardless of whether it was gonna be responsive or not, so that was kind of cool. But I think — I mean the thing that was really gratifying about it was just like it kind of felt like the basic like front end components of like again like a flexible grid, flexible media and media queries, like seeing them work on a site of this scale was pretty exciting just from like a nerd designer geek standpoint, but the real learning process was more around the process standpoint, like getting a design team involved and actually just sort of breaking down that design development barrier and trying to collaborate a little bit more iteratively on something. So, yeah, I don’t know, I mean like the question of scale is an interesting one, but like at the end of the day I hope, you know, maybe it will make people easier to sort of make the self a Responsive Design because I know there are a lot of people that are really interested in it, but you know maybe like when we were sort of making the CSS versus tables arguments, you know, everyone’s sort of waiting for somebody to dip their toe in the water first; I don’t know, maybe the Globe will make that pitch a little easier, you know.

伊桑：我在研究它时肯定没有那样想(笑)。 我的意思是像有线新闻重新设计和ESPN一样，您知道的是-我的意思是那是我们行业中最美好的时刻。 我认为像我这样在如此规模的网站上进行工作，无论它是否会做出响应，都令人感到兴奋，因此这很酷。 但是我想-我的意思是，真正令人感到欣慰的是，感觉就像是基本的前端组件一样，就像灵活的网格，灵活的媒体和媒体查询，就像看到它们在一个站点上工作一样。从一个书呆子的设计师怪胎的角度来看，这种规模是非常令人兴奋的，但是真正的学习过程更多地围绕过程的角度，例如让一个设计团队参与进来，实际上只是在打破设计开发的障碍并尝试一点点协作在某事上迭代更多。 所以，是的，我不知道，我的意思是说像规模问题是一个有趣的问题，但是就像一天结束时一样，我希望，这也许会让人们更容易使自己成为一个响应型的人。设计是因为我知道有很多人对此非常感兴趣，但是您可能知道，就像我们在编写CSS vs表参数时一样，每个人都在等待某人将脚趾浸入水中第一; 我不知道，也许Globe会让这种音调变得容易一些。

Louis: Right. And even having an example that you can show to people that isn’t sort of a very small agency site or personal blog, that look this is a mainstream site and look at what happens when I drag the window around (laughter).

路易斯：对。 甚至有一个示例可以向那些不是很小的代理站点或个人博客的人展示，但看起来这是一个主流站点，并看着我拖动窗口时会发生什么(笑声)。

Ethan: Yeah, yeah, totally. I mean the dragging the window thing around is interesting because I mean like I think of that as mainly like a prototyping tool, right, I mean you know I think the flexible layout’s a critical foundation for Responsive Design, like I said, but at the end of the day you’re designing for specific devices, specific resolution ranges and, yeah, I love doing the browser window thing but that’s sort of like a secondary benefit to me.

伊桑：是的，完全是。 我的意思是拖动窗口的东西很有趣，因为我的意思是像我认为它主要像原型工具一样，对，我的意思是你知道我认为灵活的布局是响应式设计的关键基础，就像我说的那样，但是结束时，您正在为特定的设备，特定的分辨率范围进行设计，是的，我喜欢做浏览器窗口操作，但这对我来说是次要的好处。

Louis: Yeah, oh, of course, it’s definitely something that only designers looking at the site will do.

路易斯：是的，哦，当然，这绝对是只有看着站点的设计师才能做的事情。

Ethan: Yeah.

伊桑：是的。

Louis: I interviewed a couple of weeks ago Chris Coyier for the show.

路易斯：几周前，我采访了克里斯·科耶尔(Chris Coyier)的表演。

Ethan: Oh, awesome.

伊桑：太棒了。

Louis: And he’d just done his redesign of his site, and he’s just put transitions on all of the positions of his elements.

路易斯：他刚刚完成了自己网站的重新设计，并且只是将过渡元素放在了元素的所有位置上。

Ethan: I know it’s —

伊桑：我知道

Louis: I know it’s fantastic. When we were talking about the Globe redesign actually that’s one of the things that came up on the panel show two weeks ago, like oh yeah this is really cool but the search box doesn’t whiz around when I move it.

路易斯：我知道那太棒了。 实际上，当我们谈论Globe重新设计时，这是两周前面板上显示的内容之一，就像是的，这确实很酷，但是当我移动它时，搜索框不会四处晃动。

Ethan: Yeah, yeah. I heard that show and I realized we lost a reader that day, but, (laughter) yeah, well have to drop that into a future version.

伊桑：是的，是的。 我听到了那个节目，我意识到那天我们失去了一个读者，但是，(笑声)是的，必须将其放到将来的版本中。

Louis: You know the dragging the window around we can mock it all we want but it’s the first thing that we do nowadays when going to a site. A couple more things I wanted to ask about the Globe and then maybe I’ll come back and talk about another question that’s just come into my mind a bit later.

路易斯：您知道拖动窗口可以模拟我们想要的所有内容，但这是当今访问站点时要做的第一件事。 我还想问一些有关地球仪的事情，然后也许我再回去谈论另一个问题，稍后再想到。

Ethan: Sure.

伊桑：当然。

Louis: One of the things that’s interesting for a site this size is, to me anyway, would be the sort of technical challenges behind dealing with performance I guess, because something that people bring up when they talk about responsive design for mobile versus dedicated mobile sites is that unless it’s done very carefully you can wind up loading a lot of resources on a mobile device that don’t end up getting used.

路易斯：无论如何，对我来说，如此规模的网站最有趣的事情之一就是应对性能的技术挑战，因为人们在谈论移动和专用移动设备的响应式设计时会提出一些建议。网站上的信息是，除非做得非常仔细，否则您可以在移动设备上加载大量最终无法使用的资源。

Ethan: Yeah, yep.

伊桑：是的，是的。

Louis: And, you know, larger images than are strictly speaking necessary, larger style sheets, content that might be set to display none. Were there any particular challenges related to the site in your work or how did you guys approach that when working on this site?

路易斯：而且，您知道，比严格说来必要的图像更大，样式表更大，内容可能设置为不显示。 在您的工作中是否存在与网站相关的特殊挑战，或者您在网站上工作时是如何应对的？

Ethan: That’s probably another half hour discussion right there (laughter). But I got to give a lot of credit to I mean the folks at Filament Group for a lot of the really heavy technical lifting on the site, I mean most of my work was kind of on the — mostly on the design side of things, like a lot of the layout heavy work and then figuring out the process, but folks like Scott Jehl and Mat Marquis, Todd, Patty and Maggie at Filament Group, like they all did a fantastic job coming up with some great solutions for that kind of code-tax problem that you mentioned. I mean there’s a significant amount of work in trying to keep the upfront download as light as possible, so the initial JavaScript package and the initial style sheet package are very, very light; if you’re on a JavaScript free device or you don’t understand media queries you’re not going to be downloading anything else other than content basically, and then there’s a lot of sort of feature based testing that happens from there to sort of determine what assets are going to be appropriate to your experience, like are you on a touch base display, if so then you’re going to get some libraries that kind of enhance the design intelligently so that it’s a little bit more immersive, but otherwise we’re not going to penalize anybody else. You know, that’s some fairly basic dynamic JavaScript and CSS insertion, so we started off using YepNope at one point and I think we ended up just using much more lightweight just custom loader in the end, but that was sort of Scott Jehl’s baby, who I really think is kind of responsible for everything brilliant about JavaScript that I’m using lately (laughter). Yeah, so that was one of the things and, yeah, we just tried to come up with a lightweight JavaScript vocabulary so that we could sort of identify like some characteristics about your device and then kind of marry that to, okay, well here’s the code that’s actually going to be relevant to you, and then try to keep all the cruft hidden from users that weren’t going to be benefitting from it. From the content side of things I mean we really tried to avoid that display none question, and that’s why we tried to have a lot of discussions throughout the design process about is this actually valuable content to our mobile users. Because, again, saddling people with content they weren’t going to be benefitting from was something we were really trying to avoid. One of the things that really did come out of the project, or a couple of things, but the responsive images script, or Scott Jehl’s responsive images script was really one of the things that kind of came out early, kind of a way to I guess be a little bit more intelligent about how many image pixels were pushing down to our readers. You can’t draw a correlation between the size of a screen and the amount of bandwidth available to it, but the script was kind of a nice way of saying like, okay, well if your screen’s above a certain resolution threshold we’re going to serve up this higher res version of a specific image, if it’s below that threshold then you know you’re going to get this mobile image by default; that’s an approach we’re always — we’re refining or we’ve refined a number of times throughout the project, and I think that some people have been doing some interesting work on researching like browser pre-loaders recently and maybe the client side solution’s not going to be tenable in the long run, but at the time it was definitely like this is kind of our best solution and a lot of people have kind of run with that and kind of improved on it. So, yeah, I don’t know, it was just basically like — it was a really fun project and it was really fun to watch Filament Group work and kind of, I don’t know, crush problems with their giant brains (laughter). I was just a CSS and design monkey for the most part but, yeah, it was a lot of fun.

伊桑：大概还有一个半小时的讨论(笑声)。 但是我要赞扬我，是指Filament Group的员工在网站上进行了许多真正的繁重的技术提升，我的意思是我的大部分工作都在某种程度上-主要是在设计方面，像很多布局繁重的工作，然后弄清楚该过程，但是Filament Group的Scott Jehl和Mat Marquis，Todd，Patty和Maggie之类的人，他们都做得非常出色，为此提出了一些出色的解决方案您提到的代码税问题。 我的意思是，要尽力使前期下载尽可能轻，需要做大量的工作，因此初始JavaScript包和初始的样式表包非常非常轻。 如果您使用的是不带JavaScript的设备，或者您不了解媒体查询，那么除了内容以外，您将不会下载其他任何东西，然后会有很多基于功能的测试从那里进行确定哪些资产适合您的体验，例如您是否在触摸屏显示器上，如果是的话，那么您将获得一些库，这些库可以智能地增强设计，使其更具沉浸感，但是除此之外我们不会惩罚任何其他人。 您知道，这是一些相当基本的动态JavaScript和CSS插入，因此我们一开始就使用YepNope，而我认为最终最终只使用了更轻量的定制加载程序，但这就是Scott Jehl的宝贝，我真的认为，对于最近使用JavaScript的所有出色表现，我都有责任(笑)。 是的，这就是其中之一，是的，我们只是想出一个轻量级JavaScript词汇表，以便我们可以识别出您设备的某些特征，然后将其嫁给，好吧，这就是真正与您相关的代码，然后尝试使所有杂物隐藏在不会从中受益的用户。 从内容的角度来看，我的意思是我们实际上是在努力避免显示无问题，这就是为什么我们试图在整个设计过程中进行很多讨论，以便讨论这些内容对于我们的移动用户是否真正有价值。 再次，因为让人们感到无法从中受益的内容是我们真正要避免的事情。 确实确实来自项目的一件事或几件事，但是响应式图像脚本或Scott Jehl的响应式图像脚本实际上是一种较早出现的方法，这是我的一种方法猜测将多少图像像素压低到我们的读者会更聪明。 您无法在屏幕尺寸和可用带宽之间绘制关联，但是脚本是一种很好的表达方式，例如，好吧，如果您的屏幕高于某个分辨率阈值，我们将要提供更高分辨率的特定图像，如果它低于该阈值，那么您将默认获取该移动图像； 这是我们一直都采用的一种方法–我们在整个项目中都在进行完善或完善，而且我认为有些人最近在做一些有趣的研究工作，例如浏览器预加载器，也许是客户端从长远来看，该解决方案将不会成立，但是在当时，这肯定是我们最好的解决方案，并且很多人对此都有所追求，并且对此进行了改进。 所以，是的，我不知道，这基本上就像是-这是一个非常有趣的项目，看着Filament Group的工作真的很有趣，而且我不知道用他们巨大的大脑解决问题(笑声) )。 我大部分时间只是一个CSS和设计猴子，但是，是的，这很有趣。

Louis: That is kind of interesting, though, it does bring up the question that it seems like all of these things are great ideas and they’re fantastic ways of overcoming these technical challenges.

路易斯：虽然这很有趣，但是确实提出了一个问题，即所有这些东西似乎都是好主意，它们是克服这些技术挑战的绝妙方法。

Ethan: Hmm-mm.

伊森：嗯。

Louis: And it does bring up to mind when you say, oh, what you did with CSS and design; does it feel to you like what used to be involved in making a website was just that and all these other technical challenges are sort of added on and made the discipline a lot more complicated and perhaps raised the barrier to entry?

路易斯：当您说，哦，您对CSS和设计所做的工作时，确实会想到。 您是否感觉像过去制作网站所涉及的只是其他所有技术挑战，并且使该学科变得更加复杂，甚至增加了进入门槛？

Ethan: Yeah.

伊桑：是的。

Louis: This kind of work is really, really hard for sort of an individual to do.

路易斯：这类工作对于每个人来说确实非常困难。

Ethan: Right. Well, yeah, yeah, I see what you’re saying.

伊桑：对。 好吧，是的，我明白你在说什么。

Louis: Again, I’m not making this argument I’m just sort of wondering what your thoughts are on that?

路易斯：再说一次，我不是在说这个，我只是想知道您对此有何想法？

Ethan: Oh, I know you’re picking a fight, Louis (laughter). But, no, that’s a fantastic point, I mean I was thinking. I guess for me it’s like you know if this wasn’t a responsive site, like if this was just a regular fixed width 960 centered site, I mean I think that these are things that would still have been valuable like this really intelligent asset loading I think would have been a key for a site of this size. I mean I think you know I kind of feel like recently we’ve sort of tried to move past this whole notion of like progressive enhancement, you know the sort of serving the content to everybody but being intelligent about how we enhance stuff from that baseline. And I really think that especially for a responsive project but really for any project like being smart about what you’re serving and to whom can be really valuable, so it’s not just sort of like a, you know, the simple like low experience versus high experience, I mean you know I could really see this — some of the stuff that I learned from the Globe being a nice framework for some of my other client work, so yeah I kind of feel like a lot of the stuff that came out of it is just sort of like, I don’t know, it sounds a little high and mighty but it really seems like basic good sense for web design in general. You know, I don’t think we were doing anything revolutionary, it’s just kind of like being, you know, smart about what we were serving up and to whom; if you view the site on like an ancient Blackberry you’re going to get a very basic experience and a lot of hopefully good content, but if you’re on an iPhone or an iPad or the new Amazon Fire you’re going to get a much richer experience and, yeah, hopefully it’s just going to feel right.

伊桑：哦，我知道你在吵架，路易斯(笑声)。 但是，不，那是一个奇妙的观点，我是说我在想。 我想对我来说，这就像您知道这是否不是响应性网站一样，如果这只是一个以960为固定宽度的常规固定网站，我的意思是我认为这些东西仍然会很有价值，例如这种真正智能的资产加载我认为这对于如此规模的网站来说是关键。 我的意思是，我想您知道我有点像最近我们已经尝试超越渐进式增强之类的整个概念，您知道可以为所有人提供内容的那种方式，但对我们如何从该基线进行增强有所了解。 我真的认为，特别是对于响应式项目，但实际上对于任何项目，例如对您所服务的内容以及对谁有价值的项目，我们都非常聪明，所以，这不仅像是经验不足或经验丰富，我的意思是您知道我真的能看到这一点-我从Globe中学到的一些东西是我其他客户端工作的一个很好的框架，所以是的，我觉得很多东西它有点像，我不知道，听起来有点高大威武，但是总体上来说，这确实看起来像是对网页设计的基本感觉。 你知道，我不认为我们在做任何革命性的事情，就像是在为我们所服务的内容以及为谁服务而聪明一样。 如果您像古老的Blackberry一样浏览该网站，则将获得非常基本的体验，并获得许多希望良好的内容，但是如果您使用的是iPhone或iPad或新的Amazon Fire，则将获得更加丰富的经验，是的，希望它会感觉正确。

Louis: Yeah. It’s also very early in the game for a lot of these techniques, so as people develop either frameworks or just sets of good —

路易斯：是的。 许多这样的技术在游戏中还处于初期，因此人们开发框架或只是一套好的工具时，

Ethan: Oh, totally.

伊森：哦，完全。

Louis: — scripts that are easy to adapt and start using it’s going to become I guess more accessible for the wider profession to sort of jump on board with this kind of idea.

路易斯： —易于适应和开始使用的脚本，我想对于更广泛的行业来说，使用这种想法将变得更加容易。

Ethan: Yeah, I mean there are a lot of great tools out there right now, and I know the guys at Paravel have been just building a ton of great stuff lately, like FitVids.js, I’m not sure if you’ve seen that.

Ethan：是的，我的意思是，现在有很多很棒的工具，而且我知道Paravel的家伙最近只是在构建大量很棒的东西，例如FitVids.js ，我不确定您是否已经看到了。

Louis: Yeah, we actually brought it up on the show two weeks ago I think.

路易斯：是的，我想我们实际上是在两周前就在节目中提出了。

Ethan: Oh, yeah, well Chris Coyier was involved with that, and Paravel also came out with that FitText plugin because Trent Walton likes those big headlines on his blog, but these are fantastic tools that I think like they make some of these things that make flexible design, regardless of whether it’s responsive or not, feel kind of, I don’t know, insurmountable; so, I don’t know, I’m kind of excited to sort of see like all of this stuff kind of coming out and, yeah, just really excited to see what comes up next.

伊森(Ethan)：哦，是的，克里斯·科耶尔(Chris Coyier)参与其中，而且Paravel也推出了该FitText插件，因为特伦特·沃尔顿(Trent Walton)喜欢他博客上的那些大标题，但这些工具太棒了，我认为它们可以完成其中的一些工作做出灵活的设计，而不管它是否具有响应能力，都感到无法克服； 所以，我不知道，我很高兴看到所有这些东西都出来了，是的，真的很高兴看到接下来会发生什么。

Louis: Hmm, yeah. One more thing about the Globe, and I’m interested in picking your brain on this.

路易斯：嗯，是的。 关于Globe的另一件事，我对此感兴趣。

Ethan: Sure.

伊桑：当然。

Louis: So, one of the things, putting aside sort of entirely the fact that it’s a Responsive Design, that’s interesting about it is it’s sort of a — it’s a paid content gateway, right, so they’ve taken the approach of, you know, it’s not an ad supported free site but rather paid content. And I guess one of the points that a lot of people made about it is that the responsive nature of the design can kind of serve as a sell for that because there’s a lot of newspapers out there doing iPad apps that are paid, and then their website is ad supported. And in this case I guess the logic behind it would have been we can do this once and charge for it because it will be as good on an iPad as an iPad app or as good on the iPhone as an iPhone app.

Louis: So, one of the things, putting aside sort of entirely the fact that it's a Responsive Design, that's interesting about it is it's sort of a — it's a paid content gateway, right, so they've taken the approach of, you know, it's not an ad supported free site but rather paid content. And I guess one of the points that a lot of people made about it is that the responsive nature of the design can kind of serve as a sell for that because there's a lot of newspapers out there doing iPad apps that are paid, and then their website is ad supported. And in this case I guess the logic behind it would have been we can do this once and charge for it because it will be as good on an iPad as an iPad app or as good on the iPhone as an iPhone app.

Ethan: Yeah, I mean I don’t have any great insight into kind of the business decisions on the paywall side of things, I mean I sort of found out the paywall rules on launch day along with everyone else.

Ethan: Yeah, I mean I don't have any great insight into kind of the business decisions on the paywall side of things, I mean I sort of found out the paywall rules on launch day along with everyone else.

Louis: (Laughs)

路易斯：(笑)

Ethan: Well, I mean the broad access was always sort of like the Globe was really invested in that, so, but in terms of like how that was going to sort of like — I mean a lot of their marketing messaging since launch has been sort of around that, like it’s been kind of weird being on the subway in Boston and seeing these posters that have like Bostonglobe.comand then there’s like a picture of six devices there, you know, all showing the content, which is cool but disconcerting (laughter). So, yeah, but in terms of the business decisions you know the Globe would be a better entity to answer that than I would be. About advertising specifically I mean that’s actually something I spent a lot of time working on in terms of just coming up with a decent front end implementation for the ads that they did have, and because there was this requirement that if they had an ad property sort of slotted into I guess the C column on desktop they wanted to be able to sort of promote that visibly like pretty high up in the design as the viewport got smaller, so we sort of jumped through a couple of interesting hoops to kind of make that happen. But the thing that I found is like not a lot of ad networks are really thinking beyond the desktop right now, you know some of them sort of treat mobile and desktop as two different products, and there’s not really an elegant way that I’ve seen yet to sort of like have an ad property in the page but then like I guess enhance up from a mobile version or enhance an ad for touch, you know it’s very much like a one size fits all, like this ad kind of slots in here and every screen is going to kind of get that. So, I don’t know, I think that could be kind of an interesting opportunity for somebody to work on.

Ethan: Well, I mean the broad access was always sort of like the Globe was really invested in that, so, but in terms of like how that was going to sort of like — I mean a lot of their marketing messaging since launch has been sort of around that, like it's been kind of weird being on the subway in Boston and seeing these posters that have like Bostonglobe.com and then there's like a picture of six devices there, you know, all showing the content, which is cool but disconcerting (laughter). So, yeah, but in terms of the business decisions you know the Globe would be a better entity to answer that than I would be. About advertising specifically I mean that's actually something I spent a lot of time working on in terms of just coming up with a decent front end implementation for the ads that they did have, and because there was this requirement that if they had an ad property sort of slotted into I guess the C column on desktop they wanted to be able to sort of promote that visibly like pretty high up in the design as the viewport got smaller, so we sort of jumped through a couple of interesting hoops to kind of make that happen. But the thing that I found is like not a lot of ad networks are really thinking beyond the desktop right now, you know some of them sort of treat mobile and desktop as two different products, and there's not really an elegant way that I've seen yet to sort of like have an ad property in the page but then like I guess enhance up from a mobile version or enhance an ad for touch, you know it's very much like a one size fits all, like this ad kind of slots in here and every screen is going to kind of get that. So, I don't know, I think that could be kind of an interesting opportunity for somebody to work on.

Louis: Yeah, it’s still something that’s I guess not taken as seriously as perhaps it should be. You see a lot of sort of the dedicated mobile sites without ads altogether when the full version does have ads just because I don’t know what to do with this (laughter). You’ve got to think that that’s what the thinking is, right, like we’re just going to make a mobile version and we can’t afford to serve up ads or we don’t know where to put them so we’ll just not put them there.

Louis: Yeah, it's still something that's I guess not taken as seriously as perhaps it should be. You see a lot of sort of the dedicated mobile sites without ads altogether when the full version does have ads just because I don't know what to do with this (laughter). You've got to think that that's what the thinking is, right, like we're just going to make a mobile version and we can't afford to serve up ads or we don't know where to put them so we'll just not put them there.

Ethan: Right. Yeah, that’s a great question.

Ethan: Right. 是的，这是一个很好的问题。

Louis: And then, furthermore, looking at the Boston Globe, for example, if you’re looking at it on a mobile device the ads are still there, but clicking through those ads brings you to 960 fixed width with Flash animations and giant forms with 30 fields in them.

Louis: And then, furthermore, looking at the Boston Globe, for example, if you're looking at it on a mobile device the ads are still there, but clicking through those ads brings you to 960 fixed width with Flash animations and giant forms with 30 fields in them.

Ethan: (Laughs) right, right.

Ethan: (Laughs) right, right.

Louis: Which is obviously not good for the advertiser, right, I mean if people aren’t thinking in the mindset of, look, if this is going to be served through mobile devices the content we’re giving these people, the sell that we’re giving these people, has to be suited to that device as well.

Louis: Which is obviously not good for the advertiser, right, I mean if people aren't thinking in the mindset of, look, if this is going to be served through mobile devices the content we're giving these people, the sell that we're giving these people, has to be suited to that device as well.

Ethan: Yeah, totally, and it’s not — and I don’t mean to sort of suggest it’s an easy like, oh, well we’re just going to stamp in this JavaScript and the problem will be solved, like it’s definitely a big content question, like you know if I’m buying an ad campaign like do I need to start thinking about okay well I need like, I don’t know, a mobile spot, a tablet spot, a desktop spot, a widescreen spot, like how do these — you know, what kind of production overhead does that entail; it’s a big problem and I think that you know if somebody could come up with a way to kind of make that feel solvable that would be huge because mobile advertising’s obviously kind of exploded recently, and if we can come up with a more cross-device way of serving, I don’t know, I can’t believe I’m talking about advertising (laughter), yeah, it would make our jobs as designers a lot easier I think.

Ethan: Yeah, totally, and it's not — and I don't mean to sort of suggest it's an easy like, oh, well we're just going to stamp in this JavaScript and the problem will be solved, like it's definitely a big content question, like you know if I'm buying an ad campaign like do I need to start thinking about okay well I need like, I don't know, a mobile spot, a tablet spot, a desktop spot, a widescreen spot, like how do these — you know, what kind of production overhead does that entail; it's a big problem and I think that you know if somebody could come up with a way to kind of make that feel solvable that would be huge because mobile advertising's obviously kind of exploded recently, and if we can come up with a more cross-device way of serving, I don't know, I can't believe I'm talking about advertising (laughter), yeah, it would make our jobs as designers a lot easier I think.

Louis: Our content is largely supported by advertising in most cases.

Louis: Our content is largely supported by advertising in most cases.

Ethan: Sure, yeah.

Ethan: Sure, yeah.

Louis: There are a few exceptions like this one. And it’s something as technology develops on the Web maybe there’s bits of it that lag and that can have an effect on how things play out.

Louis: There are a few exceptions like this one. And it's something as technology develops on the Web maybe there's bits of it that lag and that can have an effect on how things play out.

Ethan: Yeah.

Ethan: Yeah.

Louis: You know just to give another example, a few days ago I found myself — I was walking down the street and I saw a poster for something that was interesting, I can’t remember what it was but it had a QR code on it.

Louis: You know just to give another example, a few days ago I found myself — I was walking down the street and I saw a poster for something that was interesting, I can't remember what it was but it had a QR code on it.

Ethan: Sure.

Ethan: Sure.

Louis: So I pull up my barcode scanner app just to showoff the cool gizmos to my girlfriend and scan the code and the page that comes up is woefully inadequate for the mobile device.

Louis: So I pull up my barcode scanner app just to showoff the cool gizmos to my girlfriend and scan the code and the page that comes up is woefully inadequate for the mobile device.

Ethan: That’s really interesting, yeah.

Ethan: That's really interesting, yeah.

Louis: And it’s being promoted through a QR code and I can’t even read the thing.

Louis: And it's being promoted through a QR code and I can't even read the thing.

Ethan: Wow.

Ethan: Wow.

Louis: So there’s clearly a disconnect here on a lot of levels with the proliferation of devices.

Louis: So there's clearly a disconnect here on a lot of levels with the proliferation of devices.

Ethan: Right.

Ethan: Right.

Louis: And I guess over the course — and possibly this particular project will sort of help to bridge that because it’s bringing it in to more of a mainstream culture world.

Louis: And I guess over the course — and possibly this particular project will sort of help to bridge that because it's bringing it in to more of a mainstream culture world.

Ethan: Hmm, yeah, we’ll see. Like I said, it’s a huge problem; it’d be really cool if somebody could solve it, especially in a way that we’re not dealing with JavaScript that was written in 1997, so yeah it would be pretty awesome.

Ethan: Hmm, yeah, we'll see. Like I said, it's a huge problem; it'd be really cool if somebody could solve it, especially in a way that we're not dealing with JavaScript that was written in 1997, so yeah it would be pretty awesome.

Louis: Something I wanted to ask you earlier, and let’s just come back to that, a few people have sort of come out and said — I want to say Jeffery Zeldman was the first person I saw say something to the effect of if you’re not doing Responsive Web Design nowadays you’re not a web designer you’re doing something else.

Louis: Something I wanted to ask you earlier, and let's just come back to that, a few people have sort of come out and said — I want to say Jeffery Zeldman was the first person I saw say something to the effect of if you're not doing Responsive Web Design nowadays you're not a web designer you're doing something else.

Ethan: Okay.

Ethan: Okay.

Louis: I might be mis-attributing that quote, I’ve also I think I’ve seen people like Jeremy Keith and Andy Clark say things that are very similar in tone, and I wanted to know how you feel about that sort of bringing up when we were talking about you load up a page and you start dragging the window around to see how it responds to different sizes is something we all kind of do now, and you know, I was wondering if you feel like it’s part of best practice now; in October 2011 when you go to a website, a brand new website, and it’s not designed responsively you feel a little bit like, ah, you feel like what you would have felt like seeing an all Flash site in 2005, you know.

Louis: I might be mis-attributing that quote, I've also I think I've seen people like Jeremy Keith and Andy Clark say things that are very similar in tone, and I wanted to know how you feel about that sort of bringing up when we were talking about you load up a page and you start dragging the window around to see how it responds to different sizes is something we all kind of do now, and you know, I was wondering if you feel like it's part of best practice now; in October 2011 when you go to a website, a brand new website, and it's not designed responsively you feel a little bit like, ah, you feel like what you would have felt like seeing an all Flash site in 2005, you know.

Ethan: Right, right. Well, I might but that’s just because I live a very sad existence (laughter). But, no, I mean I think like Jeremy Keith and I both had like posts that kind of came out like a day or two apart, kind of weirdly simultaneously a couple months back about I think as a design community we sort of seize on these sort of like black versus white like, I don’t know, mobile versus desktop, these sort of like binary poles, and for a while there was this sort of like mobile versus responsive discussion going on. I don’t know, I think one camp sort of felt like Responsive Design was sort of being put forward as a replacement for mobile sites and there were some hurt feelings over that, and I definitely don’t, I’ve never sort of felt that way, like I think that you really kind of need to marry the approach to the content that you’re designing so that, yeah, if there’s a significant amount of overlap between your tablet experience and your mobile experience and your desktop experience then maybe an adaptive or a responsive approach is the right one, but otherwise like you know you really just have to kind of serve the audience that you’re designing to. So, I kind of feel like I don’t know if Responsive Design is a best practice, but I do feel like we’ve gotten to a point where we need to start asking ourselves like how do we start designing for beyond laptop screens, beyond desktop screens, like what is our strategy for doing that, and I think a responsive approach could be the right one for a lot of projects if they’re willing to sort of think about that cross-device experience. I don’t think for the Globe it would have been — like if we sort of reached a point where we were sort of like hiding large swaths of content on the page I would’ve been the first one to say like, look, maybe we need to come up with a different approach here. I kind of feel like — I’ve said this a couple times recently, but like dogma doesn’t pay the bills (laughter). I’m kind of passionate about Responsive Design and I can’t think of any other approach we could’ve done to do the Globe, like just regardless of my biases this was a really fun project to work on, but I really can’t think of any other way we could’ve done this if we hadn’t been, you know, if we hadn’t started with a flexible layout, designed really iteratively and then layered media queries on top of that content that we’ve sort of taken that hard look at, but that’s not to say that it’s necessarily the right approach for every site. So yeah I don’t really have an easy answer here.

Ethan: Right, right. Well, I might but that's just because I live a very sad existence (laughter). But, no, I mean I think like Jeremy Keith and I both had like posts that kind of came out like a day or two apart, kind of weirdly simultaneously a couple months back about I think as a design community we sort of seize on these sort of like black versus white like, I don't know, mobile versus desktop, these sort of like binary poles, and for a while there was this sort of like mobile versus responsive discussion going on. I don't know, I think one camp sort of felt like Responsive Design was sort of being put forward as a replacement for mobile sites and there were some hurt feelings over that, and I definitely don't, I've never sort of felt that way, like I think that you really kind of need to marry the approach to the content that you're designing so that, yeah, if there's a significant amount of overlap between your tablet experience and your mobile experience and your desktop experience then maybe an adaptive or a responsive approach is the right one, but otherwise like you know you really just have to kind of serve the audience that you're designing to. So, I kind of feel like I don't know if Responsive Design is a best practice, but I do feel like we've gotten to a point where we need to start asking ourselves like how do we start designing for beyond laptop screens, beyond desktop screens, like what is our strategy for doing that, and I think a responsive approach could be the right one for a lot of projects if they're willing to sort of think about that cross-device experience. I don't think for the Globe it would have been — like if we sort of reached a point where we were sort of like hiding large swaths of content on the page I would've been the first one to say like, look, maybe we need to come up with a different approach here. I kind of feel like — I've said this a couple times recently, but like dogma doesn't pay the bills (laughter). I'm kind of passionate about Responsive Design and I can't think of any other approach we could've done to do the Globe, like just regardless of my biases this was a really fun project to work on, but I really can't think of any other way we could've done this if we hadn't been, you know, if we hadn't started with a flexible layout, designed really iteratively and then layered media queries on top of that content that we've sort of taken that hard look at, but that's not to say that it's necessarily the right approach for every site. So yeah I don't really have an easy answer here.

Louis: Yeah. Obviously it’s early in the piece as far as these techniques go, but you wouldn’t say that it’s in any way like looking at an all Flash site would’ve been in 2005.

路易斯：是的。 Obviously it's early in the piece as far as these techniques go, but you wouldn't say that it's in any way like looking at an all Flash site would've been in 2005.

Ethan: Oh, hell no, this sounds entirely too Seinfeldian, but like some of my favorite sites are fixed width, so (laughter), it’s not like you’re a bad person if you design with, I don’t know, a 960 grid and hell or high water not giving up your pixels, I mean I think when we get into discussions like that, like it’s responsive or die or it’s device detection or I don’t know liberty or death or whatever, it’s like we close ourselves off to the really like awesome solution. If we can be a little less dogmatic and be a little bit more thoughtful with how we evaluate the stuff and come up with some actual like criteria for it, like rather than just like me spouting off generally about well, oh, you know if there’s a lot of overlap between contexts, like if we can formalize like in the next year or two like, okay, well x, y and z are in place for this audience for this project then a responsive approach is the wrong one, then we can be a little bit more scientific and a little less religious about this kind of stuff, so that’s kind of what I’m excited about, sort of having this larger discussion about when these things make sense, yeah, I think we’ll all be better off.

Ethan: Oh, hell no, this sounds entirely too Seinfeldian, but like some of my favorite sites are fixed width, so (laughter), it's not like you're a bad person if you design with, I don't know, a 960 grid and hell or high water not giving up your pixels, I mean I think when we get into discussions like that, like it's responsive or die or it's device detection or I don't know liberty or death or whatever, it's like we close ourselves off to the really like awesome solution. If we can be a little less dogmatic and be a little bit more thoughtful with how we evaluate the stuff and come up with some actual like criteria for it, like rather than just like me spouting off generally about well, oh, you know if there's a lot of overlap between contexts, like if we can formalize like in the next year or two like, okay, well x, y and z are in place for this audience for this project then a responsive approach is the wrong one, then we can be a little bit more scientific and a little less religious about this kind of stuff, so that's kind of what I'm excited about, sort of having this larger discussion about when these things make sense, yeah, I think we'll all be better off.

Louis: Well, look forward to seeing how this develops.

Louis: Well, look forward to seeing how this develops.

Ethan: Yeah, me too.

Ethan: Yeah, me too.

Louis: Thanks so much for coming on the show and talking about this. I’ve been, like I said, since I saw the Boston Globe design came out I definitely wanted to have a chance to chat with you about it. Congratulations on the great work it’s a fantastic site, and I really hope it’s successful and inspires a wave of increased responsiveness.

Louis: Thanks so much for coming on the show and talking about this. I've been, like I said, since I saw the Boston Globe design came out I definitely wanted to have a chance to chat with you about it. Congratulations on the great work it's a fantastic site, and I really hope it's successful and inspires a wave of increased responsiveness.

Ethan: (Laughs) that would be fantastic.

Ethan: (Laughs) that would be fantastic.

Louis: In major websites.

Louis: In major websites.

Ethan: Ah, thanks, Louis, yeah, it’s great to be here.

Ethan: Ah, thanks, Louis, yeah, it's great to be here.

Louis: Absolutely. If people want to follow you on your blog, on Twitter.

路易斯：绝对。 If people want to follow you on your blog, on Twitter.

Ethan: Yeah, I’m on Twitter as @Beep, I swear profusely there; I also recently just started a responsive web design Twitter account at @RWD, I hate the acronym but it’s nice and short, and my portfolio is Ethanmarcotte.com, so I’d love to hear from you guys.

Ethan: Yeah, I'm on Twitter as @Beep , I swear profusely there; I also recently just started a responsive web design Twitter account at @RWD , I hate the acronym but it's nice and short, and my portfolio is Ethanmarcotte.com , so I'd love to hear from you guys.

Louis: Alright, well, thanks very much again and have a great day.

Louis: Alright, well, thanks very much again and have a great day.

Ethan: Thanks so much for letting me ramble, I really appreciate it.

Ethan: Thanks so much for letting me ramble, I really appreciate it.

Louis: Hey, no worries at all.

Louis: Hey, no worries at all.

And thanks for listening to this week’s episode of the SitePoint Podcast. I’d love to hear what you thought about today’s show, so if you have any thoughts or suggestions just go to sitepoint.com/podcast and you can leave a comment on today’s episode, you can also get any of our previous episodes to download or subscribe to get the show automatically. You can follow SitePoint on Twitter @sitepointdotcom, that’s SitePoint d-o-t-c-o-m, and you can follow me on Twitter @rssaddict. The show this week was produced by Karn Broad and I’m Louis Simoneau. Thanks for listening and bye for now.

感谢您收听本周的SitePoint播客。 我很想听听您对今天节目的看法，因此，如果您有任何想法或建议，请访问sitepoint.com/podcast ，您可以对今天的节目发表评论，也可以下载我们以前的任何节目或订阅自动显示节目。 您可以在Twitter @sitepointdotcom (即SitePoint dotcom)上关注SitePoint ，也可以在Twitter @rssaddict上关注我。 The show this week was produced by Karn Broad and I'm Louis Simoneau. Thanks for listening and bye for now.

Theme music by Mike Mella.

Mike Mella的主题音乐。

Thanks for listening! Feel free to let us know how we’re doing, or to continue the discussion, using the comments field below.

谢谢收听！ 欢迎使用下面的评论字段让我们知道我们的状况，或者继续讨论。

翻译自: https://www.sitepoint.com/podcast-132-the-boston-globe-goes-responsive-with-ethan-marcotte/