Web Design from 2000 to 2016

Web design has changed a lot over the years. A hell of a lot to be precise. In fact, thinking about how we used to make websites and comparing it to the techniques we use today is like chalk and cheese. So, let me take you on a journey down my own digital memory lane and let's see just what's changed between the years 2000 and 2016.

I graduated in 2000 and went straight from University computer labs to the design team of a medium-sized web design agency in Chelmsford, Essex. It was there that I began using PhotoShop to create complete page layouts - including headings and text - and learning how to slice those page layouts into little pieces and reassemble them in HTML using tables, almost like a digital jigsaw puzzle.

Designing only for the desktop meant my designs were made to fit an 800 by 600 pixel browser window as this was the most common screen resolution and in terms of the code we used to write, everything was inline, no CSS files were harmed in the creation of these fledgling websites.

But what about mobile web? Back then, web design was focussed totally on the desktop, the mobile web barely existed and was served via WAP which was painfully slow and in any case, mobile screens were tiny in physical size as well as resolution so it wasn’t something web designers or website owners gave much thought to.

It was around 2003 when my web designs started to tentatively use CSS, only for fonts, font sizes and colours at first but later, around 2005, the idea of using <div> tags positioned via CSS began to take over as the de rigueur method of coding and laying out a website design.

One of the things I remember most from the early days of my web design career is the amount of time I spent updating clients sites. By that I mean adding press releases, new products, newsletters etc. It reached a point where I was spending more time updating sites than I was designing them. I guess I wasn’t alone because this was when people first started talking about Content Management Systems (CMS). Ah, the holy grail of a web designers working day, no more updates, woohoo! Clients managing their own sites, happily adding and removing content, yippee! Only it didn’t quite work out like that. Early content management systems were incredibly inflexible for designers and developers and incredibly hard to use for clients who were suddenly expected to have a firm understanding of HTML and the rules of valid mark-up. Sure, a CMS is a great idea but it’s only now, with the Craft CMS that we use to build our websites with, have we reached something that is both powerful and flexible for web designers and genuinely easy to use for our clients.

Around the same time accessibility became a hot topic in the field of web design, it was no longer good enough to just hack a design together in HTML, pray that it worked in IE6 and hope for the best. We had to write code that was both valid and semantically correct which is when web designers started trawling through the W3C site becoming increasingly confused and frequently arguing over what tags should be used for which purpose and when. Good times!

Whilst all this was going on, and web designers were still focussed on designing and developing websites that were only ever viewed on desktop machines, the clever squirrels over at Cupertino (that’s Steve Jobs and the Apple clan) were busy designing the first iPhone. When the first generation iPhones hit the streets in 2007 the game changed almost overnight. People were now visiting your website on their iPhone and guess what? Pretty much every website looked rubbish or refused to work on an iPhone because no-one was prepared for the giant leap forward that one device had just given us.

As usual, web designers and developers retreated to the safety of their dimly-lit bedrooms, apartments, basements and scratched their heads trying to come up with a way of using the tools available to them to solve the problem posed by the dawn of the mobile web. The first solution was to design and build a completely separate version of your website and serve that site when a user on a mobile device visited your domain. I would like to thump the person that came up with this idea because not only is it a terrible idea it means you’re effectively doubling the workload for each client because they now have two sites to keep updated.

An alternate school of thought, and the one we’ve always subscribed to, has had several names over the years but the one that finally stuck is this: Responsive Web Design. Spawned from the mind of Ethan Marcotte in 2010, it’s the approach most web designers agree as being the best and uses CSS to alter, adjust and reassemble the elements that make up a website and present them in the best possible way, no matter how big or small the amount of screen space available is, and it all stems from a single version of your website so goodbye m.mywebsite.com.

Another landmark in the timeline of web design was the release of HTML5. Up until this release HTML had always been pretty bland and basic in terms of functionality and features. If you had a table (a real table with tabular data and headings, right!?) or a paragraph of text or a photograph from your hiking holiday in the Lake District you could insert these elements into your website and - voila! - when you viewed the page in the browser there were all your items nicely laid out. The problem was that HTML had been doing this basic stuff since about version 2 and web designers needed more. We always need more and HTML5 was like HTML on steroids. I won’t detail every new feature or enhancement but it was the most exciting thing to happen in the web design community since people realised 5 minute Flash intro movies might be a bad idea.

Around the same time as HTML5 web designers were treated to CSS3 which was also packed with new and exciting features, for example: you want a site where everything has rounded corners? Say hello to border-radius. You want to animate something without using a GIF or Flash? Say bonjour to keyframe animations. You want to do some super-complex element selections without using oodles of classes or IDs? Say guten tag to our newest CSS selectors.

As CSS became more and more complex and more and more of a website’s code was shifting from the HTML and into CSS files these files became ever larger and harder to work with. Specificity became a word that refused to roll off of anyone’s tongue but we needed to know about it because it was more often than not the cause of our ultra specific and super-long classes not working. This is when some bright sparks came up with SASS and LESS, the idea being that CSS had become bloated and overly complex and could be improved with some techniques borrowed from programming and with that mixins, variables and extending was born.

That technological whistle-stop-tour just about brings us up to the present day where, as I said at the start, web design has changed to such a degree that it bears almost no resemblance to what it was 16 years ago. The only things that haven’t changed are that IE is still the worst browser and no-one has been able to save the funds of all those Nigerian princes.