Chris Anstey

Over the last few months, I feel i’ve probably learnt more about emerging web technologies than during the whole three years of my university course. This is not purely down to added pressure with deadlines before and after Christmas, trying to provide the best solutions for clients in the short time available, but also as I have been reading up on certain technologies. These sources have not only been a great source of information, but have emphasised on making use of the technologies now, rather than waiting until they are fully compatible with all browsers.

Over the festive period, I have been reading the book ‘Hardboiled Web Design‘, by Andy Clarke. Although I have not finished reading the book, I have learnt a great deal already, not only about the different technologies, but the web development process as a whole, which has given me a different approach to the way I work from day to day. Clarke talks about the ‘hardboiled’ process, mainly stop attempting to completely please everyone and everything, and just focus on ensuring all users have the same experience. He also talks about designing and developing from the top-down, rather than the other way round, which I have been doing since I started designing and developing websites. For those not technical folk, this means that I have previously been spending hours, days and even weeks ensuring that a website looks exactly the same in all browsers, included outdated browsers such as Internet Explorer 6 (yes, a lot of people still use this, even though it was initially released in 1999, it is the equivalent of a large proportion of the gaming community still using Nintendo 64′s). Clarke emphasises on flipping this process around, designing for the best browsers first, ensuring they have the best experience of the website, and attempting to match this experience as best as possible in older browsers. Previously, I would have used JavaScript fixes, or even worse drop of a fully functioning JQuery feature as it did not work in older browsers, but now this has all changed.

The book has given me a wake up call, after all, who opens up Internet Explorer 6, and then opens up Internet Explorer 8 to see if the website looks exactly the same? No one, that’s who. So why not just make sure the users who are using the older browsers have a similar experience, and provide them with a working version of the website. By all means, do not provide a broken version of the site, but why not just provide a quick working alternative to a JQuery menu that works perfectly in newer versions of different browsers, after all, people using Internet Explorer 6 are the type of people who aren’t going to be too interested in beautiful looking websites, if they were, they would have upgraded a long time ago, surely? Yes, you’re right, just make sure they are receiving the same or a similar user experience, and don’t call me Shirley.

Let me show you an example of how i’ve applied this approach. For the latest project I have been involved with at FP Creative, creating a website for ‘Pure Print’, a print company based in the south-east of England, which is fully customisable through Drupal, I have used a few alternatives of features for earlier versions of browsers. After agreeing on the design that would use a smooth JQuery navigation that triggers sub-navigations when clicked, I found that there were severe problems in earlier versions of Internet Explorer, especially IE6 (of course). So instead of sitting down for hours of end writing CSS overwrites through the present ‘ie6.css’ file, I decided to provide a quick alternative menu for these earlier browsers, instead of wasting time trying to make the menu look pixel perfect in every single browser. Below is how the menu looks in Internet 6 compared to Firefox OSX:

The main problem with the navigation did not really lie with the functionality (i.e the JQuery code), although there were a few issues with the ‘active’ link disappearing when the user clicks on another link, but with the transparency that is present on the ‘diagonal’ side of the menu. Therefore, instead of making a fix for the problem in IE6, or even worse, reducing the performance of the menu in the newer browsers because it didn’t work properly in IE6, I simply used ‘blockier’ version of the menu. This way, the user will be able to use the menu in exactly the same way as if they were using a newer browser, users using these newer browsers will be able to see the menu in a nicer way, and I have not spent days on end trying to make the menu look the same, time which could be spent on more important things such as ensuring the client can customised all aspects of their website through Drupal.

The book also highlights a major factor in the usage of emerging web technologies, which is that a lot of developers refuse to use these technologies until they are ‘fully’ released, in other words, compatible within all browsers. In Clarke’s words, "good luck with that", as by the time they are compatible in all browsers (and that’s if they ever will be), there will no doubt be newer technologies on the horizon to use. Leading on from the designing and developing for the newer browsers first, why not make use of new HTML5 and CSS3 features, which almost rewards users who are using these browsers by showing them content in the best suitable way. Again, this does not mean that users who are using older browsers are being neglected by being presented with broken websites that they cannot use, but it means they are shown a simplified version of a website, which is still usable and giving them a similar user experience.

For the login panel of the ‘Pure Print’ website, I used my first CSS3 property on a live website, which is the ‘box-shadow’ property. This new property enables text, images or a content area to be provided with a drop shadow, in which you are able to define the size, the colour and the blur of the shadow, along with how far vertically and horizontally the shadow displays from the property it is shadowing. The good thing about most CSS3 properties is that if the browser (eg. Internet Explorer 7) does not support or is compatible with the property, it will safely ignore it, so in non-technical terms, if you put a ‘box-shadow’ property on a website, it will show on Google Chrome, but not in Internet Explorer 8. Below is the login panel that I mentioned:

As you can see, the shadow does not appear on Internet Explorer 8, as it is not compatible with this browser, however the user can still use the form with no problems, in order to login and add content to the website. As both HTML5 and CSS3 are still in development, and are yet to be compatible with all browsers, a useful tool to see which properties are compatible with different browsers is caniuse.com, which outlines what is compatible, and what is not in each browser.

I am only just over half way through the book and you can see I have picked up some great tips on the ‘hardboiled’ approach to web development, and I feel I am working more productively than ever, yet still ensuring that all users are able to perfectly use the websites that I am designing and developing. I am currently on the web fonts section of the book, where Clarke talks about the approach to using embeddable fonts for websites using tools such as TypeKit, while provided safe fallbacks for earlier browsers to ensure that websites are still readable in older browsers, and ground-breaking in newer browsers. I’m sure these new techniques and tips with follow me through into my career, not just in the long-term but for upcoming projects.