文章「設計一件東西時，要常常設想這東西會身處的下一個大情景」芬蘭築建師伊利爾·沙里寧(Eliel Saarinen)說，「一張椅子身處房間中，一個房間身處房子中，一個房子身處環境中，一個環境身處城市規劃中」。
一眼望去，網頁設計好像是一種平面設計，使用平設計工具如 Photoshop 去設計網站加深了這看法。但若要達到網站的核心目的，我們要考慮比這介面的更大情景：人們想要完成甚麼？
為網頁做設計，容易以互動元素作思考：滑動、指點、點擊、滾動、拖放，但鮮有人一早起來就期望一整天的滾動與指點，他們期望的比較可能是閱讀、寫作、分享、買賣。網頁設計師必需看穿表層的動作，尋找底下更有意義的動詞。
在 Filament Group 的著作《Designing With Progressive Enhancement》(以漸進增強作設計)，他們形容一個叫「X光視點」(x-ray perspective)的技巧：
使用X光視點就是看穿複設計的雜部件與視覺風格，辨認出組成網頁的核心內容與功能部份，找出其相對應的簡單 HTML，讓每個都能普遍運作
若不習慣此設計方式，會需要一點時間適應，但習慣後就很難不以此方式檢驗介面，就好像看不過不當字距、難以忽略 FedEx 標誌中簡的空白組成的箭頭、或忘記所有的鴨都帶了狗面具。
Asmaa Dee 攝，創用 CC 姓名標示-非商業-禁止改作 2.0 授權。
這是我所設計網頁的三個步驟：
- 認出核心功能
- 使用最簡單的可能技術實現這功能
- 增強之！
認出核心功能看似蠻直接，而經過一些練習後的確如此，但一開始時要分別出真正需要與錦上添花的元素可以很棘手。
資訊
就說你是新聞提供者，核心功能很直接-提供新聞，你也可以提供很多其他服務諸如互動拼圖、實時通知等等，這些服務有其價值，但大概不比確保人們看到新聞重要。
認出核心功能後，來到第二步：如何以最簡單的科技實現？
理論上，一個純文字檔就是提供新聞最簡單的方法，但由於我們在談網頁，讓我們再重申這點：如何以最簡單的網頁技術實現此功能？在一個 URL 提供一個 HTML 檔。
開始時很易令事情過度複，HTML 可能會無需要地臃腫，URL 可能會無必要地纍贅，使之難以被分享或記起。
使用適當的 HTML 元素-文章、標題、段落、清單、圖片-標示好那新聞後，是時候到第三步：增強！
在預設環境下，這篇新聞會以瀏覽器內建的樣式表去表達，這會夠清晰，但未必好看。使用你自己寫的 CSS 可將內容塑造得更令人喜愛。你可使用工具如空白、行高、用色、對比等等，甚至可以用自訂字型─這項增強多年來在網頁一直還不可能。
這並不保證所有瀏覽器都有能力執行你所下的 CSS 宣告，而這也沒有問題，瀏覽器會跳過不明白的地方。重要的地方是所有人仍然可以看到新聞，不論其瀏覽器的 CSS 能力。
對於一些螢幕較大的裝置，你可以引入排版。將排版看成一種增強看似怪怪的，但這是流動優先的響應式設計的重要一課。先考慮內容，然後以明智的源碼次序標示，才再在媒介查詢內使用排版宣告。
感謝 CSS 的不停進化，我們有很多排版的方法，就如安德魯·斯圖爾特·塔能鮑姆(Andy Tannenbaum)所說：
標準的好處在於你有太多選擇了
溝通
在新聞網站實現三步曲相對直接，看新聞是比較被動的。要真的測試這三步流程，需要應用在更互動的東西上。
當我們要建立一個社交網站，讓各地的人不論何處皆能溝通，其核心功能就是送出與接收訊息。
在網絡瀏覽器上顯示訊息不難，當中伺服器端或許有很多複雜的東西：資料庫、同步、排隊、負載平衡，但顯示逆時序的清單所需的 HTML，並不會比新聞網頁有太大分別。
由瀏覽器發送訊息到網頁伺服器則需要具有互動性的 HTML，這可用到表單。在這情況，一個表單內的一文字輸入和發送按鈕應該就足夠提供基本功能了。
人們現在可以用我們的社交網來收發訊息了，不論他們使用任何裝置或瀏覽器。現在棘手的是如何在不破壞現有活動的情況下改善體驗。
若我們僅由網站在只得 HTML 的狀態，不能令我們在短時間內慶祝公司上市。要將我們的服務與對手分別開來，我們需要第三步：增強！
至少，我們可以使用在新聞網站的相同邏輯來設計我們的服務，使用 CSS 來提供顏色、材質、對比、網絡字型、更大的螢幕設計、排版。但別止步於外觀，讓我們也改善互動。
現時這個社交網站跟新聞網站一樣是以頁為基礎的互動，每次要給伺服器發送一個訊息，伺服器就得送回整個新的網頁，我們可以做得更好，是時候加點 Ajax。
我們可以攔截表單的提交，轉而使用 Ajax 來送資料到伺服器─我愛使用 Hijax (1) 來形容此種 Ajax 攔截，如果伺服器有回應，我們也可以只更新部份頁面，而不用刷新整頁，這也是加入一些適當動畫的好時機。
我們還可更進一步，支持 WebSockets 的瀏覽器可以接收來自伺服器的訊息，使用這些瀏覽器的人可以在送出之時就得到更新，我們甚至可以使用點對點連接來讓瀏覽器使用者作直接溝通。
不是每個瀏覽器都有這些高級功能，但這不成問題，最基本的功能-發送與接收訊息-仍然是人人可用。
創造
如果我們的社交網站是更專門的？讓我們建立一個相片分享服務，這提升了門檻，不僅要收發訊息，核心功能現在需要能夠收發圖片。
介面上我們需要顯示一列逆時序的相片，HTML 可以處理得到，再一次，我們需要使用表單來送資料到伺服器，這一次需要一個檔案上載欄，而不是文字欄。
在這些更動後，核心功能已備，是時候增強了。
在現有的增強功能之上─CSS、網絡字型、Ajax、WebSockets─我們可以使用 HTML5 引入的檔案 API，讓我們可以直接在瀏覽器上操作圖片，可以在發送圖片前加入特效，使用 CSS 濾鏡，我們可提供一系列的圖像增強，由復古褐色到暈影效果。若瀏覽器不支持檔案 API 或 CSS 濾鏡，人們仍然可以上載他們的鴨嘴臉自拍照。
合作
曾經，使用軟件等於要在電腦上安裝很多不同的程式，今天只需要安裝了瀏覽器就可以了。寫電郵、找聯絡資料、日曆上記下約會、簿記和其他財務工作，現在都可以在沒有安裝特定應用程式下完成，訪問一條 URL 就可在你需要時召集齊你所要的工具。
使用網絡來傳遞軟件不單取代桌面為主的工作方式，互聯網的連接打開各種合作的可能。例如我們以前稱為「文字處理」的應用，程式給綁定在某機器上，想要共同合作編輯同一文件就注定是件棘手工作，需要大量的協調，將檔案寄來寄去。使用網頁，分享單一 URL 就可以讓多人同時在同一份文件上工作。
讓我們在一個網頁為基礎的文字處理器，施展三步流程：
辨認核心功能
廢話答案是「文字處理」，沒有多大用處。人們使用這軟件時真正在做甚麼？他們寫作、分享、修改。
使用最簡單的可能技術來現實此功能
看看我們的三個動詞-寫作、分享和修改-我們可以只使用 URL 就可以達成分享，其他兩項寫作和修改，需要使用表單。一個基本的 TEXTAREA 元素可以用來裝載文字、句字、段落，組成任何由技術報告到偉大的美國小說，將內容送到網絡伺服器儲存這些文字得以日後再用。
技術上來說，這就成了一個網頁為基礎的文字處理器了，任何有網絡瀏覽器和互聯網連接的人皆可存取，只是其使用體驗會又笨又遲鈍，使用當今瀏覽器提供的更聰明選項絕不為過。
增強！
使用 JavaScript，謙遜的 TEXTAREA 由更豐富的編輯介面所取代，偵測每一個按鍵，即時顯示樣式。使用網絡字型可使寫作體驗更好。Ajax 可將工作幾乎定時儲存，而不需提交表單。WebSockets 可讓許多人同時在同一份文件上工作。
Ajax 和 WebSockets 需要互聯網連接，但穩定連接並無保證，尤其當你在火車或酒店工作時，當今瀏覽器提供功能，在首次載入後，以網絡做為一種增強。
如果瀏覽器支持本地儲存，就可將資料存在本地資料庫，使重要文件的儲存，不被薄弱的網絡連接或意外的停電所影響。使用 Service Workers，網頁開發者可以提供指令給瀏覽器，在瀏覽器(或伺服器)離線時該怎麼做。
這些都是我們可利用的當今瀏覽器功能… 當我們確保每個人都有了基本體驗之後。
規模
沃德·坎寧安(Ward Cunningham)，wiki 的創造者，提出了「技術負債」一詞來形容軟件業的一個共同問題，專案初期的倉促決定令接下來的問題一個疊一個地積累。我愛將三步曲的層次方法想成「技術信用」，花時間在開始時提供核心功能，讓你在之後有隨便探索實驗的自由。
有些人誤解漸進增強就是放棄使用最新最好的技術，正正相反。使用有層次的方式去建立網頁，給你使用最前沿 JavaScript APIs 的許可證，而不用理會瀏覽器現實了多少。
我們看過一些應用三步曲的產品和服務-新聞、社交網、相片分享、文字處理。你可將之應用在更多的服務之上：建立更新待辦清單、管理約會日曆、查詢方向、預留附近餐廳位置，每一個都使用同樣的建設流程：
- 認出核心功能
- 使用最簡單的可能技術實現這功能
- 增強之！
這方法在不同規模之下同樣可行，不只是最高層次的服務而已，也可以應用到個別 URLs 的層次。
問問「URL 的核心功能是甚麼？」，然後使用最簡單的可能技術實現，再增強。這可理清甚麼內容是最重要的，尤其在流動裝置優先的響應式工作流程中更為重要。一旦確立，就可以先將內容以 HTML (最簡單的可能科技) 由伺服器送出。然後，使用條件式載入，你可以決定在有足夠的螢幕空間時以 Ajax 要求輔助內容。若是新聞故事的個別 URL，故事本身應包含在原始回應裏，其他的相關故事或流言應該按需要才由伺服器推送(不過你仍可為相關故事和留言給所有人提供連接)。
更進一步，在頁內的某單一元件的尺度下，也可以施以三步曲。「這元件的核心功能是甚麼？如何以最簡單的可能技術實現？如何增強？」
例如一個載歌載舞式的互動地圖元件，使用X光鏡探之，發現其核心功能其實很簡單：顯示位置。使用最簡單的可行技術：以文字顯示這個地址。現在再增強。
記住這些增強是可以以一個流動的規模提供，第一個增強可能是提供文字地址的靜態圖片，下一級就可以是將靜態圖片換成 Ajax 加強的互動地圖，如果瀏覽器支持地理位置 API，你可以顯示此間的距離，疊上一些動畫與過渡可以幫助傳達道路方向。
網站導覽是另一個分開的元件，可好好應用流動增強規模。基本功能是提供連接到資源，其最簡單-和仍然是最好-的可行技術是謙遜的超連接，一個清單的連接就可以了。在此上，你可以將此增強到一些引人注目的東西，畫外導覽、漸進式展現、溜動、滑動、漸消失、擴張…只有天空才是極限。
因為這些增強可以跟據瀏覽器的個別能力而分層，顯然不只兩個版本而已(基本版和增強版)，你所設計的服務、URLs、與元件可以有很多不同的體驗方式，而這是沒有問題的。
因為網站不用在每個瀏覽器上都一模一樣。
註：
- 騎劫 (hijack) 的諧音
參考資料
- Designing With Progressive Enhancement by Filament Group
本文是《Resilient Web Design》繁體中文翻譯的其中一部份，以該書的相同的姓名標示-相同方式分享 CC 4.0 國際授權。