响应式web设计

In this episode of the Versioning Show, David and Tim are joined by Chris Ward, a technical writer, blogger and web developer. They discuss a wider interpretation of responsive web design that includes user context, push notifications, future devices and accessibility. They also discuss mobile first and progressive enhancement, tech journalism, the art of documentation, working with Drupal, PHP (and whether it will ever be cool again), and using Wikipedia to learn how to perform an appendectomy.

在Versioning Show的这一集中，David和Tim以及技术作家，博客作者和Web开发人员Chris Ward参加了会议。 他们讨论了对响应式Web设计的更广泛的解释，包括用户上下文，推送通知，将来的设备和可访问性。 他们还讨论了移动优先和渐进增强，技术新闻学，文档艺术，与Drupal，PHP一起工作(以及是否还会再酷)，以及使用Wikipedia学习如何进行阑尾切除术。

显示笔记 (Show Notes)

• Chris Ward on Twitter: @ChrisChinch

  克里斯·沃德(Chris Ward)在Twitter： @ChrisChinch

• GregariousMammal.com

  GregariousMammal.com

• Jump Start Responsive Web Design, 2nd Edition

  快速入门响应式网页设计，第二版

• Hampton Catlin interview

  汉普顿·卡特林采访

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

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

对话重点 (Conversation Highlights)

I would say [responsive web design is] more relevant and becoming more relevant again. I think some of the problems that it initially set out to solve have maybe, sort of, been fixed, in very large, inverted commons. And actually, it’s going to be useful in the future and in the present for solving other new problems. Like different sorts of device capabilities, not just screen size and things like that. But other capabilities of devices too, and responding to user context and location and time of day and all sorts of things like that.

我会说[响应式网页设计]更相关，并且再次变得更加相关。 我认为它最初着手解决的一些问题可能已经解决了 ，它们是在很大的，倒置的公地中解决的。 实际上，它在将来和现在对于解决其他新问题将很有用。 像不同类型的设备功能一样，不仅仅是屏幕尺寸之类的东西。 但是设备还具有其他功能，可以响应用户上下文，位置和时间以及诸如此类的各种事情。

[Jump Start Responsive Web Design] covers the building blocks of a page and the page elements. It then talks about obvious things like media queries and viewports. We cover text, we cover images, and then media and then kind of a bit at the end about some of the stuff we’d just been talking about, sort of new responsive.

[Jump Start Responsive Web Design]涵盖页面的构建块和页面元素。 然后讨论了诸如媒体查询和视口之类的显而易见的事情。 我们先介绍文字，再介绍图片，然后介绍媒体，然后再讲一些我们刚才谈到的内容，其中包括一些新的响应式内容。

Actually, the kind of applications of screens is quite widespread now. And some of them are more standard than others, so it might just be an Android browser, like Samsung, I think. Their fridges have basically an Android browser in them. That’s going to be used by a lot of people, even if we want to get crazy out there.

实际上，屏幕的应用现在已经很普遍了。 而且其中有些比其他的更加标准，因此我认为它可能只是Android浏览器，例如Samsung。 他们的冰箱基本上都装有Android浏览器。 即使我们想在那里疯狂，这也会被很多人使用。

things like voice interfaces … Just even thinking about how to repurpose your designs and content in as many of these new cases as possible, in my mind, would also be kind of responsive, or the new responsive or adaptive, or whatever you want to call it.

诸如语音接口之类的东西……在我看来，即使考虑如何在尽可能多的新情况下重新调整设计和内容的使用方式，也可能是响应式的，或者是新的响应式的或自适应的，或者您想调用的任何东西它。

There may need to be rethought functionality, because you have less screen real estate. People are using fingers. They don’t have a full proper keyboard, et cetera, et cetera. But it doesn’t necessarily mean they should get a worse experience. Just a more suitable experience, I suppose, would be mobile first.

可能需要重新考虑功能，因为屏幕空间较少。 人们正在使用手指。 他们没有一个完整的适当的键盘， 等等 ， 等等 。 但这并不一定意味着他们应该获得更糟糕的经历。 我想，更适合的体验是移动优先。

With things like iOS and Android, you have the concept of a share extension which enables you to easily share links or files or whatever between other applications in the operating system. And macOS and Windows have that to a certain extent, but often developers don’t bother implementing it. Whereas, on mobile, it’s generally there. So sometimes, actually, you can get a better experience.

使用iOS和Android之类的东西，您就有了共享扩展的概念，它使您可以轻松地在操作系统中的其他应用程序之间共享链接或文件或其他内容。 而macOS和Windows在一定程度上具有这一点，但是开发人员通常不必理会它。 而在移动设备上，通常就在那儿。 因此，实际上有时您可以获得更好的体验。

take advantage of documentation being online. It doesn’t have to just be text. You can add interaction. You can add interactive consoles, videos, CodePen examples, et cetera, et cetera. That stuff helps a lot.

利用在线文档。 它不必只是文本。 您可以添加交互。 您可以添加互动游戏机，视频，CodePen例子， 等等 ， 等等 。 那东西很有帮助。

成绩单 (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 32 of the Versioning podcast.

…，您正在收听Versioning播客的第32集。

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:蒂姆：

So today we’re going to be speaking with Chris Ward, who is a technical writer, blogger, and web developer. And we’re going to be talking with him amongst some things, his latest book, and web development, of course. So let’s go ahead and get this version started.

因此，今天我们将与Chris Ward进行交流，他是技术作家，博客作者和Web开发人员。 当然，我们将与他进行一些交流，包括他的最新著作和网络开发。 因此，让我们开始安装该版本。

---

---

David:大卫：

Hey Chris, good to see you.

嗨，克里斯，见到你很高兴。

Chris:克里斯：

Hey, how are you doing?

嗨，你好吗？

David:大卫：

I’m really pleased you were able to join us on the show today. This is the Versioning Show, and one of the things we like to do is ask our guests a philosophical question to get the ball rolling. And your philosophical question for today is: in your current career, what version are you, and why?

我很高兴您能够今天加入我们的节目。 这是版本显示，我们想做的一件事就是问我们的客人一个哲学问题，以使事情顺利进行。 您今天的哲学问题是：在您目前的职业中，您是哪个版本，为什么？

Chris:克里斯：

You know what? As someone who is easily bored and constantly trying new things, I think I’m going to be a rolling release.

你知道吗？ 作为一个容易无聊并且不断尝试新事物的人，我认为我将是一个滚动发布。

David:大卫：

[Laughs] Very nice, very nice. You do say you’ve been trying a lot of different things. How do you introduce yourself? How do you summarize your career for people when you’re letting people know who you are and what you do?

[笑]很好，很好。 您确实说过您尝试了许多不同的事情。 你如何自我介绍？ 当您让别人知道您是谁和做什么时，您如何总结您的工作经历？

Chris:克里斯：

Nowadays I say I do technical writing and tech journalism, and there’s a little bit of tech blogging in the middle, but I think there’s enough crossover between all three — like concentric circles meeting in the middle there somewhere. But depending on the audience, if I’m saying that to developers, I will mention that I used to be a developer, full time. If I’m not in an audience of developers, then maybe I won’t mention that.

如今，我说我从事技术写作和科技新闻工作，中间有些技术博客，但是我认为这三者之间有足够的交叉点，例如同心圆在某个地方的中间相遇。 但是根据听众的不同，如果我对开发人员说的话，我会提到我曾经是一名全职的开发人员。 如果我不在开发人员群体中，那么也许我不会提及。

David:大卫：

What kind of development were you doing when you were doing development?

在进行开发时，您正在进行哪种开发？

Chris:克里斯：

So I actually spent most of my time prior to about 2009, 10, maybe 11, so 10/11, predominantly actually doing Drupal development and contributing to Drupal as well. I have a couple of commits in Drupal core. So mostly PHP and content management systems and things like that. And then I took a bit of a turning to other domains after that.

所以我实际上大部分时间都花在大约2009年之前，即10(也许11)，即10/11，实际上主要是在做Drupal开发并为Drupal做贡献。 我在Drupal核心中有几个提交。 因此主要是PHP和内容管理系统以及类似的东西。 之后，我转向了其他领域。

David:大卫：

Oh, that’s interesting, because Drupal … it’s got a lot of back end, and it’s got a lot of front end. Where were you focusing your attention?

哦，这很有趣，因为Drupal…后端很多，前端很多。 您在哪里集中注意力？

Chris:克里斯：

Well, the Drupal community has a lot of what are kind of termed site builders, or people who do a bit of everything. Because, at the time anyway, it tended to be quite popular in smaller agencies. And especially, this is when I was in Australia, where most agencies are quite small. Even a big agency is maybe only 30, 40 people, so you still had a lot of generalists. I was doing a lot of generalist tasks, but also some kind of dev lead, even helping with a bit of technical sales and stuff. I’ve always been a bit of a generalist really. [Laughs]

好吧，Drupal社区有很多所谓的网站建设者 ，或者是干点儿事的人。 因为在任何时候，它在小型机构中都非常受欢迎。 特别是在我去澳大利亚的时候，那里的大多数代理商都很小。 甚至一家大公司也可能只有30、40人，因此您仍然有很多通才。 我做了很多通才，但也有一些开发主管，甚至帮助了一些技术销售人员。 我真的一直有点通才。 [笑]

David:大卫：

So for the folks who might not be familiar, can you explain Drupal? I mean, it’s got a context, and it’s got a whole ecosystem around it.

因此，对于可能不熟悉的人，您能解释一下Drupal吗？ 我的意思是，它有一个背景，并且周围有一个完整的生态系统。

Chris:克里斯：

Well, I’ve been out of it for a little while. I would say the context has changed a bit, but it is a PHP-based content management system, sort of a much steeper learning curve than something like WordPress, which is another very popular PHP content management system. But you can generally accomplish more complex things with it. The catch phrase use to always be that WordPress powers 20% of the internet, or something crazy, but Drupal powers the top 10% of websites on the internet. It was always better suited at building more powerful things. I would say that it’s changed a bit now, to be honest with you. I’ve been out of it for a while, and the community has changed, and the community around it has changed. I witness it from afar these days, but I would say the whole dialogue around the community has changed a bit too. I’m not an expert anymore.

好吧，我已经有一段时间了。 我想说上下文已经有所改变，但是它是一个基于PHP的内容管理系统，比另一种非常流行PHP内容管理系统WordPress这样的学习曲线要​​陡得多。 但是您通常可以用它完成更复杂的事情。 流行的口号一直是WordPress支持20％的互联网，或某些疯狂的东西，但Drupal支持互联网上排名前10％的网站。 它总是更适合于构建更强大的功能。 我要说，老实说，现在已经有所改变。 我离开这里已有一段时间了，社区发生了变化，周围的社区也发生了变化。 这些天，我在远方目睹了这一点，但是我想说，整个社区的整个对话也发生了一些变化。 我不再是专家了。

David:大卫：

I’ve always heard that with WordPress you can build a website and with Drupal you can build WordPress. That was always my favorite saying.

我一直听说，使用WordPress可以构建网站，而使用Drupal可以构建WordPress。 这始终是我最喜欢的一句话。

Chris:克里斯：

I’ve never heard that, but that’s not bad. [Laughs]

我从未听说过，但这还不错。 [笑]

David:大卫：

So how did you initially get into the world of web development?

那么您最初是如何进入Web开发领域的呢？

Chris [3:56]:克里斯[3:56] ：

I did a computer science degree. Suiting my personality, it was actually quite a broad degree. It was a multimedia computing degree/science degree, in London. I lived in London, but then moved to Australia mid-2000s. But then I just sort of fell into PHP jobs. My first web agency job was actually in a ColdFusion agency. I just sort of fell into PHP and just never really left it, until I got more into mobile work and things like that. Yeah, I don’t know. There was just more work, and it just popped up, and then I just kept doing it for a few years. No real considered effort. [Laughs]

我获得了计算机科学学位。 适合我的个性，实际上是相当广泛的程度。 它是伦敦的多媒体计算学位/科学学位。 我住在伦敦，但是在2000年代中期移居澳大利亚。 但是后来我只是陷入了PHP职位。 我的第一个Web代理工作实际上是在ColdFusion代理中。 我只是迷上了PHP，却从未真正离开过PHP，直到我对移动工作和类似的东西有了更多的了解。 是的，我不知道。 还有更多的工作，它突然弹出，然后我继续做了几年。 没有真正考虑的努力。 [笑]

David:大卫：

These days, the cool kids don’t even know what PHP is.

这些天，很酷的孩子甚至都不知道PHP是什么。

Chris:克里斯：

No, it’s very true. It’ll be cool again. [Laughs]

不，这是真的。 会再酷。 [笑]

David:大卫：

I think so. I think so.

我认同。 我认同。

Recently, you just published a book on responsive design. I think this is the second edition, right?

最近，您刚刚出版了一本有关响应式设计的书 。 我认为这是第二版，对吗？

Chris:克里斯：

Yeah, but I didn’t write the first edition. So when you say my latest book, this is my first book. [Laughs]

是的，但是我没有写第一版。 所以当你说我的最新书时，这是我的第一本书。 [笑]

David:大卫：

Fair enough.

很公平。

Like PHP, responsive design is one of those terms. I think it’s kind of got a ring of the antique about it, because so many people are already familiar with it, and we’ve moved on to different terminology. But responsive design itself still is very relevant today.

像PHP一样， 响应式设计就是其中之一。 我认为它有点像古董，因为已经有很多人熟悉它了，因此我们转向了不同的术语。 但是响应式设计本身在今天仍然非常重要。

Chris:克里斯：

I would say it’s more relevant and becoming more relevant again. I think some of the problems that it initially set out to solve have maybe, sort of, been fixed, in very large, inverted commons. And actually, it’s going to be useful in the future and in the present for solving other new problems. Like different sorts of device capabilities, not just screen size and things like that. But other capabilities of devices too, and responding to user context and location and time of day and all sorts of things like that. I know some people have different words for that, but I would kind of argue that if it’s about responding to device capabilities, then I think we could use the same word.

我会说这更有意义，并且再次变得更加重要。 我认为它最初着手解决的一些问题可能已经解决了 ，它们是在很大的，倒置的公地中解决的。 实际上，它在将来和现在对于解决其他新问题将很有用。 像不同类型的设备功能一样，不仅仅是屏幕尺寸之类的东西。 但是设备还具有其他功能，可以响应用户上下文，位置和时间以及诸如此类的各种事情。 我知道有些人为此使用不同的词，但我会说，如果是关于响应设备功能的，那么我认为我们可以使用相同的词。

David:大卫：

That’s an important distinction, because responsive design, to a lot of people — myself sometimes included — means everything gets squishy, but that’s not what responsive means at all.

这是一个重要的区别，因为对很多人(有时包括我自己)的响应式设计意味着一切都变得糊涂了，但这根本不是响应式的意思。

Chris:克里斯：

Yeah, and it’s me maybe, not necessarily being controversial, but just saying that it could be broader than that. We have frameworks in place now with new inventions in CSS that help with the squishiness a lot more, so we can start to experiment with some other things too. A lot of the APIs you have available in HTML and modern JavaScript are helping us test and respond to all sorts of other things.

是的，也许是我，不一定会引起争议，而只是说可能会更广泛。 现在，我们已经有了一些框架，这些框架中有CSS的新发明，这些新发明可以极大地帮助您解决问题，因此我们也可以开始尝试其他一些东西。 HTML和现代JavaScript中提供的许多API都在帮助我们测试和响应各种其他事情。

It’s such in flux at the moment. It is almost like a few years back. There are some APIs that I remember writing about, that when I was writing the book, I discovered a lot of them had changed or even been removed. They’re all sort of in flux a lot.

目前，它是如此的变化。 几乎就像几年前一样。 我记得写过一些API，当我写这本书时，我发现其中很多已经更改甚至被删除了。 它们都是不断变化的。

David:大卫：

So, in the second edition of Jump Start Responsive Web Design, what was the main sort of concept that you spoke about related to responsive web design?

因此，在“快速入门响应式Web设计 ”第二版中，您谈到的与响应式Web设计有关的主要概念是什么？

Chris:克里斯：

The point of the Jump Start books is kind of aimed at someone who knows a little bit about a particular subject, or maybe knows next to nothing and just knows a little bit of prerequisite knowledge — i.e. HTML, or something like that — and wants to learn a concept in a weekend. That’s basically the premise of the book series. I was tasked with bringing the first edition up to date, and in all honestly, I think I ended up probably re-writing more than I initially said I would. I mostly used the first edition as kind of a framework to talk about. But the actual content changed a reasonable amount. It covers the building blocks of a page and the page elements. It then talks about obvious things like media queries and viewports. We cover text, we cover images, and then media and then kind of a bit at the end about some of the stuff we’d just been talking about, sort of new responsive.

Jump Start书籍的目的是针对那些对某个特定主题有点了解，或者几乎什么都不了解，并且只了解一点先决条件(例如HTML或类似的东西)并且想要在一个周末学习一个概念。 这基本上是本书系列的前提。 我的任务是更新第一版，老实说，我认为我最终可能重写了比最初说的要多的书。 我主要将第一版用作讨论的框架。 但是实际含量改变了一个合理的数量。 它涵盖了页面的构建基块和页面元素。 然后讨论了诸如媒体查询和视口之类的显而易见的事情。 我们先介绍文字，再介绍图片，然后介绍媒体，然后再讲一些我们刚才谈到的内容，其中包括一些新的响应式内容。

David:大卫：

Now that’s kind of a thing I’d like to dig into a little bit more. Because as I said, the term responsive design has been around for a while, but what are the things that are making it new these days? You brought up a few different contexts in which responsive … the definition is expanding beyond the visual.

现在，我想进一步研究一下。 因为正如我所说，“ 响应式设计”一词已经存在了一段时间，但是这些天使它变得新颖的是什么？ 您提出了一些不同的上下文，在这些上下文中，响应...定义已扩展到视觉之外。

Chris [8:00]:克里斯[8:00] ：

Yeah. I guess firstly, different sorts of devices. That we thought we had it hard with having to adapt to new mobile devices. And actually, to a certain extent, adapting to mobile devices has got a little bit easier again, because those devices have got better. But we also now have games consoles, TVs, cars — probably in the near future screens in cars. Maybe advertising boards. Actually, the kind of applications of screens is quite widespread now. And some of them are more standard than others, so it might just be an Android browser, like Samsung, I think. Their fridges have basically an Android browser in them. That’s going to be used by a lot of people, even if we want to get crazy out there.

是的 我想首先是不同种类的设备。 我们认为必须适应新的移动设备非常困难。 实际上，在一定程度上，适应移动设备又变得更加容易，因为这些设备已经变得更好。 但是，我们现在也有了游戏机，电视，汽车-可能会在不久的将来在汽车屏幕上显示。 也许是广告板。 实际上，屏幕的应用现在已经很普遍了。 而且其中有些比其他的更加标准，因此我认为它可能只是Android浏览器，例如Samsung。 他们的冰箱基本上都装有Android浏览器。 即使我们想在那里疯狂，这也会被很多人使用。

I didn’t cover this in the book — but it just popped into my head — things like voice interfaces. I mean, people don’t necessarily browse a website with a voice interface, but they will browse data from a web service, or something like that. Just even thinking about how to repurpose your designs and content in as many of these new cases as possible, in my mind, would also be kind of responsive, or the new responsive or adaptive, or whatever you want to call it.

我没有在书中讨论这一点，但它只是突然出现在我的脑海中，例如语音接口。 我的意思是，人们不一定浏览带有语音界面的网站，但他们会浏览来自Web服务或类似内容的数据。 在我看来，即使考虑如何在尽可能多的新案例中重新调整设计和内容的用途，也将是响应式的，或者是新的响应式的或自适应的，或者您想称呼它的任何形式。

David:大卫：

That makes me think a lot about the concept of UI-less design, and how you might need to respond to that in terms of push notifications. Right? A user could interact with your application without ever actually going to the URL, maybe once or twice to sign up for push notifications. But after that, you can interact with quite a bit of things just by tapping buttons on push notifications that come up to you. And that’s it.

这使我对无UI设计的概念进行了很多思考，以及您可能需要如何在推送通知中对此做出响应。 对？ 用户无需真正访问URL就可以与您的应用程序进行交互，可能需要一两次来注册推送通知。 但是在那之后，您可以通过点击出现在您的推送通知上的按钮来进行很多交互。 就是这样。

Chris:克里斯：

Exactly. I mean, you get very limited design capabilities in a push notification, but still, it’s design to think about.

究竟。 我的意思是，您在推送通知中获得的设计功能非常有限，但是仍然要考虑设计问题。

David:大卫：

It’s interesting, because it starts to get to the point where everything becomes part of responsive design, all the way down to accessibility issues. So, if you’re thinking about it that way, how do you focus people in terms of what you would consider to be the limits of what people need to learn today in terms of responsive design?

这很有趣，因为它开始发展到一切都变成响应式设计的一部分，一直到可访问性问题。 因此，如果您以这种方式进行思考，那么如何将人们的注意力集中在您认为这是当今人们在响应式设计方面需要学习的限制呢？

Chris:克里斯：

Okay, well now you’ve got me all excited by saying it could be everything. You’re telling me to reign it in a bit. I don’t know.

好吧，好吧，现在让您兴奋的是，这可能就是一切。 您是在告诉我稍作统治。 我不知道。

[Laughter]

[笑声]

David:大卫：

Where would you put people’s focus first, I suppose? Like for the developer who’s out there, and he’s inherited the homepage for a company that developed it in 2008. It’s this thing that only works on 980px-wide browsers. Where do you put your attention first when you want to consider the context for what that needs to be turned into for a responsive design?

我想您会把人们的注意力放在哪里？ 就像对于在那里的开发人员一样，他继承了一家于2008年开发该公司的公司的首页。这种东西只能在980px宽的浏览器上使用。 当您想考虑响应式设计需要转化为什么的上下文时，首先要把注意力放在哪里？

Chris:克里斯：

First, I will give the broad, pragmatic response. And then I’ll give the more helpful response.

首先，我将给出广泛而务实的回应。 然后，我将给出更有用的答复。

The broad, pragmatic response would be, try to find out what your users are using, and if they’re all using old machines and old resolutions, then maybe you don’t need to worry so much. Who knows? I mean, it depends, kind of, on your audience. But then, once you have that information, if it does, of course, present the fact that there’s a multitude of different devices, then you focus on the major desktop browsers. You focus on the major mobile operating systems at reasonable devices. Especially with Android, you can’t cover everything. And you don’t really need to, to be fair anyway. And that’s to be honest with you, probably, mostly enough. Test on some 13-inch laptops. Test on some 27-inch screens if you can. Or use simulators to do that if you can’t. And that’s probably enough for most cases. What we’re talking about with the other subjects is a bit more out there. And if you’ve got the budget to be doing that kind of stuff, you’re sort of okay anyways.

广泛而务实的回应是，尝试找出您的用户正在使用什么，如果他们都在使用旧机器和旧分辨率，那么您不必担心太多。 谁知道？ 我的意思是，这取决于您的听众。 但是，一旦有了这些信息，如果可以，那么，当然，您会发现存在许多不同设备的事实，那么您将专注于主要的桌面浏览器。 您将重点放在使用合理设备的主要移动操作系统上。 特别是使用Android，您无法涵盖所有​​内容。 而且，您实际上并不需要公平起见。 老实说，这也许就足够了。 在某些13英寸笔记本电脑上进行测试。 如果可以，请在一些27英寸的屏幕上进行测试。 或者，如果不能，请使用模拟器来完成。 对于大多数情况，这可能就足够了。 我们正在与其他主题讨论的话题更多。 而且，如果您有足够的预算来做这种事情，那么您还是可以的。

David:大卫：

I like that you start with an audience-driven focus, because you’re really thinking about what’s going to be practical. And one of the things I noticed you were talking about — a lot of people think about — HTML5 immediately introduced all of these things that allow you to be more responsive, and then CSS is used to style it. But you also get into the JavaScript side of things as well.

我喜欢您从以受众为导向的重点开始，因为您确实在考虑实用性。 我注意到您正在谈论的其中一件事情-很多人都在思考-HTML5立即引入了所有这些事情，使您可以更快地进行响应，然后使用CSS对其进行样式设置。 但是，您也同样会涉足JavaScript方面。

Chris [11:50]:克里斯[11:50] ：

I think, firstly, because some of the less visual tests are JavaScript-based, but also, the ability to react dynamically to certain things is a JavaScript functionality, of course. I tried to stick to pure JavaScript. Again, I think that’s more possible than it use to be. In fact, my JavaScript knowledge was fairly out of date and in the past year or so, I’ve sort of dived back into it for various reasons and discovered how much it’s changed — for the positive. It’s mostly for little bits of dynamic changing, testing for functionality, things like that really. Not a massive amount.

我认为，首先，因为一些不太直观的测试是基于JavaScript的，但是，当然，对某些事物进行动态React的能力是JavaScript的功能。 我试图坚持使用纯JavaScript。 再说一次，我认为这比过去更有可能。 实际上，我JavaScript知识已经过时了，并且在过去的一年左右的时间里，由于种种原因，我已经回头研究了它，并发现了它的变化有多大-积极。 它主要用于一点点的动态更改，功能测试等。 数量不多。

David:大卫：

One of the other things that you talk about in your book, that really caught my attention, was all of these different paradigms for what responsive means. Whether it’s progressive enhancement, or graceful degradation, or mobile first. Can you tell people who might be entering this some of the distinctions that you found among those different perspectives?

您在书中谈论的另一件事确实引起了我的注意，这是响应式含义的所有这些不同范例。 无论是逐步增强，还是性能下降，还是移动优先。 您能否告诉那些可能会进入这些观点的人们在这些不同观点之间发现的一些区别？

Chris:克里斯：

Okay. I’ll start with mobile first, and then I’ll have to wake myself up to remember the way around for the other two.

好的。 我将首先从移动开始，然后我必须唤醒自己，以记住其他两个方法。

[Laughter]

[笑声]

So, mobile first is basically designing first for mobile. The name kind of gives it away. And, building from there. So you take the premise that the majority of users these days — which isn’t strictly true, but it’s generally at least 50/50 — will be using a mobile device. You build a fantastic design that suits these cases that you need and they need on a mobile device and then you build up from there. And you can add more functionality as you go up the device tree, if you like. Or across the device tree, however you like to look at it. But, first and foremost, it should be a good, positive, strong experience on a mobile device, basically.

因此，“移动优先”基本上是为移动首先设计的。 名称种类使它散发出来。 并且，从那里建造。 因此，您要假设一个前提，即这些天的大多数用户(并非严格如此，但通常至少为50/50)将使用移动设备。 您构建了一个适合您所需的案例的奇妙设计，并在移动设备上满足了这些需求，然后从那里开始构建。 如果愿意，您可以在设备树中添加更多功能。 或跨设备树，但是您喜欢看它。 但是，最重要的是，基本上，它应该是在移动设备上的良好，积极而丰富的经验。

And then kind of the other way around for that is the other perspective of picking your device that is the optimal for you. And again, this depends on use case. If you’re designing an office application, then you might be able to take a big assumption that a lot of people would generally be at a desktop computer, so you have a certain screen real estate and things like that. And you then sort of strip away design elements and functionality as you go down the device tree to make it just usable or just bearable or whatever your agreement may be, for those users. I mean, it’s basically just two different perspectives on the same … One is starting with the smallest device and working up, and one is starting with your big device and working down, I suppose. Yeah, it depends on your use case.

然后，从另一角度出发，选择最适合您的设备。 同样，这取决于用例。 如果您正在设计办公应用程序，那么您可能可以假设很多人通常会坐在台式计算机上，因此您拥有一定的屏幕空间以及类似的东西。 然后，当您浏览设备树时，就将这些设计元素和功能剥离了下来，以使其对于那些用户而言仅是可用的或可承受的，或者无论您达成何种协议。 我的意思是，基本上在同一个观点上只有两种不同的观点……我想，一种是从最小的设备开始工作，而另一种是从大型设备开始工作而工作。 是的，这取决于您的用例。

David:大卫：

I think the hidden assumption in that is that for a smaller device, it’s assumed that you’re going to be having reduced functionality.

我认为隐藏的假设是，对于较小的设备，假设您的功能将减少。

Chris:克里斯：

Yeah, I suppose that has generally been the assumption. And I guess the new thinking these days is that shouldn’t necessarily be the case. There may need to be rethought functionality, because you have less screen real estate. People are using fingers. They don’t have a full proper keyboard, et cetera, et cetera. But it doesn’t necessarily mean they should get a worse experience. Just a more suitable experience, I suppose, would be mobile first. Yeah, I guess that’s probably a much better way of saying it.

是的，我想这通常是假设。 而且我想这些天的新想法不一定是事实。 可能需要重新考虑功能，因为屏幕空间较少。 人们正在使用手指。 他们没有一个完整的适当的键盘， 等等 ， 等等 。 但这并不一定意味着他们应该获得更糟糕的经历。 我想，更适合的体验是移动优先。 是的，我想这可能是一种更好的说法。

David:大卫：

Mobile also gives you access to a number of things that a desktop may not, such as location, or integrated cameras, or all sorts of things that might be appropriate, depending on the application.

通过移动设备，您还可以访问桌面可能无法访问的许多内容，例如位置或集成的摄像头，或者访问各种可能合适的东西，具体取决于应用程序。

Chris:克里斯：

Exactly. Exactly. Yep. And sometimes, I’ve found, not necessarily as much with websites, more with mobile applications, but sometimes the experience can be better. With things like iOS and Android, you have the concept of a share extension which enables you to easily share links or files or whatever between other applications in the operating system. And macOS and Windows have that to a certain extent, but often developers don’t bother implementing it. Whereas, on mobile, it’s generally there. So sometimes, actually, you can get a better experience.

究竟。 究竟。 是的 有时，我发现，使用网站并不一定需要更多的网站，但是有时体验会更好。 使用iOS和Android之类的东西，您就有了共享扩展的概念，它使您可以轻松地在操作系统中的其他应用程序之间共享链接或文件或其他内容。 而macOS和Windows在一定程度上具有这一点，但是开发人员通常不必理会它。 而在移动设备上，通常就在那儿。 因此，实际上有时您可以获得更好的体验。

David:大卫：

So you mentioned tech journalism earlier. Can you define what the scope of that is?

所以您前面提到了科技新闻。 您可以定义范围吗？

Chris [15:48]:克里斯[15:48] ：

The scope. Okay, well, to go back a step … So, the reason I sort of got into doing this book in the first place, is I actually use to edit the mobile channel for SitePoint. And that came from coming out of the CMS days I discovered way back when — I don’t know, 2009 or something — PhoneGap. Nitobi PhoneGap, as it was then, before Adobe bought it. And I actually found it amazing, just because it gave the ability for web designers to turn HTML and JavaScript and CSS into mobile-like applications. These days, now, it’s less needed. But in those days it was actually pretty ground breaking. That’s kind of where I started getting more into mobile and then into doing more native stuff, and things like that.

范围。 好吧，好吧，倒退一步……所以，我之所以开始写这本书，是因为我实际上是在编辑SitePoint的移动渠道。 那是我从CMS时代走出来的，那是我回想起2009年之类的时候-我不知道-PhoneGap。 Nitobi PhoneGap，当时是在Adobe购买之前。 实际上，我发现它很神奇，因为它使Web设计人员能够将HTML，JavaScript和CSS变成类似移动的应用程序。 这些天，现在，它的需求减少了。 但是在那些日子里，这实际上是开创性的。 在这种情况下，我开始更多地涉足移动领域，然后开始做更多的本地工作，诸如此类。

By the by, I was editing the channel for SitePoint and sort of broadened from there. I don’t write for SitePoint article-wise much anymore. I just don’t have the time, but I guess I cover maybe three main topics. One would be still a lot of mobile. One is a lot of actual things like distributed and microservice-based systems, like Docker and Kubernetes and things like that. And also, I’m quite into things like Blockchain and decentralized systems and stuff. But, again, as a journalist and kind of blogging about introducing people to a project, as I said already, I’m a generalist. So I tend to have lots of little bits of knowledge about lots of things, as opposed to being an expert in any one of them. But, it also involves going to some events, interviewing people, et cetera, et cetera. And it’s fun. It’s nice to meet people and hear their ideas, and if I can find a way of writing about it for somebody, then I will, basically.

顺便说一句，我正在编辑SitePoint的频道并从那里进行了扩展。 我不再写SitePoint文章了。 我只是没有时间，但我想我可能涵盖了三个主要主题。 仍然会有很多移动设备。 其中之一是很多实际的东西，例如分布式和基于微服务的系统，例如Docker和Kubernetes，以及类似的东西。 而且，我非常喜欢区块链和去中心化系统之类的东西。 但是，正如我已经说过的那样，再次，作为一名记者和关于将人们介绍给项目的博客，我是一名通才。 因此，相对于成为其中任何一个方面的专家，我倾向于对很多事情都有一点点了解。 但是，它也涉及到某一事件，采访的人， 等等 ， 等等 。 这很有趣。 很高兴认识人们并听取他们的想法，如果我能找到一种写给别人的方式，那我基本上会。

David:大卫：

So does the journalism ever influence stuff you work on as a developer?

那么，新闻业会影响您作为开发人员从事的工作吗？

Chris:克里斯：

To a certain extent. Sometimes in that, through those activities, I find out about something cool and useful that is worth bringing back to a project or to a team. But also, I mean, I tend to write for developers anyway, so I will always build example applications and things like that. But mostly in terms of just getting exposure to more ideas. And I guess, through the journalism, you don’t always just get introduced to technical concepts. You get introduced to the business as well. So hearing about a project and what they’re going to do in the future and not just the cool bit of code, but something actually that someone’s excited about because it’s got a good customer base and it’s stable and it’s got a future and, you know, just being able to make a few extra decisions about a project as well. If that makes sort of sense, I don’t know.

在某种程度上。 有时，通过这些活动，我发现一些很酷且有用的东西值得将其带回项目或团队。 但是，我的意思是，无论如何我还是倾向于为开发人员写书，因此我将始终构建示例应用程序之类的东西。 但主要是在接触更多想法方面。 而且我想通过新闻业，您并不总是会被介绍技术概念。 您也将被介绍给企业。 因此，不仅要了解一个项目及其在将来的工作，而且不仅要听一些很酷的代码，还要听到一些使某人感到兴奋的事情，因为它拥有良好的客户群，稳定且有未来，而您知道，也能够对项目做出一些额外的决定。 如果这样有道理，我不知道。

David:大卫：

Oh, absolutely. And it’s great to be in a position to help people find out about those things.

哦，绝对。 能帮助人们了解这些事情真是太好了。

Chris:克里斯：

Yeah.

是的

David:大卫：

And you’ve also been doing a lot of public speaking, haven’t you?

而且您也进行了很多公开演讲，不是吗？

Chris:克里斯：

I guess, I did a little bit in Australia, but when I came back to Europe, for the next couple of years, it’s easier to travel to places, so I suppose just taking advantage of it as much as possible. I like to make an idiot of myself.

我猜想，我在澳大利亚做了一些工作，但是当我回到欧洲后的几年里，去旅行更容易，所以我想尽可能地利用它。 我喜欢自欺欺人。

I mostly, these days, do a lot of talks on documentation and helping people understand how to document projects better, because most developers don’t like documenting their projects. But a few other things here and there. I’ve been doing quite a few talks on Atom recently, the text editor, because I kind of like it a lot. But mostly documentation talks these days. I’m kind of pretty happy in the documentation world.

这些天，我大部分时间都在进行文档讨论，并帮助人们更好地记录项目，因为大多数开发人员都不喜欢记录他们的项目。 但是这里和那里还有其他一些事情。 我最近在文本编辑器Atom上进行了很多讨论，因为我非常喜欢它。 但是这些天大部分是文档讨论。 我对文档世界感到很高兴。

David:大卫：

You get a lot of respect from me for that. I don’t think documentation gets enough attention.

您对此感到非常尊敬。 我认为文档没有得到足够的重视。

Chris:克里斯：

This is kind of why it’s fun doing as well, because there’s a much smaller sector, and you generally get that response.

这也是为什么这样做也很有趣的原因，因为该领域的规模要小得多，而且您通常会得到这种回应。

[Laughter]

[笑声]

David:大卫：

So what are your bullet points on documentation? Just so the people out here can hear it. Pun intended.

那么您在文档上的要点是什么？ 只是为了让外面的人都能听到。 双关语意。

Chris:克里斯：

Again, it’s use case … and sort of user story — which, if you’re working on a bigger project, is generally being done at some point anyway. So, feed back into that. The project planning. The user story planning. And get an idea of who the audience are and what they want to accomplish. Not just write what you want to tell someone.

同样，它是用例……和某种用户故事，如果您正在开发更大的项目，则通常还是会在某个时候完成。 因此，请反馈给它。 项目策划。 用户故事计划。 并了解受众群体是谁以及他们想要实现什么目标。 不只是写你想告诉别人的话。

One tip that I’ve been giving to people a lot recently, that feeds nicely into SitePoint too — because ad-supported media tends to do it quite well — is good structure. Because people don’t read from end to end. In fact, certain cultures do, but the vast majority don’t. They just glance around and scroll backwards and forwards. And they look for certain things. So, if you have good heading structure, you have code examples, images, videos, whatever, they’re things that grab people’s attention. And then they read the text around it. And the reason, of course, ad-supported sites do this better, is because they need people to read it. So, they’re better at it. So you could learn a lot from them.

最近，我已经向人们提供了很多技巧，它也很好地融入了SitePoint(因为受广告支持的媒体往往做得很好)。 因为人们不会从头到尾阅读。 实际上，某些文化确实存在，但绝大多数却没有。 他们只是环顾四周，然后向前和向后滚动。 他们寻找某些东西。 因此，如果您具有良好的标题结构，则可以使用代码示例，图像，视频等等，这些都是引起人们关注的东西。 然后他们阅读了周围的文字。 当然，受广告支持的网站之所以做得更好，是因为他们需要人们阅读它。 因此，他们在这方面做得更好。 因此，您可以从中学到很多东西。

And then actually, I would say, take advantage of documentation being online. It doesn’t have to just be text. You can add interaction. You can add interactive consoles, videos, CodePen examples, et cetera, et cetera. That stuff helps a lot.

然后，我想说的是，实际上是利用在线文档。 它不必只是文本。 您可以添加交互。 您可以添加互动游戏机，视频，CodePen例子， 等等 ， 等等 。 那东西很有帮助。

That’s not a complete list by any means, but they’re just the three that came to mind immediately.

无论如何，这都不是一个完整的列表，但它们只是立即想到的三个。

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

It sounds like it’s the sort of thing that can also play into the work that you do when you publish articles out and basically build up your own audience too.

听起来，当您发布文章并基本上建立自己的受众群体时，这也可以影响您的工作。

Chris:克里斯：

You learn a lot from each of the fields, so yep.

您可以从每个领域学到很多东西，是的。

David:大卫：

That’s fantastic.

这太妙了。

So, how can our listeners find you online and find out more about the things that you’ve been working on?

那么，我们的听众如何才能在网上找到您，并找到有关您正在从事的工作的更多信息？

Chris:克里斯：

My website, where I kind of aggregate everything I do, is GregariousMammal.com. I have a nickname of Chris Chinchilla, and gregarious mammal was — somewhere I read — the dictionary definition of a chinchilla, so it just kind of stuck. You can find most of my articles and podcasts and talks aggregated there. And, you can also probably hear me talk, way too much, on Twitter @ChrisChinch as well.

我的网站(我在其中汇总了我所做的所有事情)是GregariousMammal.com 。 我有一个克里斯·钦奇利亚(Chris Chinchilla)的绰号，而在我读过的某个地方， 群居的哺乳动物是龙猫的字典定义，因此有点卡住了。 您可以在此处找到我的大部分文章，播客和讲座。 而且，您也可能在Twitter @ChrisChinch上听到我说话太多。

They’re probably the two main places to find me.

他们可能是找到我的两个主要地点。

David:大卫：

Fantastic. Well we’ll definitely put all of that into the show notes. And thank you so much for joining us today on the Versioning Show.

太棒了 好吧，我们一定会把所有这些都放到展示笔记中。 非常感谢您今天加入我们的Versioning Show。

Chris:克里斯：

No worries. Thanks for having me.

别担心。 感谢您的款待。

[Musical interlude]

[音乐插曲]

David:大卫：

So one thing that came out of a little chat that Chris had with us afterwards was that he and his wife actually have a podcast.

因此，克里斯之后与我们进行的一次简短聊天产生的一件事是，他和他的妻子实际上有一个播客。

Tim:蒂姆：

Yeah, they do, and it sounds interesting. They both talk about tech journalism — which, well, I’m not entirely familiar with. So, I do write for SitePoint every once in a while, but outside of that, I know there’s Wired and TechCrunch. I don’t really pay too much attention to those sorts of things. Kind of just get all of my information from emails and Twitter.

是的，他们这样做，听起来很有趣。 他们俩都在谈论科技新闻-嗯，我并不完全熟悉。 因此，我确实每隔一段时间为SitePoint编写一次，但是除此之外，我知道还有Wired和TechCrunch。 我对这些事情并不太在意。 只是从电子邮件和Twitter获取我的所有信息。

David:大卫：

I know what you mean. And I tend to keep most of my writing pretty evergreen, but there’s a lot to be said for writing about the cutting edge of what’s happening in tech, because something is changing constantly and there’s always something new to write about.

我知道你的意思。 而且我倾向于使我的大部分文章保持常绿，但是要写关于技术正在发展的最前沿的文章有很多话要说，因为某些事情在不断变化，并且总是有新的东西要写。

Tim:蒂姆：

Yeah, there really is. There’s at least ten articles every time Chrome publishes a new version.

是的，确实有。 每次Chrome发布新版本时，至少会有十篇文章。

David:大卫：

One of the things that I liked about the way he approaches his writing, is that he seems to go and write about the things that he’s interested in, even if they’re not the latest thing, or the coolest thing. For example, he’s talking about the Atom text editor. And Atom’s been around for while, but he feels like writing about it now because it’s something that he’s into, and he finds an audience for it.

关于他的写作方式，我喜欢的一件事是，他似乎去写自己感兴趣的事物，即使它们不是最新的事物，也不是最酷的事物。 例如，他正在谈论Atom文本编辑器。 而且Atom已经存在了一段时间，但是他感觉就像现在写它一样，因为这是他的兴趣所在，并且他为此找到了听众。

Tim:蒂姆：

Yeah, and things like that, there are always tips and tricks you can share to just help people out. I mean, your text editor is a thing that you use every single day. I’m probably, hopefully, if I’m doing my job, using my text editor more than I’m using my browser. And, every single time someone shares a tip on, Hey, you can do this in Sublime or VS Code or Atom, it transforms my productivity in such a way that I get ten times more work done, because now I know how to use multiple cursors or there’s things like that.

是的，类似的事情，总会有一些技巧和窍门，您可以共享这些技巧来帮助人们。 我的意思是，您的文本编辑器每天都在使用。 如果我正在做我的工作，希望我可以使用文本编辑器而不是使用浏览器。 而且，每当有人分享提示时， 嘿，您可以在Sublime或VS Code或Atom中进行操作，它以这样一种方式改变了我的生产力，使我可以完成十倍的工作，因为现在我知道如何使用多个游标或类似的东西。

David:大卫：

And it’s an example of how you can take whatever you happen to be working with — PHP, Atom, responsive design … There’s relevance to what he’s talking about. And, the relevance continues, even if the technology isn’t the latest thing making headlines these days.

这是一个示例，说明了如何使用碰巧的东西-PHP，Atom，响应式设计…与他所说的内容相关。 而且，即使这些技术不是最近成为头条新闻的最新内容，相关性仍在继续。

Tim:蒂姆：

Speaking of responsive design, I’m really glad that he took the time to properly define it. Because, I have to remind myself every once in a while as well, responsive doesn’t mean squishy. Responsive means that it literally responds to every device that is trying to use it. That’s a really big concept. And it’s so much more than CSS media queries.

说到响应式设计，我很高兴他花时间正确定义了它。 因为，我也必须不时地提醒自己，响应并不意味着糊涂。 响应式意味着它实际上是对尝试使用它的每个设备做出响应。 这是一个很大的概念。 它不仅限于CSS媒体查询。

David:大卫：

And, well, I mean you, I believe, have done some work on responsive images as well.

而且，嗯，我的意思是，我相信您也已经在响应式图像方面做了一些工作。

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

Yes, back in the day. No, maybe two or three years ago. But, yes. When you think about how you want to, I mean, there … Perfect example. Perfect use case for a responsive design. The image in a squishy sort of frame of mind, it doesn’t matter. It takes the width of the device that’s trying to use it. But, it also takes all the bandwidth of the device that’s trying to use it. And, so, from a responsive point of mind, you don’t want to load the same size image for every single device. Some devices only have basic DPI screens wherein they can only load up a simple resolution. And then others have crazy, four times the resolution that another device its same size would. And you have to know, all right, I want to load in a different image for that, but also, I’m a little bit worried about bandwidth because this image is huge. What do I do here? There are a ton of things just to think about in terms of responsive design for images.

是的，回到过去。 不，大概两三年前。 但是，是的。 当您考虑要怎么做时，我的意思是……完美的例子。 完美的用例，可快速响应设计。 图像处于一种松散的思维框架中，这并不重要。 它占用尝试使用它的设备的宽度。 但是，这也会占用尝试使用它的设备的所有带宽。 因此，从响应的角度来看，您不想为每个设备都加载相同大小的图像。 某些设备仅具有基本的DPI屏幕，其中它们只能加载简单的分辨率。 然后其他人会发疯，其分辨率是相同大小的另一台设备的四倍。 而且，您必须知道，我想为此加载另一个图像，但是，由于该图像很大，我有点担心带宽。 我在这里做什么？ 关于图像的响应设计，有很多事情需要考虑。

David:大卫：

One of the things that, when I was reading his book, that really caught my attention, was how many different media query options there are. How many things you can query on. Like, it never even occurred to me to think about bit depth. Is this a monochromatic device that I happen to be sending information to? There will be situations where somebody might be reading on a Kindle, for example. Or it might be greyscale, or whatever. And you want to be able to present an experience that’s appropriate to that device. Or you might even be targeting that as your primary device. In which case, other browsers might be the secondary. But the primary would be whatever one has that particular attribute.

当我阅读他的书时，真正引起我注意的一件事是有多少种不同的媒体查询选项。 您可以查询多少东西。 就像，我什至从未想到过位深度。 这是我正向其发送信息的单色设备吗？ 例如，在某些情况下，可能有人在Kindle上阅读。 或可能是灰度的，或其他。 并且您希望能够提供适合该设备的体验。 或者，您甚至可能将其作为主要设备。 在这种情况下，其他浏览器可能是辅助浏览器。 但是主要的将是具有该特定属性的任何东西。

It’s amazing how many different things you can query on.

您可以查询多少不同的东西，这令人惊讶。

Tim:蒂姆：

Yeah, there’s orientation, ambient light. Those are two that I’ve almost never used. But, in different applications they make a lot of sense. For example, if you are displaying a map that someone is going to need to use while they’re biking or walking somewhere, right? You want to pay attention to, is it dark outside? Because then I might want to change the visual properties of this thing so it’s easier to look at and then look back at your surroundings, in the dark versus in the daytime.

是的，有方向，环境光。 那是我几乎从未使用过的两个。 但是，在不同的应用中，它们很有意义。 例如，如果您显示的是某人在骑自行车或走路时需要使用的地图，对吗？ 您要注意，外面漆黑了吗？ 因为那样的话，我可能想要更改此东西的视觉属性，以便在黑暗中和白天都可以更轻松地查看和查看周围的环境。

David:大卫：

Sure. When you said a bike, I’m just imagining an environment where the acceleration of the user might be something that you would want to change how you present things. That could be in a VR environment, for example.

当然。 当您说一辆自行车时，我只是在想象一个环境，在该环境中，用户的加速度可能是您想要改变呈现方式的一种方式。 例如，这可能在VR环境中。

Tim:蒂姆：

Yeah, there’s just so much to think about there.

是的，这里有太多需要考虑的地方。

And then, we also touched a little bit on mobile first design. Which, I’m going to posit … I keep posit. I don’t actually know if that’s a real word. I’m going to present a question. Tell me what you think.

然后，我们还对移动优先设计进行了一些介绍。 哪一个，我要假设。。。我保持假设。 我实际上不知道这是不是一个真实的词。 我要提出一个问题。 告诉我你的想法。

I’m wondering if mobile first shouldn’t be a term that’s used anymore. Because, it’s not just mobile, right? In terms of actual design for a product, you essentially want to design least capability first, right? Because, from a mobile first perspective, mobile could really mean anything. I would think what you would really want to design for is least capabilities to greatest capabilities, right? If I am trying to look at something from a smart watch, if people are still into that, I’m only going to want to interact with an application through notifications. I’m not going to want to have to traverse using three inch screen, the size of my wrist, through a complex application. I’m just going to want to say yes, no, send to my email, tap, tap, tap. That’s all I really want to do.

我想知道“ 移动优先”是否不应该再被使用。 因为，它不只是移动的，对不对？ 就产品的实际设计而言，您本质上想首先设计能力最低的产品，对吗？ 因为从移动优先的角度来看，移动确实可以代表任何意义。 我认为您真正要设计的是功能从最小到最大。 如果我试图从智能手表中查看某些东西，如果人们仍然对此感兴趣，那么我只想通过通知与应用程序进行交互。 我不想通过复杂的应用程序使用手腕大小的三英寸屏幕进行遍历。 我只想说是，不，发送到我的电子邮件，点击，点击，点击。 这就是我真正想要做的。

But if I’m on that same application on my — what is it? — three foot wide monitor, I have all the room in the world, and there’s so much that I can do there.

但是，如果我在自己的同一个应用程序上-那是什么？ —三英尺宽的显示器，我拥有世界上所有的房间，在那里我可以做很多事情。

David:大卫：

It’s true. Well, it sounds like it’s the distinction between progressive enhancement and graceful degradation. That’s the progressive enhancement argument. Where you want to take the least capable device and then add on features depending on the context in which the user happens to be. As opposed to the graceful degradation, where you start with all the features you might want, and then strip them away appropriately, depending on the context. And I think either one works. It’s kind of about how the designer thinks about the situation.

这是真的。 好吧，这听起来像是渐进增强和优雅降级之间的区别。 这就是渐进增强论证。 您要选择功能最差的设备，然后根据用户所处的环境添加功能的位置。 与正常降级相反，您从所有可能需要的功能开始，然后根据上下文适当地将其剥离。 而且我认为任何一个都行得通。 这与设计师对情况的看法有关。

Tim [27:46]:蒂姆[27:46] ：

I would say I prefer, very much, the progressive enhancement approach. Because, I’ve seen a lot, wherein product managers tend to think of mobile as being, as meaning that you don’t need the same amount of features as desktop. And I don’t necessarily like that idea because, for example, there’s quite often, my wife and I are sitting on the couch and watching TV and I’m doing something stupid on my phone, like looking at some bank statement or something, right, that I could obviously just grab my laptop and do, but at that point in time, I have my phone in my hands. I just remembered I needed to do something, and then I find out that I can’t do what I wanted to because someone decided, Hey, this feature doesn’t need to exist if you’re looking through it on a phone. And that doesn’t always apply.

我会说，我非常喜欢渐进增强方法。 因为，我已经看到了很多东西，其中产品经理倾向于将移动性视为存在，这意味着您不需要与台式机相同数量的功能。 而且我不一定喜欢这个主意，因为例如，我和我的妻子经常坐在沙发上看电视，而我在电话上做一些愚蠢的事情，例如看一些银行对帐单，是的，我显然可以拿起笔记本电脑去做，但是在那个时候，我手里拿着手机。 我只是记得我需要做些什么，然后发现我无法做我想做的事情，因为有人决定， 嘿，如果您正在手机上浏览该功能，则不需要该功能。 这并不总是适用。

David:大卫：

That’s absolutely true. But I wonder, if that’s more of an engineer’s perspective versus the designer’s perspective? Because, I think now about the conversation that happens between the designers and the engineers around development of a product. And the designers are thinking, by default, I suppose, about all of the possibilities that a user might want to use to interact with an application. Whereas the engineer is thinking about how to build these things. Maybe it’s something we should have asked Chris about while he was with us, how you coordinate that conversation, because when you talk about responsive design, the designer is a critical element of that conversation. And, where’s the designer’s perspective? Are they thinking the big picture about every possible feature? Or should they be thinking first about the very minimum, viable product?

没错 但是我想知道，这是工程师角度还是设计师角度？ 因为，我现在考虑围绕产品开发的设计师与工程师之间的对话。 我想，默认情况下，设计人员正在考虑用户可能想与应用程序进行交互的所有可能性。 而工程师正在考虑如何构建这些东西。 也许这是我们应该在克里斯与我们在一起时问过的，您如何协调对话，因为当您谈论响应式设计时，设计师是对话中的关键要素。 而且，设计师的观点在哪里？ 他们是否正在考虑所有可能功能的全局图？ 还是他们应该首先考虑最低限度的可行产品？

Tim:蒂姆：

That’s true. And to start, I always give my designers a simple rule that I try to keep followed as much as possible. And that is, features should not depend on the size of a user’s screen. Because, if we are speaking in terms of capability, at this point, the phone to my right has almost all of the capabilities that the device that I’m using for this podcast right now has. Almost. Aside from, you know, a full keyboard, that I can type with two hands, right? In that case, if I am working on an application that’s suppose to work on both of those devices, I should be able to do everything, within reason, on either device, right? If that’s uploading photos. Well, that’s a thing I can do. You know, location API, that works. HTLM5 thing. There, right? But if you say, all right, we should remove this button because we’re out of screen real estate, well, then I would say we haven’t accurately solved the challenges for designing this specific product. Because the only reason we’re dropping the thing is the screen size is too small.

确实如此。 首先，我总是给我的设计师一个简单的规则，我会尽可能地遵循它。 也就是说，功能不应取决于用户屏幕的大小。 因为，就功能而言，此时，我右边的电话几乎具有我现在用于此播客的设备所具有的全部功能。 几乎。 除了完整的键盘之外，我还可以用两只手打字，对吗？ 在那种情况下，如果我正在开发一个可以在这两个设备上都工作的应用程序，那么我应该能够在合理的范围内在任何一个设备上执行所有操作，对吗？ 如果是上传照片。 好吧，那是我能做的。 您知道，位置API可行。 HTLM5的东西。 那里吧？ 但是，如果您说好，我们应该删除此按钮，因为我们的屏幕空间不足，那么，我想说的是我们尚未准确解决设计此特定产品的挑战。 因为我们放下东西的唯一原因是屏幕尺寸太小。

I tend to see that as a bad option. A perfect example for this at my job: recently, we were looking at how to size a ledger for an activity history, right?, on a mobile device. Because it’s tabular data, but on a mobile device, it’s tables. That gets really weird. How do you display that? And several times, the option came up, We just shouldn’t let the user see this because the screen size is too small. And I would always say no, we cannot do that. We can’t do that because screen size should not limit a user’s ability to view this important tabular data. We should present the table in a different way. Because we don’t get to decide what device our user gets to use in order to interact with this feature. That’s not really a fair thing.

我倾向于认为这是一个不好的选择。 在我的工作中，这是一个完美的例子：最近，我们正在研究如何在移动设备上确定活动历史记录的大小，对吗？ 因为它是表格数据，但在移动设备上是表。 真是奇怪。 您如何显示？ 有好几次，这个选项出现了， 我们只是不应该让用户看到它，因为屏幕尺寸太小了。 我总是会说不，我们不能这样做。 我们之所以不能这样做，是因为屏幕大小不应限制用户查看此重要表格数据的能力。 我们应该以其他方式显示表格。 因为我们无法决定用户要使用哪种设备才能与该功能进行交互。 那不是真正的公平。

David:大卫：

No, certainly it’s not fair to the user, and it depends on the marketing goals of the product. I mean, this kind of gets back to the dark patterns, where it’s a question of whether or not we want to encourage users to use one device over another by making the experience on one device handicapped. Making it more difficult.

不，当然这对用户不公平，这取决于产品的营销目标。 我的意思是，这种方式又回到了黑暗的模式，这是一个问题，我们是否要鼓励用户通过使一台设备上的残障体验来鼓励用户使用一台设备而不是另一台设备。 使其更加困难。

Tim:蒂姆：

I never think that’s a fair thing to try. Specifically because, what if I can only afford a mobile phone and I can’t afford a second computer? Or, I’m living in an area where the infrastructure for, I guess, cables — is that how the internet works? I should probably know! — isn’t there.

我从不认为这是公平的尝试。 特别是因为，如果我只能买得起手机而买不起第二台电脑怎么办？ 或者，我住在一个我想可以用来连接电缆的基础设施的地区，那是互联网的工作方式吗？ 我应该知道！ —不在那里。

David:大卫：

It’s tubes, Tim. It’s tubes.

是管子，蒂姆。 是管子

Tim:蒂姆：

Right, right. But the 3G infrastructure is, and so, everybody uses mobile phones. Making that sort of call, sitting in a nice office in New York or San Francisco or wherever you happen to be, when you have access to both of those things — I don’t think that’s a fair assumption to make.

是的是的。 但是3G基础设施如此，每个人都在使用手机。 当您可以访问这两种东西时，坐在纽约或旧金山的一个不错的办公室中，或者碰巧碰到任何地方，进行这样的呼叫-我认为这并不是一个公平的假设。

David [32:00]:大卫[32:00] ：

Dare I say that you might be able to sell your advertisers on the fact that our users tend to be people that have higher-end devices and live in places with higher bandwidth. So your ads aren’t going to be clicked on by people who can’t afford your product. That’s just evil.

敢于说，您可能可以出售您的广告客户，因为我们的用户往往是拥有高端设备并生活在带宽较高的地方的人。 因此，买不起您产品的人不会点击您的广告。 那只是邪恶。

Tim:蒂姆：

That is pretty evil.

那真是邪恶。

But, I mean, if you think of a product like Wikipedia, for example, you can learn how to perform an appendectomy on Wikipedia, which in some cases, might be life saving information, right? If Wikipedia decided that you have to download the Wikipedia app to view appendectomy information on your phone, that would really suck. For some people. There’s probably someone out there who has performed an appendectomy based off Wikipedia information.

但是，我的意思是，例如，如果您考虑使用Wikipedia这样的产品，则可以学习如何在Wikipedia上进行阑尾切除术，在某些情况下，这可能是挽救生命的信息，对吗？ 如果Wikipedia决定您必须下载Wikipedia应用程序才能在手机上查看阑尾切除术的信息，那确实很糟糕。 对于有些人。 可能有人根据Wikipedia信息进行了阑尾切除术。

David:大卫：

Probably.

大概。

Tim:蒂姆：

I mean, I hope not. That situation had to have arisen.

我的意思是，我希望不会。 这种情况一定已经出现。

David:大卫：

Yep, and to shout out to Hampton Catlin, one of the guys we interviewed a while back, who was the person who designed Wikipedia mobile.

是的，然后向汉普顿·卡特林大喊大叫，这是我们前一段时间采访的人之一，他是设计Wikipedia移动版的人。

Tim:蒂姆：

Yeah, and thank goodness he did it correctly. Because I would think that’s the perfect use case for why you shouldn’t take away core functionality based on the size of the device.

是的，谢天谢地，他正确地做到了。 因为我认为这是一个完美的用例，说明了为什么不应该根据设备的大小占用核心功能。

David:大卫：

Mm-hmm ([affirmative]), and a perfect example of responsive design.

Mm-hmm( [肯定] )，以及响应式设计的完美示例。

---

---

Tim:蒂姆：

Well, thank you so much for listening, everybody. We always 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 to let us know how we’re doing.

我们还要感谢SitePoint.com以及我们的制作人Adam Roberts和Ophelie Lechat，以及Ralph Mason的制作帮助。 请随时在Twitter( @versioningshow)上向我们发送您的评论，并在iTunes上给我们评分 ，让我们知道我们的情况。

Tim:蒂姆：

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

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

翻译自: https://www.sitepoint.com/taking-responsive-web-design-beyond-the-visual/

响应式web设计