Episode 111 of The SitePoint Podcast is now available! This week Louis Simoneau (@rssaddict) talks with Jeremy Keith (@adactio), a UK-based web designer, and author of several books on web design. We talk about Jeremy’s blog post Sea Change, his views on Responsive Web Design, and the state of the mobile web.
SitePoint Podcast的第111集现已发布！ 本周路易西莫努( @rssaddict )与杰里米·基思(会谈@adactio )，总部位于英国的网页设计师，以及对网页设计的几本书的作者。 我们谈论杰里米(Jeremy)的博客文章Sea Change ，他对响应式Web设计的看法以及移动网络的状态。
Play this episode directly in your browser — just click the orange “play” button below:
直接在浏览器中播放此剧集-只需点击下面的橙色“播放”按钮即可：
You can download this episode as a standalone MP3 file. Here’s the link:
您可以将本集下载为独立的MP3文件。 这是链接：
SitePoint Podcast #111: Responsive Web Design with Jeremy Keith (MP3, 37:56, 36.4MB)
SitePoint Podcast＃111：使用Jeremy Keith进行响应式Web设计 (MP3，37:56，36.4MB)
Louis: So hello and welcome to another episode of the SitePoint Podcast. With me today I’m very pleased to have on the show Jeremy Keith. I don’t believe Jeremy needs much introduction to most of the listeners of this show. Jeremy is a Web designer based in the UK, he’s the author of several books on Web design, most recently HTML 5 for Web Designers, hi Jeremy!
路易斯：您好，欢迎收看SitePoint播客的另一集。 今天很高兴和我一起在节目Jeremy Keith上演出。 我认为杰里米不需要对本次演出的大多数听众进行介绍。 杰里米(Jeremy)是英国的一位网页设计师，他是几本关于网页设计的书的作者，最近出版的《网页设计师HTML 5》，嗨，杰里米！
Jeremy: Hello.
杰里米：你好。
Louis: How are you doing?
路易斯：你好吗？
Jeremy: I’m doing very well, thank you very much for having me.
杰里米：我过得很好，非常感谢您的加入。
Louis: Oh, it’s an absolute pleasure. I think Kevin mentioned that he’d run into you at the .net Awards.
路易斯：哦，这是绝对的荣幸。 我认为Kevin提到他会在.net Awards中遇到您。
Jeremy: That’s right, yeah.
杰里米：对，是的。
Louis: Right, and you expressed some interest then in being on the show, and then most recently we were discussing a few weeks ago a blog post of yours with Myles and Max and you chimed in on the comments and said hey there’s a few things I’d like to be able to clarify and get in there and talk about, so yeah, you were generous enough to offer to come on and discuss these issues.
路易斯：对，您当时对参加演出表示了浓厚的兴趣，最近一次是在几周前，我们与Myles和Max讨论了您的博客文章，您对评论发表了看法，说：我希望能够澄清并进入那里并进行讨论，因此，是的，您足够慷慨地提出来讨论这些问题。
Jeremy: Yeah, well thank you very much for allowing me on to the show.
杰里米：是的，非常感谢您允许我参加演出。
Louis: Oh, absolutely. So the topic of discussion that drove all of this or that got us here was a blog post you wrote a little while ago called Sea Change, and it was sort of discussing your views on the role of Responsive Web Design I guess in the future of the Web. So do you want to just to get us started give us a rundown on what your position was and where you were coming from when you wrote that and how you felt I guess the way that we represented it might not have quite captured your views, so I’ll give you a chance to run that down.
路易斯：哦，绝对。 因此，导致所有这些问题或使我们陷入困境的讨论主题是您不久前写的一篇博客文章，名为Sea Change ，它在讨论您对响应式Web设计的作用的看法，我认为在将来网络。 那么，您是否只是想让我们开始，以简明扼要的方式介绍您的职位，撰写本文时所来自的位置以及您的感觉，我认为我们所代表的方式可能并未完全反映您的观点，所以我会给你一个机会让它失败。
Jeremy: Well, the blog post it’s kind of about the future, kind of about now, about how I already feel that there is a shift going on in how we build websites that essentially we’ve been building device specific websites for many years, it just happens that the devices have been desktop computers, laptop computers, and it’s only recently been getting into building device specific websites for newer devices, mobile phones, tablets, whatever. But actually what we’re hopefully moving towards is device agnostic Web development where it just adapts to whatever device the user happens to be using. And that’s kind of what I was hammering on about, I’ve been kind of hammering on about this idea for quite a while of device agnostic development which was really what Web standards were always supposed to be about anyway it’s just now it’s finally starting to happen. In fact this whole situation in some way reminds me of the situation maybe ten years ago when there was this shift toward Web standards away from tables for layouts and font tags, and towards using CSS for presentation, separation of structure and presentation. Back then you could feel it in the air that it was an exciting time, people took a lot of convincing that this was the right thing to do, and it took some fairly high profile sites like the Wired redesign, the ESPN redesign to convince people it was worth doing, and you had things like the Zen Garden to kind of make that switch in people’s minds. And it’s a similar situation now I think that switch in people’s mind is starting to happen and Responsive Web Design is kind of the first vanguard of this way of doing things. But, I think what I was saying is maybe I didn’t make myself clear enough in the blog post, but I think some people misread what I’m saying as it’s okay we don’t need to worry too much about new devices like mobiles or tablets, all we need to do is take our existing desktop-centric sites and just reflow the content so it fits on smaller screens, and that’s not what I meant, that’s not what I’m saying. What I’m saying is that the proliferation of lots of different devices, lots of different screen sizes, lots of different capabilities means that the desktop-centric sites we’ve been building for so many years just aren’t going to cut it anymore, and the solution isn’t to build a separate sub-domain for these new devices, for different users of these devices, the solution is to rebuild the site in a device agnostic way from the ground up, which I admit is quite a painful change and there are usually political reasons why that isn’t always a reasonable option to do, but I do feel like it’s going to happen whether you like it or not. Like either you can start doing it now, start changing the desktop-centric approach to Web development now, or you’re going to be behind the curve in another six months, 12 months, two years, just as ten years ago it was the same situation with making that shift to CSS and separation of structure and presentation; you could either get behind it early on or you could play catch up but it was going to happen.
Jeremy：好吧，博客文章是关于未来的，关于现在的，关于我已经感觉到，我们建立网站的方式正在发生变化，从本质上讲，我们已经建立了许多设备特定的网站，碰巧这些设备曾经是台式机，笔记本电脑，而且直到最近才进入针对新设备，手机，平板电脑等设备的特定设备的网站。 但是实际上，我们希望朝着与设备无关的Web开发迈进，它可以适应用户碰巧使用的任何设备。 这就是我一直在追求的东西，我已经在设备不可知论的开发方面投入了很长时间，这实际上是Web标准始终应该被认为是的东西，直到现在它才刚刚开始发生。 实际上，整个情况在某种程度上让我想起了十年前的情况，当时这种趋势已转向Web标准，不再是用于布局和字体标签的表格，而是使用CSS进行表示，结构和表示分离。 那时，您可以感觉到那是一个激动人心的时刻，人们对此深信不疑，这是件正确的事，并且花了一些相当知名的网站，例如Wired重新设计，ESPN重新设计以说服人们这是值得做的，您可以通过Zen Garden之类的东西来改变人们的思维。 现在，我认为情况类似，人们的思维开始发生变化，响应式Web设计是这种做事方式的第一个先锋。 但是，我想我想说的也许是我在博客文章中不够清楚，但是我认为有些人会误解我的意思，因为我们可以不必担心新设备，例如手机或平板电脑，我们需要做的就是利用我们现有的以桌面为中心的网站，然后仅对内容进行重排，使其适合较小的屏幕，这不是我的意思，不是我要说的。 我的意思是，许多不同的设备，许多不同的屏幕尺寸，许多不同的功能在不断涌现，这意味着我们已经建设了许多年的以桌面为中心的网站不再被削减，解决方案不是为这些新设备构建单独的子域，对于这些设备的不同用户，解决方案是从头开始以一种与设备无关的方式重建站点，我承认这是非常痛苦的变化，并且通常出于政治原因，这并不总是一个合理的选择，但我确实认为无论您是否喜欢它都会发生。 就像您现在就可以开始这样做，现在就开始更改以桌面为中心的Web开发方法一样，或者您将在六个月，十二个月，两年之后(与十年前一样)落后于曲线。转向CSS以及结构和表示形式分离的情况相同； 您可以尽早获得支持，也可以追赶，但这种情况将要发生。
Louis: Right. I guess one of the things that’s interesting about this idea of Responsive Web Design, and I think for the most part what you’re saying is totally sensible and we can all get behind that, one of the things that comes out is Responsive Web Design is such a new set of techniques that there are still questions about it and people have been doing or attempting to respond to the issue of mobile for some time now by as you said sort of either segregating things on a sub-domain or trying to come up with a completely different layout that some people already have some preformed opinions about the best way to go about this and maybe that’s why we’re seeing a little bit more friction than what we might expect.
路易斯：对。 我猜想响应式Web设计这一概念中有趣的一件事，而且我认为在大多数情况下，您所说的是完全明智的，我们都可以支持，其中之一就是响应式Web设计。是一种如此新的技术，以至于您说的是在子域上隔离事物或试图将其移动，人们对此已经存在疑问，并且人们已经或正在尝试解决移动问题已有一段时间了。有了完全不同的布局，有些人已经对解决此问题的最佳方法有了一些预先的看法，也许这就是为什么我们看到的摩擦比我们预期的要多。
Jeremy: Yeah, and don’t get me wrong, I’m not saying that Responsive Design is the answer to everything and it’s the be all and end all of Web development, and I agree that it is very early days and it’s a lot of experimentation going on, that’s kind of what makes it exciting. I would compare it to the situation, again, going back to earlier days in Web development, I compare it to a situation with Ajax in that things started to happen and it was a very nebulous thing; around 2005, we started to see some pretty cool applications emerging like Gmail and Google Maps and stuff, and then Jesse James Garrett came along and he gave it a label, he named it by calling it Ajax, and it’s kind of a similar situation here, we’ve got something happening and Ethan Marcotte comes along and he says, okay, we’ll call it Responsive Web Design, and straight away we’ve got something to call it and that helps crystallize things, people can get behind that label, but it’s still very much experimentation, trying stuff out. I don’t want to give the impression that all the answers are there we just need to implement them, no, it’s very much still a phase of figuring this stuff out, it’s just I think it’s good that we have this label for this kind of approach which kind of goes against what has been the default approach for the last two or three years which is this idea of oh we just make a separate sub-domain for this kind of user and that kind of user, that just isn’t going to scale in the long term.
Jeremy：是的，请不要误会我的意思，我并不是说自适应设计是所有问题的答案，这是Web开发的全部和全部，我同意这是非常早期的事情，而且很多实验的进行，这就是令人兴奋的原因。 我将其与情况进行比较，再回到Web开发的早期，将其与Ajax的情况进行比较，因为事情开始发生，这是非常模糊的事情。 大约在2005年，我们开始看到一些非常酷的应用程序出现，例如Gmail和Google Maps之类的东西，然后Jesse James Garrett出现了，他给它贴了标签，他通过将其命名为Ajax来命名，这有点类似情况，我们发生了一些事情，Ethan Marcotte出现了，他说，好吧，我们将其称为“响应式Web设计”，马上我们就有了可以称之为的东西，它有助于使事情具体化，人们可以躲开这个标签，但仍需进行大量尝试，以进行尝试。 我不想给人留下所有答案的印象，我们只需要实现它们，不，这仍然是弄清楚这些内容的一个阶段，只是我认为我们拥有这种标签是很好的哪种方法与最近两三年来的默认方法背道而驰，这是这样的想法哦，我们只是为此类用户和此类用户创建了一个单独的子域，从长远来看。
Louis: Right. So is it your view that that’s never going to be the correct approach, that there’s no organization out there or no publication out there that could benefit from designing a website specifically for mobile devices? And then I think it makes sense to say that your sort of traditional website, any website can benefit from responsive techniques because you’ll be able to adapt to a wider degree of screen sizes and devices. But are you saying that it’s never appropriate to have a site that’s focused on the mobile device with say a limited number of options and then a link back to the main site?
路易斯：对。 因此，您是否认为这永远不是正确的方法，那里没有组织或出版物可以从专门为移动设备设计的网站中受益？ 然后，我认为可以说您的传统网站，任何网站都可以从响应技术中受益，因为您将能够适应更大范围的屏幕尺寸和设备。 但是，您是否在说让网站专注于移动设备并提供有限数量的选项，然后再链接回主站点永远不合适？
Jeremy: No, of course as with anything it depends, it depends is the answer to just about every question when it comes to Web development. But, I guess what I’m getting at is up till now the default option has been you create a separate site for mobile and then only in some edge cases do you think about having one site served up to everybody that you adjust the layout for or the design for, and I’m questioning that default. And you’re absolutely right there are definitely situations where there should be a different URL for mobile users, a different subset of the content perhaps, although giving less content to mobile users, that’s something that certainly feels icky to me, but it’s more about the context than the content in those situations. And Ethan talks about this situation, he gives the example of an event site, he’s building the site for Happy Cog’aoke which was the karaoke event at South by Southwest last year, and the site, the main site in the run-up to the event was all about voting and choosing songs and you pretty much needed to be sitting down in front of a computer to use it. But then if you visited the site with a mobile device on the day of the event then you’re probably going to want to know where is the event, how do I get to it, these kinds of things, okay, so in that situation it made sense that you’d be served up something different. But I think those are the exceptions rather than the default, and there are definitely situations where that’s absolutely what you want to do, but there’s a danger as well, there’s a danger in trying to make assumptions about people’s intent, about trying to assume context from a device, and that’s something I see happening quite a bit. So this idea okay somebody’s visiting on a small screen device, a mobile phone for example, then they probably — making the assumption that okay these people don’t want to have access to all our content, they just want to find out an address or they just want to get our telephone number so they can call us, I think that’s a dangerous assumption. And that assumption may have been truer in the past when mobile phones were frankly not that great at dealing with Web content when people did use the Web on a mobile device as just a quick way of grabbing some information while they’re in a hurry, while they’ve got their head down, while they’re on the move, but the data nowadays suggests that people use mobile phones and other mobile devices in all sorts of situations, you know, sitting at home just sitting on the sofa rather than reaching for your laptop or going to computer you might take out your mobile phone and read some blog posts, or you might be lying in bed with the iPad, that’s actually a very common use case of tablet devices and mobile devices. So I don’t think it’s valid anymore to try and make those assumptions about people’s intent just from their device if it ever was, and it can be very dangerous to make that assumption and people can get very frustrated, you end up with a situation where people are automatically redirected to a mobile site, a mobile specific site, that has a subset of content, and they know for a fact that there’s more content there because they’ve visited the same site earlier that day on a desktop device and they’re trying to figure out how do they get to that content and hopefully there’s that link to view full website, right, that inevitably has to be included. So there are situations absolutely where you do want to serve up a different site essentially to mobile users, but I think that situation is in the minority rather than the majority, and I also think it’s dangerous to try and make too many assumptions about people’s intent based on their devices.
Jeremy：不，当然，与它所依赖的任何东西一样，它取决于Web开发中几乎每个问题的答案。 但是，我想到目前为止，默认选项是您为移动设备创建一个单独的网站，然后只有在某些特殊情况下，您才考虑为每个人提供一个网站，以便您调整布局或设计，而我质疑该默认设置。 而且您绝对正确，在某些情况下，应该为移动用户提供一个不同的URL，也许应该为内容提供不同的子集，尽管为移动用户提供的内容较少，但是这对我来说确实很棘手，但更多的是在那些情况下，上下文比内容更重要。 然后，Ethan谈到了这种情况，他举了一个活动现场的例子，他正在为Happy Cog'aoke建造该场地，这是去年西南西南地区的卡拉OK活动，也是该场地的主要场地。该活动主要涉及投票和选择歌曲，您非常需要坐在计算机前才能使用它。 但是，如果您在活动当天使用移动设备访问了该站点，那么您可能会想知道该活动在哪里，我该怎么办，这类事情还可以，所以在这种情况下可以为您提供不同的服务是很有意义的。 但是我认为这些是例外，而不是默认情况，在某些情况下，这绝对是您想要做的事情，但同时也存在危险，尝试对人们的意图进行假设，尝试假定上下文时也存在危险从设备上，这是我看到的很多事情。 因此，这个想法好吧，有人正在使用小屏幕设备(例如手机)进行访问，然后他们可能会做出这样的假设-假设这些人不想访问我们的所有内容，他们只是想找到一个地址或他们只是想获得我们的电话号码，以便他们可以给我们打电话，我认为这是一个危险的假设。 过去，当人们确实在移动设备上使用Web作为在急忙中获取某些信息的快速方式时，移动电话在处理Web内容上并不那么出色时，这种假设可能在过去是正确的，虽然他们低着头，却在移动中，但如今的数据表明，人们在各种情况下都使用手机和其他移动设备，您知道，他们坐在家里只是坐在沙发上而不是伸手拿笔记本电脑或上电脑，您可能会拿出手机并阅读一些博客文章，或者您可能正躺在iPad上，这实际上是平板设备和移动设备的一种非常常见的用例。 因此，我认为仅凭设备尝试对人们的意图进行假设就不再有效了，做出这样的假设可能非常危险，并且人们可能会非常沮丧，最终您会遇到这种情况人们会被自动重定向到具有一部分内容的移动网站(特定于移动设备的网站)，并且他们知道那里有更多内容，因为他们当天早些时候已经在台式机设备上访问了同一网站，试图弄清楚他们如何获得该内容，并希望该链接可以查看完整的网站，对，不可避免地必须包含该链接。 因此，在某些情况下，您确实确实确实想为移动用户提供一个不同的网站，但是我认为这种情况属于少数群体而不是多数群体，而且我认为尝试对人们的意图做出太多假设是危险的根据他们的设备。
Louis: Yeah, so I think what you’re saying is that at the end of the day you really have to consider the users that are going to be using your website and not try and make any kind of generalizations; if there’s any data that the site owner has or that you as a designer have access to or if you can get out there and talk to users and find out what they want and what their contexts are when they’re using the site there’s nothing that’s going to compete with that.
路易斯：是的，所以我想您的意思是，到最后，您真的必须考虑将要使用您的网站的用户，而不是尝试进行任何形式的概括。 如果网站所有者拥有任何数据，或者您作为设计师可以访问任何数据，或者您可以走出去与用户交谈并找出他们想要的东西以及他们在使用网站时所处的环境，那无非是要与之竞争。
Jeremy: And I have to say it works both ways as well, just as we shouldn’t be trying to make too many assumptions about a visitor to your site who happens to be visiting with a mobile device about their intent, likewise just because somebody visits with a desktop browser does not mean that they’ve got all the time in the world to sit there and wait for a page to load or that they’re not in a hurry and that they want to get to the information quickly or that they’ve got lots of bandwidth. There’s a terrible conflation between screen size and bandwidth, we tend to assume that small screen sizes mean narrower bandwidth and large screen sizes mean plenty of bandwidth. And while it’s probably a safe bet to assume small screen sizes probably does mean we can’t rely on this person having a fast connection, the opposite doesn’t hold true, you can’t assume that just because somebody has a wide screen that they’ve got lots of bandwidth.
Jeremy：我必须说，它也有两种作用，就像我们不应该对您的网站访问者正巧用移动设备访问他们的意图做出太多假设一样，只是因为有人使用桌面浏览器进行访问并不意味着他们有足够的时间坐在那里等待页面加载，或者他们不着急并且希望快速获取信息，或者他们有很多带宽。 屏幕尺寸和带宽之间存在可怕的混淆，我们倾向于假设小屏幕尺寸意味着较窄的带宽，而大屏幕尺寸则意味着足够的带宽。 尽管可以假设小屏幕尺寸确实是一个安全的赌注，但这确实意味着我们不能依靠这个人快速建立联系，但事实并非如此，您不能仅仅因为某人拥有宽屏就可以了。他们有很多带宽。
Louis: I guess one other thing that’s most interesting to me coming out of all this debate that’s gone back and forth about Responsive Web Design is that it brings to light the fact that I guess a lot of what we see as traditional desktop targeted sites, quote/unquote, have a lot of content on them that maybe isn’t that important. People bring up the argument about a mobile site saying oh my restaurant needs a mobile site because when people are on the go they just want my address and my phone number and my menu, well people always just want your address and your phone number and your menu, and that should be the core information on your desktop site too and all this other junk and big photos of people stuffing food in their faces isn’t actually that helpful to anyone.
路易斯：我猜想在响应式Web设计的所有争论中，我最感兴趣的另一件事是，它揭示了一个事实，即我想我们看到了许多传统的针对桌面的网站，引用/取消引用，其中有很多内容可能并不那么重要。 人们提出了有关移动网站的说法，说我的餐厅需要一个移动网站，因为当人们在旅途中时，他们只想要我的地址，我的电话号码和我的菜单，好吧，人们总是只想要您的地址，您的电话号码和您的菜单，它也应该是桌面网站上的核心信息，而其他所有这些垃圾食品和人们将食物塞在脸上的大照片实际上对任何人都没有帮助。
Jeremy: Exactly. I actually favorited a Tweet from somebody on Twitter today, he summed it up nicely, he said, “Mobile users want to see our menu, hours and delivery number, desktop users definitely want to see this one megabyte PNG of somebody smiling at a salad.”
杰里米：是的 。 实际上，我今天在Twitter上最喜欢某人的Tweet，他总结得很好，他说：“移动用户希望看到我们的菜单，时间和交付数量，台式机用户肯定希望看到有人在沙拉上微笑着的这一1兆字节PNG 。”
Louis: (Laughs) exactly, right. I haven’t seen that; I must have been on a similar brainwave there.
路易斯：(笑)完全正确。 我还没看过 我一定在那里也有过类似的头脑。
Jeremy: Yeah, that sums it up, right, that actually what this more recent proliferation of devices and screen sizes and use cases actually brings up is that the way we’ve been doing traditional Web design, if you can call such a young industry traditional, has always been pretty out of whack with reality, right, that we’ve been making a lot of assumptions for the last ten years that were not really based in any good data or any good testing with real users. We’ve been making a lot of assumptions about screen size, bandwidth, context, all these kinds of things that actually don’t hold up, and what I like about this explosion in mobile usage is that it’s really throwing into sharp relief just how outmoded our techniques have been up till now on the desktop. So I actually think the way that people are generally approaching mobile sites when they do build these separate mobile sites they’re doing Web design the right way, they’re thinking about what’s the main content, what would people want when they come to our business. And then of course the obvious question is, like you say, why do we assume that people visiting on a desktop site wouldn’t want the same stuff, the main content. So yeah, so it’s sort of a proliferation of mobile, a proliferation of devices is really showing how out of touch our traditional approach has been.
Jeremy：是的，总而言之，实际上，最近这种设备，屏幕尺寸和用例的激增实际上提出的是，如果您可以称呼这样一个年轻的行业，我们一直在进行传统的Web设计。传统上，对现实的认识总是不对的，对，在过去的十年中，我们一直在做出很多假设，这些假设并非真正基于任何良好的数据或对真实用户的良好测试。 我们一直在对屏幕大小，带宽，上下文，所有这些实际上无法承受的事情做出很多假设，而我对移动使用爆炸性增长的看法是，这确实使人们大为放松到目前为止，我们的技术已经过时了。 因此，我实际上认为，人们在构建这些独立的移动网站时通常会使用移动网站，而他们正在以正确的方式进行Web设计，他们正在思考主要内容是什么，人们进入我们的网站时想要什么？商业。 然后，当然，显而易见的问题是，就像您说的那样，为什么我们假设访问桌面站点的人不想要相同的东西，即主要内容。 是的，这是移动的扩散，设备的扩散确实表明了我们传统方法的脱节。
Louis: Hmm-mm. So I want to maybe move on now and talk a bit about sort of Responsive Design as a technique and where it currently stands. So that was another thing that maybe we hadn’t fully represented in the previous show when I was talking with Max and Myles. So do you see it more as say a philosophy or best practice or as just a set of tools that you can then go and use to make your websites as good as they can be?
路易斯：嗯。 因此，我现在也许想继续谈谈响应式设计的一种技术以及它目前的地位。 所以那是另一件事，也许当我与Max和Myles交谈时，我们可能没有在上一个节目中充分表现出来。 那么，您是否将其更多地看作是一种哲学或最佳实践，或者只是一套工具，然后可以使用它们来使您的网站尽可能地出色？
Jeremy: Well, when Ethan defined the term he made it fairly clear, he didn’t make it a wishy-washy term, he was referring to three specific techniques which is using fluent grids, right, having a fluid layout, having resizable or fluent images and other media video images and so on, and then adjusting layout using media queries. Now people really focus on the media query part, and there are a lot of people that confuse Responsive Web Design with media queries then they use the terms interchangeably. And actually the media queries part is probably the least interesting part of Responsive Web Design, figuring out how to do a fluid layout and how to handle images and videos and that kind of context, that’s the really tough part, the media queries are pretty easy. And actually even if you don’t use media queries and you used for example a JavaScript based solution similar to Cam Adams’ JavaScript from a few years ago about serving up different layouts based on screen size, I would say that’s equally Responsive Web Design, and the media queries aspect is really just a footnote of it. But people have got quite fixated on the media queries part and they’ve just started using the term interchangeably. So I think the term is a fairly specific set of techniques as defined by Ethan, but how you then approach it can be vastly different because one way you can approach Responsive Web Design is to literally take an existing desktop website that’s been made for the desktop, it’s been made in a desktop specific way and see how you can reflow the content to fit on a smaller screen, and you might have some success with that depending on the way it’s been coded up, like I said if it’s been done with a liquid layout to begin with you might have some luck. But that kind of approach isn’t really what I would consider best practice Responsive Web Design. The correct way to approach it I think is that you start with your basic content and your basic styles to do with color, typography, that kind of stuff, and then you add in the layout styles inside the media queries or whatever other technology you’re using to detect screen size. So in a way this is like Luke Wroblewski’s idea of mobile first, right, thinking about the mobile situation first then moving up, but I think that’s dangerous as well to think specifically of mobile, it’s more like content first, you’re thinking about the content and then you’re applying the layouts. Now that approach I think is going to work a lot, lot, lot better than beginning with the desktop version and trying to make it flow nicely on smaller screens. And if you think about what you’re doing there by just beginning with the content, applying color styles and font styles and then applying layout styles on top of that, depending on screen width, that’s progressive enhancement, right, I mean that’s what we do anyway, that’s the best practice. And while as I said I think there’s a lot of stuff we’ve been doing for the last ten years on the Web that’s clearly just wrong, the way we’ve been building these desktop specific sites I think we’ve been doing things the wrong way for quite a while, but progressive enhancement as an approach and a technique that’s something that’s remarkably resilient that I keep seeing again and again and again as a really good solution, not solution but a good approach to lots of new situations. Again, to relate it back to Ajax when Ajax exploded onto the scene and there was a lot of experimentation a lot of people threw progressive enhancement out the window saying oh it’s a whole new way of doing things, we don’t need to think about that stuff anymore. But as it turns out progressive enhancement when you applied it to Ajax would result in the best possible experience for more capable browsers but still ensuring that everything worked for older browsers.
杰里米：好吧，当伊桑(Ethan)定义这个术语时，他说得很清楚，但并不是说它是一厢情愿的术语，他指的是三种使用流利网格的特定技术，正确，布局流畅，可调整大小或流利的图像和其他媒体视频图像等，然后使用媒体查询调整布局。 现在，人们真正专注于媒体查询部分，并且很多人将响应式Web设计与媒体查询相混淆，然后他们可以互换使用这些术语。 实际上，媒体查询部分可能是响应式Web设计中最不有趣的部分，弄清楚如何进行流畅的布局以及如何处理图像和视频以及这种上下文，这是真正困难的部分，媒体查询非常容易。 实际上，即使您不使用媒体查询，例如，您使用的基于JavaScript的解决方案(类似于几年前的Cam AdamsJavaScript)基于屏幕尺寸提供不同的布局，我也会说这同样是响应式Web设计，媒体查询方面实际上只是其脚注。 但是人们已经对媒体查询部分非常关注，他们才开始互换使用该术语。 因此，我认为该术语是Ethan定义的一组相当具体的技术，但是您使用该方法的方式可能会大不相同，因为您可以采用“响应式Web设计”的一种方法是直接使用为桌面创建的现有桌面网站，它是通过特定于桌面的方式制作的，并查看如何将内容重排以适合较小的屏幕，并且视编码方式而定，您可能会取得一些成功，就像我说过的那样，从一开始的液体布局可能会有些运气。 但是这种方法并不是我认为的最佳实践响应式Web设计。 我认为正确的处理方法是，从基本内容和基本样式开始，以颜色，版式和类似的东西开始，然后在媒体查询或任何其他技术中添加布局样式重新用于检测屏幕尺寸。 所以从某种意义上来说，这就像卢克·沃布勒夫斯基(Luke Wroblewski)关于移动的想法，对，首先考虑移动情况然后又向上发展，但是我认为特别考虑移动也很危险，它更像是内容，您正在考虑内容，然后应用布局。 现在，我认为这种方法比从桌面版本开始并试图使其在较小的屏幕上流畅流动的方法要好得多。 如果您从内容开始，先应用颜色样式和字体样式，然后再根据其宽度应用布局样式，然后再根据屏幕宽度来考虑布局，这就是逐步的增强，对，我的意思是这就是我们要做的无论如何，这是最佳做法。 正如我所说，我认为过去十年来我们在网络上做过很多事情，这显然是错误的，但我们一直在构建这些特定于桌面的网站，但我认为我们一直在做这些事情。一段时间以来一直是错误的方式，但是渐进式增强作为一种方法和一种具有相当弹性的技术，我一遍又一遍地看到，这是一个非常好的解决方案，而不是解决方案，而是应对许多新情况的好方法。 再说一次，当Ajax爆炸时，又将它与Ajax关联起来，并且进行了许多实验，很多人把渐进式增强功能抛诸脑后，说哦，这是一种全新的工作方式，我们无需考虑那东西了。 但是事实证明，当您将渐进式增强功能应用于Ajax时，将为功能更强大的浏览器带来最佳体验，但仍可确保所有功能都适用于较旧的浏览器。
Louis: As we’ve seen recently with some of the I guess the Gawker Media redesign is the biggest example of that, people still haven’t totally glommed on to that idea even with Ajax, and that’s been six years, so I guess it might take a little while for Responsive Web Design to get there.
路易斯：正如我们最近在某些产品中看到的那样，我想对Gawker Media进行重新设计是最大的例子，即使使用Ajax，人们仍然还不完全了解这个想法，这已经六年了，所以我想响应式Web设计可能要花一些时间才能实现。
Jeremy: Yeah, I mean we’re going to see lots of different approaches even under the banner of Responsive Web Design or content first or whatever you want to call that. And I think we’ll see an emergence of best practices over time, I don’t think — I think it’s still too soon to say what’s a best practice right now, and that’s good, there’s still lots of room for experimentation. And it’s exciting as well, an exciting time I think; I remember when CSS was new on the scene and you could discover a really cool technique that nobody else had thought of and you could blog it on your blog and get a hack named after you or something or get a technique named after you. And this is a really exciting time to be a Web developer, and I’m kind of feeling the same way that yes it’s early days and yes we’re still figuring this stuff out and nobody has the answers, but that’s a good thing, you know, it’s exciting.
Jeremy：是的，我的意思是，即使在响应式Web设计的旗帜下，我们也将看到许多不同的方法，或者首先是内容或您想称呼它的旗帜。 我认为随着时间的推移，我们会看到最佳实践的出现，我认为，现在还说什么是最佳实践还为时过早，这很好，而且还有大量的实验空间。 这也是令人兴奋的，我认为这是令人兴奋的时刻。 我记得当CSS刚出现时，您会发现其他人没有想到的一种非常酷的技术，并且可以在您的博客上写博客，并获得以您或其他人的名字命名的hack，或以您的名字命名的技术。 这对于成为一名Web开发人员来说是一个非常激动人心的时刻，我有一种相似的感觉，是的，这是早期的事情，是的，我们仍然在弄清楚这些东西，没有人提供答案，但这是一件好事，你知道，这很令人兴奋。
Louis: Yeah, for sure. I think maybe some of the — when you think about it a lot of sort of the misunderstandings that people have about what Responsive Web Design is and what’s the best way to do it, there’s so much stuff out there, I mean even if you look at the media queries gallery that we talked about briefly on the podcast with Max and Myles, a lot of the examples there do take that approach of sort of let’s have a series of fixed width sites that just adjust the layout, and they all load the same images and the same resources, so it’s basically just this full size desktop website that’s being reflowed. So what do you think is going to be the solution to — I mean do you think it’s just going to happen naturally that developers are going to kind of learn how to do this the right way or is this something that we need to be more active in and figure out a way of presenting the right way of doing this to people?
路易斯：是的，可以肯定。 我想也许是其中的一些-当您考虑它时，人们对响应式Web设计是什么以及实现它的最佳方法有很多误解，但那里有很多东西，我的意思是即使您看起来在我们与Max和Myles在播客上简短讨论过的媒体查询库中，很多示例确实采用了这种方法，让我们拥有一系列固定宽度的站点，它们只是调整布局，它们都加载了相同的图像和相同的资源，因此基本上就是要重排的这个完整尺寸的桌面网站。 因此，您认为这将是解决方案–我的意思是，您认为开发人员将自然而然地学习如何正确执行此操作，或者这是我们需要更加积极主动地进行的事情就自然会发生吗？并找出一种向人们展示正确的做法的方法？
Jeremy: Well, I think like I said there’ll be a lot of experimentation, and again this reminds me of the early days of Web standards, and then there will be probably some high profile site that will do it right because they have to, right, for business reasons they need to make sure that they’re doing it absolutely correctly so they’ll really put in the time and the effort, and there will be sort of canonical first big responsive major brand site in the same way as we had ESPN.com, the Wired redesign, you know these sites from the early days of CSS based layouts, to show us the way. So I think we’ll have experimentation, well then yeah there will be people reflowing desktop-centric sites, it’s all experimentation, and also you’ll notice a lot of sites doing this now are personal sites, right, portfolio sites that kind of thing, because that’s where a lot of experimentation’s can happen.
Jeremy：好吧，我想就像我说的那样，将进行大量的试验，这再次使我想起了Web标准的早期，然后可能会有一些知名网站会这样做，因为他们必须，对，出于业务原因，他们需要确保他们绝对正确地进行操作，这样他们才能真正投入时间和精力，并且将以与我们有ESPN.com(有线重新设计)，您从早期基于CSS的布局知道这些网站，向我们展示了方法。 因此，我认为我们将进行实验，是的，是的，人们将重排以台式机为中心的网站，这都是实验，而且您会注意到现在很多这样做的网站是个人网站，对，这类网站事情，因为那是可能发生大量实验的地方。
Louis: And there’s kind of two ways of looking at that. Some people say the reason you only see personal sites and blogs and Web design agency sites doing this is because that’s the only type of content this is suited for, but then on the flip side any new technique usually shows up first in personal sites and Web design agency sites because that’s where people are playing with things, CSS designs in the same place and any technique really the CSS 3 stuff we’re seeing now is mostly still on those little sites.
路易斯：有两种看待这种情况的方式。 有人说，您只能看到个人网站，博客和Web设计代理网站这样做的原因是，这是唯一适合的内容类型，但是另一方面，通常在个人网站和Web中首先出现任何新技术设计代理商网站，因为那是人们在玩的地方，CSS设计在同一个地方，而实际上我们现在看到CSS 3东西的任何技术大部分仍然在这些小网站上。
Jeremy: Yeah, exactly, this is where the experimentation happens. If you look throughout the history of Web design it’s always been the way that you see these things happen, first on somebody’s personal site and then they get applied to commercial sites. So I’m kind of looking forward to seeing that site, maybe it’s already being made somewhere out there, and I think there really will be like this dam burst of sites once it’s been proven to work on a large scale commercial site. And you could sit back and wait for that to happen or you could try and see if we could be the ones to do it, how awesome would that be if we could be at the front of that change rather than just playing catch up.
杰里米：是的，确切地说，这就是实验发生的地方。 如果您纵观Web设计的整个历史，则始终是看到这些事情发生的方式，首先是在某个人的个人网站上，然后将它们应用于商业网站。 因此，我很期待看到该站点，也许它已经在某个地方制作了，而且我认为一旦被证明可以在大规模商业站点上工作，真的会有像这样的站点爆炸。 您可以坐下来等待它发生，或者您可以尝试看看我们是否可以做到这一点，如果我们能够站在变革的最前沿而不是仅仅赶上赶超的步伐，那将会是多么的棒。
Louis: Yeah, absolutely. I’m seeing the About.com homepage is using somewhat of a responsive design at the moment, it’s got a very, very flexible grid so it’s one example I guess of a fairly major or high profile site that’s doing this kind of thing, but they’re probably a lot more to come.
路易斯：是的，绝对。 我看到About.com主页目前正在使用某种响应式设计，它具有非常非常灵活的网格，所以这是我猜一个相当主要或备受关注的网站正在做这种事情的一个例子，但是他们可能还有更多。
Jeremy: Hmm-mm.
杰里米：嗯。
Louis: So I wanted to touch a little bit on some of I guess the technical challenges that come up when doing this kind of thing because the issue I guess isn’t so much with respect to dealing with different screen sizes because that’s something that all these responsive techniques do very well. But one thing that does come up a lot is if this is going to be your approach as an organization or as a website designer to handling the quote/unquote mobile devices and mobile context then that implies a few other things, and like you said the association of bandwidth with the screen size or the lack of a keyboard with the screen size even isn’t a hundred percent, but it’s something that is there and people need to consider. And I guess one of the biggest challenges with Responsive Web Design is dealing with that bandwidth challenge, right, if I need to serve an image that will look good at 1024 or 1280 and it also needs to look good at 320, the approach so far in most responsive cases has been to use a really large image and scale it in CSS, but that does pose a problem for bandwidth. And then the other issue that comes up is some of the superfluous content, so you’ve talked a little bit about lazy loading as a solution to that, so I wanted to hear what your opinions are on where we’re going with respect to these sorts of technical challenges and dealing with bandwidth issues.
路易斯：所以我想谈一谈我做这种事情时遇到的技术挑战，因为我认为与处理不同屏幕尺寸无关紧要的问题是因为这就是所有这些响应技术非常好。 但是，确实出现了很多事情，如果这将成为您作为组织或网站设计师处理报价/取消报价移动设备和移动环境的方法，那么这意味着其他一些事情，就像您说的那样带宽与屏幕尺寸的关联，或者缺少键盘与屏幕尺寸的关联甚至都不是100％，但这是存在的，人们需要考虑。 而且我想响应式Web设计的最大挑战之一就是应对带宽挑战，对的，如果我需要提供一幅看起来可以达到1024或1280的图像，并且还需要看起来达到320的图像，那么到目前为止在大多数响应情况下，都是使用非常大的图像并在CSS中缩放它，但这确实带来了带宽问题。 然后出现的另一个问题是一些多余的内容，因此您已经讨论过一些关于延迟加载的解决方案，所以我想听听您对我们在如何处理方面的意见这些技术挑战以及带宽问题。
Jeremy: When it comes to serving up different size media like images I think as with this idea when it came to layouts instead of scaling down a desktop-centric layout to flow into a mobile site what if we flip it on its head and start with the narrow version and then scale it up to desktop. I think that’s probably a good approach to take with media as well; instead of thinking about the large image as the default and how do we scale it down for smaller screen sizes, to flip that on its head and think about the smaller image as the default and then how do we provide a larger image for the devices that have larger screens, laptops, desktops and so on. I mean partly that’s because the smaller screen device is going to include a whole bunch of phones that are not all that capable, we’ve got some great mobile browsers out there now, Mobile Safari and so on, but there’s also a lot of mobile phones that have kind of crappier browsers. So the safe default is to think about the lower bandwidth, think about the smaller images, think about the linearized design, and then to apply larger images, more content, multi-column layouts for the more capable browsers that are likely to be on a desktop or laptop computer. So again I think it’s about flipping it on its head. So an approach will be that yeah you have the smaller images by default and then using JavaScript for instance when you’re detecting screen size or bandwidth to swap them out for larger images, and some people started writing some clever scripts about this, Scott Jehl has got one on GitHub I believe about dealing with swapping out images based on screen size. And then I came across another JavaScript, I wouldn’t call it library, just a small snippet, that’s trying to actually detect bandwidth, now that’s a really tough nut to crack, right, I mean it’s actually pretty easy to detect screen size, resolution, that kind of stuff, that’s a solved problem, trying to figure out how fast somebody’s connection is that’s a real unknown unknown. But using some clever Ajax essentially pinging and checking the response times you can attempt to deal with that, but in general the overall approach you want to take is to play it safe with the default so the default should be the small screen content narrow bandwidth small media, and then to apply the fully blown layout large images more content only to the browsers that are capable of dealing with it, and then lazy loading is another way of doing that. I’m probably using the term lazy loading incorrectly, I know it’s a programming term to invoke something only when you need it, and I’m using it as in literally loading something in after the main content is loaded which is I should probably be saying something like conditional loading or something, but I’ve kind of borrowed that phrase lazy loading.
杰里米(Jeremy)：在提供不同尺寸的媒体(如图像)服务时，我认为这种想法与布局有关，而不是缩小以桌面为中心的布局以流入移动网站，如果我们将其翻转过来并开始窄版，然后将其扩展到桌面。 我认为这也是与媒体打交道的好方法。 而不是将大图像视为默认图像，以及如何将其缩小以适应较小的屏幕尺寸，而是将其翻转以将小图像视为默认屏幕，然后如何为具有以下特征的设备提供较大图像：具有更大的屏幕，笔记本电脑，台式机等。 我的部分意思是，这是因为较小的屏幕设备将包含一大堆功能不尽相同的手机，我们现在已经有了一些出色的移动浏览器，Mobile Safari等，但是还有很多移动设备具有较差浏览器的手机。 因此，安全的默认设置是考虑较低的带宽，考虑较小的图像，考虑线性化设计，然后将较大的图像，更多的内容和多列布局应用于功能更强大的浏览器，这些浏览器可能位于台式机或笔记本电脑。 所以我再次认为这是关于翻转它的头。 所以一种方法是，是的，默认情况下，您有较小的图像，然后在检测屏幕尺寸或带宽时将其替换为较大的图像，例如，使用JavaScript，有些人开始为此编写一些巧妙的脚本，Scott Jehl我已经在GitHub上找到了一个，我相信可以根据屏幕大小交换图像。 然后我遇到了另一个JavaScript，我不会将其称为库，只是一个小片段，它实际上是在尝试检测带宽，现在这是一个很难破解的螺母，对，我的意思是，实际上很容易检测屏幕尺寸，分辨率，这类问题，这是一个已解决的问题，试图找出某人的连接速度有多快，这是一个真正的未知数。 但是本质上使用一些聪明的Ajax ping并检查响应时间，您可以尝试处理该问题，但是总的来说，您希望采用的总体方法是使用默认设置安全运行，因此默认设置应该是小屏幕内容窄带宽小媒体，然后将完全放大的布局将大图像的更多内容仅应用到能够处理的浏览器，然后进行延迟加载是另一种方式。 我可能会错误地使用术语“延迟加载”，我知道这是一个编程术语，仅在需要时才调用某些东西，而我正在使用它，就像在加载主要内容后从字面上加载某些东西一样，我应该说些有条件的加载之类的东西，但是我有点借用了延迟加载。
Louis: Well I think it’s clear to most people, and it’s something a lot of people have started doing with JavaScript either for polyfills for HTML 5 or CSS 3 stuff, or for just if you’ve got a lot of scripts on your page that don’t need to run right away, just delaying that a little bit to cut down on the initial loading time hit.
路易斯：好吧，我认为对于大多数人来说这很明显，并且很多人已经开始使用JavaScript来做HTML 5或CSS 3的polyfills，或者只是在页面上有很多脚本的情况下无需立即运行，只需延迟一点时间以减少初始加载时间。
Jeremy: Yeah, for performance reasons anyway. And, again, this is kind of orthogonal to mobile or small screens or different devices, it’s just good performance sense to make sure your important content loads first and loads fast, and then you can let the sort of peripheral content load in in its own sweet time. I know Flickr are doing some lazy loading stuff in the background around some of the peripheral stuff on a photo page. So, again, it’s just general good practice regardless of whether you’re even thinking about different devices.
杰里米：是的，出于性能原因。 再者，这与移动或小屏幕或不同设备正交，确保良好的性能是首先确保重要内容先加载然后快速加载，然后让外围内容自行加载美好的时光。 我知道Flickr正在后台在照片页面上某些外围设备周围进行一些延迟加载。 因此，无论您是否正在考虑其他设备，这都是一般的好习惯。
Louis: Yeah, absolutely. And you’re doing some of this on your sites with I think Huffduffer I saw one of your blog posts is you’ve introduced some conditional loading of some sidebar content. Are you doing any screen size detection for that or is it just loading after the main content?
路易斯：是的，绝对。 您正在网站上与Huffduffer一起做这些事情，我想您看到Huffduffer的其中一篇博客文章是您有条件地加载了一些侧边栏内容。 您是否正在为此进行屏幕尺寸检测，还是只是在主要内容之后加载？
Jeremy: Well, to begin with I simply wanted to improve performance because a lot of the stuff that was in the site first of all it wasn’t main content it was nice to have content, and secondly the content involved pinging out to third party sites. I mean I was doing some caching but it involved grabbing photos from Flickr, grabbing updates from Twitter, this kind of stuff, right, this kind of nice to have sort of decoration. So to begin with it was a performance issue, I want to make sure the main content at the site wasn’t getting held up by these third party requests. This is the same problem that something like Node.js is intending to solve, right, that you don’t have your rendering held up by having lots of requests to different things. So it started as that and once it was done I thought well it’s a simple Ajax request, you know, once the page is loaded pull in this data and put it in this element, it was pretty easy to wrap that in one little conditional if statement which is simply if the screen is larger than a certain amount do this. Now it could be that when I do that I’m actually committing the classic error of mistaking screen size for bandwidth capability, right, I could be conflating to there. But I think it’s a reasonable use there, again, I’m not claiming to have all the answers; I think it’s a reasonable use. What’s interesting is in that situation as well as the semantics of where I’m doing it, it’s as you say it’s in a sidebar, it’s a site using HTML 5 elements and it is an aside, literally an aside element. And if you look at the definition of what the aside element is to be used for it matches pretty closely to the kind of content that’s nice to have but not your main content, right, content that’s tangentially related to the other content around it. So it was interesting to see that mapping between the semantics of the container of the content and how I could think of the content as well as being, well, it’s not major content, it’s not vital content, it’s nice to have. So, yeah, I think lazy loading is an interesting approach for performance reasons and can tie into this idea of smaller screens and whether or not you load that content in. Because if we don’t have options like lazy loading then the only options we have when we’re considering whether content goes on a page, is the content on the page or not, that’s it, those are your choices, yes or no, true or false, one or zero. If you do like lazy loading you get to say it depends, you get to say well that content would be good to have on this page if the situation allows for it, and that’s very useful in very early stages of site planning when you’re still in the wire-framing stage, right, when you’re discussing with the client. Because you know how it is, right, the client is going to want everything on there like we’ve got to have this on there, that on there, and you want to please the client but at the same time you’re taking the viewpoint of the user and you know the user just wants to get to the main content. And this kind of gives you an opportunity to say well yeah let’s put that content on the page if the viewport is wide enough to handle it, and let’s make sure that content doesn’t get in the way of the main content. I mean that applies to a visual design perspective but also literally in terms of loading the content, that the main content isn’t being held up by this nice to have peripheral content. So it’s nice it introduces this third option instead of just content being there or not, true or false, that we get this kind of — this way of saying maybe.
Jeremy：嗯，首先，我只是想提高性能，因为网站中的很多内容首先不是主要内容，但拥有内容很不错，其次，该内容涉及向第三方发送内容网站。 我的意思是我正在做一些缓存，但是它涉及从Flickr抓取照片，从Twitter抓取更新，这种东西，对，这种装饰很不错。 因此，首先要解决性能问题，我想确保站点的主要内容不会被这些第三方请求所阻止。 就像Node.js打算解决的问题一样，这是正确的，您不会因为对不同事物的大量请求而阻碍了渲染。 因此，它从此开始，一旦完成，我认为这是一个简单的Ajax请求，您知道，一旦页面加载完成，就将这些数据放入并放入此元素中，很容易将其包装在一个有条件的条件下只需在屏幕大于一定数量时执行此操作即可。 Now it could be that when I do that I'm actually committing the classic error of mistaking screen size for bandwidth capability, right, I could be conflating to there. But I think it's a reasonable use there, again, I'm not claiming to have all the answers; I think it's a reasonable use. What's interesting is in that situation as well as the semantics of where I'm doing it, it's as you say it's in a sidebar, it's a site using HTML 5 elements and it is an aside, literally an aside element. And if you look at the definition of what the aside element is to be used for it matches pretty closely to the kind of content that's nice to have but not your main content, right, content that's tangentially related to the other content around it. So it was interesting to see that mapping between the semantics of the container of the content and how I could think of the content as well as being, well, it's not major content, it's not vital content, it's nice to have. So, yeah, I think lazy loading is an interesting approach for performance reasons and can tie into this idea of smaller screens and whether or not you load that content in. Because if we don't have options like lazy loading then the only options we have when we're considering whether content goes on a page, is the content on the page or not, that's it, those are your choices, yes or no, true or false, one or zero. If you do like lazy loading you get to say it depends, you get to say well that content would be good to have on this page if the situation allows for it, and that's very useful in very early stages of site planning when you're still in the wire-framing stage, right, when you're discussing with the client. Because you know how it is, right, the client is going to want everything on there like we've got to have this on there, that on there, and you want to please the client but at the same time you're taking the viewpoint of the user and you know the user just wants to get to the main content. And this kind of gives you an opportunity to say well yeah let's put that content on the page if the viewport is wide enough to handle it, and let's make sure that content doesn't get in the way of the main content. I mean that applies to a visual design perspective but also literally in terms of loading the content, that the main content isn't being held up by this nice to have peripheral content. So it's nice it introduces this third option instead of just content being there or not, true or false, that we get this kind of — this way of saying maybe.
Louis: Yeah. And I guess what I like about that is it kind of gives you the option in a weird kind of way of reuniting the concept of a dedicated mobile site with the concept of Responsive Web Design. Because generally speaking the difference between the two is in your Responsive Web Design, I mean like to state it in a very, very simplistic way in a Responsive Web Design the sidebar content gets floated below your main column, and in a dedicated mobile site the sidebar column just isn’t there, you know, in the simplest way of putting it. But, so that if you’re relying on this kind of potentially JavaScript based loading your link at the bottom of the page that says go to full site all it could do is do exactly the same thing and just load in the sidebar content and put it below, right, so you have this option now of I guess kind of taking the best of both worlds and working in a way that makes sense for mobile but that also provides all the content on a conditional basis when either the user wants it or we know that they can handle it.
路易斯：是的。 And I guess what I like about that is it kind of gives you the option in a weird kind of way of reuniting the concept of a dedicated mobile site with the concept of Responsive Web Design. Because generally speaking the difference between the two is in your Responsive Web Design, I mean like to state it in a very, very simplistic way in a Responsive Web Design the sidebar content gets floated below your main column, and in a dedicated mobile site the sidebar column just isn't there, you know, in the simplest way of putting it. But, so that if you're relying on this kind of potentially JavaScript based loading your link at the bottom of the page that says go to full site all it could do is do exactly the same thing and just load in the sidebar content and put it below, right, so you have this option now of I guess kind of taking the best of both worlds and working in a way that makes sense for mobile but that also provides all the content on a conditional basis when either the user wants it or we know that they can handle it.
Jeremy: Yeah, that’s a good point that you can make that decision okay I think that the mobile user, the small screen user just wants to see this content but still give them the option with a button, a link or something to say show me more, give me the full stuff, and then load it in because they’ve specifically requested it. So, yeah, it gives you that instead of having to make that choice, instead of having to call the shot one way or the other, you get to put the power back into the hands of the user.
Jeremy: Yeah, that's a good point that you can make that decision okay I think that the mobile user, the small screen user just wants to see this content but still give them the option with a button, a link or something to say show me more, give me the full stuff, and then load it in because they've specifically requested it. So, yeah, it gives you that instead of having to make that choice, instead of having to call the shot one way or the other, you get to put the power back into the hands of the user.
Louis: Alright. Well, it’s been really great having you on the show and have a chance to talk about these things and really get your views on it, you’ve got a lot to say and you’ve been blogging a lot about this stuff, but sometimes for some reason I don’t know what it is about the Internet, but on blogs and Twitter statements and positions always seem way more absolute than they actually are.
路易斯：好吧。 Well, it's been really great having you on the show and have a chance to talk about these things and really get your views on it, you've got a lot to say and you've been blogging a lot about this stuff, but sometimes for some reason I don't know what it is about the Internet, but on blogs and Twitter statements and positions always seem way more absolute than they actually are.
Jeremy: I have to say that I’ve been taking kind of a hard-ass approach with a lot of this stuff instead of being maybe more nuanced, but that’s partly because I like to support the underdog in a lot of this stuff. So I remember five, six years ago I was the one saying oh you should all check out JavaScript it’s really cool now, and nobody wanted to hear it, it’s like oh who’s laughing now. And for ten years I’ve been saying oh liquid layouts are the way to go and now I’m feeling kind of vindicated there, so I do kind of always pick the opposite of whatever the default is and kind of champion that, so because the default has become building separate sites for the mobile I’m kind of championing the opposite approach partly just to be obstinate I guess (laughter). But I do really think it is the way forward, but I should clarify once again as I said at the start it depends, right, it always depends. And also the kind of sites I’m talking about are a certain type of site. Now the kind of sites I spend 80, 90% of my time working on which is content driven sites where the user is there to digest information, to read something, to have an experience, there’s a whole lot of class of site that’s very different. The Web app, now you get into the whole problem of trying to define what a Web app is and it’s a whole nother kettle of fish and I think sometimes people define their site as a Web app just as a get out of jail free card, right, oh none of this stuff applies to me it’s a Web app. But, I have to for the sake of disclosure just say that I am talking about a certain kind of site which is a content driven site rather than maybe a task driven site that a Web app would be. So I know I come across as maybe being very absolutist on this stuff, it’s not my intention, I do try to be nuanced to a certain extent, but I am kind of deliberately taking a hard-ass position.
Jeremy: I have to say that I've been taking kind of a hard-ass approach with a lot of this stuff instead of being maybe more nuanced, but that's partly because I like to support the underdog in a lot of this stuff. So I remember five, six years ago I was the one saying oh you should all check out JavaScript it's really cool now, and nobody wanted to hear it, it's like oh who's laughing now. And for ten years I've been saying oh liquid layouts are the way to go and now I'm feeling kind of vindicated there, so I do kind of always pick the opposite of whatever the default is and kind of champion that, so because the default has become building separate sites for the mobile I'm kind of championing the opposite approach partly just to be obstinate I guess (laughter). But I do really think it is the way forward, but I should clarify once again as I said at the start it depends, right, it always depends. And also the kind of sites I'm talking about are a certain type of site. Now the kind of sites I spend 80, 90% of my time working on which is content driven sites where the user is there to digest information, to read something, to have an experience, there's a whole lot of class of site that's very different. The Web app, now you get into the whole problem of trying to define what a Web app is and it's a whole nother kettle of fish and I think sometimes people define their site as a Web app just as a get out of jail free card, right, oh none of this stuff applies to me it's a Web app. But, I have to for the sake of disclosure just say that I am talking about a certain kind of site which is a content driven site rather than maybe a task driven site that a Web app would be. So I know I come across as maybe being very absolutist on this stuff, it's not my intention, I do try to be nuanced to a certain extent, but I am kind of deliberately taking a hard-ass position.
Louis: Yeah, well that’s always good because at the very least it provokes discussion and gets people involved in issues because if someone reads a nuanced post they might not think about it again, but if they read something and say wait I disagree with that, let’s do some thinking! Alright, well thanks again so much for coming on the show, Jeremy, it’s always great having the opportunity to talk this stuff out and it will be great for the listeners to hear your views on this. If people want to find you online do you want to drop in some links?
Louis: Yeah, well that's always good because at the very least it provokes discussion and gets people involved in issues because if someone reads a nuanced post they might not think about it again, but if they read something and say wait I disagree with that, let's do some thinking! Alright, well thanks again so much for coming on the show, Jeremy, it's always great having the opportunity to talk this stuff out and it will be great for the listeners to hear your views on this. If people want to find you online do you want to drop in some links?
Jeremy: Yeah, my site is Adactio.com and I’m @adactio on Twitter, and adactio on just about every service out there.
Jeremy: Yeah, my site is Adactio.com and I'm @adactio on Twitter, and adactio on just about every service out there.
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-111-responsive-web-design-with-jeremy-keith/
