The design was required to be as accessible as possible. This meant I had to pull out everything I learned over the past few months, which I suppose is the whole point.
After a month of judging, the GAWDS (Guild of Accessible Web Designers) people have finally settled on a winner for their new website design. The glorious honor of Most Worthy Winner goes to this guy, while the title of First Loser goes to yours truly.
I submitted my design at the end of June having spent about twelve hours on everything from Photoshop comps to markup, not really hoping to win so much as play with some ideas in CSS and push my skills against GAWDS’ strict accessibility requirements. While many of you are narrowing your eyes at the word “contest,” I don’t care. It was open to GAWDS members only, and the prizes were low-profile enough that most people entered for the same reason — to exercise their standards-based markup skills and design a visually kickass website with the highest level of accessibility.
Here is the roundup of links:
- The GAWDS website right now. In a couple of months this will change.
direct link(removed) to my design titled “Suede Sofa.”
- All the entries, where you can read the judges’ comments as well as throw in your own two cents.
Some notes about design and technical considerations:
Design-wise, I took the existing palette established in the current site, along with the colors introduced in the logo, and combined them into a softer design with more space and fewer sharp lines. I wanted to maintain the GAWDS brand while expanding on the user experience with engaging design elements and a focus on clear information hierarchy.
The design was required to be as accessible as possible. This meant I had to pull out everything I learned over the past few months, which I suppose is the whole point. Accessibility considerations included descriptive “alt” tags, clear labeling of form elements, link aids in the meta, relative font sizes, access keys, navigation aids in the markup (including the “skip navigation”) and an uber-semantic layout. I did forget to dictate the Tab order; according to Mike Davies, the first tab should land them directly in the search box. Lesson learned. Hitting “Tab” on graphicPUSH will land you square in the search field. (This is accomplished with a simple
tabindex="1" inside the <input> tag.)
CSS on this design is fairly straight-forward. It took me forever to balance the top navigation with the search box, because I didn’t want the nav to fold over the content when the browser window was contracted. I finally struck on the magic combination of a height definition with carefully dictated padding and margins around the nav <div>, but this easily robbed three hours of my life for an effect that is functional but less than show-stopping.
Other interesting techniques include the background swapping of images in the “author,” “comments” and “archive” links, but this could have been done better with Pixy’s method of shifting one image. I have since implemented a more streamlined version of this construct in a corporate website, and the client absolutely loves it. Here is the basic CSS:
background-position: 0 2px;
The page is also “liquid.” The wrapper <div> is 92% and centered, the left <div> is 67% and the right 32%. This adds up to 99, leaving a small buffer for borders and any rogue padding. Setting the combined width to 100 b0rked the layout every time, no matter what other CSS rules were in effect.
The design validates as XHTML 1.0 Strict, and the CSS checks out as well. I stuck with my policy of absolutely no browser hacks, and the design integrity holds up in just about every modern browser tested. Each one renders the top nav with subtle nuances, but IE and Firefox give the most satisfying results.
Love it, hate it? I’m mixed on the end result; even now I see a laundry list of improvements, both aesthetic and structural, but I’m not going to sweat it. Phil’s design is good, and I never mind losing to a solid piece of work. It was a learning experience and a good exercise in balancing design with accessibility, so I feel my twelve hours were well spent.