Sam says you should read this
This blog was created with the BlogFile software, written by Samuel Levy.

You can find Sam on Google + and LinkedIn.
 

Designing for the modern web

Let me preface this by saying that I am not a designer. My design sense has been described as somewhere between "programmer" and "neck-beard programmer". This post isn't about making designs that look pretty; it's about making designs that work.

Once, a long time ago, internet speeds were slow. Like, really slow. Many of you may not remember this, but I grew up in a small country town, so I had to live with it for longer. I remember considering a 56Kb modem to be an extravagance. When helping my parents move a few years ago, I found a modem that was proudly proclaiming to offer an "ultra-fast" 3600 baud. That's 3.6Kb/s, total bandwidth.

Anyway, in those dark days, people had to consider how much they were trying to force through the pipe (so to speak). People "optimised" HTML by leaving off closing tags wherever they could, and deleting all the white space. Images were tiny, and compressed massively. Every excess byte was the enemy.

After a while, broadband started to creep in; ISDN, Cable, ADSL; speeds started to improve. Designers stopped having to care so much about how assets were used in their designs, and started to make things that they thought were amazing. It was about this era when flash sites started to flourish, and MySpace had about 3MB of download just to see their home page. Some people kept "low bandwidth" versions of their site around, but in general, they were ugly and rarely updated.

All these brilliant things came into play which made it possible to have an even more interactive web. CSS tricks, Flash, and JavaScript started being used everywhere, and download sizes started to sky-rocket. Optimisation was unimportant because clients all had massive amounts of bandwidth (at about this time, my father eventually traded in his 36Kb modem for a 56Kb modem - we were living in the future!). Browsers evolved, and everyone wanted to add even more tricks in to make their sites look as impressive as possible.

500KB of conflicting CSS rules? No problem! 1MB image used and down-sized to a width of 100 with HTML style rules? It's high resolution! Importing three entire javascript libraries to access a single function from each? Well I might want to use another function later!

Designers and programmers went mad, trying to get away with as much as they could without having to worry about bandwidth any more. This behaviour went on for a few years (and is still happening in many places) but in 2007 something happened. The iPhone hit the market, and suddenly everyone realised that they had clients with limitations - flash wouldn't work, bandwidth was slow (remember - the first iPhone wasn't 3G), and everyone seemed to have one.

Enter the Mobile Web. Now mobile phones had web browsers for a while before the iPhone but they were largely considered to be not worth the effort to develop for, and used mainly by giant nerds. The iPhone pushed a good rendering engine (webkit) onto a device with a small screen, that everyone wanted to have. There was a mad scramble to get "mobile" sites up, so that people on an iPhone (and then on the many other "smart phone" devices that followed) would have something to look at which wouldn't take three minutes to download.

Slowly, mobile internet speeds are increasing, and mobile browsers have become even more capable so designers will probably start to forget about low-bandwidth devices again.

So how should we be designing for the modern web? This blog, and other projects that I'm working on showcase some of my thoughts on the issue, but I'll share my personal guidelines here.

1. CSS is powerful
Use CSS instead of images wherever you can. You no longer need gradient images and corners to get those effects. CSS has a smaller download size and is more easily reusable.

2. Weigh up size over connections
One of the most frequent arguments about "you're doing it wrong" that I got with blogfile was the fact that the CSS is served inline with each page load, as opposed to as an external .css file. The reason why this works for me is because the actual page load is tiny, and causing extra connections to find out that the CSS hasn't changed would be slower than just serving up the small amount of CSS each page load. Even if you are using a copy of your CSS that is cached in the browser, there is an overhead of calling to the server to see if the file is still current.

3. Reduce HTML with a simple structure
Looking at the HTML source my main home page (built with Drupal) compared to the HTML source of this blog, I have used far less HTML elements to produce a page here (and what I've used still has some unneeded redundant elements). So many sites have a massive list of elements so they can uniquely style each little piece of a line, which results in a large HTML download overhead that doesn't actually offer much advantage. A simple, well thought out HTML structure allows you to reduce bandwidth, and makes the structure easier to understand.

4. Don't include JavaScript that you're not using
This blog runs 100% without any JavaScript. I originally had set it up to include jquery so that I could get a bunch of nice effects, but then I realised that they weren't necessary.

5. Fall back nicely
The lack of JavaScript, the lack of images, and the simple HTML structure of this page means that it falls back relatively nicely on devices that don't support the newer CSS features properly. I may have square borders, or no gradient for some viewers, but my content is still readable.

So that's what it means to me to design for the modern web. I may not be making masterpieces here, but I can make something that works, and works well. I use only what I need to, and provide something that works well on other devices and at low bandwidths.

I'd really encourage designers (the ones who shave their necks, and know how to make things look pretty) to think about these things when they're designing for the web. It'll make it a nicer place for everyone.

Comments have been locked for this post.

You could change the favicon of your main site home page, unless it's on purpose to have drupal icon.

Nice blog :)