There are a lot of websites out there which have been beautifully and meticulously designed, yet aren’t designed WELL. And that’s usually because the designer in question hasn’t considered optimization or performance at all. Now this is not a bash on designers, but more of a plea to them; performance should be part of design. I know it requires some technical knowledge, and maybe you have to work together with a geeky front-end developer to get some important stuff right, but i’ll guarantee it’s going to be worth it .
Why performance is part of Design
As a designer you aren’t just making a pretty picture, right? Your doing much more than that; you are trying to achieve a goal. You’re probably designing sites around conversion and User Experience is one of the biggest aspects of getting you there. Now, in the usual definition of User Experience, you’re probably looking at readability, information architecture, visual hinting and stuff like white-space to make certain elements stand out, but the first thing a user literally experiences is how fast a site loads. So i’m here to argue that getting performance right is actually the single most important part of crafting the User Experience.
It only takes half a second to decrease traffic (and thus revenues) by as much as 20%, according to a Google study. Mentions of this study can be found in an article that also shows Amazons’ research on this subject. Amazons’ found that every 100 milliseconds of loadtime decreases sales by 1%. A user expects a site to load within 2 seconds and after 3 seconds, up to 40% will leave and not come back. Thus;
What can you do?
There is some no-brainer stuff you can do, to get quick results, like decreasing the amount of dropshadow you use (especially on text), decreasing the amount of fonts and of course trying to avoid big images. But the biggest issue in web design / web development is latency, which I will go into a bit deeper now.
The biggest performance-hog on the web is latency. To boil it down; latency is the time you’ve spend waiting for the browser to . Now, this doesn’t mean loading your stuff, mind you; it’s just the time spend looking for your stuff so it can be loaded. In this breakdown (altered from source w3.org/TR/navigation-timing/ ), you can see that actually downloading an image or a stylesheet isn’t what’s taking up the most time.
When you’re using the Chrome dev-tools you can check out latency and load-times for yourself under the tab ‘Network’. The more opaque bars represent latency for that specific item. Apart from choosing the right hostingcompany and making DNS-lookup a priority, there isn’t that much you can do about latency directly… What you can do is learn to make your designs ‘cope’ with latency a bit better.
These images came from the slides of Harry Roberts’ excellent talk about creating more rational designing that are better suited for css. One of the things he mentioned was a rule-of-thumb, which I think is very appropriate:
If we can achieve 80% of the design with 20% of the code, we should do it.
As an example he showed us this comparison:
The left image is the ‘PSD’ version; it’s what was supposed to be the design. The right image is the actual end-product. It’s quite a bit different, especially when all zoomed in. To create the image on the left, we would have to load in a tiny image just for the divider, while the image on the right can just be done in CSS. The designers among you may scream in terror on how bad this design was translated into code, but the front-end developer would argue that it’s one less image to wait for and that the difference is hardly noticeable if you look at the end-result without zooming in, thus making it a smarter design-choice.
I hope you can see why we prefer a flat design when it comes to designing for performance. There are many many people who will toss away flat design as ‘just a trend’, but we think it’s a bit more then that. Since everything is flat, or at least not textured, there’s less need for images and effects, making a design better suited for translation to CSS. And without all the extra images, your load-time will decrease exponentially, which will make your users happier.
I’m curious to see which techniques you guys use. I could go on and on with this topic, but for now, i’ll just leave you with the excellent slides of Harry Roberts’ talk: