英國廣播公司的節目濟南網站建設是巨大的，旨在成為所有電視和電臺，英國廣播公司播出的滾動歸檔。 最初在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="#"
在頁面的頂部區域（這說明什么對象是如何看它）是該品牌頁面的核心用戶出行，所以它不是延遲加載。 剪輯，畫廊和建議都懶加載，但促銷是不是因為他們沒有自己的網址。 你可以說，促銷活動可以在以下網址浮出水面：
但茂德是不是真正的“消耗品內容?！庇脩舨粫c擊一個鏈接來查看所有茂德在此背景下，所以茂德不懶加載。
圖片
圖像始終是一個挑戰的響應的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框架是個非?？芍貜褪褂玫南到y。 計劃“ 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做出更容易做，從而使看這么大的網站后，可能因為它每天繼續增長。
