谷歌 Web 开发最佳实践手册(0.1):让网站自适应

【伯乐在线提示】:① 5月6日,谷歌开发者中心推出了一个 Web 开发最佳实践手册。伯乐在线资源频道摘编该资源后,已邀请一些关注 Web 开发的朋友参与翻译手册。② 由于译者朋友几乎都是已在职,都是在工作之余参与,每位的翻译进度会不一样(请理解),所以手册中文版不会按照英文版章节顺序发布。③ 手册中文版尚不完整,请不要转载,谢谢合作。

【导读】:网页可以通过大量不同类型设备上进行访问,这些设备小到手机,大至电视。每种设备既有各自的独特优点,又有自身的限制。作为一个web开发者,你的程序应该支持所有类型的设备。

本课内容:

  • 添加一个视口(viewport)
  • 使用简单的样式
  • 设置首个临界点
  • 限制设计界面的最大宽度
  • 改变内边距和减少文本尺寸
  • 调整元素以适应宽视口
  • 结束语

我们着手建立一个网站,可以运行于多尺寸屏幕、不同类型设备上。在前一篇文章中,我们精心构建了网页的信息架构,创建了一个基本结构。在本指南中,我们将结合基本结构与内容,把它制作成一个漂亮的网页,可自适应不同的屏幕尺寸。

ContentDesigned site

内容和架构                                                              最终成品

 

 

根据“移动优先”(Mobile First)的web开发原则,我们从窄视口开始 — 类似于手机 — 并首先形成经验。然后,我们扩展至更大的设备类。我们可以使视图变得更宽,判断设计、布局是否合适。

早些时候,我们创建几个不同的高层次设计,解决如何显示我们的内容。现在,我们需要让页面适应这些不同的布局。我们是这样做的:基于内容适应屏幕大小,决定临界点的位置 — 布局和样式发生改变的一个值点。

简而言之

  • 总是使用视口
  • 总是从窄视口开始,然后扩展
  • 当需适应内容时,设置临界点开关
  • 创建跨多临界点的高级视觉布局

添加一个视口

即使对于一个基本页面,你必须始终包含一个viewport 元数据标签。视口是建立多设备体验的最重要的组成部分。没有它,你的网站将无法良好运行于移动设备上。

视口用于提示浏览器:网页页面需要进行调整以适应屏幕范围。你可以为视口指定多种配置,以控制页面的显示。我们推荐一个默认值:

查看完整示例

视口元素位于文档头部,仅需声明一次。

相关信息

了解更多关于使用视口的最佳实践:

使用简单的样式

我们公司及产品根据样式指南,提供了一个非常具体的品牌、字体指导方针。

样式指南

样式指南是深入认识页面的可视化表达的有效途径。它有助于确保设计首尾风格一致。

Unnamed QQ Screenshot20140514224245

添加样式化图片

在前篇指南中,我们添加了所谓的“内容图片”。这些图片对于描述我们产品很重要。样式图片不是核心内容的一部分,但增添了视觉冲击力,或引导用户注意力至特定内容。

Designed site

这方面的一个很好的例子是:顶部内容的标题图片。它经常被用来吸引用户阅读更多的产品。

它们可以非常简单地包含进来。在我们的例子中,样式图片为背景,应用简单的css即可。

我们选择了一张模糊的简单背景图片,因此并不会影响网页内容。我们将它设置为cover,并总是以拉伸同时保持正确纵横比的方式来遍布整个元素。

 

 

 

 

设置首个临界点

当宽度大约为600px时,设计开始变得糟糕。在我们的例子中,行的长度会超过10个字(最佳的阅读长度),而这正是我们需要调整的地方。

新窗口查看演示视频

600px似乎是我们创建第一个临界点的良好位置,因为它确定了范围,重新定位元素,使之更好地适应屏幕。我们使用一种称为“媒介查询(Media Queries)”的技术,可做到这一点。

更大的屏幕意味着拥有更多的空间,因此,在如何显示内容的问题上具有更强的灵活性。

注意

  • 无须马上调整所有元素,必要时进行微调

从当前我们产品页面的效果看来,接下来我们需要:

    • 约束设计的最大宽度
    • 修改元素内边距和减少文本尺寸
    • 移动表单,与标题内容浮动对齐
    • 确保视频浮动于内容周围
    • 减少图像尺寸,显示于更合适的网格

相关信息

了解更多关于使用“媒介查询”的方式和位置:

限制设计界面的最大宽度

我们仅选择两大布局:窄视口和宽视口:这大大简化了构建过程。

我们决定,在窄视口中创建全幅部分,并且在宽视口中仍保持全幅。这意味着我们应限制屏幕的最大宽度,使得文本、段落不延伸成一长单行,出现超宽屏幕。我们选择800px作为最大值。

为了实现这个目标,我们需要限制宽度,并将元素置于中心。在每个主要区域中,我们需要创建一个容器,将其外边距(margin)设为auto。这允许屏幕增大,但内容仍处于中心,最大尺寸为800px。

如下所示,容器是一个简单的div:

查看完整示例

查看完整示例

改变内边距和减少文本尺寸

在窄视口中,我们没有大量空间来显示内容。因此,排版尺寸和磅值往往需大幅减少,以适应屏幕。

在更宽视口中,我们需要考虑用户倾向于更大的屏幕,甚至更大。为了增加内容的可读性,我们可以增加排版的尺寸和磅值,也可以改变内边距,以使不同区域更加明显。

在我们产品页面中,我们通过设置宽度方向的内边距为5%,以增加区域元素的内边距。我们也将增加每个部分顶部的大小。

查看完整示例

调整元素以适应宽视口

窄视口以线性方式堆叠显示。每个主要区域及其里面的内容是依次从上到下排列。

宽视口提供了额外的空间,使得内容能以最佳方式呈现在屏幕上。对于我们的产品页面,根据信息架构,意味着我们可以:

    • 移动表单,贴近头标题信息
    • 将视频放在重要功能列表右边
    • 平铺图像
    • 展开表格

使表单元素浮动

窄视口意味着拥有较少的横向空间,不能充裕地放置屏幕上的元素。

为了更有效地利用屏幕的横向空间,我们需要打破顶部的线性流式布局,移动表单和表项,使得彼此紧邻。

查看完整示例

查看完整示例

→ → 在新窗口查看演示视频

 

使视频元素浮动

在窄视口中,将视频设计为占屏幕的整个宽度,放置在重要功能列表后面。在宽视口中,当视屏位于功能列表后面时,视频变得太大,看起来不合适。

视频元素需移出窄视口的垂直流式布局,应与内容的项目符号列表并列显示。

查看完整示例

平铺图片

在窄视口(大部分移动设备)接口中,图像设置为屏幕的整个宽度、垂直堆叠。这在宽视口中得不到很好地扩展。

为了使图片在宽视口中看起来合适,将图片宽度缩放容器的30%,水平放置(而不是窄视口的垂直放置)。我们还将增加边框半径和盒子阴影(box-shadow),使图像看起来更吸引人。

查看完整示例

让图片自适应DPI

使用图片时,要考虑视口大小、显示分辨率。

在过去,网页专为96dpi屏幕而设计。随着移动设备的出现,我们已见证了屏幕像素密度的逐渐增大,更别说笔记本电脑的Retina显示屏了。因此,被编码为96dpi的图像,往往在高保真dpi设备上看起来很糟糕。

我们有一个还没被广泛采用的解决方案。对于支持该方案的浏览器,你可以在高分辨显示器上显示高像素的图像。

相关信息

了解更多关于针对不同屏幕分辨率有效使用图片:

数据表格

表格很难合适地展示在窄视口的设备上,需要特殊考虑。

在窄视口中,我们建议将表分成两排,把标题和表格单元调到一排,呈列状。

→ → 新窗口查看演示视频

在我们的网站中,必须单独为表格内容创建一个额外的临界点。由于最初是为移动设备构造网页,去掉已应用的样式是困难的,所以我们必须在宽视口css中关闭窄视口下表格的部分css。这向我们呈现了一个明确、连贯变化。

查看完整示例

结束语

祝贺你。当你阅读至此,你可创建你第一个产品的简单登陆页面,可跨大量不同设备、不同比例的表单、以及不同屏幕尺寸。

如果你遵循这些原则,你将有一个良好的开端:

01 写代码之前,创建一个基本的信息架构和清楚需要的内容

02 总是设置一个视口

03 移动优先,形成基本的经验

04 一旦拥有移动经验,增加显示器的宽度,直到网页看起来不合适,并在此设置临界点

05 不断迭代

1 收藏 6 评论

关于作者:heloowird

相关文章

可能感兴趣的话题



直接登录
最新评论
跳到底部
返回顶部