unity ethan_响应式网页设计的挑战，Ethan Marcotte

unity ethan

In this episode of the Versioning Show, David and Tim are joined by Ethan Marcotte, a well-known designer who coined the term Responsive Web Design. They discuss the inspirations behind responsive design, the challenge of tailoring content to users, the advantages of responsive prototypes over static comps, and dealing with self doubt.

在Versioning Show的这一集中，David和Tim与著名设计师Ethan Marcotte一同加入，他创造了术语Responsive Web Design。 他们讨论了响应式设计背后的灵感，为用户量身定制内容的挑战，响应式原型相对于静态组件的优势以及如何处理自我怀疑。

Subscribe on iTunes | Subscribe on Stitcher |

在iTunes上订阅 | 订阅Stitcher |

显示笔记 (Show Notes)

• Ethan Marcotte on Twitter: @beep

  Twitter上的Ethan Marcotte： @beep

• Ethan’s RWD Twitter account

  Ethan的RWD Twitter帐户

• ethanmarcotte.com

  ethanmarcotte.com

• Ethan’s colleague Karen McGrane

  Ethan的同事Karen McGrane

• media queries

  媒体查询

• element queries

  元素查询

• A Dao of Web Design

  网页设计道

• Ethan’s landmark Responsive Web Design article for A List Apart

  Ethan针对A List Apart撰写的具有里程碑意义的响应式Web设计文章

• The Boston Globe

  波士顿环球报

• Filament Group

  长丝集团

• Ethan and Karen’s Responsive Web Design podcast

  Ethan和Karen的响应式Web设计播客

• BBC News on the Responsive Web Design podcast

  BBC新闻在响应式Web设计播客上

• Ethan’s book Responsive Web Design

  Ethan的书《 自适应Web设计》

• Ethan’s book Responsive Design: Patterns & Principles

  Ethan的书《 响应式设计：模式与原理》

• Brad Frost on carousels

  旋转木马的布拉德·弗罗斯特

• Boba Fett

  波巴·费特

• Say hello on Twitter: @mdavidgreen | @tevko | @versioningshow | @sitepointdotcom

  在Twitter上问好： @mdavidgreen | @tevko | @versioningshow | @sitepointdotcom

对话重点 (Conversation Highlights)

Basically, at the end of the day, it’s about assuming that there’s no perfect view of your design — that we can create these layouts that don’t have an ideal width and height; that no matter how small or how wide your screen happens to be, we can create these really beautiful, device-agnostic layouts for the web.

基本上，归根结底，是假设您的设计没有完美的视图–我们可以创建没有理想宽度和高度的布局。 无论您的屏幕有多小或多宽，我们都可以为网络创建这些非常漂亮，与设备无关的布局。

---

---

I started getting more requests in client contracts for building an iPhone website, which was kind of weird. That just started getting me thinking, well, what’s the next website that we’re going to have to build? At some point, some other new cool thing is going to emerge on the mobile web. This doesn’t scale especially well.

我开始在客户合同中收到更多关于建立iPhone网站的请求，这很奇怪。 刚开始，我就开始思考，我们要建立的下一个网站是什么？ 在某个时候，其他一些新奇的事物将在移动网络上出现。 这并不是特别好。

---

---

I met a publishing deadline, and I thought that was going to be the end of it. And folks just really ran with the idea. They started redesigning their websites, making them more responsive. I started seeing agencies going responsive, and then bringing the solution to their clients, and eventually I think that just trickled up the ladder.

我遇到了发布截止日期，我认为那将是最后期限。 人们真的很喜欢这个主意。 他们开始重新设计他们的网站，使它们的响应速度更快。 我开始看到代理商变得ReactSwift，然后将解决方案带给他们的客户，最终我认为这只是在增加阶梯。

---

---

they started talking about all the business benefits that they saw from that, and publishing those metrics and that data. And that made a lot of people in the media and publishing space sit up and take notice and that was really exciting to see.

他们开始谈论从中看到的所有业务收益，并发布这些指标和数据。 这使媒体和出版领域的很多人坐起来并引起注意，这真是令人兴奋。

---

---

the design partner never showed their client at Virgin America a static comp. Basically, from their very first meeting, they had a responsive prototype — in a very early stage, but they had a prototype that everyone could load up on different browsers, on different devices. And there’s something really transformative about that idea.

设计合作伙伴从未向维珍美国航空的客户展示静态组件。 基本上，从他们的第一次会议开始，他们就有了一个响应式原型-在很早的时候，但是他们有了一个原型，每个人都可以在不同的浏览器，不同的设备上加载它们。 这个想法确实有一些变革。

---

---

comps can’t tell you what, first of all, the layout is going to do. There are pictures of a website, but what happens if a browser doesn’t have support for web fonts, or what if there’s a network error and some critical asset doesn’t download, or what if the browser doesn’t understand JavaScript, or the latency is too high so it doesn’t execute — or something like that.

comps不能告诉您首先要进行的布局。 有一个网站的图片，但是如果浏览器不支持Web字体，或者出现网络错误并且某些重要资产没有下载，或者如果浏览器不了解JavaScript，该怎么办？延迟太高，因此无法执行-或类似的东西。

---

---

rather than building all these rats' nests of media queries that deal with all these different layout condition cases that I have to plan for responsively, if I could just have something that’s like, OK, given the width of this container, I want to apply this design rules to this one particular module, that would be huge, and I think it would probably replace a good chunk of the media queries that I write today.

而不是构建所有这些大鼠嵌套的媒体查询来处理我必须作出相应计划的所有这些不同布局情况的情况，如果我可以拥有类似的东西，那么，考虑到此容器的宽度，我想应用这个设计规则对于这个特定的模块来说是巨大的，我认为它可能会取代我今天编写的大部分媒体查询。

---

---

I feel like responsive design is just something I apologize for!

我觉得响应式设计只是我为此致歉的！

成绩单 (Transcript)

Tim: 蒂姆：

Hey, what’s up, everybody? This is Tim Evko …

嘿，大家好吗？ 这是Tim Evko…

David: 大卫：

… and this is M. David Green …

…这是大卫·格林(M. David Green)…

Tim: 蒂姆：

… and you’re listening to episode number 16 of the Versioning Podcast.

…，您正在收听Versioning Podcast的第16集。

David: 大卫：

This is a place where we get together to discuss the industry of the web from development to design, with some of the people making it happen today and planning where it’s headed in the next version.

在这里，我们可以聚在一起讨论从开发到设计的网络行业，其中一些人将其付诸实践，并计划下一个版本的发展方向。

Tim: 蒂姆：

Today, we have with us Ethan Marcotte, who I guess invented Responsive Design (or whatever!), and so we’re going to talk to him all about that and some of the really cool contributions he’s made to the web. So let’s go ahead and get this version started.

今天，我们与Ethan Marcotte在一起，我想是他发明了响应式设计(或其他！)，因此我们将与他谈谈这一切，以及他对网络所做的一些非常酷的贡献。 因此，让我们开始安装该版本。

Ethan, thanks so much for joining us today. How are you doing?

Ethan，非常感谢您今天加入我们。 你好吗？

Ethan: 伊森：

Yeah, Tim, good. It’s good to be here with you and David. Thanks for having me.

是的，蒂姆，很好。 很高兴与您和David在一起。 感谢您的款待。

Tim: 蒂姆：

Awesome. I’m very excited to meet you, and to get the show started, one of the things we like to do with each of our guests is ask a philosophical question, and your philosophical question for the day — since this is the Versioning Show — is: in your current career, what version are you, and why?

太棒了 我很高兴认识您，并开始表演，我们希望与每位客人一起做的一件事是问一个哲学问题，以及您今天的哲学问题-因为这是Versioning Show-是：您目前的职业是什么版本，为什么？

Ethan: 伊森：

Man, I was expecting something on the order of like Batman versus Boba Fett, philosophy-wise.

伙计，我期望像哲学上的蝙蝠侠与波巴·费特一样。

Tim: 蒂姆：

We’ll get to that a little bit later.

我们稍后再讨论。

[Laughter]

[笑声]

Ethan: 伊森：

Fair enough. I don’t know. Does anybody say that they’re not in perpetual beta? I’m in pre-release mode, let’s say that.

很公平。 我不知道。 有人说他们没有处于永久测试版吗？ 我现在处于预发布模式。

Tim: 蒂姆：

Very cool, very cool. Everybody’s given a different answer, which is just amazing.

很酷，很酷 每个人都有不同的答案，这真是了不起。

Ethan: 伊森：

Ah, nice, nice.

啊，很好，很好。

Tim: 蒂姆：

You are the person who invented the concept of responsive design — or at least gave it a name, right?

您是发明自适应设计概念的人，或者至少给它起了个名字，对吧？

Ethan: 伊森：

Yeah, I like to say I coined the term, because what I really did was I brought a couple different techniques, I think, under one umbrella — flexible grids, which is like the workhorse of responsive design. I think that’s the one I had more of a direct hand in actually shaping, but the other two, like flexible grids and media queries, obviously like those preceded my work. I like to think of responsive design as basically just like a rallying cry to bring us around to this idea of more flexible, more device-agnostic design.

是的，我想说我创造了这个词，因为我真正做的是我带来了几种不同的技术，在一个保护伞下- 柔性网格 ，这就像响应式设计的主力。 我认为那是我更直接参与实际塑造的人，但是其他两个人，例如灵活的网格和媒体查询，显然就像我工作之前的那些。 我喜欢将响应式设计视为基本上就像一个集会的呐喊，使我们认识到这种更加灵活，与设备无关的设计理念。

Tim: 蒂姆：

I think a lot of people have heard the term, and it gets thrown around and applied to a lot of things, but for people who might not be as comfortable with that concept, or who might be new to the term or not have heard it, how would you define responsive design for the typical web developer audience — web developer and designer, for that matter?

我认为很多人都听说过该术语，并且将其扔掉并应用到很多事情上，但是对于那些可能不太熟悉该概念的人，或者对于该术语不熟悉或未听说过的人，您将如何为典型的Web开发人员(Web开发人员和设计师)定义响应式设计？

Ethan: 伊森：

That’s a great question. I do a lot of consulting and workshops, some of them with Karen McGrane, a good friend and colleague of mine. When we go in-house somewhere, there’s always a lot of excitement around this term responsive design, but there’s sometimes a lot of varying definitions about what it means. So at the end of the day, in its barest form, a responsive layout is a web-based layout that uses flexible layouts — basically layouts that are defined in percentages or proportions rather than hard, inflexible pixels, and then they have images in media that are flexible themselves, that work in those flexible grids.

这是个好问题。 我做过很多咨询和讲习班，其中一些是我的好朋友兼同事Karen McGrane所为。 当我们在家中某个地方时，围绕此术语的响应式设计总是有很多令人兴奋的地方，但是有时对它的含义有很多不同的定义。 因此，归根结底，自适应布局是一种基于Web的布局，它使用灵活的布局-基本上是按百分比或比例定义的布局，而不是硬的，不灵活的像素，然后它们在媒体中包含图像它们本身很灵活，可以在那些灵活的网格中工作。

Then, finally, the third ingredient is media queries, which are basically like a little bit of pixie dust from CSS3 that allows us to articulate when and how those layouts need to change and adapt based on different conditions — and more commonly, those are based on the size of the viewport. You could basically have these layouts that are re-presenting information or changing their hierarchy or effectively responding to the changing shape of browser window or device’s display. Basically, at the end of the day, it’s about assuming that there’s no perfect view of your design — that we can create these layouts that don’t have an ideal width and height; that no matter how small or how wide your screen happens to be, we can create these really beautiful, device-agnostic layouts for the web.

然后，最后，第三个因素是媒体查询 ，基本上就像CSS3的一点点小问题 ，它使我们能够清楚地说明何时以及如何根据不同的条件更改和调整这些布局，而且更常见的是，这些是基于视口的大小。 您基本上可以使这些布局重新呈现信息或更改其层次结构，或者有效地响应浏览器窗口或设备的显示形状的变化。 基本上，归根结底，是假设您的设计没有完美的视图–我们可以创建没有理想宽度和高度的布局。 无论您的屏幕有多小或多宽，我们都可以为网络创建这些非常漂亮，与设备无关的布局。

Tim: 蒂姆：

Excellent, excellent summary. Speaking of which, I’m wondering when you were first thinking about this concept, how did this idea just get into your head? Do you want to talk about the origin story for you in responsive design?

优秀，优秀的总结。 说到其中，我想知道当您第一次考虑这个概念时，这个想法是如何进入您的脑海的？ 您想在自适应设计中为您谈论起源故事吗？

Ethan [3:46]: 伊森[3:46] ：

Yeah, I can give it a shot. I mean, if we’re talking about versions of things — and I’m in perpetual beta — I think the idea of responsive design was a really long time coming. There was a single aha moment, at the end, when I was working on this talk — this first talk where I coined the term. But I’d been a huge fan of thinking about the web as a completely flexible design medium pretty much since I started. This was back in the late ’90s, early 2000s. A big inspiration on my thoughts about web design was this article called A Dao of Web Design, which was written by a man named John Allsopp all the way back in 2000.

是的，我可以试一试。 我的意思是，如果我们谈论的是事物的版本，并且我处于永久测试版中，那么我认为响应式设计的想法将持续很长时间。 最后，当我在进行此演讲时，只有一个aha时刻-这是我创造该词的第一个演讲。 但是自从我开始工作以来，我一直非常热衷于将网络视为一种完全灵活的设计媒介。 这可以追溯到90年代后期，即2000年代初。 这篇名为《网页设计的道》的文章启发了我有关网页设计的一大灵感，该文章由约翰·奥索普(John Allsopp)于2000年撰写。

And I speak at a lot of conferences, and I work with a lot of companies, and when I ask folks if they’ve read this article, not a lot of hands go up, because it’s more than three weeks old on the web (that’s like ancient history)! [Chuckles] I still think it’s actually one of the more like prescient and I think more relevant pieces about the web as a design medium — even today — because John’s basically talking about how our early ways of thinking about the web were basically treating it like a piece of paper. In Photoshop or Illustrator, we’d create a canvas, we’d create a document that had a fixed width and height, and then we’d try to translate that width and height onto the screen, which is completely flexible.

我在很多会议上发言，并且我与许多公司合作，当我问人们是否读过这篇文章时，举手并不多，因为它在网络上已经存在了三个多星期(那就像古老的历史！ [笑声]我仍然认为它实际上是更具有先见之明的一种，而且我认为关于Web作为设计媒介的更多相关文章-即使在今天-也是如此，因为John基本上是在谈论我们早期的网络思考方式基本上是如何对待它的。一张纸。 在Photoshop或Illustrator中，我们将创建一个画布，创建一个具有固定宽度和高度的文档，然后尝试将该宽度和高度转换为完全灵活的屏幕。

I mean, the screen itself has constraints, but the viewport — the actual browser window — we can’t predict its size or shape. So he was basically arguing that we should really try to treat the web as a completely unique medium, and design more flexibly for it. This being back in 2000, when 4.0 browsers were the new hotness that we could look at. We didn’t have a lot of tools to actually capitalize on what John was talking about. So I would do a lot of flexible layouts for my own projects, for my blog (back when I had updated mine), for side projects. But for most of my professional work, it was really very fixed-width layouts.

我的意思是，屏幕本身有约束，但是视口(实际的浏览器窗口)无法预测其大小或形状。 因此，他基本上是在争论我们应该真正尝试将网络视为完全独特的媒体，并为其进行更灵活的设计。 可以追溯到2000年，当时4.0浏览器是我们可以看到的新热点。 我们没有很多工具可以真正利用约翰所说的内容。 因此，我将为自己的项目，博客(在更新我的版本时)以及副项目做很多灵活的布局。 但是对于我的大部分专业工作来说，它实际上是非常固定宽度的布局。

Mobile then came along and broke everything. In the early days of mobile — at least in more developed markets — we were repeating the same process. It’s like we’re going to have the desktop website because we understood the desktop web, and then we were going to have the stand alone m.dot site, this mobile website. I started getting more requests in client contracts for building an iPhone website, which was kind of weird. That just started getting me thinking, well, what’s the next website that we’re going to have to build? At some point, some other new cool thing is going to emerge on the mobile web. This doesn’t scale especially well.

然后，Mobile出现并破坏了一切。 在移动技术的初期-至少在较发达的市场中-我们是在重复相同的过程。 就像我们要拥有桌面网站一样，因为我们了解桌面网站，然后我们要拥有独立的m.dot网站，即移动网站。 我开始在客户合同中收到更多关于建立iPhone网站的请求，这很奇怪。 刚开始，我就开始思考，我们要建立的下一个网站是什么？ 在某个时候，其他一些新奇的事物将在移动网络上出现。 这并不是特别好。

That’s where I started playing around with fluid grids for a couple of client projects, and media query support was finally getting to a point — both on desktop and the mobile — where we could actually have our cake and eat it too. We could design these flexible layouts but still introduce a slight measure of control with media queries to articulate how to make these flexible layouts look beautiful on small and large screens.

那是我开始为几个客户项目处理流动网格的地方，而媒体查询支持终于达到了一个点，无论是在台式机还是在移动设备上，我们实际上都可以吃蛋糕。 我们可以设计这些灵活的布局，但是仍然可以通过媒体查询引入一些控制措施，以阐明如何使这些灵活的布局在大小屏幕上看起来都漂亮。

Tim: 蒂姆：

When you were looking at this, were you coming at this more from a design perspective, more from an engineering perspective? What background were you bringing to this?

当您查看此内容时，是从设计角度还是从工程角度？ 您带来了什么背景？

Ethan: 伊森：

Oh man, I’m still trying to figure that out! [Laughs] I think it’s both, really. I mean, I’ve never really fit perfectly on either side of that equation. Depending on the role of a project, I’ll be either a front-end development lead or taking point on design. The particular project that I was hashing this stuff out on I was a design lead on this completely flexible grid-based layout, and then a little bit later on I was working on that iPhone-only website as a front-end developer, and realizing that these two things don’t necessarily need to be completely opposed. I think we can again think about one layout, and think more flexibly about it from an aesthetic standpoint, but also conserving our effort a little bit, not necessarily forking our experiences every time there’s a cool new device that hits the marketplace.

噢，老兄，我仍在设法弄清楚！ [笑]我认为两者都是。 我的意思是，我从未真正完全适合该方程式的任何一方。 根据项目的角色，我将担任前端开发主管或负责设计。 我在上面散布这些东西的特定项目是这种完全灵活的基于网格的布局的设计负责人，然后不久，我作为前端开发人员在那个仅iPhone的网站上工作，并意识到这两件事并不一定需要完全对立。 我认为我们可以再次考虑一种布局，并从美学的角度更灵活地考虑它，但同时也可以节省一些精力，而不必每次在市场上有一款很酷的新设备出现时都能汲取我们的经验。

David: 大卫：

It’s interesting. Not everybody can really come at a project from both a design and an engineering perspective. And I think there was confusion early on about do you call yourself a web designer, do you call yourself a web developer, is there even a difference? And of course now, that’s much, much more clearly broken down into two distinct professions, but it’s very important to be able I think for you to bridge the gap between those.

这真有趣。 从设计和工程的角度来看，并不是每个人都能真正参加一个项目。 而且我认为，关于您是否称自己为Web设计师，是否称自己为Web开发人员，还有一些困惑吗？ 当然，现在，这要清晰得多，可以分解为两个不同的专业，但是我认为能够弥合两者之间的差距非常重要。

Ethan: 伊森：

I think that’s true for anybody who primarily identifies as a front-end developer or front-end designer. I think that especially in any team environment, we’re getting to a point now where the number of devices and screens we’re designing for — I think those two disciplines really need to be collaborating more closely. When I’ve been a front-end lead, the best designers that I’ve worked with could maybe toss out some rough prototyping ideas in HTML and CSS. It may not necessarily be production-ready, but they could at least really effectively more clearly communicate their ideas to me.

我认为对于主要标识为前端开发人员或前端设计师的任何人都是如此。 我认为，特别是在任何团队环境中，我们现在到了要设计的设备和屏幕数量的地步，我认为这两个领域确实需要更紧密地协作。 当我担任前端主管时，与我合作过的最好的设计师可能会抛出一些关于HTML和CSS的粗略原型创意。 它可能不一定要投入生产，但他们至少可以真正有效地更清楚地向我传达他们的想法。

And you know, on the other side of the spectrum from a front-end design lead, I’m working with the developer. If they understand how to make recommendations about how the typography might need to change across different breakpoints, or maybe make some recommendations about how the layout might need to shift, I think that’s pretty powerful stuff.

而且，从前端设计主管的角度来看，我正在与开发人员合作。 如果他们了解如何就可能需要在不同断点之间更改字体的方式提出建议，或者就如何可能需要更改布局提出一些建议，那么我认为这是非常有用的东西。

Tim [8:23]: 蒂姆[8:23] ：

So, Ethan, one of the things that I think really contributed to the success of the responsive design movement is the ability of the industry to convince business leaders that responsive design was worth it. Do you want to speak a little bit to how that process folded out, and what, if anything, you learned throughout doing that?

因此，Ethan，我认为为响应式设计运动的成功做出真正贡献的一件事是，业界能够说服业务领导者响应式设计值得。 您想谈谈该过程如何展开吗，整个过程中学到了什么？

Ethan: 伊森：

Yeah, that’s a great question, Tim. I think for me, I can’t take credit for that transition. I think there were a lot of people contributing to that discussion — and still are, frankly. I think there was a lot of excitement about responsive design when I first published that article on A List Apart, and I’m still overwhelmed by that, frankly. I met a publishing deadline, and I thought that was going to be the end of it. And folks just really ran with the idea. They started redesigning their websites, making them more responsive. I started seeing agencies going responsive, and then bringing the solution to their clients, and eventually I think that just trickled up the ladder.

是的，这是一个很好的问题，蒂姆。 我认为对于我来说，我不能为这种过渡而功劳。 我认为有很多人对此讨论做出了贡献-坦率地说，现在仍然如此。 我认为当我在A List Apart上首次发表该文章时，响应式设计引起了很多兴奋，坦率地说，我仍然对此感到不知所措。 我遇到了发布截止日期，我认为那将是最后期限。 人们真的很喜欢这个主意。 他们开始重新设计他们的网站，使它们的响应速度更快。 我开始看到代理商变得ReactSwift，然后将解决方案带给他们的客户，最终我认为这只是在增加阶梯。

The same thing happened back in the mid 2000s, when we were really starting to argue for CSS instead of table-driven layouts. You see this discussion happening at the fringes of the community, from independent designers and developers, and then it started getting some mainstream traction. I will say that I was involved with a much larger team of people on the responsive redesign of The Boston Globe back in 2010, 2011. I think at that point we had a client — who was not a small publisher — who was super excited about this idea of going responsive, and how they saw it as a business imperative for them.

同样的事情发生在2000年代中期，那时我们真的开始主张CSS而不是表驱动的布局。 您会看到这种讨论发生在社区的边缘，由独立设计师和开发人员进行，然后开始引起一些主流关注。 我要说的是，早在2010年，2011年，我就与更大的团队一起参与了《波士顿环球报》的快速重新设计。我认为那时我们有一位客户-他不是一个小出版商-对此感到非常兴奋这种响应Swift的想法，以及他们如何将其视为对他们而言至关重要的业务。

When we took that live, they started talking about all the business benefits that they saw from that, and publishing those metrics and that data. And that made a lot of people in the media and publishing space sit up and take notice and that was really exciting to see. I think that that’s a pattern that’s been repeated throughout the industry: when a company goes responsive and starts talking about all the lift they saw on mobile versus their old desktop-only website, or whatever, that makes other people in that space sit up and take notice and get more excited about going responsive.

当我们进行现场直播时，他们开始谈论从中看到的所有业务收益，并发布这些指标和数据。 这使媒体和出版领域的很多人坐起来并引起注意，这真是令人兴奋。 我认为这是在整个行业中都反复出现的一种模式：当一家公司做出响应并开始谈论他们在移动设备上看到的所有提升与旧的仅台式机网站带来的提升相比，或者其他方面，这会使该领域的其他人坐起来，引起注意，并对响应变得更加兴奋。

Tim: 蒂姆：

Responsive puts a lot more responsibility on the designers as well, and also on the people developing the content. And I know one of the things that people get a little bit confused about with responsive is the idea that you’re presenting exactly the same information to different audiences. Can you talk a little bit about that?

响应式也给设计人员以及开发内容的人员带来了更多责任。 而且我知道，人们对响应式React有些困惑，其中之一就是您要向不同的受众群体提供完全相同的信息。 你能谈谈吗？

Ethan: 伊森：

Sure. For me at least, I mean, responsive design is like — at the end of the day it’s a cheap way to design for as many devices and browsers as possible. It’s a flexible layout. It doesn’t have an ideal shape, so by default that layout is going to expand and contract across all sorts of different screen sizes. That’s the foundation. I think, anything on top of that you can then look for those opportunities to really enhance the experience a little bit more. I mentioned my colleague and friend earlier, Karen McGrane, and she’s been talking a lot about this idea of adaptive content, where looking for opportunities based on business or strategic needs to tailor the presentation of information based on certain contextual clues.

当然。 至少对我来说，响应式设计就像-归根结底，这是一种为尽可能多的设备和浏览器进行设计的廉价方法。 这是一种灵活的布局。 它没有理想的形状，因此默认情况下，布局会在各种不同的屏幕尺寸上扩展和缩小。 这就是基础。 我认为，除此之外，您还可以寻找那些机会来真正增强体验。 我之前提到过我的同事和朋友Karen McGrane，她一直在谈论这种自适应内容的想法，在这种情况下，根据业务或战略需求寻找机会，以根据某些上下文线索来定制信息的呈现方式。

When she says context, she’s not necessarily talking about the kind of device that they are using. It’s more about, how we can adapt this information based on what we actually know about this person — independent of the device. I think that that’s where things get really powerful. If you can have that flexible responsive foundation, but then tailor the information in a way that’s meaningful to the user, regardless of what device they happen to have closest at hand, I think that’s where things get really powerful. When we start thinking that different devices need different information, that’s where things get a little bit fuzzy.

当她说上下文时，她并不一定要谈论他们使用的设备类型。 更重要的是，我们如何根据我们实际了解的有关此人的信息来适应此信息，而与设备无关。 我认为那才是真正强大的地方。 如果您可以拥有灵活的响应基础，然后以对用户有意义的方式定制信息，而不管他们碰巧拥有哪种设备，我认为这才是真正强大的地方。 当我们开始认为不同的设备需要不同的信息时，事情就会变得有些模糊。

Tim: 蒂姆：

I wanted to talk about that real quickly, because one of the things that in my work I find most difficult to translate to both stakeholders and designers is the idea that you really shouldn’t be trying to present different content based on just the width of the screen. Do you want to talk about how maybe you find those contextual clues, or what are the ways you’re really thinking about delivering that tailored information to the user?

我想快速谈一谈现实，因为在我的工作中，我发现最难传达给利益相关者和设计师的一件事是，您真的不应该仅根据广告内容的宽度来尝试呈现不同的内容。屏幕。 您是否想谈一谈您可能如何找到这些上下文线索，或者您在真正考虑向用户提供量身定制的信息的方式是什么？

Ethan [12:08]: 伊森[12:08] ：

Yeah, sure. I mean, I can speak for my own experience that when I’ve been part of those discussions about how we need to maybe rethink our presentation based on the size of the screen, that’s usually an artifact of a very desktop-focused design process, or at least when I’ve encountered it. Having those discussions that, OK, this infographic or this table doesn’t necessarily fit on small screens, so maybe we need to think about how we’re going to adapt it to make it fit on mobile. I think a much more powerful approach is to actually — and it’s harder, in some cases — but you know, adopting a more mobile-focused mindset, and structuring things about really getting things onto the small screen and thinking about the needs of the small screen first, and then enhancing up from there.

当然可以。 我的意思是，我可以代表我自己的经验，当我参与有关如何可能需要根据屏幕大小重新考虑演示文稿的讨论时，通常是非常注重桌面的设计过程的产物，或者至少当我遇到它时。 进行这些讨论后，可以确定此信息图表或表格不一定适合小屏幕显示，因此也许我们需要考虑如何调整它使其适合移动设备。 我认为实际上是一种更强大的方法-在某些情况下更难-但您知道，采用以移动设备为中心的思维方式，并构造有关将内容真正投放到小屏幕并考虑小用户需求的事情屏幕，然后从那里进行增强。

Karen and I have a responsive design podcast, and this is a refrain that we’ve heard from a lot of different companies. Virgin America is maybe my favorite example of this, where they basically said that they never showed their client at Virgin America — the design partner never showed their client at Virgin America a static comp. Basically, from their very first meeting, they had a responsive prototype — in a very early stage, but they had a prototype that everyone could load up on different browsers, on different devices. And there’s something really transformative about that idea.

Karen和我有一个响应式设计播客 ，这是我们从许多不同的公司那里听到的内容。 维珍美国航空也许是我最喜欢的一个例子，他们基本上说他们从未在维珍美国航空展示过自己的客户，而设计合作伙伴也从未在维珍美国航空展示过自己的客户。 基本上，从他们的第一次会议开始，他们就拥有了一个响应式原型-在很早的阶段，但是他们有了一个原型，每个人都可以在不同的浏览器，不同的设备上加载它们。 这个想法确实有一些变革。

If you can actually get a design quite literally in somebody’s hand, I think that eliminates a lot of ambiguity about how we’re going to start thinking about mobile, because it really puts it directly in their hand. Whenever possible, I think moving into prototypes has been a really helpful way to have that discussion as early as possible, but it’s a big challenge — especially since so many of our design tools live on the desktop.

如果您实际上可以真正从某人手中获得设计，我认为这消除了我们开始考虑移动时的许多歧义，因为它确实将设计直接交给了他们。 只要有可能，我认为进入原型对于尽早进行讨论是一个非常有用的方法，但这是一个巨大的挑战-尤其是因为我们的许多设计工具都位于桌面上。

David: 大卫：

I wanted to ask you actually about that, because the conversation between designers and developers about how to build these things becomes much more complex when you’re talking about responsive situation. How do you recommend designers and developers work together on these things?

我实际上想问你一个问题，因为当您谈论响应式情况时，设计师和开发人员之间关于如何构建这些东西的对话变得更加复杂。 您如何建议设计师和开发人员在这些事情上一起工作？

Ethan: 伊森：

That’s a great question, and I think that — at least in my experience — I think a large part of the solution really comes down to constant, frequent communication. I think the old, very waterfall-driven approach to design and development, is really like, OK, we’re going to finish the comps. We’re going to get them signed off, and we’re going to hand them off to the front-end developers — which is quite literally what happened for us on The Boston Globe redesigned. Basically, The Boston Globe signed off on this beautiful array of comps that have been designed in InDesign. Then myself and Filament Group — who’s an interaction design firm based here in Boston — we were brought on board to make this thing responsive.

这是一个很大的问题，至少在我的经验中，我认为我认为解决方案的很大一部分实际上取决于持续不断的沟通。 我认为，非常古老的瀑布驱动型设计和开发方法确实像是， 好了，我们将完成这些工作。 我们将批准它们，并将它们交给前端开发人员 -从字面上看，这是我们在重新设计的《波士顿环球报》上所做的事情。 基本上，《波士顿环球报》在InDesign设计的一系列精美的伴奏上签字。 然后，我本人和Filament Group (一家总部位于波士顿的互动设计公司)被带到董事会，以使这件事变得具有响应性。

One of the first meetings we had with The Globe at that point was like, The design isn’t finished at this point. These comps are a catalog of assumptions, and they are very good, well-researched and beautifully executed assumptions, but comps can’t tell you what, first of all, the layout is going to do. There are pictures of a website, but what happens if a browser doesn’t have support for web fonts, or what if there’s a network error and some critical asset doesn’t download, or what if the browser doesn’t understand JavaScript, or the latency is too high so it doesn’t execute — or something like that. We basically need to continue the design process in the prototyping phase, and vet these assumptions in actual live web design, in an actual web-ready document.

当时我们与The Globe进行的第一次会面是， 设计尚未完成。 这些组件是假设的目录，它们是非常好的，经过精心研究且执行得很好的假设，但组件无法告诉您布局首先要做什么。 有一个网站的图片，但是如果浏览器不支持Web字体，或者出现网络错误并且某些重要资产没有下载，或者如果浏览器不了解JavaScript，该怎么办？延迟太高，因此无法执行-或类似的东西。 我们基本上需要在原型设计阶段继续进行设计过程，并在实际的可用于Web的文档中审查实际在线Web设计中的这些假设。

They were super receptive to that, which was surprising, and kind of exciting. [Chuckles] They were fantastically supportive about that, but that was also really helpful for getting a model in place where the design partners who headed up the design up until that point were actually collaborating with us. So we would get things in the responsive prototype and see where things maybe didn’t necessary work well in a flexible context. And then they could sort of decamp, and maybe take a part of that particular piece of the design, and work just on that particular pattern, and then come back and make some recommendations about how it could potentially adapt, and then we’d fold that back into the prototype.

他们对此非常满意，这令人惊讶，并且令人兴奋。 [Chuckles]他们对此提供了奇妙的支持，但是这对于建立一个模型是很有帮助的，直到那个时候负责设计工作的设计合作伙伴实际上正在与我们合作。 因此，我们将把事情放到响应式原型中，看看在灵活的情况下哪些地方可能不需要很好地工作。 然后他们可以进行一些扎实的工作，也许参与了该设计的特定部分，并仅以该特定模式进行工作，然后回过头来提出一些建议，以期它可能如何适应，然后我们将其折叠再回到原型。

I think, generally speaking, this is a refrain I’ve heard from a lot of organizations — that integrated design and development efforts always result in a much, much stronger product. Even the BBC (who we had on the podcast last year talking about their global news redesign), they basically said the same thing — that thinking about UX and design as a separate practice from engineering and development, it actually slows down your velocity. You should be able to take design and learn from it once it’s actually being implemented, seeing what works and what doesn’t and then folding it back into the design process. Bringing those two camps closer together I think is absolutely critical, but that’s also a big shift for a lot of companies.

我认为，总的来说，这是我从许多组织那里听到的克制-集成的设计和开发工作始终会产生非常强大的产品。 即使是BBC(去年我们在播客上谈论他们的全球新闻重新设计的英国广播公司)，他们基本上也说了同样的话-将UX和设计视为与工程和开发分开的实践，实际上减慢了您的速度。 一旦真正实现设计，您就应该能够接受设计并从中学到东西，看看有什么用，什么没用，然后将其放回到设计过程中。 我认为将这两个阵营拉近一点是绝对关键的，但是对于许多公司来说，这也是一个很大的转变。

Tim [16:28]: 蒂姆[16:28] ：

Speaking about big shift for a lot of companies, in your mind, do you see the push for responsive design as something that is over, or no longer needed to really fight for, like it’s just an accepted practice now?

在您看来，谈到许多公司的重大转变时，您是否认为响应式设计的推动已经结束，或者不再需要真正为之奋斗，就像现在只是一种公认​​的做法？

Ethan: 伊森：

O, well — if it is, I’m still hearing a lot of questions from a lot of companies about whether or not it’s right approach for them. So at least in my tiny little purview, there’s still a lot of questions about it.

哦，好吧，如果是的话，我仍然在听很多公司的问题，这些问题是否适合他们。 因此，至少在我的小范围内，仍然存在很多问题。

I will say that at least it’s something that’s being considered more often from the outside, on most projects. So even if it’s not necessarily like seen as the default approach, or maybe seen as question-free, it’s not something that we have to justify from the outset. There’s an ample amount of data when I’m talking to a large media company. They can look at Disney.com, for example, or Virgin America, and see the work that they’ve done, and then they can start having a conversation about whether or not it’s the right one for them.

我要说的是，至少在大多数项目中，至少从外部更经常考虑这一点。 因此，即使不一定将其视为默认方法，也可能将其视为毫无问题，但这并不是我们必须从一开始就证明的理由。 当我与大型媒体公司交谈时，有大量数据。 他们可以查看例如Disney.com或Virgin America，并查看他们已经完成的工作，然后可以开始讨论是否适合他们。

David: 大卫：

One of the things that I’ve noticed about the way that you’ve worked, you came up with this — you recognized the need for it — and the community really seems to have been a very important part about getting this spread out to people. I’m curious about how you became engaged in the community, and how you started publishing your information.

我注意到您的工作方式之一，便想到了这一点–您意识到了它的必要性–社区似乎确实是将其传播给人们的非常重要的一部分。 我很好奇您如何参与社区活动以及如何开始发布信息。

Ethan: 伊森：

That’s a great question. One of the first things I try to tell anyone is like I don’t feel like I own this discussion anymore than anybody else who’s contributing to it right now. I have an RWD Twitter account, where I publish links to things that I’ve written, or to our podcast. But it’s also I think — for me, at least, as somebody who’s watching responsive design develop and change over time — I’m trying to promote as many different voices as possible.

这是个好问题。 我试图告诉任何人的第一件事就是，我觉得自己比现在正在为此做出贡献的其他任何人都不再拥有这个讨论。 我有一个RWD Twitter帐户 ，我可以在其中发布指向我所写内容或播客的链接。 但这也是我的想法-至少对于我来说，作为一个正在观察响应式设计的人，随着时间的推移，它会不断发展和变化-我正在尝试宣传尽可能多的不同声音。

I would say Twitter is maybe the primary way that I figure out new layout techniques, new design considerations, new questions and criticisms that are coming up around responsive design. And then I try to make sure that as many folks are aware of those other discussions as possible. That’s important for me, because I really feel like I’m a working designer and developer who’s learning about responsive design along with everyone else. I really like sharing that platform with as many people as possible.

我想说，Twitter可能是我找出响应式设计中出现的新布局技术，新设计注意事项，新问题和批评的主要方式。 然后，我尝试确保尽可能多的人意识到其他讨论。 这对我很重要，因为我真的感觉自己是一个正在工作的设计师和开发人员，正在与其他所有人一起学习响应式设计。 我真的很喜欢与尽可能多的人共享该平台。

David: 大卫：

And I noticed you followed up your original book with another book, on patterns and principles, which I haven’t read yet. But I’m curious about why you felt the need to do a follow-up book?

我注意到您在第一本书之后又读了一本关于模式和原理的书，我还没有读过。 但是我很好奇您为什么觉得有必要编写后续书籍？

Ethan: 伊森：

Yeah, I’m still trying to figure that out! [Laughter] Never write a book, kids: it’s terrible. It’s a wonderful, horrible experience.

是的，我仍在设法弄清楚！ [笑声] ，孩子们，不要写书：太可怕了。 这是一次美妙而可怕的经历。

No, I mean, working on both of those books was actually a really rewarding experience, but I think any writing project is really difficult for me — especially in the middle of it. I like to say that a writing project is the best way to get as much self doubt as possible over the longest period of time possible, and that’s definitely true for those two books.

不，我的意思是，实际上这两本书都是很有意义的经历，但是我认为任何写作项目对我来说都非常困难，尤其是在写作过程中。 我想说写作项目是在尽可能长的时间内获得尽可能多的自我怀疑的最佳方法，对于这两本书来说，确实如此。

But I’m really proud of them. The second one that you asked about was about patterns — little reusable parts of design. And the book was really driven by the fact that most of the questions that I get either on Twitter or through my website aren’t really about, OK, how do we build responsive page layouts anymore?

但是我真的为他们感到骄傲。 您询问的第二个问题是关于模式-设计中很少可重复使用的部分。 本书的真正推动力是我在Twitter或通过我的网站上遇到的大多数问题都不是真的， 好吧，我们如何再构建响应式页面布局？

The top-level grid thing I think a lot of folks are pretty comfortable with. But questions about, How do I manage fixed-width display advertising in a responsive design, or other kinds of third party content? Or What are some different approaches for managing response navigation systems? It’s really like moved down a level, especially as we’ve started embracing more talk about pattern libraries, or style guides (or whatever your team happens to call them), and really looking at these as small, responsive layout systems themselves that have their own breakpoints and their own needs for change.

我认为很多人都对顶层网格感到满意。 但是有关以下问题： 如何在响应式设计或其他类型的第三方内容中管理固定宽度的展示广告？ 或有什么不同的方法来管理响应导航系统？ 确实就像下了一层台阶，尤其是当我们开始更多地讨论模式库或样式指南(或您的团队碰巧使用的任何东西)，并真正将它们视为具有响应能力的小型，响应式布局系统时，自己的断点和自己的变更需求。

So, that’s really where the second book came from. It’s structured in a way to look at some of those specific design challenges, but also talk about why they may or may not be successful for certain kinds of context of use, or why that team may have chosen that approach.

所以，那才是第二本书的来源。 它以一种结构的方式来看待那些特定的设计挑战，但同时也讨论了为什么在某些特定的使用环境下它们可能成功或不成功，或者该团队为什么选择了这种方法。

So, rather than thinking about it as a copy-and-paste pattern book, it’s really trying to look at the underlying design principles that made that team decide whether or not that was the right approach for them. Because I think the principles thing has become such a bigger part of my practice lately. It’s like, we can make pretty much anything fit in a responsive canvas, but it’s having the tools and the principles in place to know why something is a good solution, or to identify what are the tradeoffs to this particular approach.

因此，与其将其视为一本复制粘贴的模式书，不如将其视为旨在使团队确定这是否适合他们的基本设计原则。 因为我认为原则性事最近已成为我实践的重要组成部分。 就像，我们可以使几乎所有内容都适合于响应式画布，但是它具有适当的工具和原理，可以知道为什么某物是一个好的解决方案，或者确定对该特定方法的权衡。

Tim [20:30]: 蒂姆[20:30] ：

So, speaking of problem solving for the web, you’ve invented responsive design and solved a host of problems that exist around that medium, as well as your focus on content. Is there another problem that you have your eyes on solving? [Laughter] You know — inventing a giant solution that takes over the globe.

因此，谈到解决网络问题，您已经发明了响应式设计并解决了该媒体周围存在的许多问题以及对内容的关注。 您还有其他问题要解决吗？ [笑声]您知道-发明了一种覆盖全球的巨大解决方案。

Ethan: 伊森：

Right, right, yeah. I don’t know, I feel like responsive design is just something I apologize for! [Laughs] Sorry folks, this stuff was easy before: we designed our 1024 websites, and could go home at the end of the day. But I think the biggest thing — both from a design and from an engineering standpoint that I’m really excited about — is this idea of element queries (or container queries). I feel like that’s the next … I would love to see some traction on that — from either the CSS Working Group, or from a couple of browser vendors about tackling that problem.

对对对 我不知道，我觉得响应式设计只是我为此致歉的！ [笑]伙计们，对不起，以前很简单：我们设计了1024个网站，最终可能会回家。 但我认为，无论是从设计还是从工程设计的角度来看，我最激动的是，最大的问题就是元素查询 (或容器查询)的概念。 我觉得这是下一个……我很乐意看到一些解决方案-来自CSS工作组，或来自一些浏览器供应商的解决方案。

I fully admit it’s a big problem, but as my work has gotten so much more modular and looking at little tiny reusable pieces of design that could live potentially anywhere in a layout at different breakpoints, something like that would be an amazing tool. So rather than building all these rats' nests of media queries that deal with all these different layout condition cases that I have to plan for responsively, if I could just have something that’s like, OK, given the width of this container, I want to apply this design rules to this one particular module, that would be huge, and I think it would probably replace a good chunk of the media queries that I write today.

我完全承认这是一个大问题，但是随着我的工作变得更加模块化，并查看了一些微小的可重用设计作品，这些作品可能存在于不同断点的布局中的任何位置，这将是一个了不起的工具。 因此，与其建立所有这些需要解决的布局问题的媒体查询嵌套，不如我可以做出一些类似的事情，好吧，考虑到此容器的宽度，我想将设计规则应用于这个特定的模块，这将是巨大的，我认为它可能会替代我今天编写的大部分媒体查询。

David: 大卫：

Interesting. It’s constantly evolving, because once that’s around, maybe you’ll can find something else, and new media that we need to support, and it will just become another more complex problem.

有趣。 它在不断发展，因为一旦出现，您也许会找到其他东西，以及我们需要支持的新媒体，这将成为另一个更加复杂的问题。

Ethan: 伊森：

Yeah, no kidding. This is the best and worst thing about this job, right? The web never stops changing!

是的，不要开玩笑。 这是这份工作的最好和最糟糕的事情，对吧？ 网络永远不会停止改变！

David: 大卫：

I’m going to consider it the best.

我将认为这是最好的。

Ethan: 伊森：

Yeah.

是的

David: 大卫：

So, while the web is continuing to change, how can our listeners find out more about you and what you’ve been writing about.

因此，在网络不断变化的同时，我们的听众如何才能找到有关您以及您所写内容的更多信息。

Ethan: 伊森：

Thanks for asking. My name is Ethan Marcotte. You can find me on my website, ethanmarcotte.com which is woefully out of date, but hopefully getting changed soon. Otherwise, Twitter is probably the best way to contact me — @beep on Twitter, or @RWD for responsive web design — although I keep thinking of rear-wheel drive whenever I see that acronym. Those are the best places to find me.

感谢您的询问。 我的名字叫Ethan Marcotte。 您可以在我的网站ethanmarcotte.com上找到我，该网站已经过时，但希望很快能有所改变。 否则，Twitter可能是与我联系的最佳方式-Twitter上的@beep或用于响应式网页设计的@RWD-尽管每当看到该缩写时，我都会一直在考虑后轮驱动 。 那些是找到我的最佳地方。

Tim: 蒂姆：

Beep is the best Twitter handle ever.

哔声是有史以来最好的Twitter句柄。

[Laughter]

[笑声]

Tim: 蒂姆：

Also, out of all the people who post GIFs on Twitter, Ethan, I think you have the trophy for all time best GIF user of Twitter — in the history of Twitter.

另外，在所有在Twitter上发布GIF的人中，伊桑(Ethan)，我认为您拥有Twitter历史上最好的GIF用户的奖杯。

Ethan: 伊森：

[Laughs] You are both very kind. I stand on the shoulder of GIF giants. Beep is a place where I have fun, and then RWD is a place where I talk about what’s next with responsive.

[笑]你们都很友善。 我站在GIF巨人的肩膀上。 Beep是一个让我乐在其中的地方，然后RWD是一个我谈论响应式未来的地方。

Tim: 蒂姆：

Awesome. It’s been really fun chatting with you today. Thank you so much for joining us and sharing all your wisdom with our listeners.

太棒了 今天和您聊天真是太好了。 非常感谢您加入我们并与我们的听众分享您的所有智慧。

Ethan: 伊森：

It has been a real honor. Thank you so much to both of you for having me.

这真是一种荣幸。 非常感谢你们俩拥有我。

[Musical interlude]

[音乐插曲]

Tim: 蒂姆：

It’s not every day you get to have someone on the show who invented a part of our careers that we use every single day.

并非每天都有人在剧本上发明我们每天都使用的职业生涯的一部分。

David: 大卫：

Something so elemental to the work that we’re all doing constantly.

对工作如此重要的东西，我们都在不断地做。

Tim: 蒂姆：

Yeah — he’s so humble about it, too.

是的-他对此也很谦虚。

David: 大卫：

It sounds like it struck him because it was something he needed in his own work, and he recognized that it was not only something he was going to need, but it was something that the rest of the web is going to benefit from as well. We can just be so grateful that he was willing to share that insight right from the very start.

听起来这让他感到震惊，因为这是他自己的工作中需要的东西，并且他意识到这不仅是他将需要的东西，而且网络的其余部分也将从中受益。 我们非常感激，他愿意从一开始就分享这种见解。

Tim: 蒂姆：

It really speaks to the strength of the community, and this industry. Because without that, you can’t really say that responsive design really would have taken off. It’s a genius concept, and it solves so many problems. But you really need a large voice to get behind this idea and run with it.

这确实说明了社区和这个行业的实力。 因为没有那个，您不能真正说出响应式设计真的会成功。 这是一个天才的概念，它解决了很多问题。 但是您真的需要很大的声音来支持这个想法并付诸实践。

That, I think, is the most fascinating thing about the responsive movement to me — that it works to convince the people who essentially had the money and employed the teams to do all of this work. The Boston Globe was convinced to go ahead with responsive design, and it worked. Without those sorts of victories, it might just be another one of those things that we’re like, Yeah, we can do this thing, but we can’t convince everybody else that it’s important.

我认为，这是使我ReactSwift的最令人着迷的事情-它可以说服那些基本上有钱并雇用团队来完成所有工作的人们。 《波士顿环球报》被说服继续进行响应式设计，并且成功了。 没有这些胜利，那可能只是我们想要的另一件事， 是的，我们可以做到这一点，但是我们无法说服所有人，这很重要。

David [24:34]: 大卫[24:34] ：

It has such a broad implications for the work that people are doing. There’s a real financial investment that a company needs to make in shifting that mindset. It’s not even just the money; it’s also getting that philosophy all the way up the chain, up to the executives who have to approve these things and make sure that everything that is going out meets their expectations. If they’re not thinking about why does this needs to be responsive, why do I need to reach this different audience, how is this different audience going to think about this content differently, and why does it need to be presented differently? — that’s an education process that has to happen inside of an organization. It wouldn’t be possible, I don’t think, without a core term like responsive design that people can center around.

It has such a broad implications for the work that people are doing. There's a real financial investment that a company needs to make in shifting that mindset. It's not even just the money; it's also getting that philosophy all the way up the chain, up to the executives who have to approve these things and make sure that everything that is going out meets their expectations. If they're not thinking about why does this needs to be responsive, why do I need to reach this different audience, how is this different audience going to think about this content differently, and why does it need to be presented differently? — that's an education process that has to happen inside of an organization. It wouldn't be possible, I don't think, without a core term like responsive design that people can center around.

Tim: 蒂姆：

Yeah, the name was perfect. And speaking about the philosophy, it really is a hard shift to make, especially if you came into this industry making fixed-width designs. I mean, you’re coming from this medium of you just translate exactly what you’re seeing onto another medium, and it stays that way. That’s really not the case. I mean, essentially, when you make a design in your responsive mental model, the design you make is your best-case scenario: then there are just thousands of use cases around that.

Yeah, the name was perfect. And speaking about the philosophy, it really is a hard shift to make, especially if you came into this industry making fixed-width designs. I mean, you're coming from this medium of you just translate exactly what you're seeing onto another medium, and it stays that way. That's really not the case. I mean, essentially, when you make a design in your responsive mental model, the design you make is your best-case scenario: then there are just thousands of use cases around that.

It’s not necessarily the design; it’s the content that you really need to focus on. And the content somehow moves — which moving stuff is suddenly this thing that you’ve never really had to ever consider before. It really is this difficult mental model to wrap your head around, and I’m still running into things that — I’ll approach a new project, and like, Oh my goodness, I never thought of how this thing could move, or how this small constraint could happen. It really is a tough thing to introduce to a host of people, both technical and non-technical.

It's not necessarily the design ; it's the content that you really need to focus on. And the content somehow moves — which moving stuff is suddenly this thing that you've never really had to ever consider before. It really is this difficult mental model to wrap your head around, and I'm still running into things that — I'll approach a new project, and like, Oh my goodness, I never thought of how this thing could move, or how this small constraint could happen. It really is a tough thing to introduce to a host of people, both technical and non-technical.

David: 大卫：

It’s true. I mean, I’m old enough that I remember when I was developing content to be printed on dead trees. Remember that? [Laughter]

这是真的。 I mean, I'm old enough that I remember when I was developing content to be printed on dead trees. 还记得吗 [笑声]

Tim: 蒂姆：

Oh man.

Oh man.

David: 大卫：

There was this philosophy about article writings. I was doing internal communications. We were producing a newsletter, and that newsletter was printed, on paper, and distributed to thousands of employees all around the world. The concept was, you write your articles as an inverted funnel, so that you put the most important things at the top, and then as you go, you get to the less and less and less important things — and that way, when the person who’s doing the layout, to fit into the box that will be available on the piece of paper that will be distributed, has to edit what you have, they can chop the last couple of paragraphs off and not lose anything valuable. It’s a completely different philosophy, just from a content perspective. Responsive design brings together that concept of the design has to adapt, the content has to adapt, to these different platforms.

There was this philosophy about article writings. I was doing internal communications. We were producing a newsletter, and that newsletter was printed , on paper , and distributed to thousands of employees all around the world. The concept was, you write your articles as an inverted funnel, so that you put the most important things at the top, and then as you go, you get to the less and less and less important things — and that way, when the person who's doing the layout, to fit into the box that will be available on the piece of paper that will be distributed, has to edit what you have, they can chop the last couple of paragraphs off and not lose anything valuable. It's a completely different philosophy, just from a content perspective. Responsive design brings together that concept of the design has to adapt, the content has to adapt, to these different platforms.

Tim: 蒂姆：

I really like how the idea of responsive design gave birth to other movements. I mean, if you think about it, responsive design was this renaissance period of thinking about the user. Right? At first we were just like, Here’s the thing, and here’s how you get to view it. And then suddenly we started to say, Wait, how do you best want to view it, based off of what you have available to you? Then we started thinking about, All right, we got that part: it squishes into whatever you’re trying to view the thing from. But then we started to think about, How does that thing work for you? Does it require too much from the device that you’re trying to view it from?

I really like how the idea of responsive design gave birth to other movements. I mean, if you think about it, responsive design was this renaissance period of thinking about the user. 对？ At first we were just like, Here's the thing, and here's how you get to view it. And then suddenly we started to say, Wait, how do you best want to view it, based off of what you have available to you? Then we started thinking about, All right, we got that part: it squishes into whatever you're trying to view the thing from. But then we started to think about, How does that thing work for you? Does it require too much from the device that you're trying to view it from?

You see this very smooth transition from responsive design into the idea of performant web design, or designing for performance. It’s really interesting to see how that takes shape. I mean, the performance movement is newer still, and there’s still so many things — I mean, we spoke about it in the last episode, in terms of progressive enhancement and JavaScripty stuff. It’s really interesting to see all of this come about, but responsive design being the thing that birthed this whole movement.

You see this very smooth transition from responsive design into the idea of performant web design, or designing for performance. It's really interesting to see how that takes shape. I mean, the performance movement is newer still, and there's still so many things — I mean, we spoke about it in the last episode, in terms of progressive enhancement and JavaScripty stuff. It's really interesting to see all of this come about, but responsive design being the thing that birthed this whole movement.

David [28:20]: 大卫[28:20] ：

I think progressive enhancement and responsive design, they are cousins in this context, because they really have so much to do with each other. And I don’t feel like either one lives exclusively within the purview of the engineers, because they require so much involvement from everybody in the community — everybody who’s doing the development — and, honestly, even from the users. You need that feedback, you need that pattern of instrumentation where you can find out how people have actually interacted with your content — in order to understand whether or not you need a breakpoint here; whether you’ve missed something here; or whether you’re overloading the devices, and so people are not going to that next link, or going to the next page on your web page or whatever, because things are just too heavy for them. All of these things are playing together. And for me, I guess, the concept of responsive design just brought it all together for people, and gave them something to focus on.

I think progressive enhancement and responsive design, they are cousins in this context, because they really have so much to do with each other. And I don't feel like either one lives exclusively within the purview of the engineers, because they require so much involvement from everybody in the community — everybody who's doing the development — and, honestly, even from the users. You need that feedback, you need that pattern of instrumentation where you can find out how people have actually interacted with your content — in order to understand whether or not you need a breakpoint here; whether you've missed something here; or whether you're overloading the devices, and so people are not going to that next link, or going to the next page on your web page or whatever, because things are just too heavy for them. All of these things are playing together. And for me, I guess, the concept of responsive design just brought it all together for people, and gave them something to focus on.

Tim: 蒂姆：

You can even see how things like user experience and accessibility were strengthened by this idea. That’s why I think it’s so important for us to continue to fight for the philosophy of responsive design, because to me, it really is a renaissance or a rebirth of the web and how things are built to fit inside of it. I think that I live in this bubble wherein I work on a product that is already responsive, and I continue to build responsive components. I’m not necessarily waking up everyday and trying to push the line a little bit more forward — to where, when someone says I want a website, the idea that being responsive is inherent, like all parties just accept that’s going to happen.

You can even see how things like user experience and accessibility were strengthened by this idea. That's why I think it's so important for us to continue to fight for the philosophy of responsive design, because to me, it really is a renaissance or a rebirth of the web and how things are built to fit inside of it. I think that I live in this bubble wherein I work on a product that is already responsive, and I continue to build responsive components. I'm not necessarily waking up everyday and trying to push the line a little bit more forward — to where, when someone says I want a website , the idea that being responsive is inherent, like all parties just accept that's going to happen.

I think that’s something that we still need to keep fighting for, because, as we’ve realized, performance and user experience and accessibility — all of those things alongside of responsive design strengthen each other, because it’s suddenly all about the user using the thing, which in turn leads to more consumption of the web. And that’s really good for everybody. I think it’s something good to keep in mind, and excellent to continue to fight for every day in our careers.

I think that's something that we still need to keep fighting for, because, as we've realized, performance and user experience and accessibility — all of those things alongside of responsive design strengthen each other, because it's suddenly all about the user using the thing, which in turn leads to more consumption of the web. And that's really good for everybody. I think it's something good to keep in mind, and excellent to continue to fight for every day in our careers.

David: 大卫：

And it continues to make everything that we’re working on more abstract. I spent a few years working at a company that specialized in taking big, static, browser-based websites and creating mobile-optimized versions of them that were dynamically generated on the fly from the desktop version — which was an amazing business model. But one of the things that working there brought to mind was the philosophy of what is the core essence of what we’re talking about? And ultimately, is it just an API of content that then needs to be funneled into this presentation, versus this presentation for this audience, that audience, and it all gets customized?

And it continues to make everything that we're working on more abstract. I spent a few years working at a company that specialized in taking big, static, browser-based websites and creating mobile-optimized versions of them that were dynamically generated on the fly from the desktop version — which was an amazing business model. But one of the things that working there brought to mind was the philosophy of what is the core essence of what we're talking about? And ultimately, is it just an API of content that then needs to be funneled into this presentation, versus this presentation for this audience, that audience, and it all gets customized?

Now we’re starting to get to the place where we have the tools, and we have the technologies available to us to provide individual users with incredibly customized experiences, based on what tool they are using, how long they’ve been there. We can read all sorts of information about where they’ve been before, and what they’re interested in, and present a bespoke responsive presentation of our content to each user depending on what they need.

Now we're starting to get to the place where we have the tools, and we have the technologies available to us to provide individual users with incredibly customized experiences, based on what tool they are using, how long they've been there. We can read all sorts of information about where they've been before, and what they're interested in, and present a bespoke responsive presentation of our content to each user depending on what they need.

Tim [31:22]: Tim [31:22] :

Yeah, one of the things that Ethan briefly touched on — he and Karen McGrane do a lot of responsive workshops, and one of the things that they always talk about is content strategy, because most of this does really come down to the content. You see a lot of times people who design for a really large screen, or design for the absolutely perfect medium, and then try to cram that medium into all of their use cases.

Yeah, one of the things that Ethan briefly touched on — he and Karen McGrane do a lot of responsive workshops, and one of the things that they always talk about is content strategy, because most of this does really come down to the content. You see a lot of times people who design for a really large screen, or design for the absolutely perfect medium, and then try to cram that medium into all of their use cases.

It does become that reverse funnel system, because suddenly someone says, Oh, we have a much smaller screen, so we have to get rid of some of this stuff at the bottom.

It does become that reverse funnel system, because suddenly someone says, Oh, we have a much smaller screen, so we have to get rid of some of this stuff at the bottom.

Then someone mentions a fold, as if we’re working on newspapers. We need other content to be at the top, and suddenly the focus on the content is dissipated, and it’s suddenly focusing about just cramming what you have into a smaller-sized screen. That then brings up the idea of, Oh, maybe we can just tailor this experience, because a user with a screen that’s smaller, we just want them to be on the go, and that justifies our ability to just get rid of some stuff here. I mean, in my own small pain of existence, my experience with that is usually when I am on a mobile site, like sitting in front of my TV trying to do something trivial like pay a bill most often, right?

Then someone mentions a fold , as if we're working on newspapers. We need other content to be at the top, and suddenly the focus on the content is dissipated, and it's suddenly focusing about just cramming what you have into a smaller-sized screen. That then brings up the idea of, Oh, maybe we can just tailor this experience, because a user with a screen that's smaller, we just want them to be on the go, and that justifies our ability to just get rid of some stuff here. I mean, in my own small pain of existence, my experience with that is usually when I am on a mobile site, like sitting in front of my TV trying to do something trivial like pay a bill most often, right?

I can’t see something that I need, because someone has decided because I’m on a smaller screen, I don’t need to get to that certain part of their application. That’s always something that I think presents this huge challenge, and goes contrary to the idea of responsive design. That being said, I think a good model that I try to bring about when thinking about designing for responsive applications, is to protect the content. Always protect the content. Don’t punish the content for the restriction that the medium provides.

I can't see something that I need, because someone has decided because I'm on a smaller screen, I don't need to get to that certain part of their application. That's always something that I think presents this huge challenge, and goes contrary to the idea of responsive design. That being said, I think a good model that I try to bring about when thinking about designing for responsive applications, is to protect the content. Always protect the content. Don't punish the content for the restriction that the medium provides.

David: 大卫：

That is a really important point, and when it comes to things missing on the mobile platform — I’m speaking to you, YouTube Live. That’s today, but I’ll tell you, one of the things that I noticed about this is it ends up being a very political discussion. People fight for the politics of I need to have this real estate on this web page, and that’s one of the reasons why they think in terms of their web page. My department must be presented in this area on this web page.

That is a really important point, and when it comes to things missing on the mobile platform — I'm speaking to you , YouTube Live. That's today, but I'll tell you, one of the things that I noticed about this is it ends up being a very political discussion. People fight for the politics of I need to have this real estate on this web page, and that's one of the reasons why they think in terms of their web page. My department must be presented in this area on this web page.

Honestly, when my company was doing these conversions of websites, one of the most valuable things that we were able to provide for the tablet platform, and for the mobile platform, was that we bypassed that discussion, and we were able to say, OK, the mobile audience doesn’t need all of these things. They just need this.

Honestly, when my company was doing these conversions of websites, one of the most valuable things that we were able to provide for the tablet platform, and for the mobile platform, was that we bypassed that discussion, and we were able to say, OK, the mobile audience doesn't need all of these things. They just need this.

We were able to put in only the things that a user actually wants to see on the page. Bypassing the politics of that discussion actually helped provide much more optimized experiences — not simply because the experiences were tailored to the device, but also because the experiences were tailored to what the users actually needed and wanted to interact with, not the politics of who has to be represented in what section and for how many pixels of screen real estate.

We were able to put in only the things that a user actually wants to see on the page. Bypassing the politics of that discussion actually helped provide much more optimized experiences — not simply because the experiences were tailored to the device, but also because the experiences were tailored to what the users actually needed and wanted to interact with, not the politics of who has to be represented in what section and for how many pixels of screen real estate.

Those discussions happen, and being aware of them as we start looking at responsive design, it brings that more to the surface. It brings it more to the top of mind. It makes people realize that this is not something that we’re doing for our political motivations in terms of our departments and our policies. This is something that we’re doing for the users and for what the user needs to experience.

Those discussions happen, and being aware of them as we start looking at responsive design, it brings that more to the surface. It brings it more to the top of mind. It makes people realize that this is not something that we're doing for our political motivations in terms of our departments and our policies. This is something that we're doing for the users and for what the user needs to experience.

Tim: 蒂姆：

I think it’s Brad Frost who says that carousels only exist to prevent business stakeholders from killing each other.

I think it's Brad Frost who says that carousels only exist to prevent business stakeholders from killing each other .

David: 大卫：

[Laughing] I like that! I may steal that.

[Laughing] I like that! I may steal that.

Tim: 蒂姆：

Yeah, really good. Cool.

Yeah, really good. 凉。

David: 大卫：

This has been an amazing episode. I’m so glad you reached out to Ethan, and I’m glad that Matt was able to connect us with him.

This has been an amazing episode. I'm so glad you reached out to Ethan, and I'm glad that Matt was able to connect us with him.

Tim: 蒂姆：

Yeah, everything seemed to work out very perfectly.

Yeah, everything seemed to work out very perfectly.

[Musical interlude]

[音乐插曲]

Well, thank you so much for listening, everybody. We always enjoy getting to talk technology with all of you.

好，非常感谢大家的倾听。 我们总是喜欢与大家交谈技术。

David: 大卫：

We would also like to thank SitePoint.com, and our producers, Adam Roberts and Ophelie Lechat, with production help from Ralph Mason. Please feel free to send us your comments on Twitter — @versioningshow — and give us a rating on iTunes. Let us know how we’re doing.

我们还要感谢SitePoint.com以及我们的制作人Adam Roberts和Ophelie Lechat，以及Ralph Mason的制作帮助。 Please feel free to send us your comments on Twitter — @versioningshow — and give us a rating on iTunes . Let us know how we're doing.

Tim: 蒂姆：

We’ll see you next time, and we hope you enjoyed this version.

下次见，我们希望您喜欢这个版本。

翻译自: https://www.sitepoint.com/versioning-show-episode-16-with-ethan-marcotte/

unity ethan