英国广播公司的节目济南网站建设是巨大的，旨在成为所有电视和电台，英国广播公司播出的滚动归档。 最初在2007年发布，它现在有网页为超过160万的情节，但是那是几乎没有故事的一半。 周围的那些情节是丰富的内容，包括剪辑，画廊，情节指南，人物简介等等，再加上计划的新反应的主页 。
新的响应主页，被称为“品牌”的页面，加入一个更广泛的响应重建进度和A-Z的列表。 用户的39％，而且还在不断增长现在使用手机和平板设备访问这些网页; 因此，使得页面响应是服务一个伟大的经验给大家 ，同时保持网站维护的最佳途径 。
本文是响应重建BBC的计划页面为例，它实际上开始早在2007年，在项目的概念。
网址
创造一个潜在的巨大的网站，将永远持续下去的核心原则是获得信息架构权利摆在首位 。 这包括了解你的数据对象，以及如何将它们组合在一起。 还应确定URL的结构，这对于计划是最重要的方面。 采取的URL，顶面齿轮的主页：
后域名而来的词“程序”，这是一个简单的，不变的英文单词。 它被用于描述对象，并且不是一个品牌或产品名称。 复数的使用，使该URL可以向后砍死检索索引。
其次是节目标识符。 注意缺乏层次，缺乏一个标题。 标题随时间而改变，而许多程序都没有一个唯一的标题 ，这会导致冲突。 层次结构也随之变化 – 一次性飞行员可以委托一个完整的系列。 了解你的对象可以让你认识到什么是永久的。 在这种情况下，没有什么特别保证是永久性的，所以一个简单的ID来代替。 用户预计不会输入这些URL，虽然。 他们通常将到达通过搜索引擎或通过键入一个友好的重定向已经被读出空气，如bbc.co.uk / TOPGEAR 。 但一个永久的URL的主要原则是，向内链接是可信的是可共享的和永远工作。 酷URI不会改变。
一个明确的信息体系结构定义了URL方案 。 一块内容给出一个明确的规范家里，在适当情况下。 它们之间的联系和聚合，然后清楚地出现。
很清楚如何任何线框绘制或编写代码之前的数据将被切成薄片。 黑线是直接的联系，而红色线是快捷方式，我们将在以后添加。
对品牌页面，我们显示有关程序的以下信息：
- 摘要（图像及简介）
- 用户可以观看或现在听呢？
- 什么时候能在电视或收音机吗？
- 一个人如何买呢？
- 从节目素材
- 从节目美术馆
- 社论策划内容链接（促销）
- 文本支持内容
- 相关链接
这是一个很大的一个负责任的页面内容。 页面加载可能成为过度的低端设备，所以优先需要确定。
内容为王 ，因此在小屏幕上隐藏它是不能接受的。 如果任何内容可以在移动被牺牲，然后质疑它是否真正属于桌面上的开始。 用户旅途保持不变，而不管正在使用的设备。
不过，即使内容可能不会被移动牺牲，它并没有存在于它的完整形式的所有时间。 到内容简单链接可能就够了 ，因为我们已经定义了一个URL结构，大部分的内容已经在某处链接到。 因此，品牌页上的“剪辑”的块将在默认情况下，链接到这一点：
这是Web友好的和最小可行的产品。 如果没有更多的工作完成后，我们还是有一些作品。 下一阶段是看到任何改善是否可以进行 。 我们可以使用JavaScript来确定屏幕尺寸（可能还有其他因素），然后决定是否要加载一些快捷键。 缺省情况下，只有链路被示出，但有足够的空间，如果JavaScript是可用的，该链接将被替换成所述第一夹子6的转盘。 这首六是相同的六位来自/clips ; 这个延迟加载的内容是一个简单的快捷方式（从早期的红线）。
JavaScript可被用来延迟加载的内容相当频繁，但我们有规矩：
- 它可能不被用于核心内容或网页的用户的旅程。
- 它可以仅使用其中的URL存在该内容，从不为
href="#"
在页面的顶部区域（这说明什么对象是如何看它）是该品牌页面的核心用户出行，所以它不是延迟加载。 剪辑，画廊和建议都懒加载，但促销是不是因为他们没有自己的网址。 你可以说，促销活动可以在以下网址浮出水面：
但茂德是不是真正的“消耗品内容。”用户不会点击一个链接来查看所有茂德在此背景下，所以茂德不懒加载。
图片
图像始终是一个挑战的响应的Web设计，而且他们对我们来说，太。 我们的一些的长聚集的网页中含有大量的图像，这需要合适的设备大小来显示的。 这些长页面的总下载大小可以是1 MB以上，主要是由于图像。
因此， 我们决定，以解决图像在我们解决内容的方式一样 ，通过询问一个给定页面是否是图像的典型家庭。 如果是，则该图像必须在那里。 如果不是，如聚合的页面上，然后将图像是不存在默认。 然后，我们在加载的容器用JavaScript最合适的尺寸的图像。 此外， 目前只有图像在视口中被加载 。 随着页面滚动，这是即将出现都被拉入这个技术的图像可以节省初始页面加载大量的带宽，大大提高了响应时间，为用户，特别是在小型设备上，当用户不滚动不远。 使用类似的技术一个有用的库是用在BBC的敏感新闻的网页，并提供开源Imager.js 。
起初，这项技术的实施使周围很多页面跳转为用户向下滚动，图像出现。 要解决此当第一次加载页面和JavaScript踢，我们加载一个老式的垫片PNG，具有16:9的比例，并占据了图像的后面将要填写的空格。 这是为用于整个页面的一个小文件一个额外的下载请求。 使用内联base64编码的PNG可能是可取的，但我们发现，Windows Phone的设备不按正确比例显示保存的图像，渲染它作为一个1:1的正方形，所以我们不得不使用一个标准的PNG。
该技术到目前为止建议大量使用的JavaScript。 这是真实的，因为它被加载并运行在每一页上，但它是使用轻碰，JavaScript是没有任何网页 （除了媒体播放） 的要求 ，而且它不会做任何特别繁重。 懒加载的内容调用.inc部分URL ，它返回的HTML只是下降到页面中。 JavaScript的几乎没有做任何DOM建设，因为元素是由服务器端代码构建，重用相同的谐音。
模板框架，如把手可以构造从一个JSON源的DOM元素，但为什么打预解析器？ 浏览器是非常有效率的分析和快速渲染HTML，所以我们不会为这样一个简单的用例增加了复杂性。 该网站的工作原理和稳定，无JavaScript的 – 没有必要过分。
CSS
建设一个大型的网站，是维护需要一个CSS策略，否则将气球不成比例。 我们决定跟随边界元方法创建CSS的可重复使用的块。 该块可能是粒状和通用（用于排版和网格）或以上的模块化（对于整个对象）。 CSS是从建立方案“风格指南
这是计划的对象。 它是一个服务器端生成的局部，并用于围绕网站的多个位置。 它有几种变化，这取决于它需要走在容器或可在一给定时间的内容上。 这些选项都显示出相应的风格指南的页面 ，在那里他们可以构建和测试，随时可以丢弃（希望）完美地在任何地方应用。
建立可重复使用的CSS的这个方法产生了在页面的一些额外的标记，其中一些特别长的例子：
但是，因为这些都是由服务器端代码生成的，它们通常是很容易更新。 这些模块往往是重复整个页面，而是Gzip已压缩的标记非常好。 这个CSS框架是个非常可重复使用的系统。 计划“ global.css文件包含在每一页上，并处理有关的一切布局，都在刚刚15.4 KB（Gzip’ing后），从而加快了创建新的页面。 我们可以一起扔一些简单的基于列表的页面，如建议 ，在几分钟之内，而无需编写任何新的CSS，并通过重复使用相同的方案对象的部分。 这也强制执行跨页的一致性。
所有对象都建是触摸第一，但没有触及依赖 。 该流 ，由此可以看出在上赛季的页面 ，有一个溢出div ，以支持本机滚动和自动触控功能。 然而箭头按钮（注意不是<a>标签）仍然存在旧的设备和人谁希望使用键盘和鼠标。 触摸检测并不一定意味着用户触摸导航，让鼠标悬停总是支持。
触摸第一也意味着较大的重灾区 。 该课程对象上面有一个叠加的链接，使整个物体点击，即使它有时会在其内的多个链接。
之后，我们推出了这个功能，我们通过一个用户，在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; }
目前， 英国广播公司仍然会收到大量的流量从Internet Explorer 8，不支持媒体查询。 我们必须决定，那么，是什么来显示这些用户。 第一个选择是只显示该网站给他们的手机版，适当扩大规模，但什么也没有复杂的发生。 这是不能接受的作为使用人数仍然过高，尤其是编辑人员。 因此，我们想出了一个解决方法。
我们利用建立我们的CSS 无礼的话 ，这非常符合模块化结构，允许谐音被组织在一个明确的文件夹结构。 无论我们使用媒体查询，我们可以抽象成使用萨斯断点，然后为它们命名。 在我们的主文件，我们再决定哪个断点拉以及是否包装在媒体查询。 处理这个萨斯组件可作为分手 。 这意味着我们可以有两个文件： 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，因为我们可以包装在媒体查询为新的浏览器，也节省了额外的下载。
限制
我们的响应式设计仍然有一些限制在它的能力。 我们渴望看到本机的解决方案元件查询来解决一些小的图标大小的问题，而不需要polyfills。 目前，我们只能根据整个窗口的大小决定。
还有一些情况，其中的标记顺序不理想在所有设备上。 改进，如CSS网格布局将使我们在不同的屏幕尺寸为隔行扫描模块。
结论
通过建设一个网站上的内容为王 ，从一个明确的信息架构和明确的URL，我们已经建立了一个框架，我们很自豪能够维持。 使用音效URL方案和建设网页语义标记给我们免费的（或至少部分免费）许多好处：
- 持久性，
- 稳定，
- 优化搜索引擎（可链接）
- 交通方便，
- 共享性。
通过逐步提高，我们仍然可以建立一个接口，是有吸引力和信息密集的地方为宜。 我们将继续与新的响应特性来适应，因为他们成为可用，一旦从旧的浏览器访问量下降，以至于我们可以向前迈进。 可重复使用的内容组件和CSS做出更容易做，从而使看这么大的网站后，可能因为它每天继续增长。
近期评论