Unstyle and looking at naked HTML
Unstyle is an iOS browser that removes all styles and scripts from a page, replacing the original CSS with a minimal stylesheet.
Unstyle removes the website’s original CSS, and replaces it with a much smaller, better [my italics] optimized version. Unstyle
I’m not sure in what ways Unstyle’s stylesheet is better than, say, The Guardian’s styles. It’s certainly smaller, and in a mobile world that really is an important aspect of getting your page to render as quickly as possible. But Unstyle is still a visual browser, where some CSS is necessary to improve the reading experience. For example, it makes sense to hide Skip to… links when we can see where the navigation and main content areas are. Overriding the default CSS
line-height value will make prose more readable.
It’s a lot easier to scan and interpret The Guardian’s home page than its Unstyled version.
Take a look at the home page using Firefox’s No style option. The HTML is messy:
- Some links are repeated one after another
- Some links are oddly labelled
- Some stories are inexplicably placed in nested lists
- There are hundreds of stories to read
- There’s no overall heading structure
The page looks like as if the visual design hasn’t been translated to well structured HTML (whether we should be designing from HTML outwards is a separate question, but let’s assume most people don’t do that…)
Services like Unstyle and websites like Death to Bullshit pose a difficult question. If we are serious about designing progressively for all reading contexts our pages need to work well as simple HTML first. That’s a restraint in many ways, but if we can load 2MB of images, scripts and styles in 0.8s over a 4G connection, it ought to be possible. The result should be quicker, easier to read pages for everyone.
Consider subscribing to the RSS feed. That way, you’ll get notified whenever I post anything new. If you’re not sure about RSS feeds, I wrote a guide to RSS.
Why my website looks so plain Previous post
Next post Container housing – Right solution, wrong problem