在一周内建立响应式网站:响应式设计(第1部分)

  • 所需知识:中级CSS和HTML
  • 要求:文本编辑器,现代浏览器,图形软件
  • 项目时间:1小时(共5小时)
  • 支持文件

现在似乎每个人都在谈论响应式网页设计,并且有充分的理由;随着支持Web的设备数量的不断增长 - 每个设备都具有不同的功能和特性 - 构建固定宽度的网站已不再合理。

事实是,它从来没有。然而,到目前为止,设计体验的最佳实践被认为是做出了许多假设,无论是屏幕分辨率,带宽还是输入法。如果您曾经设计过一个960px宽的网站,只能在朋友的小屏幕上网本上查看(是的,我在这里写的是痛苦的经历),您就会明白为什么这不是一个特别聪明的方法。现在,随着智能手机和平板电脑的融合,很明显我们的传统方法不再适用于目的。

值得庆幸的是,CSS媒体查询的出现以及人们越来越认识到网络本身就是一种媒介,这意味着我们开始接受平台的本质,接受它的普遍性是一种力量,而不是弱点。

在接下来的五天里,我将引导您完成一项识别这一事实的技巧: 响应式网页设计。由开发Ethan Marcotte,它结合了流畅的布局,灵活的图像和媒体查询,帮助我们构建优雅适应他们遇到的任何环境的网站。

我将通过向您展示如何构建一个简单的媒体库来演示这种方法。在我的例子中,我将创建一个小型网站来记录我最近在美国进行的一次公路旅行,但可以随意定制代码和设计以满足您自己的需求。

01.为未知设计

本教程的大部分内容都围绕响应式设计的开发方面。但在我们深入研究任何代码之前,让我们花点时间思考如何设计一个可以想象拥有无限布局的网站。

现在,我很幸运,因为我可以设计界面开发使其成为现实的前端代码。当然,这不是一项独特的技能 - 如果你为自己工作,那么你可能也是如此。但是,在制作流体设计时理解内容如何适应和回流当然是有利的。

我也是一个更大团队的一员,我的角色更专业。在这样的环境中,视觉设计师可以专注于将线框转换为有吸引力的,引人注目的(签名,像素完美)组合。开发人员分开定位并将这些布局转换为精简高效的标记和CSS并不罕见。

然而,一旦我们开始评估设计如何适应不同的环境,这种线性和隔离的工作流程就会迅速崩溃。与任何新工具或技术一样,我们也应该这样做考虑更多协作和敏捷的工作方式。设计响应式网站时遇到的许多最棘手的问题只需通过对话,实验和迭代即可解决。

02.务实的设计方法

这并不是说设计师无法考虑设计如何在任何特定设备的范围之外工作。

Clearleft,我们从桌面的角度启动视觉设计。我们首先定义一种总体设计语言和视觉美学,通常基于核心内容进行初步探索。例如,如果我们正在设计食品网站,我们将从食谱页面开始;新闻网站,故事页面。

这不仅是网站上的一个重要页面,而且它可能包含足够的结构化内容供我们构建印刷调色板。我们还会考虑布局如何适应 - 即使在这个阶段它只是在我们的脑海中。

For our media gallery example, I started by looking at the requirements of the media item page. Once I was happy with the grid, type and visual treatment, I moved on to the design of the homepage

对于我们的媒体库示例,我首先查看了媒体项目页面的要求。一旦我对网格,类型和视觉处理感到满意,我就转向了主页的设计。

对设计进行压力测试的一种有用方法是采用这样的页面并使其适应较窄(~320px宽)的屏幕。您可能会发现设计的某些方面需要重新考虑才能在这个宽度上工作。这里有些例子:

  • 印刷术:大标题可以在更宽的布局上很好地工作,但是在较小的屏幕上,它们会占用大量的垂直空间,因此需要额外的滚动。随着线长的改变,您应该考虑线高和其他印刷处理。
  • 链接:您的设计如何在触摸屏设备上运行?虽然我们还没有简单的方法来检测这些(意味着我们应该在设计的各个方面考虑到触摸),但设计更窄的屏幕可以让我们有机会思考链接和其他交互元素的目标区域。 IOS指南建议这些至少为44像素/点平方,这是一个很好的目标。
  • 导航:这可能是任何响应式设计中最尴尬的组件,特别是如果您的站点有许多部分和深层次结构。布拉德弗罗斯特写道一些不同的导航方法的摘要目前正在考虑中。
  • 多余的内容:是否有些内容不需要?是否只需要在某些场景中显示其他内容?我并不主张基于用户碰巧使用的设备来隐藏内容,但是条件加载(我们将在本周晚些时候看到)等技术可以帮助我们提供仅在需要时加载补充内容的较小页面。

Creating a narrower layout helps us stress test a design

创建更窄的布局有助于我们对设计进行压力测试。

设计两个对比的布局强化了设计将适应的想法,同时尽早解决潜在的问题。虽然这听起来像是工作量翻倍,但请记住,我们并没有将每个页面设计为像素完美的精度。相反,我们专注于构建可扩展的设计语言 - 一种在我们开始在代码中实现它时会发展的语言,以及一种基于单个模块和组件的语言。

03.成为布局不可知

不出所料,对于历史上将网络视为印刷品的行业而言,固定宽度布局已经渗透到我们生产的许多可交付成果中。当我们开始设计适应性介质时,正在考虑新的方法,使我们能够在承认介质的流动性的同时解决问题并交流想法。以下是我的一些最爱:

  • 页面描述图:虽然线框通常意味着布局(因此假定某种类型的设备),页面描述图删除此假设,而是描述按优先级排列在文档中的各个组件。
  • 款式瓷砖:在与客户沟通设计理念时,我们可以发现自己网站绘画”。如果我们不小心,客户会正确地要求查看演示设计在其他设备上的外观的概念。这可能迫使我们陷入不可持续的情况,即为多个设备生成多个页面。萨曼莎沃伦已经考虑过这个问题并提出来风格瓷砖。这些介于两者之间情绪板(但不那么模糊)和完全实现的comps(但不太精确),并帮助我们沟通排版,按钮样式和标头处理。他们还鼓励与客户进行更成熟的讨论。
  • 动员设计游戏:在协作设计研讨会期间,此练习可以很好地工作。在本练习中,每个人都在Post-it上记下可能出现在某个页面上的元素。然后按照重要性将它们粘在墙上,好像它们在移动电话上出现线性化。由此产生的讨论可能产生一些令人惊讶的结论例如,您可能会意识到导航不是页面上最重要的组件。这可以贯穿到设计中,页面顶部的跳过链接链接到页脚中的导航。

In thinking about the design of the media item page, I used the mobilify design game to think about what elements needed to be shown and their priority on the page

在考虑媒体项目页面的设计时,我使用了mobilify设计游戏来思考需要显示哪些元素以及它们在页面上的优先级。

当然,我们已经在使用的工具仍有空间,但在广泛设计网站时,我们需要牢记布局不再是众所周知的。

04.逐步编码

值得庆幸的是,我们不需要担心我们正在努力的示例中的视觉设计,因为我们已经为此付出了艰苦的努力!相反,我们可以专注于将我们的设计编码为完全响应的网站。

在我们开始之前还有一件事。重要的是要记住我们正在使用的媒介的基本原则:普遍性。这意味着不仅要构建当今支持Web的设备,还要确保与昨天和明天的设备兼容。约翰·奥尔索普在他的文章中描述了为什么这个原则很重要接下来的60亿

“接下来的60亿是印度农村,非洲,中国的儿童,在那里,电力供应和网络可能是断断续续的。在苏门答腊有十年历史的温特尔盒子。有人说几百种不同的语言,有几十种不同的语言写作系统。这是家庭中第一个能够读写的人。全世界20%的人都无法阅读或写作。但是。

我们可以通过查看我们专业中不同的时尚(想要更好的词汇)来追踪我们对网络的理解:网络标准,可访问性,不引人注目的JavaScript ......所有这些都是同一主题的变体:渐进增强。响应式网页设计也是如此。建立一个响应式网站是建立一个不仅向后兼容的网站,而且未来友好太。

05.潜入加价

好的,足够的序言,是时候打开文本编辑器了。我们的设计师为我们提供了一个面向桌面的设计,并且非常友好地提供了如何在更窄的视口中出现的示例。

将它们单独编码可能很诱人,但我会提出一个不同的方法。通过将构成设计的单独组件(或模式)放置到单个页面上,我们可以创建模式组合。这允许我们在任何页面布局的范围之外开发组件,并且稍后将为我们提供某些回归测试的参考。让我们在几个不同的设备中查看初始标记:

查看我们标记的模式组合

好吧,我会被诅咒 - 我们已经有一个响应网站!我们的内容适应每个设备的限制,无论是花哨的新iPad还是丢弃的功能手机。它甚至可以在像Lynx这样的纯文本浏览器中运行。

由于普遍性的基本原则,网络是默认响应。这很好,但这也意味着我们从现在开始对代码所做的任何事情都可能会损害这种本机适应性。

明天:我们将谨慎行事并开始应用响应式设计的第一个方面:排版和流体网格。

保罗是一位总部设在英国布莱顿的互动设计师。在制作简单但引人入胜的网络原生界面时,他最开心。

话题

CSS