• The Real Responsive Design Challenge? RSS.
  • This article is authorized by original author Joe “Begriffs” Nelson
  • The Nuggets translation Project
  • Translator: cdpath
  • Proofreader: Shliujing (Jing Liu), Airmacho (Will Wu)

The Web world is rich, so take a look at server logs. There are crawling robots and mobile devices and user agents running all kinds of operating systems and screen sizes. It’s easy to overlook the experience of most ordinary users because of your web habits.

For example, I found that some of the traffic to my site was coming from readers that subscribed to the Atom Feed. Out of curiosity, I decided to see what my article looked like with Atom reader. The results were not pretty. The problems with feeds reveal deeper usability problems, and their solutions can be applied to more general Web designs.

You might want to try it out for yourself before reading any further. If you maintain an RSS or Atom Feed service, put it in a variety of readers to see what it looks like. And the readers that have visited my website are: Newsbeuter, Newsflow, Sismics reader, Tiny Tiny RSS, Feedly, Feedbin, Akregator, Feed Wrangler, NewsBlur, FeedHQ, Feed Spot, Livedoor Reader, Miniflux, Liferea, Readerrr and Mozilla Reader.

The first thing you’ll notice is that these readers remove JavaScript and CSS but keep images. Sometimes they use custom CSS, or they don’t use CSS at all. Control CSS reader software can provide streaming typography and various optional themes, such as late night mode. You may not have noticed what your site looks like without CSS in a while, and then you might feel the need to repractice your markup language.

Here are a few tips to make your website more user-friendly.

  • Font-awesome isn’t that great when it comes to smooth degradation. You can switch to SVG images that scale perfectly without CSS. In fact withimgThe tag can be added when loading SVGaltProperty that can be provided to non-graphical and non-visual user agents. Use inline height and width so that SVG can be correctly sized without CSS.hereThere are detailed instructions for replacing Font -awesome with SVG.
  • Manually add temporary alternatives to multimedia labels. Like in my blog<video>Tags display badly in feed readers. Some readers just delete it! Some readers make the size of the video frame too large to play. The best solution is to provide a link to the video so that other programs can download or play the video. So I’m going to put a link to the video file<noscript>In the label. I also deleted the markup language (HTML)<video>Tags, in turn, use JavaScript to add these tags after the page loads. I can’t guarantee how this element will behave without JavaScript.
  • Do not reuse headings and other data in markup language and metadata. Unlike the casual style of HTML, the feed format has designated places to specify the author, abstract, and date of the article. Timestamped headers, footers, titles, and even email contacts do not need to be placed in Atom feeds.
  • Select the raster image of the appropriate size. In some of my posts I have used CSS to compress larger images for better presentation. Without CSS these images would be huge and look bad (not to mention less fast).
  • Be aware of the Atom in thesummary 和 contentThe difference between. Some static web site generators (uh, for exampleHakyll) will throw the entire textsummary(Abstract) inside.

This experiment opened my eyes to the power of user agents. There is no essential difference between a full-featured browser and a text-based browser or reader. Users may not always have JavaScript, CSS, and graphics enabled when viewing your site, but a few simple tweaks can make it easier for people to enjoy your site.