At the recent @media conference, Joe Clark challenged web designers to create an alternate version of web sites for those with low vision.
“Go west young (wo)men and create a site that has complete navigation and text wrapping at all font sizes. ”
I’ve spent the past hour or so creating a low-vision version of the web site for Alcala Pet Care in Encinitas.
To do this, I changed the background of the body, wrap, and header. The page now spans the entire browser, text is larger, the page is dark with light text, and link colors have changed. To make it look a bit more stylish, I gave the top nav a background glow and the main content section drops a shadow over the header. These two style elements took the majority of developing time.
The top nav uses a sliding door approach to allow the list to grow and shrink with larger font sizes and screens. Normally, sliding doors require multiple elements, such as a div and a header to anchor the images. I didn’t want to adjust the html on the pages, so I added the right edge of the nav background to the header background. I then added the stretching background to the list itself. If this doesn’t make any sense at all to you, visit the above article.
To get the glow on the main content section, I used a background image with alpha transparency on the maincontent div and gave it negative offset to make the shadow hover over the header. Alpha transparent images have subtle gradations over a transparent background. This gives us the ability to place a semi-transparent image over a variety of background colors with no un-intended conflicts. Unfortunately, Internet Explorer does not support alpha transparency, so I used a series of filters to give modern browsers the nice shadow and IE gets a simple top border.
I still need to add the link to allow users to select the low-vision style sheet. However, if you have Firefox, you can view it by selecting View>Page Style>low vision.
The CSS is still a bit rough, but hey, I’m in Paris and I’m working on CSS instead of sight-seeing.