梅州高端网站制作：响应式设计始于URL

英国广播公司的节目网站是巨大的，旨在成为BBC在电视和广播中播出的所有内容的滚动存档。它最初于2007年发布，现在有超过160万集的页面，但这只是故事的一半。这些剧集周围有丰富的内容，包括剪辑，画廊，剧集指南，角色简介等等，以及Program的新响应主页。梅州高端网站制作

新的响应式主页（称为“品牌”页面）在更广泛的响应式重建中加入计划和A-Z列表。39％的用户（并且还在增长）现在使用移动设备和平板设备访问这些页面; 因此，使页面响应是为每个人提供良好体验同时保持网站可维护性的最佳方式。

本文是BBC程序页面响应式重建的案例研究，它实际上始于2007年的项目概念。

网址

创建一个将永远存在的潜在巨大网站的核心原则是首先使信息架构正确。这涉及了解您的数据对象以及它们如何组合在一起。它还应该确定URL结构，这对于程序来说是最重要的方面。获取Top Gear主页的URL：

http://www.bbc.co.uk/programmes/b006mj59

在域名之后出现“程序”这个词，这是一个简单，不变的英语单词。它旨在描述对象，而不是品牌或产品名称。使用多个元素，以便可以向后入侵URL以检索索引。

接下来是程序标识符。注意缺乏等级和缺乏标题。标题随着时间的推移而变化，许多程序没有唯一的标题，这会导致冲突。层次结构也发生了变化 - 可以为一个完整的系列赛委托一次性飞行员。了解您的对象可以让您识别永久物。在这种情况下，没有特别保证永久性，因此使用简单的ID。但是，不希望用户键入这些URL。它们通常通过搜索引擎或通过输入已经在空中读取的友好重定向来到达，例如bbc.co.uk/topgear。但永久URL的关键原则是内部链接被信任为可共享且永远工作。酷URI不会改变。

明确的信息架构定义了URL方案。在适当的情况下，一段内容被赋予一个清晰的规范之家。然后清楚地显示它们之间的链接和聚合。

明确的信息架构定义了URL方案。（大预览）

很清楚在绘制任何线框或编写代码之前如何切片数据。黑色线条是直接链接，而红色线条是我们稍后会添加的快捷方式。

在品牌页面上，我们显示有关该计划的以下信息：

• 摘要（图片和概要）

• 用户现在可以观看或收听吗？

• 什么时候在电视或收音机？

• 怎么买？

• 来自该计划的剪辑

• 来自该计划的画廊

• 编辑精选内容链接（促销）

• 文本支持内容

• 相关链接

这是响应式页面的大量内容。在低端设备上页面加载可能会过多，因此需要确定优先级。

应为具有大量内容的站点确定加载优先级。（大预览）

内容为王，因此将其隐藏在较小的屏幕上是不可接受的。如果可以在移动设备上牺牲任何内容，那么首先要问它是否真的属于桌面。无论使用何种设备，用户旅程都保持不变。

但是，即使内容可能不会在移动设备上牺牲，也不一定要以完整的形式出现。内容的简单链接可能就足够了，因为我们已经定义了一个URL结构，所以大多数内容已经有了链接的地方。因此，默认情况下，品牌页面上的“剪辑”块将链接到此：

/programmes/:id/clips

这是网络友好的，是最不可行的产品。如果没有更多的工作，我们仍然有一些有用的东西。下一阶段是看是否可以进行任何增强。我们可以使用JavaScript来确定屏幕大小（以及可能的其他因素），然后决定是否加载一些快捷方式。默认情况下，只显示一个链接，但有足够的空间，如果JavaScript可用，链接将被前六个剪辑的轮播替换。前六个是六个相同的/clips; 这个懒惰的内容只是一个快捷方式（前面的红线）。

延迟加载内容的不同状态。（大预览）

JavaScript可以经常用于延迟加载内容，但我们有规则：

• 它可能不会用于核心内容或页面的用户旅程。

• 它可能仅在内容存在URL的情况下使用，永远不会用于href="#"。

页面的顶部区域（显示对象是什么以及如何观看它）是品牌页面的核心用户旅程，因此它不是延迟加载的。剪辑，图库和推荐都是延迟加载的，但促销不是因为它们没有自己的网址。您可以争辩说，促销活动可能会出现在以下网址：

/programmes/:pid/promotions

但促销并不是真正的“可消费内容”。用户不会在此上下文中单击链接以查看所有促销，因此促销不会延迟加载。

图片

图像在响应式Web设计中始终是一个挑战，它们也适合我们。我们的一些长聚合页面包含大量图像，需要以适合设备的大小显示。这些长页面的总下载大小可能超过1 MB，主要是由于图像。

因此，我们决定以与处理内容相同的方式处理图像，方法是询问给定页面是否是图像的规范主页。如果是，那么图像必须在那里。如果不是，例如在聚合页面上，则默认情况下图像不存在。然后，我们使用JavaScript为容器加载最合适大小的图像。此外，仅加载当前在视口中的图像。当页面滚动时，即将出现的图像被拉入。这种技术在初始页面加载时节省了大量带宽，大大缩短了用户的响应时间，特别是在小型设备上以及当用户不能远距离滚动时。使用类似技术的有用库在BBC的响应新闻页面上使用，并且可以在开源中使用Imager.js。

起初，这种技术的实现使得页面在用户向下滚动并且图像出现时跳了很多。要在页面首次加载并且JavaScript启动时解决这个问题，我们会加载一个老式的间隔PNG，它具有16：9的比例并占据将在稍后填充的图像空间。这是对整个页面中使用的小文件的一个额外下载请求。使用内联base64编码的PNG可能更为可取，但我们发现Windows Phone设备不会以正确的比例显示保持图像，将其呈现为1：1的正方形，因此我们必须使用标准PNG。

到目前为止，这些技术建议大量使用JavaScript。这是正确的，因为它被加载并在每个页面上运行，但它使用轻触。JavaScript不是任何页面的要求（除了媒体的播放），它不会做任何特别繁重的工作。延迟加载的内容调用.inc部分URL，该URL返回简单地放入页面的HTML。JavaScript几乎不做任何DOM构造，因为元素是由服务器端代码构造的，重用相同的部分。

诸如Handlebars之类的模板框架可以从JSON源构建DOM元素，但为什么要与预解析器对抗呢？浏览器在解析和快速呈现HTML方面非常有效，因此我们不会为这样一个简单的用例增加复杂性。该网站运行良好，没有JavaScript - 没有必要过度。

CSS

构建一个可维护的大型网站需要一个CSS策略，否则它会不成比例地膨胀。我们决定遵循BEM方法来创建可重用的CSS块。这些块可能是粒度和通用的（用于排版和网格）或更模块化（用于整个对象）。CSS是从程序的样式指南构建的

BBC程序样式指南的一个例子。（大预览）

这是Programs对象。它是服务器端生成的部分，用于网站周围的多个位置。它有几种变化，具体取决于它需要进入的容器或给定时间可用的内容。这些选项在样式指南的相应页面上进行了演示，可以在其中构建和测试它们，随时可以在应用程序的任何位置完美地删除（希望）。

这种构建可重用CSS的方法在页面中产生了一些额外的标记，其中一些特别长的例子：

<div class="grid bpw2-thirteen-twentyfourths bpe-thirteen-twentyfourths grid--bounded">

但是，因为它们是由服务器端代码生成的，所以它们通常很容易更新。这些块往往会在整个页面中重复出现，但Gzip会非常好地压缩标记。这个CSS框架构成了一个非常可重用的系统。程序的global.css文件包含在每个页面上，并处理与布局相关的所有内容，所有内容均为15.4 KB（在Gzip之后），这加快了新页面的创建速度。我们可以在几分钟内将一些简单的基于列表的页面（例如推荐）放在一起，而无需编写任何新的CSS并重用相同的Programs对象部分。这也强制了跨页面的一致性。

所有对象都构建为触摸优先，但不依赖于触摸。可以在季节页面上看到的流有溢出，以支持本机滚动和自动触摸功能。但是，对于旧设备以及希望使用键盘和鼠标的人来说，箭头按钮（注意不是标签）仍然存在。触摸的检测不一定意味着用户触摸导航，因此始终支持鼠标悬停。div<a>

Touch-first也意味着大的打击区域。上面的Programs对象有一个重叠的链接，使整个对象可以被点击，即使它有时会有多个链接。

在我们启动此功能后，用户通知我们在Windows高对比度模式下，所有程序对象都消失了。我们发现在高对比度模式下，Internet Explorer 9强制所有链接的背景为纯黑色，有效地遮挡了对象。为了全面克服这个问题，我们不得不强制使用RGBa使背景颜色透明，并将覆盖链接的不透明度设置为0允许下面的对象显示。

.block-link__overlay-link {
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   overflow: hidden;
   text-indent: 200%;
   white-space: nowrap;
   background: rgba(0, 0, 0, 0); // IE 9 fix}// Increased specificity so that it trumps ".block-link a"
a.block-link__overlay-link {
   position: absolute;
   z-index: 0;
   // The next line is needed because all elements have a solid-black
   // background in high-contrast mode
   opacity: 0;}

目前，BBC仍然从Internet Explorer 8收到大量流量，而Internet Explorer 8不支持媒体查询。然后，我们必须决定向这些用户展示什么。第一个选择只是向他们展示网站的移动版本，适当地扩大规模，但没有发生任何复杂的事情。这是不可接受的，因为使用数量仍然太高，特别是在编辑人员中。因此，我们想出了一个解决方法。

我们使用Sass构建CSS ，它非常适合模块化结构，允许将部分组织在一个清晰的文件夹结构中。无论我们在哪里使用媒体查询，我们都可以使用Sass将它们抽象为断点，然后命名它们。在我们的主文件中，然后我们决定引入哪些断点以及是否将它们包装在媒体查询中。用于处理此问题的Sass组件可用作分解。这意味着我们可以有两个文件：global.css和global-ie.css。该global-ie.css文件获取所有基本和桌面断点，无需媒体查询，这意味着它是一个固定的1008像素页面。然后，我们使用IE条件注释决定使用哪个CSS：

<!--[if (gt IE 8)|!(IE)]><!-->
        <link rel="stylesheet" href=”path/to/styles/global.css" /><!-- Also contains print -->
    <!--<![endif]-->
    <!--[if (lt IE 9)&(!IEMobile)]>
        <link rel="stylesheet" href="path/to/styles/global-ie.css" />
        <link rel="stylesheet" href="path/to/styles/print.css" media="print" />
    <![endif]-->

它还扩展到了打印CSS，因为我们可以将它包装在新浏览器的媒体查询中，这样可以节省额外的下载量。

限制

我们的响应式设计在其功能方面仍有一些局限性。我们热衷于看到元素查询的原生解决方案，以修复一些小的图标大小问题，而无需使用polyfill。目前，我们只能根据整个窗口大小做出决策。

理想情况下，大致相同大小的图像应该具有相同大小的图标。

还有一些情况下，标记顺序在所有设备上都不理想。CSS网格布局等改进将使我们能够以不同的屏幕尺寸交错模块。

结论

通过建立一个内容为王的网站，从清晰的信息架构和明确定义的URL开始，我们构建了一个我们自豪地维护的框架。使用声音URL方案和使用语义标记构建页面可以免费获得许多好处（或者至少部分免费）：

• 持久性，

• 稳定性，

• 搜索引擎优化（linkability），

• 交通方便，

• 共享性。

通过逐步增强，我们仍然可以构建一个有吸引力且信息密集的界面。我们将继续适应新的响应功能，一旦旧浏览器的访问量下降到足以让我们继续前进。可重用的内容组件和CSS使这更容易，因此可以照看这样一个大型网站，因为它每天都在不断增长。

梅州高端网站制作