Green Bar Redesign: New Features
So, What Else Is New?
Accessibility
Imagine if you were a computer helping a blind person surf the web. There are lots of different ways you could do this. You could be a braille reader, or a speech browser, or any other device capable of accessing the Internet and providing information from the WWW to people with disabilities. The markup of HTML deals almost exclusively with document structure, which makes it easy for a braille browser, for instance, to understand the structure of the document and present it to the user in a useful manner. The browser knows, for instance, that <h1> is a top-level header, so it's pretty important.
The problem is, most web designers spend a lot of time trying to figure out how to use structural markup to present a particular style or look. That usually means using a lot of graphics, tables, and other HTML tags that were designed to be used for something else. A braille browser, though, can't tell the difference. It knows what the tags are supposed to mean, so it interprets the document based on that.
The image on the left shows the original design as it looked to a braille reader over the Internet. Notice that several images are identified, but most are only identified as images. There's not indication of what the image is, why it's there, or anything that might help someone accessing the site using a braille or voice browser. The old design used a lot of graphics, but it did not use some of the more common design tricks - like transparent images used to fill space, or using graphic files for text. Braille and voice readers read such images regardless of the designer's purpose in putting them there.
I have to confess that the original design for this web site was a lot more accessible than other sites I've worked on. Chances are, if you were blind, and you relied on a speech browser or braille browser to access information on the WWW, you might have been annoyed by the original design, but not so annoyed that you would have left very quickly. Many web site designers don't give much thought to accessibility, which is odd because the original intent of the WWW was to make information accessible to everyone.
The image on the right shows the new design as it looks in a braille browser. I used BrailleSurf 4 to create these screen shots. BrailleSurf is a browser specifically designed for visually-impared users. The screen shots show the text output in the browser, but with the use of a braille display or speech synthesizer, the text is interpreted for the user.
The most striking difference between the new site and the old site is the fact that the content of the site is not obscured by the new design. As accessible as the old design may have been, it was only accessible because I personally made the effort to make it accessible. The screen shots above show that even those efforts weren't enough. A visually-impared visitor would still have thought there was something missing. The last thing you really want a visitor to your web site to think, is that he or she is missing something because of a physical or technical limitation.
Of course, it's not just the visually-impared that deserve a web designer's attention. There are still a lot of people who access the WWW through rather limited connections. One of the first browsers developed for the WWW is Lynx, which is a text-only browser originally designed for terminal use. Accessing today's web sites through a VT100 terminal isn't a lot of fun because so many web sites are designed to be visually exciting. Strip away all the animated, or flashy graphics, and you don't have much of interest to anyone. The graphic on the left shows how the old design looked in Lynx. The graphic on the right shows the new site as it appears in Lynx.
Sounds a lot better, doesn't it! To be honest, though, this new design might be 50 times more accessible than the old design, but that's simply a benefit of designing according to the standards. It wasn't my intention to make the site more accessible, it was just something that came naturally to the new design. And, since the "look" of the web site is contained in an external file, I can define a style specifically for a Braille or speech browser. One that turns off all the images and anything that might get in the way of the content.
Browse Away
Not all browsers are alike. Some browsers have lots of special functions, bells, and whistles, and they do everything except keep your coffee warm. Other browsers are barely capable of any function, have two bells, and no whistle. This is the one bit of information that web site designers like me have been wrestling with for years. The client supplies the content. We look at the content, look at the client, then imagine a design for their site that fits the content, and the client (I'd never use flowers on a steel company's web site for instance).
The problem is that deep down inside we know that no matter what design we come up with, it will look different to every person who sees it! I don't mean it will look different like fine art looks different. I mean, the user's browser, computer operating system, monitor, and even the method they use to access the Internet impact that design. It all goes back to the original intent of HTML and the WWW. Hypertext markup is not intended to be used to define the "look" of a web page. It's intended to define the structure. So, a web designer has to use structure tags to define the look of the page, and every browser is designed to display the structure of the document differently.
Microsoft IE displays some HTML tags differently than Netscape Navigator does. And Microsoft IE version 4 displays them differently than version 3 did. So, in order to get the design to look right, a web designer has to write the HTML in such a way that every browser will get it mostly right. If that weren't bad enough, the designer's browser, operating system, monitor, and design tools play a part in the decisions he or she makes.
What all this boils down to is that the task is impossible. Not virtually impossible, nearly impossible, or even practically impossible. It is impossible. So, over the years I, and every other web designer, developed a rather extensive bag-o-tricks to get the designs we want. We're not really trying to make you see what we want you to see, we're trying to trick your browser into doing a better job of showing it to you. But, mostly, we design web sites that look right to us using whatever operating system and browser we have available and say "to heck with the rest!"
I can only guess what the old design looked like in Netscape Navigator 2 on a Macintosh running OS 7, but I'm willing to bet it wasn't pretty. In fact, the older the browser, and the older the operating system, the greater the chance you couldn't even see the site. If you were using AOL 2.5 to access the Internet, your browser didn't even know what to do with tables so, like all good browsers, it simply ignored them - and everything in them! Since everything in the site was in a table, you couldn't see anything.
Well, this new design represents me throwing away my old bag-o-tricks, and learning some new tricks. It's a little thing called designing according to the standards (the rules of HTML, CSS, HTTP, etc.) instead of designing according to the browsers. I know, if you're using a version 2 browser, or a version 3 browser, you're probably not seeing the green bar down the right side with all the links. But the good thing is, they are down at the bottom of the page instead of lost in a jumble of pixels and bits your browser ignored. You still have access to all of the links and all of the text, and it's easy to read. (ed. note: More recent changes to the design have moved the links to the top of the page rather than the bottom. --AJ)
The look of a site is pleasing, but it's not the content of the site, and that's the mistake we web designers continually make. We want the site to look good, so we clutter up the content, and screw up the structure just to make it look good. Page 3 of this article has a couple screen shots to illustrate this new feature. More»