We recently attended Speak the Web in Sheffield and Leeds and brought a lot of really useful information and ideas away with us. I attended the Leeds talk where Andy Clarke, a well respected designer, leader of web design studio Stuff and Nonsense, and CSS guru, presented a preview of his new publication “Hardboiled web design“.
The main theme around his talk (and something that we put into practice at What!?) is top-down web design and development.
What is top-down web design?
Well, simply put it’s a different way to design and develop websites. Many of us are (and I certainly used to be) obsessed with websites being pixel perfect in all browsers. We open a site in Firefox or IE and compare them down to the finest detail, making sure everything is precisely the same and thoroughly consistent. Developers are given a hard time, and so are designers when the all too familiar phrase “no you can’t do that because it won’t work in IE” comes back at you.
So, why do we do this?
The fact is, websites needs to work in all the main web browsers, and I don’t personally agree with some agencies deciding to drop support for IE6, sadly its far from dead, but a website doesn’t need to work or look exactly the same in every single browser! In fact it shouldn’t! The new features available through CSS3, HTML5, and even my old favourite Javascript shouldn’t be disregarded because a small percentage of users don’t have them - we should embrace these new technologies and make amazing things with them. Top-down web design is precisely this, the decision to make a website that is “shit hot” in Chrome, Safari, and Firefox, but which works well (albeit slightly differently) in IE and other older browsers.
This issue extends from print designers who moved into digital. Before the transition they would create one design, which went to print, and was delivered in one medium and format. However, this has then extended to website design whereby when a designer passes their creation on to a developer, they expect it to be represented perfectly online. But, for this to be accomplished many features that are not supported by older Internet browsers are removed… but this shouldn’t be the case! A website needs to be designed and built in different formats to work with a range of browsers, but which utilises the technologies available and the browsers that support them! However, for this to happened designers must have an understanding of the capabilities of the latest industry developments, so that they can work these elements into their designs whilst also having an idea of how the page will look if they aren’t supported.
This can be as simple as adding a text shadow effect such as the one on our Star Precision website, which doesn’t appear in IE, but adds to the aesthetic in newer browsers. Or it could be using JS and the jQuery library, or the HTML5 video player on sites like Vimeo, but with Flash fall back for older browsers. It’s important to remember and spend time designing websites so they look right when the rich features aren’t enabled, but we should avoid pushing them to one side because “It wont work in IE6″.
Obviously the design and build time will be increased, but this is something that should be budgeted for. If users of IE6 are greeted with a message informing them that “You are using an out of date browser, please update to use all the rich features of this website”, more often than not they will. Large corporations that lock down their networks and do not allow software upgrades will soon be forced to if sites are not fully functional on their old systems. Whats is the incentive for a user / organisation to update if we as an industry provide the same standard of service and aesthetic across all the old browsers?
The Future of Web Design 404 page is a great example of utilising CSS3, and Youtube, one of the largest and most popular websites around is removing IE6 support by March the 13th (see Mashable article). I’m certainly not saying we should drop support for IE6 and similar browsers completely, but we should certainly stop compensating for it’s downfalls by holding back our creativity.
What do you think?
Shortlink:
By Chris Kemm