Evolt.org design

Design explanation

I've attempted to do a design for evolt.org that's fresh and simple and yet still vibrant.

Despite being quite enamoured of recent fixed-width designs, I went with a liquid layout on this one. And, as Martin points out, it won't work on a handheld and it would look funny if stretched really, really wide. But, since there's often a need for 3 full columns, I think it works better than a fixed width design in this case.

I decided against using the black bar that has been a feature of evolt.org designs for a few years now, since I think it makes the page unusually heavy feeling and I didn't think it was a worth keeping it.

I did, however, keep the general colour scheme from each main section of the site (red for LEO, blue for WEO, teal for BEO, green for DEO and gold for the donate/community section.

IA/Tabs

Work, Test and Play and... um... Donate too

I know that many liked it, but I hated the "Work, Test, and Play" scheme - for the following reasons:

Community

Instead of carrying on the Work, Test, Play, I've gone back to the LEO, BEO, DEO divisions for the site architecture. I think they are considerably more transparent and they cover most of the site. The only section that I added, is community, because I think that encompasses a whole area that until now has been shoved into articles or wherever else it can be fit. Into this new area I'd put:

Accessibility

I noted that on previous designs the access keys and other accessibility information was put off screen using a negative margin or a positioning off screen. The vast majority of disabled users would never see (or their screen readers would never "see" it) and therefore would never be able to use these accessibility features. Instead, I've created a separate accessibility information page with the access key information. The page desperately needs to be fleshed out - I'm certainly not a writer. I've made the "skip to content" link visible. I also decided against using sFIR since there are difficulties in finding a truly accessible version of it. See Joe Clark's article on FIR accessibility and comments on sFIR accessibility and the use of JavaScript on the Accessify forum for more info.

Testing

These pages have been tested on:

Mac:
Opera 8.0, Firefox 1.5, Safari 2.0
PC:
Firefox (I think it's 1.5), IE 6

Things I'd like to have done but didn't have time or skills for...

I wanted to do a nifty droping tab thing on the search and login tabs (like Martin's design). I thought those two would be better candidates for the drop-in widgets since neither of them have great value as a separate section of the site.

There are a million little things that I'd like to improve, but I don't have time. I need to get onto paying work! So if you notice stuff, send me an email and I'll keep a list, and if this design is chosen, I'll fix it all up.

Stephanie Troeth turned me onto moo.fx which I think would be quicker and lighter and might work well for this application.

Martin said that the jpegs seemed very low quality to him (especially in the header), so I upped the quality with little improvement noticed by him. Others, however, thought it looked fine. If you see tons of artifacts on the jpegs, please let me know and I'll try to see if there's something I can do.

Other sections

If y'all are interested in using this design, I'd like to do the Browsers, Directory and Community sections with it as well. I also think that a lot more of LEO should be done in the evolt design - whatever it ends up being. Which means, at least, changing the mailman templates from the default, and/or incorporating the archives into a templated design.