execution order of CSS affects usability

execution order of CSS affects usability

Modern websites are a rich combination of content, behavior, and style. The behavior has traditionally been implemented in JavaScript and the style has been achieved with CSS.

Ten years ago, browsers were simple and so were web pages. Developers didn’t have a lot of tools. Java in the browser was one solution JavaScript was another. Both had their usefulness, both had their issues. Most Java in the browser has gone the way of the Dodo Bird … thankfully.

JavaScript hasn’t been perfect. It’s biggest strength has also lead to it’s biggest challenge – it’s very easy to learn and use which has lead to it being used A LOT! This make websites heavy and slow, especially for those with slow internet connections such as DSL connections and mobile cellular internet.

Web developers – good web developers – understand not only what JavaScript can do but also HOW it it is handled by the browser. Their testing covers transmission, loading, and execution – not just functionality.

HTML5 and CSS3 are enabling more and more behavior without JavaScript. Modern browsers are really “web execution engines”. Look at the size (install and runtime footprint) of a modern browser and it’s clear it has been built to be a runtime system. They are capable of performing image manipulation from real time scaling and drop shadow to 3D transformations.

The shift from JavaScript to HTML5 and CSS3 for these capabilities brings with it the same developer concerns.

The image in this post is of a website which took approximately 30 seconds to render. It makes heavy use of CSS. As you can see, the developers didn’t consider what happens when their CSS loads slowly. The site is unusable – even confusing – until everything gets loaded and executed.

A good web experience requires a “progressing experience” – one where the user can get value very early and gets additional capability and options as more of the content is loaded. It’s bad design when the “content” is loaded but unusable because the “style” is slow. This type of experience suggests the developers and the owners believe “style over substance”. I doubt they want that to be their slogan.