本文講的是響應(yīng)式設(shè)計的真正挑戰(zhàn)：RSS，

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

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

在繼續(xù)讀下去之前你可能想要親自試一試。如果你維護(hù)著 RSS 或 Atom Feed 服務(wù)，可以放到各種閱讀器中看看是什么樣子的。而訪問過我網(wǎng)站的閱讀器有：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 閱讀器軟件可以提供流式排版以及各種可選的主題，比如深夜模式。你可能很久沒有留意自己網(wǎng)站不用 CSS 時的樣子，看過之后可能就覺得有必要去重新練習(xí)一下標(biāo)記語言了。

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

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

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

原文發(fā)布時間為：2016年09月19日
本文來自云棲社區(qū)合作伙伴掘金，了解相關(guān)信息可以關(guān)注掘金網(wǎng)站。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。