redarrow

Can you have it all?

6 March 05

As web designers and developers, we are all striving to do the best we can given the resources available to us. Not only do we want a knockout design, but we want it to be standards-compliant, cleanly accessible to those with old browsers, liquid enough to allow for a clean increase in text size, and accessible to users with disabilities. Is it possible to have it all?

A rich history

Over the past few years, we have all been getting used to working with web standards to create our sites. Much of that credit goes to Jeffrey Zeldman and the few pioneers who started building websites without tables and spacer gifs.

Since then, sites are being completely designed with CSS, and larger organizations are jumping on the bandwagon - ESPN and Sprint jump into mind. We've developed hacks for browsers that can't support standards correctly. We've developed hacks for adding better ways of visualizing semantic content, like lists that form the navigation of a site. We've developed methods of organizing sites to allow better access to screen readers.

But the question I pose here is: can we have it all?

The dilemma

I bring this up because I've started a complete re-markup of Hiram's website. I was frustrated with the quick just-make-it work setup, so now it's time to make things more efficient in CSS, in Lenya, and in the markup itself.

Increasing efficiency in Lenya is now easier, thanks to months of playing around. Making CSS more efficient is now easier thanks to articles like this and this (not to mention some great inspiration from here. And then there's the markup itself. Sure, if your design was made with liquidity in mind, you can definitely make it happen (take a look at this entry in CSS Zen Garden, for example). But what about a design that has fonts that you need to use but aren't part of the standard fonts used by all the browsers? SIFR was created for this, but it only works when you use the font as is. If you need to mess with kerning or letter spacing, SIFR won't help either.

Case in point: take a look at these (unfinished) page markups for Hiram's various page designs. Cameron did a fabulous job with this design, no doubt. I gave myself the challenge to re-markup these pages based on the flow of the page if the browser did not use stylesheets. Go ahead, check out these pages in Firefox using the Web Developer extension to remove all styles. Nice, eh?

OK, so one thing down. What about liquidity of the design? Hmmm. There's a slight problem. Because of the font used for the tabs and secondary and super navigation, increasing the size of the text does nothing since they are only images. I could replace the text in the images with real text, but I wouldn't get the total effect of the design.

Hmm, what about usability for those with disabilities? Because FIR was used for the tabs, secondary and super navigation, screen readers like Jaws will skip over them. So, even though they can get to their content right away on the page, they have no way of navigating around the rest of the site.

Back to the question

When Cameron and I worked together on the site back in the summer of 2004, we posted the comps on Cameron's site to get reader feedback. So I come to you again, faithful web designers and developers, for advice. It seems to me that you just can't have it all. Or can you? If so, what can be done to the current revised markups to improve them, in your opinion?