Tools of a different trade
I was in Boston last week for An Event Apart, the second of five instances of the travelling web roadshow touching down in the US this year. As with Seattle, all the talks were of a ludicrously high standard. Tickets are still available for the Minneapolis leg; grab ‘em while you can.
What’s fascinating about seeing all the talks together is finding the unspoken connections between them. Without any prior co-ordination, myself and Aarron had moments of crossover with our talks, Emotional Interface Design and Paranormal Interactivity.
Blenderbox have written a round-up of the themes from An Event Apart. This is the one that really stood out for me:
Your designs should embrace the diversity of browsing experiences offered by different devices.
There was plenty of talk about technologies like media queries and devices like the iPhone and iPad. All of it was galvanised together in Ethan’s superb A List Apart article, Responsive Web Design:
Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts.
Here’s my quick three-step guide to ensuring your websites work in just about any device:
- Mark up your content with a logical source order.
- Style your markup into a flexible—i.e. liquid—layout.
- Use media queries to re-arrange the layout for varying viewport widths.
If you want some examples—and feel free to resize your browser window—peruse Huffduffer and Science Hack Day from myself, dConstruct 2010 from Andy and Talking Animal Blug from Patrick (actually, that last one uses JavaScript to get the same result but the principle is the same).
It seems that step two continues to be the sticking point for most web designers. We’ve had over ten years to get this right, yet everything that David Emery wrote in 2006 is truer than ever today:
There are very few legitimate reasons for using a fixed width site, the main one being concerns over the line length on a fluid width site; obviously as the site gets wider, the line length gets longer which is bad for readability. This is can easily be countered by using max-width, larger font sizes and so on but is really quite faulty thinking – if the solution is a fixed width site that’s sized for 1024×768 then if you’re window is any smaller then that then the line isn’t readable at all, which is obviously much worse.
I also think he was spot-on with his explanation for the prevalence of fixed-width layouts:
When you make a web site design (probably in something like Photoshop) it obviously starts off as static — you have no way of testing how it’ll stretch in a browser. You’ve got to picture how that’s going to work, and design accordingly.
Photoshop and Fireworks are great tools …for tweaking photos and creating icons, gradients and textures. When it comes to laying out web pages however, they are worse than substandard. They are actively harmful. They reinforce the incorrect idea that there is a way of representing the browsing experience in anything other than a browser.
What’s ironic is that designers who continue to shackle themselves to Photoshop and Fireworks do so because they claim that designing with HTML and CSS in the browser limits the design possibilities. And yet they are perfectly content to limit themselves to an environment where designs cannot be resized, cannot respond to varying text sizes and typefaces, and cannot convey even the most basic of interactions.
Meagan Fisher has some good advice on making your mockup in markup. And of course, Malarkey has plenty to say on this subject.
