Web Directions Reflections Part 4: Hardboiled Web Design & SVG Salutations

In my final Web Directions @media post, I reflect on two presentations which will be of interest to web designers and developers alike…

Andy Clarke: Hardboiled Web Design

Andy Clarke was the keynote speaker on day 2 of the conference and, for me, his presentation was the most controversial. His new book, Hardboiled Web Design, discusses why the web development process needs to change to make the most of modern browsers. His main points were:1. Is progressive enhancement still relevant?The notion that you build for the least-capable devices then enhance it for modern browsers was first raised in 2003. Andy considers it a mistake to start from the lowest common denominator for visual design.2. Design from the top-downAndy recommends you start with the best possible experience first. You can then remove features for lesser browsers.3. Sites need not look the same in every browserIt’s impossible for a site look the same in every browser. Andy showed a stunning website demonstration using CSS3 transformations and animations which worked in Chrome and Safari. In other browsers, the site was attractive but used a completely different layout and had far fewer effects.To achieve this, Andy used Modernizr: a JavaScript library which detects browser features. For example, if the browser supports border radius, it adds a “borderradius” class to the HTML element so you can alter your CSS accordingly:

#myelement{	background: url(rounded-background-image.png) 0 0 no-repeat;}.borderradius #myelement{	background-image: none;	-webkit-border-radius: 5px;	-moz-border-radius: 5px;	border-radius: 5px;}

He stated that IE6 is not a problem. IE6 users may receive a very basic experience, but they were ignorant about the design in other browsers and rarely complained!4. Forget current market sharesIf you analyze your current browser market share, you’re looking at the situation now. What about the future? What will users be using in 6 months time when your new site is released?It was a thought-provoking and entertaining presentation and I agree with much of what Andy said — although he admitted some of his ideas were in a state of flux. I did have a few reservations:

• Progressive enhancement has it’s problems, but Andy appears to be advocating a form of graceful degradation. From a pure visual design perspective that’s probably a good idea: you design the best experience first. However, code development is different — it’s usually more logical to work from the bottom-up.
• While I accept sites can look different across browsers, most offer a similar experience. Is it commercially viable to offer 2 or 3 completely different layouts? It’s hard enough to design one concept which pleases your client!
• Andy used some stunning Webkit effects in his example, but those browsers currently account for around 15% of the market. That figure will grow and other browsers may catch up, but you’re still spending the majority of your time/budget developing for a minority audience. There are many unknowns and you’ll certainly need to update your code over the coming months. That might make some clients a little nervous.
• Finally, IE8, Firefox and Opera remain capable browsers. They may not offer the same CSS3 magic, but it’s possible to achieve good effects without resorting to Webkit-only code.

I look forward to reading Andy’s book to see how he addresses these concerns.

Doug Schepers: SVG Today and Tomorrow

Doug knows his SVG. Seriously. Forget PowerPoint — even his presentation slides were SVGs shown in Firefox (which he considers to be the most capable SVG browser at this time).Like many developers, I was excited at the prospect of Scalable Vector Graphics when they were announced at the beginning of the century. That turned to disillusionment when Microsoft ignored the standard but, 10 years on, SVG has become trendy again and it’s promised for IE9.Doug’s presentation was amusing and he showed some powerful SVG examples. If, like me, you considered SVG to be basic lines and shapes, you’ll be amazed at what can now be achieved. Transforms, animation and Photoshop-like filter effects are all possible.I recommend you view Doug’s online presentation and there’s also a video of him speaking at MIX10. Finally, the W3C has published a free online book — An SVG Primer for Today’s Browsers — if you want to find out anything and everything about the format.