英國廣播公司的節(jié)目濟(jì)南網(wǎng)站建設(shè)是巨大的，旨在成為所有電視和電臺，英國廣播公司播出的滾動歸檔。 最初在2007年發(fā)布，它現(xiàn)在有網(wǎng)頁為超過160萬的情節(jié)，但是那是幾乎沒有故事的一半。 周圍的那些情節(jié)是豐富的內(nèi)容，包括剪輯，畫廊，情節(jié)指南，人物簡介等等，再加上計(jì)劃的新反應(yīng)的主頁 。

新的響應(yīng)主頁，被稱為“品牌”的頁面，加入一個更廣泛的響應(yīng)重建進(jìn)度和A-Z的列表。 用戶的39％，而且還在不斷增長現(xiàn)在使用手機(jī)和平板設(shè)備訪問這些網(wǎng)頁; 因此，使得頁面響應(yīng)是服務(wù)一個偉大的經(jīng)驗(yàn)給大家 ，同時保持網(wǎng)站維護(hù)的最佳途徑 。

本文是響應(yīng)重建BBC的計(jì)劃頁面為例，它實(shí)際上開始早在2007年，在項(xiàng)目的概念。

網(wǎng)址

創(chuàng)造一個潛在的巨大的網(wǎng)站，將永遠(yuǎn)持續(xù)下去的核心原則是獲得信息架構(gòu)權(quán)利擺在首位 。 這包括了解你的數(shù)據(jù)對象，以及如何將它們組合在一起。 還應(yīng)確定URL的結(jié)構(gòu)，這對于計(jì)劃是最重要的方面。 采取的URL，頂面齒輪的主頁：

后域名而來的詞“程序”，這是一個簡單的，不變的英文單詞。 它被用于描述對象，并??且不是一個品牌或產(chǎn)品名稱。 復(fù)數(shù)的使用，使該URL可以向后砍死檢索索引。

其次是節(jié)目標(biāo)識符。 注意缺乏層次，缺乏一個標(biāo)題。 標(biāo)題隨時間而改變，而許多程序都沒有一個唯一的標(biāo)題 ，這會導(dǎo)致沖突。 層次結(jié)構(gòu)也隨之變化 – 一次性飛行員可以委托一個完整的系列。 了解你的對象可以讓你認(rèn)識到什么是永久的。 在這種情況下，沒有什么特別保證是永久性的，所以一個簡單的ID來代替。 用戶預(yù)計(jì)不會輸入這些URL，雖然。 他們通常將到達(dá)通過搜索引擎或通過鍵入一個友好的重定向已經(jīng)被讀出空氣，如bbc.co.uk / TOPGEAR 。 但一個永久的URL的主要原則是，向內(nèi)鏈接是可信的是可共享的和永遠(yuǎn)工作。 酷URI不會改變。

一個明確的信息體系結(jié)構(gòu)定義了URL方案 。 一塊內(nèi)容給出一個明確的規(guī)范家里，在適當(dāng)情況下。 它們之間的聯(lián)系和聚合，然后清楚地出現(xiàn)。

很清楚如何任何線框繪制或編寫代碼之前的數(shù)據(jù)將被切成薄片。 黑線是直接的聯(lián)系，而紅色線是快捷方式，我們將在以后添加。

對品牌頁面，我們顯示有關(guān)程序的以下信息：

• 摘要（圖像及簡介）
• 用戶可以觀看或現(xiàn)在聽呢？
• 什么時候能在電視或收音機(jī)嗎？
• 一個人如何買呢？
• 從節(jié)目素材
• 從節(jié)目美術(shù)館
• 社論策劃內(nèi)容鏈接（促銷）
• 文本支持內(nèi)容
• 相關(guān)鏈接

這是一個很大的一個負(fù)責(zé)任的頁面內(nèi)容。 頁面加載可能成為過度的低端設(shè)備，所以優(yōu)先需要確定。

內(nèi)容為王 ，因此在小屏幕上隱藏它是不能接受的。 如果任何內(nèi)容可以在移動被犧牲，然后質(zhì)疑它是否真正屬于桌面上的開始。 用戶旅途保持不變，而不管正在使用的設(shè)備。

不過，即使內(nèi)容可能不會被移動犧牲，它并沒有存在于它的完整形式的所有時間。 到內(nèi)容簡單鏈接可能就夠了 ，因?yàn)槲覀円呀?jīng)定義了一個URL結(jié)構(gòu)，大部分的內(nèi)容已經(jīng)在某處鏈接到。 因此，品牌頁上的“剪輯”的塊將在默認(rèn)情況下，鏈接到這一點(diǎn)：

這是Web友好的和最小可行的產(chǎn)品。 如果沒有更多的工作完成后，我們還是有一些作品。 下一階段是看到任何改善是否可以進(jìn)行 。 我們可以使用JavaScript來確定屏幕尺寸（可能還有其他因素），然后決定是否要加載一些快捷鍵。 缺省情況下，只有鏈路被示出，但有足夠的空間，如果JavaScript是可用的，該鏈接將被替換成所述第一夾子6的轉(zhuǎn)盤。 這首六是相同的六位來自/clips ; 這個延遲加載的內(nèi)容是一個簡單的快捷方式（從早期的紅線）。

JavaScript可被用來延遲加載的內(nèi)容相當(dāng)頻繁，但我們有規(guī)矩：

• 它可能不被用于核心內(nèi)容或網(wǎng)頁的用戶的旅程。
• 它可以僅使用其中的URL存在該內(nèi)容，從不為href="#"

在頁面的頂部區(qū)域（這說明什么對象是如何看它）是該品牌頁面的核心用戶出行，所以它不是延遲加載。 剪輯，畫廊和建議都懶加載，但促銷是不是因?yàn)樗麄儧]有自己的網(wǎng)址。 你可以說，促銷活動可以在以下網(wǎng)址浮出水面：

但茂德是不是真正的“消耗品內(nèi)容?！庇脩舨粫c(diǎn)擊一個鏈接來查看所有茂德在此背景下，所以茂德不懶加載。

圖片

圖像始終是一個挑戰(zhàn)的響應(yīng)的Web設(shè)計(jì)，而且他們對我們來說，太。 我們的一些的長聚集的網(wǎng)頁中含有大量的圖像，這需要合適的設(shè)備大小來顯示的。 這些長頁面的總下載大小可以是1 MB以上，主要是由于圖像。

因此， 我們決定，以解決圖像在我們解決內(nèi)容的方式一樣 ，通過詢問一個給定頁面是否是圖像的典型家庭。 如果是，則該圖像必須在那里。 如果不是，如聚合的頁面上，然后將圖像是不存在默認(rèn)。 然后，我們在加載的容器用JavaScript最合適的尺寸的圖像。 此外， 目前只有圖像在視口中被加載 。 隨著頁面滾動，這是即將出現(xiàn)都被拉入這個技術(shù)的圖像可以節(jié)省初始頁面加載大量的帶寬，大大提高了響應(yīng)時間，為用戶，特別是在小型設(shè)備上，當(dāng)用戶不滾動不遠(yuǎn)。 使用類似的技術(shù)一個有用的庫是用在BBC的敏感新聞的網(wǎng)頁，并提供開源Imager.js 。

起初，這項(xiàng)技術(shù)的實(shí)施使周圍很多頁面跳轉(zhuǎn)為用戶向下滾動，圖像出現(xiàn)。 要解決此當(dāng)?shù)谝淮渭虞d頁面和JavaScript踢，我們加載一個老式的墊片PNG，具有16:9的比例，并占據(jù)了圖像的后面將要填寫的空格。 這是為用于整個頁面的一個小文件一個額外的下載請求。 使用內(nèi)聯(lián)base64編碼的PNG可能是可取的，但我們發(fā)現(xiàn)，Windows Phone的設(shè)備不按正確比例顯示保存的圖像，渲染它作為一個1:1的正方形，所以我們不得不使用一個標(biāo)準(zhǔn)的PNG。

該技術(shù)到目前為止建議大量使用的JavaScript。 這是真實(shí)的，因?yàn)樗患虞d并運(yùn)行在每一頁上，但它是使用輕碰，JavaScript是沒有任何網(wǎng)頁 （除了媒體播放） 的要求 ，而且它不會做任何特別繁重。 懶加載的內(nèi)容調(diào)用.inc部分URL ，它返回的HTML只是下降到頁面中。 JavaScript的幾乎沒有做任何DOM建設(shè)，因?yàn)樵厥怯煞?wù)器端代碼構(gòu)建，重用相同的諧音。

模板框架，如把手可以構(gòu)造從一個JSON源的DOM元素，但為什么打預(yù)解析器？ 瀏覽器是非常有效率的分析和快速渲染HTML，所以我們不會為這樣一個簡單的用例增加了復(fù)雜性。 該網(wǎng)站的工作原理和穩(wěn)定，無JavaScript的 – 沒有必要過分。

CSS

建設(shè)一個大型的網(wǎng)站，是維護(hù)需要一個CSS策略，否則將氣球不成比例。 我們決定跟隨邊界元方法創(chuàng)建CSS的可重復(fù)使用的塊。 該塊可能是粒狀和通用（用于排版和網(wǎng)格）或以上的模塊化（對于整個對象）。 CSS是從建立方案“風(fēng)格指南

這是計(jì)劃的對象。 它是一個服務(wù)器端生成的局部，并用于圍繞網(wǎng)站的多個位置。 它有幾種變化，這取決于它需要走在容器或可在一給定時間的內(nèi)容上。 這些選項(xiàng)都顯示出相應(yīng)的風(fēng)格指南的頁面 ，在那里他們可以構(gòu)建和測試，隨時可以丟棄（希望）完美地在任何地方應(yīng)用。

建立可重復(fù)使用的CSS的這個方法產(chǎn)生了在頁面的一些額外的標(biāo)記，其中一些特別長的例子：

但是，因?yàn)檫@些都是由服務(wù)器端代碼生成的，它們通常是很容易更新。 這些模塊往往是重復(fù)整個頁面，而是Gzip已壓縮的標(biāo)記非常好。 這個CSS框架是個非?？芍貜?fù)使用的系統(tǒng)。 計(jì)劃“ global.css文件包含在每一頁上，并處理有關(guān)的一切布局，都在剛剛15.4 KB（Gzip’ing后），從而加快了創(chuàng)建新的頁面。 我們可以一起扔一些簡單的基于列表的頁面，如建議 ，在幾分鐘之內(nèi)，而無需編寫任何新的CSS，并通過重復(fù)使用相同的方案對象的部分。 這也強(qiáng)制執(zhí)行跨頁的一致性。

所有對象都建是觸摸第一，但沒有觸及依賴 。 該流 ，由此可以看出在上賽季的頁面 ，有一個溢出div ，以支持本機(jī)滾動和自動觸控功能。 然而箭頭按鈕（注意不是<a>標(biāo)簽）仍然存在舊的設(shè)備和人誰希望使用鍵盤和鼠標(biāo)。 觸摸檢測并不一定意味著用戶觸摸導(dǎo)航，讓鼠標(biāo)懸?？偸侵С?。

觸摸第一也意味著較大的重災(zāi)區(qū) 。 該課程對象上面有一個疊加的鏈接，使整個物體點(diǎn)擊，即使它有時會在其內(nèi)的多個鏈接。

之后，我們推出了這個功能，我們通過一個用戶，在Windows高對比度模式下，所有的計(jì)劃對象消失被告知。 我們發(fā)現(xiàn)，在高對比度模式下，Internet Explorer 9將強(qiáng)制所有鏈接的背景是純黑色，有效地模糊了對象。 為了克服這種一刀切，我們不得不強(qiáng)迫的背景色是透明的的RGBA，我們設(shè)置覆蓋鏈路的不透明度為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，不支持媒體查詢。 我們必須決定，那么，是什么來顯示這些用戶。 第一個選擇是只顯示該網(wǎng)站給他們的手機(jī)版，適當(dāng)擴(kuò)大規(guī)模，但什么也沒有復(fù)雜的發(fā)生。 這是不能接受的作為使用人數(shù)仍然過高，尤其是編輯人員。 因此，我們想出了一個解決方法。

我們利用建立我們的CSS 無禮的話 ，這非常符合模塊化結(jié)構(gòu)，允許諧音被組織在一個明確的文件夾結(jié)構(gòu)。 無論我們使用媒體查詢，我們可以抽象成使用薩斯斷點(diǎn)，然后為它們命名。 在我們的主文件，我們再決定哪個斷點(diǎn)拉以及是否包裝在媒體查詢。 處理這個薩斯組件可作為分手 。 這意味著我們可以有兩個文件： global.css和global-ie.css 。 在global-ie.css文件得到所有的基地和桌面斷點(diǎn)，沒有媒體的質(zhì)疑，這意味著它是一個固定的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，因?yàn)槲覀兛梢园b在媒體查詢?yōu)樾碌臑g覽器，也節(jié)省了額外的下載。

限制

我們的響應(yīng)式設(shè)計(jì)仍然有一些限制在它的能力。 我們渴望看到本機(jī)的解決方案元件查詢來解決一些小的圖標(biāo)大小的問題，而不需要polyfills。 目前，我們只能根據(jù)整個窗口的大小決定。

還有一些情況，其中的標(biāo)記順序不理想在所有設(shè)備上。 改進(jìn)，如CSS網(wǎng)格布局將使我們在不同的屏幕尺寸為隔行掃描模塊。

結(jié)論

通過建設(shè)一個網(wǎng)站上的內(nèi)容為王 ，從一個明確的信息架構(gòu)和明確的URL，我們已經(jīng)建立了一個框架，我們很自豪能夠維持。 使用音效URL方案和建設(shè)網(wǎng)頁語義標(biāo)記給我們免費(fèi)的（或至少部分免費(fèi)）許多好處：

• 持久性，
• 穩(wěn)定，
• 優(yōu)化搜索引擎（可鏈接）
• 交通方便，
• 共享性。

通過逐步提高，我們?nèi)匀豢梢越⒁粋€接口，是有吸引力和信息密集的地方為宜。 我們將繼續(xù)與新的響應(yīng)特性來適應(yīng)，因?yàn)樗麄兂蔀榭捎?，一旦從舊的瀏覽器訪問量下降，以至于我們可以向前邁進(jìn)。 可重復(fù)使用的內(nèi)容組件和CSS做出更容易做，從而使看這么大的網(wǎng)站后，可能因?yàn)樗刻炖^續(xù)增長。