SitePoint播客＃168：与Jeremy Keith的Secret Src

Episode 168 of The SitePoint Podcast is now available! This week our regular interview host Louis Simoneau (@rssaddict) interviews Jeremy Keith (@adactio) who now works at ClearLeft to talk about the developments in the Responsive Design world, and particularly the ongoing discussions on proposed image element solutions.

SitePoint Podcast的第168集现已发布！ 本周，我们的定期采访主持人Louis Simoneau( @rssaddict )采访了现在在ClearLeft工作的Jeremy Keith( @adactio )，他讨论了响应式设计领域的发展，特别是有关提议的图像元素解决方案的持续讨论。

下载此剧集 (Download this Episode)

You can download this episode as a standalone MP3 file. Here’s the link:

您可以将本集下载为独立的MP3文件。 这是链接：

• SitePoint Podcast #168: Secret Src with Jeremy Keith (MP3, 32:47, 31.5MB)

  SitePoint Podcast＃168：Jeremy Keith的Secret Src ( MP3，32:47，31.5MB )

剧集摘要 (Episode Summary)

Louis and Jeremy to talk about the developments in the Responsive Design world, and particularly the ongoing discussions on proposed image element solutions the WHATWG are looking at from various proposals.

Louis和Jeremy讨论了响应式设计领域的发展，特别是WHATWG从各种提案中正在讨论的拟议图像元素解决方案的讨论。

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

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

面试成绩单 (Interview Transcript)

Louis: Hello, and welcome to another episode of the Sitepoint podcast. Today on the show, I’m very pleased to have with me Mr. Jeremy Keith, all the way from the sunny United Kingdom. Hi, Jeremy.

路易斯：您好，欢迎收看Sitepoint播客的另一集。 今天在演出中，我非常高兴能与杰里米·基思先生(Jeremy Keith)一起从阳光明媚的英国一路走来。 嗨，杰里米。

Jeremy: Hi, good to be back.

杰里米：嗨，很高兴回来。

Louis: It’s great to have you back. You were on the show I believe in May of 2011, and we had a pretty far ranging conversation about responsive web design. Obviously since then, almost the only thing you hear about on the Internet is responsive web design. So I thought it’d be a great time to have you back and see where things have come in the past year.

路易斯：很高兴你回来。 您参加了我相信在2011年5月举行的展览，我们就响应式网页设计进行了广泛的讨论。 显然，从那时起，您在Internet上几乎唯一听到的就是响应式Web设计。 因此，我认为现在是您回头看看过去一年里情况的好时机。

Jeremy: Excellent. Sounds good.

杰里米：太好了。 听起来不错。

Louis: All right. First of all, one of the things you mentioned the last time you were on the show, you made a prediction. You said the situation reminded you of the early days of web standards, and there will probably be some high profile site that will do it right. They’ll be the first canonical big, responsive brand in the same way as we had ESPN.com or the Wired redesign. You said that in May. In September, the Boston Globe launched their massive responsive redesign. It sounds like a pretty accurate prediction.`

路易斯：好的。 首先，您上次在节目中提到的一件事是做出预测。 您说这种情况使您想起了Web标准的早期，并且可能会有一些备受瞩目的网站可以很好地解决这一问题。 与我们使用ESPN.com或Wired重新设计一样，它们将成为第一个规范的大型响应品牌。 你在五月说过 9月，《波士顿环球报》启动了大规模的响应式重新设计。 听起来像是一个非常准确的预测。

Jeremy: Yeah, I think that’s exactly what happened. Now there is somebody you can point to and say, “Like that.” Then I’ve actually noticed it even with clients, that they’re coming to us now and pointing to the Boston Globe and saying, “How did they do that?” And, “Can we have that?” Which was exactly what it was like with the big web standards changes at the start of the millennium.

杰里米：是的，我认为确实是这样。 现在您可以指向某人说：“喜欢”。 然后我什至实际上也注意到了客户，他们现在来找我们，指着《波士顿环球报》说：“他们是怎么做到的？” 而且，“我们可以拿到吗？” 千禧年初期，随着大型Web标准的变化，情况确实如此。

Louis: You’ve already seen this in the wild. Do clients immediately get that that’s a more attractive approach for them than going the traditional mobile separate site or app route?

路易斯：您已经在野外看到了这一点。 与采用传统的移动独立网站或应用程序路线相比，客户是否立即意识到这对他们来说是一种更具吸引力的方法？

Jeremy: Where I’ve seen it be convincing for clients is for clients who have tried to do separate apps for different platforms. Maybe two, three years ago they built an iOS app, and then in the last 18 months, oh, we need to build an Android app. Then at some point they realized oh, we need to build Windows phone. It’s those clients who are now saying, “All right, enough is enough. This is getting out of hand, and where is this going to stop?” They’re looking at their numbers and realizing that this just won’t scale. It’s those clients that are the ones who are quite intrigued by responsive design and what it promises. There’s a bit of a danger though in that responsive design has also become a trendy, buzzwordy term amongst people who don’t make websites. When it’s being used by developers and designers, that’s fine. We all understand what we mean by responsive design.

杰里米(Jeremy)：对于客户来说，令人信服的地方是那些尝试为不同平台开发单独应用程序的客户。 大概是两，三年前，他们构建了一个iOS应用程序，然后在过去的18个月中，哦，我们需要构建一个Android应用程序。 然后他们意识到，哦，我们需要构建Windows Phone。 现在是那些客户说：“好，足够了。 这已经失控了，这将在哪里停止？” 他们正在查看自己的数字，意识到这只是无法扩展。 正是那些客户对响应式设计及其承诺深感兴趣。 尽管在不创建网站的人们中，自适应设计也已成为时髦，流行的术语，但存在一定的危险。 当开发人员和设计师使用它时，这很好。 我们都了解响应式设计的含义。

Ethan Marcotte was very, very clear when he coined the term that it was a specific set of technology. It wasn’t a wishy-washy outlook on life or some kind of Zen Buddhist philosophy. It was specific technologies. Now that it’s really taking off in the world of marketing and consultancy, it’s being bandied around in the same was as HTML5 or CSS3 as being used as terms without really understanding what the terms mean. I have to gauge when clients come and they’re talking about responsive design, I gauge do they know what it is yet? Or do they actually need to talk about it a little bit more to understand what it means?

伊桑·马可特(Ethan Marcotte)创造了一个术语“特定技术”时非常清楚。 这不是对生活的幻想，也不是某种禅宗佛教哲学。 这是特定的技术。 现在，它确实在营销和咨询领域大放异彩，它与HTML5或CSS3一样被当作术语使用，而实际上并没有真正理解这些术语的含义。 我必须衡量客户何时到来，而他们正在谈论响应式设计，我衡量他们是否知道这是什么？ 还是他们实际上需要多谈一点以了解其含义？

Which I’ve definitely had with terms like HTML5 and CSS3. They’re throwing these terms around, but as I quiz them more about it, I realize oh, actually they’re just using these words. They don’t actually know what HTML5 is, what CSS3 is. They just know it’s trendy terms and they equate it with modern. There is a bit of a problem there that responsive design has become one of those terms. It’s also a sign of success, that when your term gets hijacked by the marketing guys and starts to lose its meaning in certain conversations because people are just throwing words around, that’s actually a pretty good sign that you’ve hit mainstream adoption.

我肯定对HTML5和CSS3这样的术语有过了解。 他们扔掉了这些术语，但是当我对它们进行更多提问时，我意识到哦，实际上他们只是在使用这些词。 他们实际上不知道什么是HTML5，什么是CSS3。 他们只知道这是时髦的用语，所以就等同于现代。 响应式设计已成为这些术语之一，这存在一个问题。 这也是成功的标志，当您的术语被营销人员劫持并在某些对话中由于人们只是在乱说而开始失去其含义时，这实际上是一个很好的信号，表明您已成为主流采用。

Louis: In terms of actual usage in the wild, I guess that’s simultaneously where you want to be and where you don’t want to be in terms of having to educate clients.

路易斯：就野外的实际使用而言，我想就必须教育客户而言，这既是您想成为的地方，也是您不想成为的地方。

Jeremy: Exactly. It’s a double-edged sword. On the one hand you want everyone to know about this term and you want to get the word out there, but be careful what you wish for. Because when people actually start using this term to mean everything under the sun, you lose the clarity you originally had with that term.

杰里米：是的 。 这是一把双刃剑。 一方面，您希望每个人都知道这个词，并且想把这个词弄出来，但要小心。 因为当人们实际上开始使用该术语来表示太阳下的所有事物时，您会失去该术语最初的清晰度。

Louis: I think for most of us in the world of web design, we can be really happy to see that this is gaining steam, especially considering the proliferation of device sizes and resolutions, even in the past year. Things have gotten a little crazy, and trying to support all of those with independently designed, special purpose sites would quickly become unmaintainable.

Louis：我认为对于我们大多数的Web设计领域的人来说，我们感到非常高兴，尤其是考虑到设备尺寸和分辨率的激增，甚至在过去的一年中，这种趋势正在不断发展。 事情变得有些疯狂，要想为所有具有独立设计的特殊目的的站点提供支持，将很快变得难以维护。

Jeremy: Exactly. The scale problem is the issue. It’s nice that this proliferation of devices, I think it’s actually emphasized what was already there. Even a few years ago when you were making a website, and you were really only thinking about desktop web browsers, it was still a variation in browsers. You’ve got Internet Explorer and Opera and Chrome and Safari and all these browsers. The mantra amongst web developers was, “It doesn’t have to look the same in every browser.” It was hard to actually sell that idea, because on the face of it, these browsers didn’t seem that different. The context didn’t seem that different. I’ve got a computer, it’s got a browser on it, why can’t my website look the same in these browsers?

杰里米：是的 。 规模问题是问题。 设备的数量激增非常好，我认为这实际上是在强调已经存在的设备。 甚至在几年前，当您创建网站时，您实际上只是在考虑桌面Web浏览器，它仍然是浏览器的一种变体。 您已经拥有Internet Explorer和Opera，Chrome和Safari以及所有这些浏览器。 Web开发人员的口头禅是：“不必在每个浏览器中都看起来一样。” 实际上很难推销该想法，因为从表面上看，这些浏览器似乎没有什么不同。 上下文似乎没有什么不同。 我有一台计算机，上面有一个浏览器，为什么我的网站在这些浏览器中看起来不一样？

With the explosion of devices, different sizes and capabilities of browsers on these devices, it’s a lot easier now to say to people, “Look. You can’t expect this to look or work the same across all these different devices.” Telling people ‘it doesn’t have to look the same on every browser’ is an easier concept to get across now because of all these devices. It was always the case, it’s just now it’s more understandable for everyone that OK, now I get it. The website doesn’t have one particular look, one particular feel. A website is going to look and feel different in different browsers on different devices. That concept now is more well understood, more widely understood.

随着设备的爆炸式增长，这些设备上不同大小和功能的浏览器的出现，现在对人们说起来要容易得多。 您不能期望它在所有这些不同的设备上看起来或工作都一样。” 由于所有这些设备，告诉人们“不必在每个浏览器上看起来都一样”是一个更容易理解的概念。 情况总是如此，只是现在对每个人来说都可以理解，好的，现在我明白了。 该网站没有一种外观，一种特定的感觉。 网站在不同设备上的不同浏览器中的外观将有所不同。 现在，该概念已被更好地理解，得到了更广泛的理解。

Louis: Right. I guess that’s also a double-edged sword, because now as developers we have this task of trying to maintain a site on 100 or 200 different screen sizes and resolutions, whereas before it might have been a dozen.

路易斯：对。 我猜这也是一把双刃剑，因为现在作为开发人员，我们要承担一个任务，即尝试以100或200种不同的屏幕尺寸和分辨率维护网站，而之前可能只有十几种。

Jeremy: Sure, but there’s a difference between testing on different sizes and different devices and optimizing for the devices. If we had to actually optimize for 200, 300 different devices then yeah, our lives would be absolutely miserable. It’s more about making sure stuff doesn’t break on any of these devices. As long as everyone’s on board with the idea that it doesn’t have to look the same across all these devices, then it’s actually not that bad. This deluge of devices isn’t the end of the world. It’s something to be welcomed.

Jeremy：可以 ，但是在不同尺寸和不同设备上进行测试与针对设备进行优化之间存在差异。 如果真的要针对200、300种不同的设备进行优化，是的，我们的生活将绝对令人痛苦。 这更多地是要确保这些设备上的东西不会损坏。 只要每个人都同意不必在所有这些设备上看起来都一样，那么实际上还不错。 如此大量的设备并不是世界末日。 这是值得欢迎的。

Louis: Yeah, I noticed on your blog that you and a few others have set up a communal testing lab?

路易斯：是的，我在您的博客中注意到您和其他一些人已经建立了公共测试实验室？

Jeremy: Yeah. So at ClearLeft, over the past year or so, we’ve been gathering devices bit by bit. It’s never enough, you can never have enough devices, but we’re trying to do our best. I would go into these dodgy second hand shops and buy cheap older devices that fell off the back of a lorry somewhere. Bit by bit, we were putting together a table with some devices on it so we could test stuff that we were building on those devices. Really, not enough. I realize it’s a bit of a waste. They’re sitting there on the table most of the day and not being used when I’m not actively testing something.

杰里米：是的。 因此，在过去一年左右的时间里，我们在ClearLeft上一直在收集设备。 这远远不够，您永远也不会拥有足够的设备，但我们正在努力做到最好。 我会去这些狡猾的二手商店，买便宜的旧设备，这些设备掉在卡车后面的某个地方。 一点一点地，我们将一张桌子和上面的一些设备放在一起，以便我们可以测试在这些设备上构建的东西。 真的，还不够。 我意识到这有点浪费。 他们一天中的大多数时间都坐在桌子上，当我没有积极测试某些东西时，他们不会被使用。

I just mentioned it on my blog. I said, “Look, we’ve always had an open door policy at ClearLeft. If you’re coming by, if you’re in the neighborhood, swing on by, use our WiFi, sit on the sofa, have a cup of tea.” That kind of thing. I just extended that to say, “Feel free to use these devices.” What I didn’t expect, it was really, really nice, was that same day as I said that, all these other people in Brighton like Remi Sharp, Aegir from ministryoftype.co.uk, they started chiming in on Twitter and saying, “Oh, I’ve got this device that’s just lying here on my desk, not being used” or, “I’ve got this device that’s in a drawer. Do you want me to leave it in your office?”

我刚刚在我的博客上提到了它。 我说：“看，我们一直在ClearLeft实行开放政策。 如果您是路过的人，如果您在附近，请转过身，使用我们的WiFi，坐在沙发上，喝杯茶。” 那种事 我只是说，“随时使用这些设备。” 我没想到的是，那天真的，真的很棒，就像我说的那样，那天在布莱顿的所有其他人，如ministryoftype.co.uk的 Remi Sharp，Aegir，都开始在Twitter上鸣叫， “哦，我的设备正躺在我的桌子上，没有被使用”，或者，“我的设备在抽屉里。 您要我把它留在您的办公室吗？”

I said yeah. “The more devices the merrier.” Within about 24, 48 hours, the number of devices had doubled. Which wasn’t planning, that wasn’t the idea when I announced it, come by with devices. It was just a really, really nice side effect of that. Now I’ve actually got a pretty good collection of devices. Still, it’s never enough, you can never have enough devices, but it’s a pretty good amount. I’ve had to go out and buy a lot of power strips and a lot of USB cables to power up all the devices, keep them charged. Now I feel like OK, this testing lab is pretty good, but now it’s no longer really our devices, it’s everyone’s devices. Anybody who wants to come by and try them out.

我说了 “设备越多越好。” 在大约24、48小时内，设备数量增加了一倍。 这不是计划，而是当我宣布它时，并不是设备附带的想法。 这只是一个非常非常好的副作用。 现在，我实际上已经有了很多不错的设备。 尽管如此，这还远远不够，您永远也不会拥有足够的设备，但这是一个相当不错的数目。 我不得不出去买很多配电盘和许多USB电缆来给所有设备供电，并保持充电状态。 现在我感觉还可以，这个测试实验室相当不错，但是现在它不再是我们真正的设备，而是每个人的设备。 任何想过来尝试一下的人。

The reason why I’ve been blogging about that a lot is not just to let everyone in Brighton know you can come by the Clear Left offices and use our devices, but also people in other places, wherever you happen to be. I bet there’s a bit of a community of web developers, I bet they’re all feeling the same as you, which is I don’t have enough devices to test on. Trust me, everybody’s thinking that. If everyone pulled their resources, you could have a pretty good communal library. One thing I didn’t do was worry too much about the legal side or insurance or stuff like that. I just decided if something happens, I’ll deal with it then. If there’s theft or something to do with warranty of one of the devices that’s sitting in our office but doesn’t belong to us, I’ll deal with that issue when it comes up, rather than try to anticipate all of the possible things that could go wrong. So far nothing’s gone wrong, and if something does go wrong I’ll deal with it then. I think that’s also an important attitude, because this idea of opening up your doors and having a communal testing lab, that’s not a new idea, but it’s been hard for other people to get off the ground. That’s because they were trying to anticipate all the possible cases of things could go wrong. By simply ignoring the problem, it goes away.

我之所以写博客的原因不仅在于让布莱顿的每个人都知道您可以从Clear Left办事处来使用我们的设备，而且还可以让您无论身在何处的其他地方的人。 我敢打赌，这里有一些Web开发人员社区，我敢打赌他们都和你一样，这是因为我没有足够的设备可以测试。 相信我，每个人都在想。 如果每个人都抽出资源，您将拥有一个很好的公共图书馆。 我没有做的一件事是对法律方面或保险之类的东西太担心。 我只是确定是否会发生什么，然后再处理。 如果发生盗窃或与我们办公室中存在但不属于我们的设备之一的保修有关的问题，则当出现问题时，我将处理该问题，而不是尝试预测所有可能发生的情况。可能会出错。 到目前为止，没有任何问题，如果出了问题，我会处理。 我认为这也是一种重要的态度，因为这种打开大门并建立公共测试实验室的想法并不是什么新主意，但是其他人很难下手。 那是因为他们试图预测所有可能发生的情况都可能出错。 通过简单地忽略问题，它就消失了。

Louis: Yeah, if only that were the case for all of our problems. I think that’s a fantastic idea, and I look forward to seeing the same sort of thing being taken up in other cities. Did you see at E3 I believe it was, Microsoft announced they’d be putting a version of IE on the Xbox? You’ll probably have to get an Xbox for your testing suite as well.

路易斯：是的，只要是我们所有问题的确如此。 我认为这是一个很棒的主意，我期待在其他城市也能看到同样的事情。 您是否在E3上看到我相信是的，微软宣布将在Xbox上安装IE版本？ 您可能还必须为您的测试套件安装Xbox。

Jeremy: We don’t have a choice, really. We’re going to have to get an Xbox for the office.

杰里米：我们别无选择。 我们将不得不为办公室配备Xbox。

Louis: It’s a business requirement now.

路易斯：现在是业务要求。

Jeremy: Exactly. It’s an expense.

杰里米：是的 。 这是费用。

Louis: Fantastic. One of the other things I wanted to talk to you about was obviously there’s been a lot of talk in the past five or six weeks about responsive design, because of the whole conversation that occurred regarding responsive images. This is something that has been ongoing, because it’s one of the building blocks of responsive design back when Ethan first proposed it, the idea that you’d have fluid images. Then when people got to thinking about bandwidth, we started looking at other ways about being smarter about it, and using JavaScript to load images and coming up with all these techniques. I think the long view is always to have something in spec. In the past few weeks there has been some movement on that front, although not to everyone’s satisfaction. You had a really good breakdown of the chronology of what the events were. For anyone listening who didn’t follow that closely, can you explain a bit what the current situation is and how we got here?

路易斯：太棒了。 我想与您讨论的另一件事是，在过去的五，六周中，关于响应式设计的讨论很多，这是因为有关响应式图像的整个讨论都在进行。 这是一直在进行的事情，因为这是Ethan最初提出时，响应式设计的基石之一，即您将获得流畅的图像。 然后，当人们开始考虑带宽时，我们开始寻找其他方法使带宽变得更智能，并使用JavaScript加载图像并提出所有这些技术。 我认为从长远来看总是要有一些规范。 在过去的几周中，尽管不是每个人都满意，但在这方面已有一些进展。 您对事件的发生时间有了很好的分解。 对于听不懂的人，您能解释一下目前的情况以及我们如何到达这里吗？

Jeremy: OK. The issue is mostly one of bandwidth. As in you don’t want to be serving up big images to small screen devices. It’s wasteful. To begin with in responsive design, that situation was happening not because people were taking existing desktop sites and making them responsive. They were adding styles that canceled out layout styles, linearized your layout, and shrunk down images in CSS. Actually you were still loading all these images. Since then I think that attitude has changed, and people are building more mobile first as it’s called, responsive design, where you start with a linearized layout, you start with the small images. Then you build up to the larger view for desktop screens.

杰里米：好。 问题主要是带宽之一。 如您所愿，您不希望将大图像提供给小屏幕设备。 这很浪费。 首先从响应式设计开始，发生这种情况并不是因为人们正在使用现有的桌面站点并使它们具有响应能力。 他们添加的样式可以取消布局样式，使布局线性化并缩小CSS中的图像。 实际上，您仍在加载所有这些图像。 从那以后，我认为这种态度已经改变，人们开始将更多的移动设备称为响应式设计，从线性化的布局开始，从小图像开始。 然后，您可以建立更大的桌面屏幕视图。

To start with, that by itself is already a step forward. If you’re starting with the smaller images, now your problem is not how do I detect if someone’s on a mobile device and give them a smaller image. Now your problem is simply, how do I detect if someone’s on a desktop device and give them a bigger image? Straight away, that’s a smaller problem space. Also just the fact that if anything ever goes wrong, what’s going to happen is the user gets a smaller image by default instead of the bigger image. That’s good, and there’s a bunch of techniques around figuring out OK, is this a large screen device? As you said, solving the problem right now involves hacks, essentially. Using JavaScript, using server-side detection maybe. Using cookies, maybe a cookie could be set in JavaScript and then read on the server. Then depending on the contents of the cookie, you could serve smaller or big images.

首先，这本身已经是向前迈出的一步。 如果您从较小的图像开始，那么现在的问题不在于如何检测某人是否在移动设备上并为他们提供较小的图像。 现在您的问题很简单，我该如何检测某人是否在台式机设备上并为他们提供更大的图像？ 马上，这是一个较小的问题空间。 同样，如果发生任何错误，将会发生的情况是，默认情况下，用户将获得较小的图像，而不是较大的图像。 很好，并且有很多技巧可以解决，这是大屏幕设备吗？ 正如您所说，解决问题现在实质上涉及黑客。 使用JavaScript，也许使用服务器端检测。 使用cookie，也许可以在JavaScript中设置cookie，然后在服务器上读取。 然后，根据Cookie的内容，您可以提供较小或较大的图像。

Lots of very, very clever solutions. That’s the situation now. Generally when you see developers doing something in JavaScript, hacking around the problem, that’s a good sign that that’s something that needs to be in the standard. It needs to move from being programmatic to being declarative. Either it needs to move from hacking around the JavaScript into CSS, or into HTML. You can see examples of this in the past, with things like in HTML5, a lot of the input types are stuff we used to have to hack around with in JavaScript. Having a date picker, having placeholder text in an input field. All of these things we could do in the past. We had to hack around in JavaScript. But because so many people were doing it in JavaScript, it was a sign that hey, this needs to be declarative in the specification and standardized across browsers. You saw it move from JavaScript into HTML. It’s the same thing here, where we’re solving these problems now with JavaScript, and it’s a lot tougher than it originally appeared. It really needs to move into the declarative mark-up. It needs to be standard, and it needs to work the same way across browsers. One of the issues that happened with a lot of these hacks that are really, really smart, really clever, is that the browsers started to optimize how they would download web pages by looking ahead into the source to see if there were any image elements, and pre-downloading what was in the source attribute. If you were then doing some clever JavaScript to swap out what was in the source attribute, it’s too late. The browsers have already started to download the initial image.

很多非常非常聪明的解决方案。 现在就是这种情况。 通常，当您看到开发人员使用JavaScript做某事时，解决该问题时，就表明这是标准中所需要的东西。 它需要从程序化转变为声明式。 它要么需要从对JavaScript的黑客攻击转移到CSS或HTML。 您可以看到过去的示例，例如HTML5之类的东西，很多输入类型都是我们过去不得不在JavaScript中使用的东西。 具有日期选择器，在输入字段中具有占位符文本。 我们过去可以做的所有这些事情。 我们不得不在JavaScript中乱搞。 但是由于有这么多人使用JavaScript进行操作，因此这是一个信号，嘿，这需要在规范中进行声明，并在浏览器之间进行标准化。 您已经看到它从JavaScript变为HTML。 这是同一件事，我们现在正在使用JavaScript解决这些问题，并且比最初看起来要困难得多。 它确实需要进入声明式标记。 它需要是标准的，并且需要在所有浏览器中以相同的方式工作。 许多此类黑客的确非常聪明，非常聪明，它们发生的问题之一是，浏览器开始着眼于源代码，以查看是否有图像元素，从而开始优化下载网页的方式，并预下载source属性中的内容。 如果您当时正在使用一些巧妙JavaScript来交换source属性中的内容，那就太迟了。 浏览器已经开始下载初始图像。

Louis: Right.

路易斯：对。

Jeremy: You can’t blame the browsers for doing this, because it’s actually a really smart thing to do in terms of speed and performance, which is what browsers care about. It wasn’t enough to say, “Stop doing that, you’re ruining our clever scripts.” It was always this feeling that we’re trying to solve this problem in JavaScript. We need to move it into a declarative standard like HTML. I think in the long term though, I think it does take a really big view. You’ve got something happening in the hacks, in JavaScript. It moves into being declarative or HTML or CSS. Maybe long term it could actually move into the format itself. In that it’s an image that needs to be responsive. The actual image format. Some people have been talking about that as well. You have one image that would serve it self up in different file sizes depending on the capabilities of the browsers, content negotiation.

杰里米：您不能责怪浏览器这样做，因为就速度和性能而言，这实际上是一件非常明智的事情，而这正是浏览器所关心的。 仅仅说“停止这样做，就破坏了我们的聪明脚本”是不够的。 我们一直试图通过JavaScript解决此问题，这始终是这种感觉。 我们需要将其移至HTML等声明性标准中。 从长远来看，我认为这确实有很大的看法。 您可能会在JavaScript和JavaScript中发生一些事情。 它变成了声明性的或HTML或CSS。 也许从长远来看，它实际上可以进入格式本身。 因为这是需要响应的图像。 实际图像格式。 也有人在谈论这个。 您有一个图像可以根据浏览器的功能和内容协商以不同的文件大小自行提供。

Right now we’re in that moment of wanting to move a popular pattern in JavaScript into the declarative standard of HTML. A lot of very smart people have been working on this, a lot of people who’ve been coming up with these JavaScript hacks. People like Scott Jehl, Matt Wilcox, all these people. They went to the WHATWG and they’re not used to spending much time on those mailing lists, start talking about this stuff. The default attitude at WHATWG , generally from Hixie is, it’s not a problem. You have to prove it’s a problem to me. OK. Pretty sure this really is a problem, because there’s all of these developers trying to solve it. It’s really clear that this is something that needs to be fixed. Eventually Hixie was convinced of that. What happened was somebody on the mailing list, who actually really isn’t a long term contributing member of WHATWG said something like, ‘Oh, you should go over to W3C and make a community group.’ The W3C community group’s this new idea, but people can basically brainstorm around stuff, but it’s not anything to do with any official spec. It’s just a place for people to gather and come together.

现在，我们正想将JavaScript中的流行模式转移到HTML的声明性标准中。 许多非常聪明的人一直在研究这个问题，很多人已经提出了这些JavaScript技巧。 像Scott Jehl，Matt Wilcox这样的人，都是这些人。 他们去了WHATWG，他们不习惯在那些邮件列表上花费很多时间，开始谈论这些东西。 通常，Hixie对WHATWG的默认态度是，这不是问题。 您必须证明这对我来说是个问题。 好。 可以肯定的是，这确实是一个问题，因为所有这些开发人员都在试图解决它。 很明显，这是需要修复的问题。 最终，Hixie对此深信不疑。 发生的事情是邮件列表上的某人，实际上不是WHATWG的长期贡献成员，他说：“哦，您应该去W3C并建立一个社区小组。” W3C社区小组提出了这个新想法，但人们基本上可以围绕某些东西进行头脑风暴，但这与任何正式规范无关。 这是人们聚集在一起的地方。

The problem is that people who had come to the WHATWG took that advice as being advice from the WHATWG as a group, which it wasn’t. It’s just one guy saying this. WHATWG doesn’t have much of a hierarchy. You, me, we can all be members of WHATWG just by writing an email to the WHATWG list. It was taken as, “Oh, if you go over to the community group and work on this and then come back to us, that’s the correct way to solve this problem.” These people went off to form a community group, Responsive Images community group on the W3C, and that’s where they really started hammering out a lot of this. They did a lot of great work, really good work. First of all, figuring out the use cases, because it turns out it isn’t as simple as you first think of simply swapping out a larger image for a smaller image. Sometimes what’s shown in the image might be different. It could be a crop of the larger image.

问题在于，来参加WHATWG的人们将这些建议作为WHATWG作为一个小组的建议，但事实并非如此。 只是一个人而已。 WHATWG没有太多的层次结构。 您，我，只要将一封电子邮件发送到WHATWG列表，我们都可以成为WHATWG的成员。 有人认为，“哦，如果您转到社区小组并进行此工作，然后再返回给我们，这就是解决此问题的正确方法。” 这些人组成了一个社区小组，即W3C上的Responsive Images社区小组，在那里，他们真正开始了很多工作。 他们做了很多很棒的工作，真的很棒。 首先，弄清楚用例，因为事实证明它并不像您首先想到的那样简单地将较大的图像换成较小的图像那样简单。 有时图像中显示的内容可能有所不同。 可能是较大图像的裁剪。

Sometimes it’s literally a smaller version of the larger image. It depends, different use cases. Then you’ve got the issue of retina displays, where you actually want to show the image at the same size, but for some devices that image should be twice as large in terms of pixels. They were hammering out all these edge cases, figuring out all these details, doing really, really good work. Meanwhile over at the WHATWG , other people were also doing some work. The way that Hixie works is that he attacks his email in a big bunch at one go, and attacks an issue in one go. A few months later, he was coming back around to tackle this issue of OK, do we put something into the spec about trying to have responsive images? Ted, who works at Apple, works on Safari and works on WebKit, he heard that Hixie was going to be tackling this problem. He put forward something he’d been working on for months, which was related to the work that Apple were doing with CSS, to do with this idea of a set of images that you could list a comma delimited set of images, and the browser could choose which image to display based on the appropriate constraints.

有时，它实际上是较大图像的较小版本。 这取决于不同的用例。 然后是视网膜显示器的问题，实际上您想以相同的尺寸显示图像，但是对于某些设备，图像的像素大小应该是其两倍。 他们正在敲定所有这些极端情况，弄清所有这些细节，做得非常非常出色。 同时，在WHATWG上，其他人也在做一些工作。 Hixie的工作方式是他一次攻击一大堆电子邮件，然后一次攻击一个问题。 几个月后，他又回来解决这个OK的问题，我们是否在规范中尝试尝试使用响应式图像？ Ted在Apple上工作，在Safari上工作并且在WebKit上工作，他听说Hixie将解决这个问题。 他提出了他几个月来一直在从事的工作，这与苹果公司使用CSS所做的工作有关，以解决这种图像集的问题，您可以列出以逗号分隔的图像集，以及浏览器可以根据适当的约束条件选择要显示的图像。

This is happening in CSS. A similar pattern is what he proposed for HTML, that you have this source set attribute that’s comma delimited, and you describe the parameters that trigger one image or another. Anyway. He throws this out there. Here’s the problem. The way it looks to the outside, to the people that had gone off to form this responsive images group, they’d been told to go away, sort it out over there. Meanwhile, somebody else who appears to be an insider at WHATWG just proposes this source set thing out of the blue, and boom, a couple of days later it’s in the WHATWG HTML spec. That’s the way it looked to the outside. Actually that’s not the case, because all of the work that Ted was doing was informed to a large degree by the use cases that the responsive images community were coming up with. Their work was certainly not wasted. Also it turned out he had been working on this for months, it was just the timing looked pretty suspicious from the outside. The day that this source thing got put in the spec, it was a bad day for communication. Put it that way. In the IRC channel, there was a lot of tempers firing. I was upset, because it seemed to me that Hixie had literally no knowledge of the work going on at the responsive images community group.

这是在CSS中发生的。 他为HTML提出了类似的模式，即您具有以逗号分隔的源集属性，并描述了触发一个图像或另一图像的参数。 无论如何。 他把它扔在那里。 这是问题所在。 向外看的样子，对那些组成这个响应式图像小组的人来说，被告知要走开，在那儿整理一下。 同时，似乎是WHATWG内幕人士的其他人只是提出了这种源集，但几天后，它就出现在WHATWG HTML规范中。 这就是它向外看的方式。 实际上，情况并非如此，因为Ted所做的所有工作在很大程度上都来自于使用响应图像社区提出的用例。 他们的工作当然没有浪费。 事实证明，他已经为此工作了几个月，只是时间从外部看起来非常可疑。 在规范中放入这一原始内容的那一天，对于交流来说是糟糕的一天。 这样说。 在IRC频道中，有很多脾气暴躁。 我很沮丧，因为在我看来，Hixie实际上不了解响应图像社区小组正在进行的工作。

What they had done was they had actually come up with their own proposal that followed the pattern that’s used by video in HTML5, which essentially puts media queries into a source element, and you choose based on that. Both solutions have their issues. Neither one is perfect. Ideally, what you want to see is both proposed solutions being evaluated on their merits. The way it looked from the outside on the day that that source set proposal got put into the spec was, oh, there’s some favoritism going on here. You prefer this solution because of who proposed it. It was someone inside WHATWG , someone who works on a browser. That’s why it’s getting favored. The people at WHATWG were quick to point out that just because it’s in the spec right now doesn’t mean it’s staying in the spec, it doesn’t actually mean anything. You can understand why people were upset, because it seemed to be a favoritism between solutions going on.

他们所做的是，他们实际上提出了自己的建议，该建议遵循HTML5中视频所使用的模式，该模式本质上是将媒体查询放入源元素中，然后您可以基于此选择。 两种解决方案都有其问题。 都不是完美的。 理想情况下，您希望看到的是两个建议的解决方案都根据其优点进行评估。 在将源集提案纳入规格书的那天，它从外部看的方式是，哦，这里有些偏爱。 您更喜欢此解决方案，因为是谁提出的。 是WHATWG内部的人，是在浏览器上工作的人。 这就是为什么它受到青睐。 WHATWG的人员很快指出，仅仅因为它在规范中并不意味着它仍然在规范中，实际上并不意味着任何东西。 您可以理解人们为什么感到沮丧，因为这似乎是正在进行的解决方案之间的偏爱。

Louis: Yeah.

路易斯：是的。

Jeremy: It was problematic. It was also problematic because immediately then it became an us vs. them situation. Instead of evaluating which solution was the better solution for the problem cases, people were arguing about which solution was better based on who had come up with it. Things died down a bit, things cooled off, which is good. I think everyone began to realize that actually what we really need is a solution that works for the end users, regardless of where it comes from. This is still being discussed, and there’s some good compromise solutions coming out. Essentially the picture element that was proposed by the responsive images group, that’s very, very good for solving what I would call the art direction use case. Which is where as a developer, as an author, I want to provide a number of possible images and a number of possible conditions. Say if the screen width is this large, I want to load this image. If the screen width is this large, I want to show this image, and that image could be a cropped version of the original image and so on.

杰里米：这是有问题的。 这也是有问题的，因为从那时起它就变成了美国与他们之间的局面。 人们不是在评估哪种解决方案是针对问题案例的更好解决方案，而是在根据谁提出的解决方案来争论哪种解决方案更好。 事情有点消退，事情变凉了，这很好。 我想每个人都开始意识到，实际上我们真正需要的是一种适用于最终用户的解决方案，无论它来自何处。 这仍在讨论中，并且出现了一些很好的折衷解决方案。 本质上，响应图像小组提出的图像元素对于解决我称之为美术指导用例的问题非常非常好。 作为开发者和作者，我想在哪里提供许多可能的图像和许多可能的条件。 假设屏幕宽度太大，我想加载此图像。 如果屏幕宽度太大，我想显示此图像，该图像可能是原始图像的裁剪版本，依此类推。

Louis: Right. If you have a very wide banner, masthead image imagining situation here that has someone’s face in the top left, and you want to shrink that down to a square for your mobile version, then that might just not look right. Any kind of automated solution wouldn’t work. If I can, as the author, specifically crop the image myself and say, “This is the one I want,” then I have a bit more power to do that.

路易斯：对。 如果您的横幅广告非常宽，此处的标头图片想象情况在左上角有某人的脸，并且您想将其缩小到正方形以适合您的移动版本，那么可能看起来不正确。 任何一种自动化解决方案都行不通。 如果作为作者我可以自己专门裁剪图像并说“这是我想要的图像”，那么我有更大的力量去做。

Jeremy: Exactly. That’s a perfect description of what’s called the art directed use case, which Jason Grigsby has done a lot of great documentation for on his blog. The other use case as I said is retina displays, where it’s more about the capabilities of the device, and less about the author making the decision. In directed use case, it’s more I want the browser to be smart about this. I’ve got these images, and they might be literally the same images but different densities of pixels. I want the browser to be smart about which one to pick. It’s less about the author’s decision and much more about the browser’s decision. The source solution that Ted proposed is very good for that use case. It’s less for the art direct use case, whereas the picture solution that the responsive images group came up with, is very good for the art director use case but gets a little messy when it comes to the retina use case. Because it’s reusing media queries, media queries aren’t quite so good at making the browser smart. Media queries are there to empower the author. So the author can specify under these conditions, I want this to happen. They’re less good for the algorithmic decisions that a browser needs to make.

杰里米：是的 。 这是对艺术指导用例的完美描述，Jason Grigsby在他的博客上做了很多很棒的文档。 我说过的另一个用例是视网膜显示器，它更多地是关于设备的功能，而不是作者做出决定。 在定向用例中，我更希望浏览器对此有所了解。 我有这些图像，它们实际上可能是相同的图像，但像素密度不同。 我希望浏览器在选择哪一个方面很聪明。 它与作者的决定无关，而与浏览器的决定有关。 Ted提出的源解决方​​案非常适合该用例。 对于艺术直接用例而言，它较少，而响应图像小组提出的图片解决方案对于艺术指导者用例而言非常好，但在视网膜用例上却显得有些混乱。 由于它在重用媒体查询，因此媒体查询在使浏览器变得智能方面并不是很好。 媒体查询可以增强作者的能力。 因此作者可以指定在这些条件下，我希望这种情况发生。 它们不太适合浏览器需要做出的算法决策。

I think ideally what we’d like to see is a combination of both, the best of both. There’s other issues as well around how readable the syntax is, how understandable syntax is. How implementable it is, that’s obviously a big, big issue as well. It’s all well and good to dream up great solutions, but it has to be something that browser makers can do relatively quickly and easily. I would like to see some kind of compromise between the two. They’re both smart solutions, but they’re actually for different use cases. It was a shame that things got so heated for a while and things did get very partisan and very political.

我认为理想情况下，我们希望看到的是两者的结合，两者兼具。 关于语法的可读性和语法的可理解性，还有其他问题。 它的实施性如何，显然也是一个大问题。 梦想出色的解决方案固然很好，但浏览器制造商必须能够相对快速，轻松地做到这一点。 我希望看到两者之间的某种折衷。 它们都是智能解决方案，但实际上它们适用于不同的用例。 真是令人遗憾的是，事情一度变得如此热烈，事情确实变得很有党派性，也变得非常政治化。

It became a political issue, more about who was proposing a solution rather than which solution was better. I think that’s died over now, I hope it’s over, and we’re back to discussing what’s the best solution.

这成为一个政治问题，更多的是关于谁在提出解决方案，而不是哪种解决方案更好。 我认为那已经过去了，我希望它结束​​了，我们将回到讨论什么是最佳解决方案。

Louis: Yeah, I think between your blog post on the issue and then Matthew Marquis wrote an article on A List Apart, which was trying to stand down from that confrontational state of affairs, while presenting his criticisms, or what he feels are the weaker points of the source set solution. Also just saying at the end of the day, what everyone needs to focus on is coming up with something that will benefit users and authors in the long run, and also as you said be implementable.

路易斯：是的，我想在您发表有关该问题的博客文章之后，然后马修·马奎斯(Matthew Marquis)在A List Apart上写了一篇文章，该文章试图从那种对抗的事务状态中站出来，同时提出批评或他认为较弱的人源集解决方案的要点。 最后也要说，每个人都需要关注的重点是从长远来看将使用户和作者受益的事情，并且正如您所说的是可以实现的。

Jeremy: Exactly, exactly. The ironic thing is people have been looking at the whole situation and going oh, my God, this set of standards they’ve done, it’s such a mess, it’s acrimonious, it’s horrible. It’s actually not that bad compared to how other standards get done. It’s just that it happens in public. WHATWG , they’re very public about how stuff gets done. It can seem pretty anarchic and messy. Another thing to mention here is that because it’s HTML we’re talking about, it’s a bit more complicated in that you’ve got the WHATWG working on the ever-evolving HTML living standard. Meanwhile you’ve also got the W3C, who are working on the version numbers. HTML5, is what they’re working on. They take the work being done at WHATWG and they get it into a spec with a working draft and last call and all these milestones. They’re much slower to simply throw something into the spec and say, “Yeah, done, good enough. Let’s iterate on it later.” They’re much more cautious.

杰里米：完全正确。 具有讽刺意味的是，人们一直在关注整体情况，然后走，哦，天哪，他们所制定的这套标准，真是一团糟，令人生畏，令人恐惧。 与完成其他标准相比，它实际上还不错。 只是它发生在公共场合。 WHATWG，他们对工作如何完成非常公开。 看起来很混乱和混乱。 这里要提到的另一件事是，因为我们正在谈论的是HTML，所以它变得更加复杂，因为您已经使WHATWG致力于不断发展HTML生活标准。 同时，您还拥有正在开发版本号的W3C。 他们正在开发HTML5。 他们将WHATWG的工作纳入工作清单，并通过工作草案和最后电话以及所有这些里程碑将其纳入规格。 他们只是简单地向规范中添加一些东西，然后说：“是的，做得足够好。 让我们稍后对其进行迭代。” 他们要更加谨慎。

It’s a good illustration of how I think the two groups balance each other out, because I like the WHATWG ‘s way of working. It’s fast and it gets stuff done, and they put stuff in the spec and then iterate on it, but it’s a bit too anarchic, and a bit too crazy. Meanwhile the W3C can be very slow because they’re concerned about setting stuff in stone for all time. They have to be very cautious and slow. I think the two groups balance each other reasonably well. This could be an example of that. Hixie does go throwing any old stuff into the spec in WHATWG , that doesn’t mean it’s going to happen in W3C. That could be the place where stuff gets revolved. It’s almost like political systems with two houses.

这很好地说明了我认为两组之间如何保持平衡，因为我喜欢WHATWG的工作方式。 它很快并且可以完成工作，然后他们将其放入规范中，然后对其进行迭代，但这有点太无政府状态，也太疯狂了。 同时，W3C的运行速度可能非常慢，因为他们一直都在关注将东西摆在石头上的问题。 他们必须非常谨慎和缓慢。 我认为两组之间的平衡相当好。 这可能是一个例子。 Hixie确实会将任何旧的东西扔进WHATWG的规范中，但这并不意味着它将在W3C中发生。 那可能是东西旋转的地方。 这几乎就像有两个房子的政治体系。

Louis: Yeah, it’s interesting how that evolved almost organically in this case, in a way that does mirror the way a lot of democracies are organized.

路易斯：是的，在这种情况下，这种变化几乎是自然发展的，这确实有趣，这确实反映了许多民主国家的组织方式。

Jeremy: Right, checks and balances.

杰里米：对，制衡。

Louis: Do you feel like there’s a fairly good likelihood in this case what we’re going to end up with in browsers is going to be a compromise between those two solutions? Something that evolved from both of them at least?

路易斯：您是否觉得在这种情况下，我们在浏览器中最终要解决的问题是这两种解决方案之间的折衷方案？ 至少是从他们俩身上演变而来的？

Jeremy: That’s what I’m hoping. I have to admit that my inner pessimist is thinking that because browser makers carry a bigger stake than anyone else, they get to say. If in the next version of Safari it’s already got source set in there, then the attitude of WHATWG will be that’s what we’re going to standardize on. Because rough consensus, running code. Personally I’d like to see a bit more rough consensus before we have the running code. I suspect what’s actually going to happen is that some browser, probably Safari, will ship with their preferred solution, and that’s what’s going to get standardized. Because now it’s in a browser, that’s what counts, that’s the way it’s going to go. It may not be the best solution.

杰里米：那就是我希望的。 我必须承认，我内心的悲观主义者认为，因为浏览器制造商所拥有的股份比其他任何人都大，所以他们不得不说。 如果在下一版的Safari中已经设置了源代码，那么WHATWG的态度将是我们将对此进行标准化。 因为大致共识，正在运行代码。 我个人希望在有了运行代码之前能看到一些更粗略的共识。 我怀疑实际上将要发生的事情是某些浏览器(可能是Safari)将附带其首选的解决方案，而这将变得标准化。 因为现在它在浏览器中，所以很重要，这就是它要走的路。 它可能不是最佳解决方案。

Louis: Right. Now in this case, given that we already do have some sort of fairly decent workarounds for a lot of these situations, any additional tool on the browser side does help a little bit, and can only make our lives a little bit easier. On the one side, it’s look like anything will be great to have, especially if it gets implemented and rolled out fairly quickly in a lot of different browsers.

路易斯：对。 现在，在这种情况下，考虑到我们已经在许多情况下采取了某种相当不错的解决方法，浏览器端的任何其他工具都可以有所帮助，并且只能使我们的生活更轻松一些。 一方面，看起来任何东西都将是很棒的，尤其是如果它在许多不同的浏览器中被实现并很快推出的话。

Jeremy: Yeah, yeah. It is good that browsers are at least paying attention to the problem, but obviously they have their own biases as well. I suspect that Apple’s concern right now will be around retina images for good reason. They’re switching to retina displays across the board, so they’re very concerned about that use case.

杰里米：是的，是的。 最好浏览器至少注意该问题，但是显然他们也有自己的偏见。 我怀疑苹果目前的关注将是出于充分的理由围绕视网膜图像。 他们将全面切换到视网膜显示器，因此他们非常关注该用例。

Louis: Yeah.

路易斯：是的。

Jeremy: They’re probably less concerned about the art direction use case. We may see pretty good solutions for swapping out images for retina displays, but that’s not going to help us with the other use case.

Jeremy：他们可能不太关心美术指导用例。 我们可能会看到相当不错的解决方案，可以将图像换成视网膜显示器，但这并不能帮助我们解决其他用例。

Louis: Right. You mentioned earlier the potentially very broad or long term hope that potentially we could have an image format that was itself progressive with regards to things like pixel density bandwidth. Then again, that also doesn’t really address the art direction issue as it were.

路易斯：对。 您前面提到了潜在的非常广泛或长期的希望，即我们可能拥有一种在象素密度带宽之类的东西上可以进步的图像格式。 再说一次，这也并没有真正解决艺术指导问题。

Jeremy: You’re right. That’s more about different sites, same image. Surprisingly far along, if you look at things like JPEG2000, progressive JPEGs. I guess the image is sitting on the server and has got all the data, but when the browser requests it, browser can send headers. Based on those headers you can send back a certain byte range of the image. For this browser I’m going to send back this range. Theoretically maybe you could embed multiple images in an image for the art direction use case, but yeah, I don’t know.

杰里米：你是对的。 这更多是关于不同的站点，相同的图像。 令人惊讶的是，如果您查看诸如JPEG2000，渐进式JPEG之类的内容。 我想图像位于服务器上并已获取所有数据，但是当浏览器请求时，浏览器可以发送标头。 根据这些标头，您可以发回图像的特定字节范围。 对于此浏览器，我将发送回该范围。 从理论上讲，您可以为艺术指导用例在一个图像中嵌入多个图像，但是，我不知道。

Louis: Right. Well, it’ll certainly be interesting to see how this plays out. As you said it’s great to see the browser makers involved and at least aware of the problem and doing something to help us out. In the mean time, there are an abundance of really, really clever workarounds and libraries and tools that have arisen, to make this as manageable as possible given the tools that we have.

路易斯：对。 好吧，这将是一件很有趣的事情。 正如您所说，很高兴看到浏览器制造商参与其中，并且至少意识到了这个问题，并采取了一些措施来帮助我们。 同时，已经出现了很多非常非常聪明的变通办法以及库和工具，从而使它们在我们拥有的工具下尽可能易于管理。

Jeremy: Yeah, the Filament Group have been doing some great work. Scott Jehl, Matt Marquis. They just recently published a bunch of their tools on GitHub, called it Southstreet. It’s a lot of different tools that they use and responsive design projects around things like conditional loading and around responsive images. Seeing as these are the guys who worked on Boston Globe, they really know their stuff. It’s well worth paying attention to their code.

杰里米：是的，灯丝小组做得很好。 Scott Jehl，Matt Marquis。 他们最近才在GitHub上发布了一系列工具，称为Southstreet。 It's a lot of different tools that they use and responsive design projects around things like conditional loading and around responsive images. Seeing as these are the guys who worked on Boston Globe, they really know their stuff. It's well worth paying attention to their code.

Louis: Yeah. All right. Well, Jeremy, thank you very much for again taking the time to come and talk to me about this. It’s always really great to hear your views on all of this. Thanks for writing all of this stuff on your blog that helps the rest of us keep in touch with what’s going on in this world.

路易斯：是的。 行。 Well, Jeremy, thank you very much for again taking the time to come and talk to me about this. It's always really great to hear your views on all of this. Thanks for writing all of this stuff on your blog that helps the rest of us keep in touch with what's going on in this world.

Jeremy: No problem, it’s my pleasure.

Jeremy: No problem, it's my pleasure.

Louis: All right. If listeners want to find you online and they’re not already following you, in which case they’d be crazy or not web designers. If they want to find you on Twitter or on your blog, where do they go?

路易斯：好的。 If listeners want to find you online and they're not already following you, in which case they'd be crazy or not web designers. If they want to find you on Twitter or on your blog, where do they go?

Jeremy: On Twitter, I’m @adactio, but half my tweets will be about toast. Just a warning.

Jeremy: On Twitter, I'm @adactio , but half my tweets will be about toast. Just a warning.

Louis: Who doesn’t like toast?

Louis: Who doesn't like toast?

Jeremy: Exactly. It’s what Twitter is for. What I had for breakfast, that’s what Twitter is for. On my blog, it’s also adactio.com. I’ve got a journal there, that’s the blog, and then I’ve also got a links section. In the links section I’m constantly linking to a lot of resources about responsive design. The blog sometimes talks about web stuff, but also talks about what I had for breakfast. Fair warning. The company I work for is Clear Left, clearleft.com, and you can find a list of devices in the test lab there, and if anyone from Brighton is listening, do feel free to pop by and test on our devices.

Jeremy: Exactly. It's what Twitter is for. What I had for breakfast, that's what Twitter is for. On my blog, it's also adactio.com . I've got a journal there, that's the blog, and then I've also got a links section. In the links section I'm constantly linking to a lot of resources about responsive design. The blog sometimes talks about web stuff, but also talks about what I had for breakfast. 公平警告。 The company I work for is Clear Left, clearleft.com , and you can find a list of devices in the test lab there, and if anyone from Brighton is listening, do feel free to pop by and test on our devices.

Louis: Right, and I’d also love to know if anyone has started up there own little device test lab in their own city, love to hear about those because I think it’s a great idea.

Louis: Right, and I'd also love to know if anyone has started up there own little device test lab in their own city, love to hear about those because I think it's a great idea.

Jeremy: Great.

Jeremy: Great.

Louis: Thanks again Jeremy and have a good day.

Louis: Thanks again Jeremy and have a good day.

Jeremy: You too.

Jeremy: You too.

Louis: Bye. 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.

Louis: Bye. 感谢您收听本周的SitePoint播客。 我很想听听您对今天节目的看法，因此，如果您有任何想法或建议，请访问sitepoint.com/podcast ，您可以对今天的节目发表评论，也可以下载我们以前的任何节目或订阅自动显示节目。 您可以在Twitter @sitepointdotcom (即站点点dotcom)上关注SitePoint ，也可以在Twitter @rssaddict上关注我。 本周的节目是由Karn Broad制作的，我是Louis Simoneau，感谢您的收听和再见。

Audio Transcription by Speechpad.

语音转录的语音键盘。

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-168-secret-source-with-jeremy-keith/