本文講的是響應式設計的真正挑戰：RSS，

web 世界豐富多彩，去看看服務器日志吧。那里充斥著爬蟲機器人以及運行著各種操作系統，有著各種屏幕尺寸的移動設備和用戶代理。你很容易會因為自己使用 web 的習慣而忽略了大多數普通用戶的體驗。

比如我發現自己的網站有部分流量來自訂閱了 Atom Feed 的閱讀器。出于好奇，我決定看看用 Atom 閱讀器看我的文章是什么樣子。結果并不怎么好看。feed 的問題揭示了更深層次的可用性問題，而其解決方案還可以應用到更通用的 web 設計上。

在繼續讀下去之前你可能想要親自試一試。如果你維護著 RSS 或 Atom Feed 服務，可以放到各種閱讀器中看看是什么樣子的。而訪問過我網站的閱讀器有：Newsbeuter, Newsflow, Sismics reader, Tiny Tiny RSS, Feedly, Feedbin, Akregator, Feed Wrangler, NewsBlur, FeedHQ, Feed Spot, Livedoor reader, Miniflux, Liferea, Readerrr 以及 Mozilla reader。

你會先注意到這些閱讀器會刪除 JavaScript 和 CSS 但是保留了圖片。有時候它們會使用自定義的 CSS，甚至干脆不用 CSS。通過控制 CSS 閱讀器軟件可以提供流式排版以及各種可選的主題，比如深夜模式。你可能很久沒有留意自己網站不用 CSS 時的樣子，看過之后可能就覺得有必要去重新練習一下標記語言了。

下面幾個建議可以讓你的網站對大家更友好。

• Font-Awesome 在需要平穩退化的時候并沒有那么出色。可以轉而使用沒有 CSS 也能完美縮放的 SVG 圖像。實際上用img?標簽加載 SVG 的時候可以加上?alt?屬性，可以提供給無圖形和非可視的用戶代理。使用內聯 (inline) 高度和寬度這樣 SVG 在沒有 CSS 的情況下也可以保證正確的大小。這里有替換 Font-Awesome 成 SVG 的詳細說明。
• 手動為多媒體標簽添加臨時替代方案。比如我的博文中的?<video>?標簽在 feed 閱讀器上顯示得非常糟糕。一些閱讀器干脆把它刪掉了！還有些閱讀器把視頻框的尺寸搞得非常巨大卻沒法播放。在沒法播放視頻的場景下，最好的解決方案是給出視頻的鏈接，方便使用其他程序下載或播放。所以我會把視頻文件的鏈接放到?<noscript>?標簽里。我還刪掉了標記語言 (HTML) 中的?<video>?標簽，轉而用 JavaScript 在頁面加載之后加上這些標簽。我沒法保證這個元素在沒有 JavaScript 的場景下的行為。
• 不要在標記語言和元數據中重復使用標題和其他數據。與 HTML 的隨意風格不同，feed 格式有指定的地方來指定文章的作者，摘要和時間。帶時間戳的頁眉頁腳，標題甚至 email 聯系方式都沒有必要放到 Atom Feed 中。
• 選擇合適尺寸的光柵圖像。我在一些博文中使用 CSS 壓縮了較大的圖片以達到更好的展示效果。如果沒有 CSS 這些圖片就會非常巨大看上去很不妙（更不用提傳輸速度也會差一點）。
• 留心 Atom 中?summary?和?content?的區別。一些靜態網站生成器（呃，比如?Hakyll）會把整個正文都丟到summary（摘要） 里面去。

這次嘗試讓我見識到了用戶代理的作用。全功能瀏覽器和基于文本的瀏覽器或者閱讀器之間并沒有本質的區別。用戶在瀏覽網站時未必會全部啟用 JavaScript，CSS 以及圖像，而一些簡單的調整就能讓大家更容易欣賞你的網站。

原文發布時間為：2016年09月19日
本文來自云棲社區合作伙伴掘金，了解相關信息可以關注掘金網站。

總結

以上是生活随笔為你收集整理的响应式设计的真正挑战：RSS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。