This presentation talks about trends in web design since 1996. It is a work in progress so if you have any thoughts on what should be included please let me know, it is a work in progress that will probably never end.
I’m Monica Tailor
I run a web agency called kilo75 and I’ve been working at Digital Agencies for almost 15 years now.
I started looking back at the history of the web about 6 months ago out of interest but discovered that it’s difficult to even find a visual history. If you know what you’re looking for then the Wayback Machine is great.
Maybe there hasn’t been enough time yet but I was curious to see if there were any trends or seminal moments in web design that can be used to start compiling a history.
This is my no means a complete work. I’ve presented it a couple of times now and each time I get more and more feedback about what’s missing so please view this as a work in progress and if you have any suggestions I would welcome your input.
Mostly to speed up loading
Died mainly due to it being terrible for seo
Is AJAX the new frames?
Slight over kill but you get the idea. Tiled background - done for a good reason and done well it was great but done badly and it was hideous.
Tiling is still used
Entropy8
1997 Webby Award winner
Jan 1997
1997
Up until around 2003-5 we were building websites in tables. A bit of a hang over from the days when the Internet was for academics and most information was presented in tables. As designs began to make things look ‘pretty’ designs were still governed by tables, so a design was essentially a combination of complicated tables within tables.
And although this screenshot from 2003 for Wired Magazine doesn’t look all that revolutionary it was game changing because it was made out of tables at all ... although it looks like it could be and it helped web designers realise what was possible.
Another site at around the same time which again doesn’t look particular amazing had the same impact:
CSS Zen Garden
Probably something we do all remember and often used in the 2000 era for a number of reasons:
1. Load the site in the background
2. Make a language choice
3. Most common - choose a low bandwidth version
We see far fewer splash screens than we used to because people recognise they’re not good for seo or usability.
All current examples
Tells people they need Flash to view the site but not strictly necessary as you’re putting a click in the way. Far better to launch the site and present a non-flash version if necessary. May be makes people think they don’t have flash installed?
http://www.hrubes.com/
Sometimes people feel the need offer a language choice. This one get’s away with it because it’s lovely
http://www.zarovka.de/
And this is lovely ....
http://www.lorenzomarri.com/
And we can’t talk about splash screens without talking about flash loading screens. There aren’t many of these around anymore but this one is one I worked on back in 1999
Tabbed Navigation made an appearance as early as
December 12th 1998
Later screen (2002) but Apple started using the tabbed navigation in 2000 but combined it with with the hugely successful candy buttons
iMac and multi colour iMacs especially - a sign of product design influencing web which is rare
May 8th 1998
and the combination of candy buttons and tabbed navigation led to the next Apple site navigation
Feb 2002
Tabbed navigation is still a favourite but not always in this obvious file top tab style
As websites grew in size the need for better organisation and ability to navigate to deep within a site lead to drop down menus as well as better support for javascript. Many a web developer in 2000 - 2002 has lost sleep over cross browser compatibility for drop down menus.
Department stores use drop down menus to the extreme and usuability studies show this isn’t great for users.
Thesis Theme
Right now we seem to be on the verge of change but still catering to IE6 is holding things back a bit so techniques like font replacement and transparency don’t work in IE6
What’s now?
Rather than burying information, it is laid out clearly, giving access to links deep within a site with one click. The footer has long been ignored but there’s a bit of a trend to making it a more prominent feature.
Smashing Magazine 2010
Darji Mandal - Community site 2009
timeline based facebook, friendfeed, twitter
More and more ie6
our designs gracefully degrade for ie6 but no long allow ourselves to be contrained by it
transparent layers and transparent PNG
http://rustinjessen.com/
2009-2010
Qubee - more subtile titles on a textured background
An area of much frustration for designers and clients alike is the limited number of fonts we can use. System fonts are restricted to just 5. The only way until recently to show different fonts has been to make them into images, offering actual text in a font of your choice is possible. Even now it isn’t quite there because of the complication of the alternatives available and cross browser compatibility.
The new HTML 5 standards have been published but until there is true cross browser support for the new standards it is difficult to see font replacement becoming mainstream.
Maybe this is about going back to ideas of making and craft but there seems to be a revival of illustration and hand drawn fonts
hdlive09
http://www.charmingwall.com/
Design for mobile first
Mobile web -
We’re hearing about apps for all mobiles, yeah yeah we know theres an app for that!
An app
but will we move away from apps and onto mobile optimised sites built especially for mobile use.
i think there is about to be a huge shift were we see sites built for mobile first, desktop second. This isn’t an app - looks the same doesn’t it?
An what about mobile optimised sites. The blogging platform Wordpress offers a mobile friendly version of sites they host.