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.

So Unstyle is slightly misimplemented, but the idea of rendering a meaningful, readable website sans javascript and CSS raises some interesting questions.

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.