前端设计 响应式设计
介绍 (Introduction)
In this article I want to share my thoughts regarding responsive design. I made several talks on this subject and this post is some kind of summary. The article presents concepts like mobile first and design in the browser.
在本文中，我想分享我对响应式设计的想法。 我就此主题进行了几次演讲 ，而这篇文章是某种总结。 本文介绍了诸如移动优先和浏览器设计之类的概念。
什么是响应式网页设计 (What is responsive web design)
Scott Kellum said something which I think describes the responsive design perfectly:
Scott Kellum说了一些我认为可以完美描述响应式设计的内容：
Responsive web design isn't your site working on phones and tablets. It's about your site working everywhere.
自适应网页设计不是您的网站在手机和平板电脑上运行。 关于您的网站无处不在。
Nowadays there are dozen of mobile devices, a lot of different resolutions and still several browsers. It's kinda wrong to make design based on specific device or resolution. Which means that it's wrong to equal responsive with mobile, phone or tablet design. Responsive design means building something today and be sure that it works tomorrow. The applications which we are working on should adapt to the environments which they are placed in. If they not, then your job is not done. I think that responsive design is not only how your site looks like. The usage of content delivery networks to serve the needed javascript libraries is also responsive approach. A lot of experts said that the responsive design starts initially on the server. I'm willing to agree with that.
如今，有数十种移动设备，许多不同的分辨率以及几种浏览器。 根据特定设备或分辨率进行设计有点不对。 这意味着在手机 ， 手机或平板电脑设计上做出相等的响应是错误的。 响应式设计意味着今天就构建某些东西，并确保明天就可以使用。 我们正在处理的应用程序应该适应放置它们的环境。如果没有，那么您的工作就无法完成。 我认为响应式设计不仅是您网站的外观。 使用内容交付网络来服务所需的javascript库也是一种响应方法。 许多专家表示，响应式设计最初是在服务器上开始的。 我愿意同意这一点。
工具 (The tools)
Like every new thing, responsive design is not something that you can jump in for just a hour. The good news is that you are already doing it :) Every time when you use percentages for your containers or use media queries you are basically making responsive design.
像每一个新事物一样，响应式设计不是您一个小时就能跳入的东西。 好消息是您已经在这样做了：)每次在容器中使用百分比或使用媒体查询时，基本上都是在进行响应式设计。
In general there are three instruments which we can use to achieve responsiveness:
通常，我们可以使用三种工具来实现响应能力：
- Flexible layouts - i.e. your containers should use percentages and they should scale, reorganize, show or hide based on your content or design ideas. 灵活的布局-即您的容器应使用百分比，并且它们应根据您的内容或设计思路进行缩放，重组，显示或隐藏。
- Flexible images and medias - your images and media should be resized, so the user could see them properly on the different devices 灵活的图片和媒体-您应调整图片和媒体的大小，以便用户可以在其他设备上正确看到它们
- Media queries - very often the people equal media queries with responsive design. But they are just tool for reaching the goal. I.e. applying different css styles based on specific conditions. 媒体查询-人们通常将响应式设计等同于媒体查询。 但是它们只是实现目标的工具。 即根据特定条件应用不同CSS样式。
为什么我们应该关心响应能力 (Why we should care about the responsiveness)
I don't think that I have to convince you to make your site/application responsive. We are living in an interesting times. There are new devices coming almost every week. All of them with different capabilities, but they have one common thing - the people use them to browse the web. As you can see on the picture below the number of mobile internet users increases very fast. The responsive design became so popular mainly because the needs of all those users. They want to use your service on the desktop computer at home, on the tablet in the train or via his phone in the bus. They just want to reach your content no matter how and when.
我认为我不必说服您使您的网站/应用程序具有响应能力。 我们生活在一个有趣的时代。 几乎每周都有新设备问世。 它们都具有不同的功能，但是它们有一件共同的事-人们使用它们来浏览Web。 如下图所示，移动互联网用户的数量增长非常快。 响应式设计如此流行，主要是因为所有这些用户的需求。 他们想在家里的台式计算机，火车上的平板电脑或公共汽车上的电话上使用您的服务。 他们只是想无论何时何地都可以到达您的内容。
The main function of the Web is to deliver information to the users. No one likes to see broken pages. And if your site is not made with this in mind then very soon you will find out that it's not looking good on the new iPad6. Even, from a business point of view, it's not very efficient/cheap to develop different versions for the mobile or desktop users. You should build one application for all the cases.
Web的主要功能是将信息传递给用户。 没有人喜欢看到破碎的页面。 而且，如果您的网站没有考虑到这一点，那么很快您就会发现，在新的iPad6上效果并不理想。 即使从业务角度来看，为移动或台式机用户开发不同版本也不是很有效/便宜。 您应该为所有情况构建一个应用程序。
那么，谁应对所有这些响应性的疯狂..移动网络负责 ？ (So, who is responsible for all this responsive craziness .. the Mobile Web?)
Actually the answer is no. We changed our vision about the web, because the highlighted unknowns. I heard several times designers saying:
其实答案是否定的 。 我们改变了对网络的看法，因为突出显示了未知数。 我多次听到设计师说：
How to web design when I don't know the the resolution, the browser's capabilities and internet connection speed.
不知道分辨率，浏览器功能和互联网连接速度时如何进行网页设计。
The truth is that we never knew all those things. We build tools which only assume what we are designing for. I was nicely surprised by the talk of Jeremy Keith. It's called There is no Mobile Web and I strongly recommend to watch it. I also totally agree with him that we have only one Web. Every device has a browser and this browser makes http requests, it fetches html, css, javascript and images. It processes them, it still reacts to clicks and selections. Yes, the input is different, but it still does the same job on every device - it shows content. There is something fundamentally wrong with how the web designers think nowadays. I think that they should be more web then designers. The good web design is not an art. It's a problem solver and has a function. It communicates with the users and adds value to the entire user experience.
事实是，我们永远都不知道所有这些事情。 我们构建的工具仅假设我们正在设计。 我是很好用惊讶谈话的杰里米·基思 。 它被称为“ 没有移动网络” ，我强烈建议您观看它。 我也完全同意他的看法，我们只有一个Web。 每个设备都有一个浏览器，该浏览器发出http请求，并获取html，css，javascript和图像。 它处理它们，仍然对单击和选择做出React。 是的，输入是不同的，但是在每台设备上它仍然执行相同的工作-它显示内容。 当今的网络设计师的思维方式存在根本性的错误。 我认为他们应该是更多的网络 设计师 。 好的网页设计不是一门艺术。 它是一个解决问题的人，并且具有功能。 它与用户沟通，并为整个用户体验增加价值。
所以呢？ (So ... what?)
It's time for change. There is no way to adapt to the new requirements without evolution. Evolution of our workflow and tools. Sometimes it's a little bit difficult to leave your favorite tool or change the way of how you do your job. Of course, you are free to choose, but I think that the change will come sooner or later. So, you better make this steps now.
现在是时候改变了。 没有发展，就无法适应新的需求。 我们的工作流程和工具的演变。 有时，离开您喜欢的工具或更改工作方式有点困难。 当然，您可以自由选择，但是我认为这种改变迟早会出现。 因此，您最好立即执行此步骤。
工作流程 (Workflow)
The first step is to change your workflow. The picture below shows a typical one:
第一步是更改您的工作流程。 下图显示了一个典型的图片：
The team receives the brief and makes wireframes. If you are lucky, you have a good document describing the product. The document is passed to the designer and he starts designing in his favorite graphic software - usually Photoshop or Fireworks. Very soon he produces the first layouts - static images which he sends to the client. Of course the client has something else in mind and there are few revisions till the design is approved. When this is done the layouts are send to the front-end developer, which uses his magical skills and transforms the images to good looking perfect pixel html/css pages. The next tasks are reserved for the back-end developer who adds the business logic. We all know the problems of this workflow and I'll mention some of them later.
团队收到简要说明并制作线框。 如果幸运的话，您将拥有一份描述产品的良好文档。 该文档被传递给设计师，他开始使用自己喜欢的图形软件-通常是Photoshop或Fireworks进行设计。 很快，他就产生了第一个布局-将静态图像发送给客户。 当然，客户还有其他想法，在批准设计之前几乎没有任何修改。 完成此操作后，会将布局发送给前端开发人员，该前端开发人员将使用其神奇的技能并将图像转换为外观精美的完美像素html / css页面。 接下来的任务保留给添加业务逻辑的后端开发人员。 我们都知道此工作流程的问题，我将在后面提到其中的一些问题。
After two experiments, a lot of read articles and watched screencasts I could define the responsive design workflow like that:
经过两次实验，阅读了大量文章并观看了截屏视频，我可以这样定义响应式设计工作流程：
It still starts with a brief, but it is followed by a good plan and good content inventory. By content inventory I mean a clear idea of what information should be published. It will be good if you have texts and images which will be used in the real application. The next step is to create the text design. I.e. to put the content in a simple text file or better in markdown document. It will be good if you define some titles, subtitles, paragraphs and set the images to their places. It is clear that you can't create the text design without to know something. I always said that the content should lead the design, not opposite. I saw how designers take decisions based on the good looking layout or graphics while they have to make design based on the content. I bet you that you have client, which said:
它仍然从简短开始，但随后是一个良好的计划和良好的内容清单 。 内容清单是指应该发布哪些信息的清晰思路。 如果您有在实际应用程序中使用的文本和图像，那将是很好的。 下一步是创建文本设计。 即将内容放在简单的文本文件中，或者放在markdown文档中更好。 如果您定义一些标题，字幕，段落并将图像设置在它们的位置，那将是很好的。 显然，您不知道某些内容就无法创建文本设计。 我总是说内容应该主导设计，而不是相反。 我看到了，而他们根据内容进行设计的设计师如何利用基于好看的布局或图形化的决定。 我打赌你有客户，说：
Right now, I don't know what to put in the site ... just create something cool.
现在，我不知道该在网站中放置什么...只是创造一些很棒的东西。
If your company follows responsive design workflow you will be able to say NO and wait till you receive enough information about the project.
如果您的公司遵循响应式设计工作流程，则可以说“ 不” ，等到收到有关该项目的足够信息。
Once the text design is finished you could continue with prototyping. I.e. you start designing in the browser by using HTML and CSS. Of course for the complex graphics, software like Photoshop is more appropriate. Two things should be done during the process of design. The first one is to test your prototype in different devices. The second one is to ask the client for opinion. By doing this you will get immediate feedback and avoid the big
文字设计完成后，您可以继续进行原型设计。 也就是说，您开始使用HTML和CSS在浏览器中进行设计。 当然对于复杂的图形，像Photoshop这样的软件更合适。 在设计过程中应该做两件事。 第一个是在不同的设备中测试您的原型。 第二个是要求客户提出意见。 这样，您将立即获得反馈并避免大笔费用
No, I don't like it. Start over again.
不，我不喜欢。 重新开始。
At the end but not least is the fact that you skip the front-end slicing. I.e. once the design is done you actually have the HTML+CSS pages. This could be send directly to the back-end developer for business logic implementation.
最后但并非最不重要的是您跳过了前端切片这一事实。 即，一旦设计完成，您实际上就有了HTML + CSS页面。 这可以直接发送给后端开发人员以进行业务逻辑实现。
The next graphic shows the both workflows next to each other with their differences.
下图显示了两个工作流程彼此之间的区别。
The first thing that you will notice is that the old workflow could start with a blank page while the responsive design workflow requires content. In the typical approach the client reviews the created static images, approves them and after the slicing he again sees the design, but in a different place - in the browser. In most of the cases the client and even the designer finds problems which weren't visible on the static images. And that's because till then they see only static layouts without any real interaction.
您会注意到的第一件事是，旧的工作流程可能以空白页开始，而响应式设计工作流程需要内容。 在典型方法中，客户检查创建的静态图像，批准它们，并在切片后再次在浏览器中的另一个位置看到设计。 在大多数情况下，客户甚至设计师都会发现静态图像上不可见的问题。 这是因为在此之前，他们只能看到静态布局，而没有任何真正的交互。
On the picture, the whole content is visible, but in the browser you need to scroll down to see everything. I.e. there is a good amount of content below the fold. This brings different perspective and could lead to reorganization of the whole layout.
在图片上，整个内容都是可见的，但是在浏览器中，您需要向下滚动以查看所有内容。 也就是说， 折页之下有很多内容。 这带来了不同的观点，并可能导致整个布局的重组。
- The containers with dynamic content doesn't look good when you have too much or too little text 当文本太多或太少时，具有动态内容的容器看起来并不理想
- The fonts may look different 字体可能看起来有所不同
And these are only three of the common issues. What if you have ten or more problems to solve. It looks like you are making the design twice.
这些只是三个常见问题。 如果您要解决十个或更多个问题怎么办。 看来您要进行两次设计。
In the other workflow the client is involved in the design process all the time. Everything is happening in the browser - the media which the final product will be placed in. There are a lot of answers coming from this. Problems like elements priority, layout organization, browser bugs are solved in the early stage. Your application lives in the browser and you can interact with it. You are able to see the elements' animations, the transitions, the hover effects. Pretty much everything, which is part of the final pages. While in the old workflow all those things are left to the imagination, which is kinda risky because the client is not thinking the same way as you do.
在其他工作流程中，客户始终参与设计过程。 一切都在浏览器中进行-最终产品将放置在该媒体中。由此产生了很多答案。 诸如元素优先级，布局组织，浏览器错误之类的问题在早期得到解决。 您的应用程序位于浏览器中，您可以与其进行交互。 您可以看到元素的动画，过渡，悬停效果。 几乎所有内容都在最后几页中。 在旧的工作流程中，所有这些事情都留给了想象力，这有点冒险，因为客户的想法与您的想法不同。
移动优先 (Mobile first)
Mobile first concept brings the idea to start designing from lower resolution to higher. Maybe it looks strange, but once you start working like that you will realize how many benefits it has.
移动优先概念带来了从较低分辨率到更高分辨率开始设计的想法。 也许看起来很奇怪，但是一旦您开始那样工作，您将意识到它有多少好处。
移动优先应该被称为内容优先，关注优先或性能优先。 (Mobile first should be called content first, focus first or performance first.)
Why I'm saying this? First, because the word mobile doesn't fit very well. I believe that the responsive design is not device related. It's something that you do to make your application works everywhere. Second, because when you have only 320px by width you really don't have enough space for everything. You start thinking about priorities, what is more important or less. You are designing from content out. You are shifting the focus to just a few target points. And as you may notice later, those points are actually the key moments of your site. At the end but not least you're thinking more about the performance of the application. By using mobile first concept you start from something small and build over it. While, if you start from the higher resolution version you will have to remove elements - degradation.
为什么我这么说呢？ 首先，因为“ 移动”一词不太适合。 我相信响应式设计与设备无关。 您要做的是使您的应用程序在任何地方都可以运行。 其次，因为当您只有320px的宽度时，您实际上没有足够的空间容纳所有内容。 您开始考虑优先事项，或者更重要或更重要。 您正在从内容设计。 您正在将重点转移到仅几个目标点。 稍后您可能会注意到，这些要点实际上是您网站的关键时刻。 最后但并非最不重要的一点是，您正在考虑更多有关应用程序性能的问题。 通过使用移动优先概念，您可以从较小的东西开始并在其之上进行构建。 同时，如果您从较高分辨率的版本开始，则必须删除某些元素-降级。
革新 (Innovation)
Mobie first put some interesting cards on the table. One of the most creative solutions in the design are born, because of the constraints. The lack of space on the mobile devices was the reason for all those innovative types of navigation. The small screen encourage you to think out of the box and find new ways to present the information. It's a new thing to fight with and makes your job a little bit more interesting.
Mobie首先在桌子上放了一些有趣的卡片。 由于种种限制，设计中最具创造力的解决方案之一诞生了。 移动设备上缺少空间是所有这些创新的导航类型的原因。 小屏幕鼓励您跳出框框思考，并找到新的方式来显示信息。 这是一件新鲜事，使您的工作变得更加有趣。
要考虑的事情 (Things to consider)
You should definitely change your usual layout organization. Even your markup needs some changes, because when you increase the resolution your content should be transformed. Some elements will be added, others removed or scaled. You will see that if you want to do such things the HTML should be properly structured.
您绝对应该更改您通常的布局组织。 甚至您的标记也需要进行一些更改，因为当您提高分辨率时，您的内容应该进行转换。 一些元素将被添加，其他元素将被删除或缩放。 您将看到，如果要执行此类操作，则应正确构造HTML。
Put your content over the navigation. It's much more important to deliver the needed information to the users. It's better to show some content instead to use half of the viewport for buttons.
将您的内容放在导航上。 向用户提供所需的信息更为重要。 最好显示一些内容，而不是将视口的一半用于按钮。
Remember that the input is different nowadays. The devices support touch and gestures. It's not only the keyboard or the mouse. For example, on the phones the lower right corner is one of the most used area.
请记住，如今的输入有所不同。 设备支持触摸和手势。 不仅是键盘或鼠标。 例如，在电话上，右下角是使用最多的区域之一。
不只是你 (It's not only you.)
Don't think that mobile first is an exotic concept. Many of the big companies uses this approach.
不要以为移动优先是一个陌生的概念。 许多大公司都使用这种方法。
The simple guideline is whatever you are doing—do mobile first/ Google Chairman Eric Schmidt /
简单的指导方针就是您正在做的事-首先行动起来/ Google董事长埃里克·施密特(Eric Schmidt)/
We're just now starting to get into mobile first and then web second for a lot of our products. What we're finding is that the designers on mobile are really embracing the constraints [and] that it's actually teaching us a lot about how to design back to the desktop. / Kate Aronowitz, Facebook's Director of Design /
对于许多产品，我们现在才刚开始进入移动领域，然后是网络。 我们发现，移动设计人员确实在接受这些约束，并且实际上在教会我们很多有关如何设计回桌面的知识。 / Facebook设计总监Kate Aronowitz /
We really need to shift to think about mobile first....This is a bigger shift than we saw with the personal computing revolution/ And Kevin Lynch, Adobe's CTO /
我们确实需要先考虑移动。...这比我们在个人计算革命中所看到的更大的变化/和Adobe的CTO Kevin Lynch /
在浏览器中设计 (Designing in the browser)
Web applications run in the browser. Why not make the design there. It's actually a little bit strange that we didn't think about this earlier. Maybe, because the browsers weren't so helpful, but today they have a lot of tools. For example the Chrome's Dev Tools panel contains a bunch of useful instruments like DOM inspector or CSS editor. So, it's not only a software for browsing, but it takes a good place in our daily work as web developers.
Web应用程序在浏览器中运行。 为什么不在那里进行设计。 实际上，我们之前没有考虑过这一点，这有点奇怪。 也许是因为浏览器不是那么有用，但是今天它们有很多工具。 例如，Chrome的“开发工具”面板中包含许多有用的工具，例如DOM检查器或CSS编辑器。 因此，它不仅是浏览软件，而且在我们作为Web开发人员的日常工作中占据了重要位置。
There are several things which I notice using the browser for design. First of all, it will be nice to use Markdown for your text design. It's because it could be easily translated to HTML. It saves you some time in writing markup.
使用浏览器进行设计时，我需要注意几件事。 首先，将Markdown用于文本设计会很好。 这是因为它可以轻松转换为HTML。 它为您节省了编写标记的时间。
You should consider the usage of some template language. If the project is big you will have a lot of prototypes and there should be any way to divide your HTML to small partials and reuse them. Also, if you need to change something you will do it only once, not repeating the same change in dozen of files. It will be good if the template engine doesn't involve any server-side language. Otherwise the designer should install additional things which will make the process complex.
您应该考虑使用某些模板语言。 如果项目很大，您将有很多原型，应该有任何方法可以将HTML分成小部分并重复使用。 另外，如果您需要更改某些内容，则只能执行一次，而不会在多个文件中重复相同的更改。 如果模板引擎不涉及任何服务器端语言，那将是很好的。 否则，设计人员应安装其他东西，这将使过程变得复杂。
Use CSS preprocessors like SASS or LESS. I think that this is mandatory. Without them you will have to write a lot of CSS. As a designer that's what you will do most and should be painless.
使用CSS预处理器，例如SASS或LESS 。 我认为这是强制性的。 没有它们，您将不得不编写很多CSS。 作为设计师，这是您最要做的事，应该毫不费力。
In order to present your ideas some JavaScript knowledge is required. There is no need to be a guru and use Backbone or Angular. Knowing of click handling and adding/removing CSS classes is enough.
为了表达您的想法，需要一些JavaScript知识。 无需使用专家或使用Backbone或Angular即可 。 了解点击处理以及添加/删除CSS类就足够了。
技术提示 (Technical tips)
Keep your HTML markup as simple as possible. You will get a chance to add new elements very soon. No need to add things just because you think that you will need them later.
保持HTML标记尽可能简单。 您将有机会很快添加新元素。 无需仅仅因为您认为以后需要它们就可以添加东西。
Use media queries bubbling. Most of the CSS preprocessors support it. For example:
使用媒体查询冒泡。 大多数CSS预处理器都支持它。 例如：
header {
width: 120px;
font-size: 20px;
}
...
@media all and (min-width: 480px) {
header {
width: 180px;
font-size: 26px;
}
}
Could be transformed to:
可以转换为：
header {
width: 120px;
font-size: 20px;
@media all and (min-width: 480px) {
width: 180px;
font-size: 26px;
}
}
Yes, it could lead to a little bit more writing, but it separates your elements in blocks. Also it's much more readable. It is also a good idea to distribute the main application's parts in different files. If they have meaningful names then the process of editing will be pleasant.
是的，这可能会导致更多的编写，但会将您的元素分成块。 而且它更具可读性。 将主应用程序的各个部分分发到不同的文件中也是一个好主意。 如果他们有有意义的名字，那么编辑过程将会很愉快。
缺点 (Drawbacks)
Of course designing in the browser has its own disadvantages.
当然，在浏览器中进行设计有其自身的缺点。
Designers should learn HTML, CSS and javascript. And many of them don't want to do that. It's really easy to pick up the move tool in Photoshop and rearrange several images, but in CSS this could be challenging.
设计师应学习HTML，CSS和javascript。 他们中的许多人不想这样做。 在Photoshop中拾取移动工具并重新排列几张图像确实很容易，但是在CSS中这可能是一个挑战。
- Limit your creativity - sometimes, there are design decisions which could not be made directly with CSS. However I think that for those cases a graphic software could be used. 限制您的创造力-有时，有些设计决策无法直接使用CSS做出。 但是我认为对于这些情况，可以使用图形软件。
结论 (Conclusion)
John Allsopp wrote an article back in April 2000. The post in A List Apart acts as a manifesto for many designers and developers. He said:
John Allsopp早在2000年4月就写了一篇文章 。A List Apart中的帖子是许多设计师和开发人员的宣言。 他说：
The web's greatest strength, I believe, is often seen as a limitation, as a defect. It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all./ A Dao of Web Design (April 07, 2000) /
我认为，网络的最大优势通常被视为一种局限，是一种缺陷。 网络的本质是具有灵活性，应该作为设计人员和开发人员担当这种角色，以拥抱这种灵活性，并制作出可以被所有人访问的页面。/ 网络设计的道(4月7日， 2000) /
The roots of web design are in the print design. However it's a complete new media and our role is to keep the good parts, use what we can and start thinking differently. Adapt to the new environment where our work exists.
网页设计的根源在于印刷设计。 但是，这是一种全新的媒体，我们的作用是保留良好的组成部分，尽我们所能，并开始以不同的方式思考。 适应我们工作所在的新环境。
资源资源 (Resources)
前端设计 响应式设计
扫一扫
465
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
