Recently, I began the long and difficult process of redesigning the EduTech website. The current layout was designed by me shortly after I transitioned into the web development position in the fall of 2003. Because our organization is state-funded and is part of the North Dakota Information Technology Department, we were under heavy pressure to make our site compliant with state and federal accessibility standards. Simply, that means we had to make our web content as easy to find and read as possible for everyone, including blind people and those with other visual, hearing, or motor impairments. This was a totally new subject for me, but thankfully there are a bunch of really good web-based resources available for anyone wanting to learn about the topic. In addition to accessibility issues, I wanted to learn how to take advantage of a technology that has been around for awhile, but only really started begin used a lot in 2002: Cascading Style Sheets. CSS lets web designers separate how a page looks from the actual content on that page, which does a few really great things:
- You can define the look of an entire site in one file. For example, if you want to change the font size and color for all of your page headings, you make one change and it will automatically be applied to every heading. This feature is huge. It can save hours of tedious updates to dozens or hundreds of pages.
- Removing the “look” from an HTML file makes it a lot smaller – sometimes by a factor of 10 or more times. I won’t bore you with the details, but previously web designers used a lot of tricks and “hacks” to make a page look exactly how they wanted. These techniques added a lot of junk to each page, making them really big and bloated. Smaller HTML files using CSS means that pages load faster.
- Another reason to just put content in an HTML file is that suddenly, making pages accessible (see above) becomes a lot easier. This also creates an unintended side benefit: Your site may actually get ranked higher by search engines. Someone put it best this way: Google is blind. This means that when Google visits your website, it reads your pages in the same way a blind person using a screen reader does. Neither care about how a site looks, they just read the text.
So, getting back to my story, I went into my redesign while simultaneously learning CSS and website accessibility. It was pretty overwhelming and stressful, but I learned a lot in the process. Unfortunately, it’s now almost two years later and the site is beginning to show its age. I cringe every time I load our home page in my browser. I feel my design skills have come a long way in the last two years, which is hopefully reflected in my recent relaunch of the Grace Baptist Church website. In addition, the structure of the EduTech site is, in my opinion, weak, bordering on confusing. The last redesign was almost all cosmetic – I didn’t really change how the pages were organized and how information was presented. Because of that, we currently have a situation where one section, Support & Services, contains a huge amount of content that could easily be divided into two or three areas. To make matters worse, it’s not even organized that well.
As you can probably tell, I’m not satisfied with how things currently are. I think that’s a Good Thing. Nothing is ever finished, nothing is ever perfect. Everything can be improved and simplified.
So, because I’m not as constrained for time now, I’m doing lots of reading and research as I’m working. I’ve got some great usability and design books to reference, including these:
- The Design of Sites: Patterns, Principles, and Processes for Crafting a Customer-Centered Web Experience
- Defensive Design for the Web : How to improve error messages, help, forms, and other crisis points
- Don’t Make Me Think : A Common Sense Approach to Web Usability
- Homepage Usability: 50 Websites Deconstructed
- Information Architecture for the World Wide Web: Designing Large-Scale Web Sites
There are a ton of good web-based references too, one of the most interesting and useful of which is Eyetrack III. This piece of research tracked the eye movements of website visitors to give an amazing picture of how people actually view and read websites. It’s worth checking out, even if you’re not a web designer or a geek.
This redesign will be fun, but challenging. It’s always tricky messing with layouts because habits form quickly, and people expect to find things in certain places and get frustrated if they aren’t. The key is to change the layout, but in a way that makes sense and is as simple and easy to navigate as possible. One of the book titles from above put it best: Don’t make me think!