The Bright Lines » Usability

Netscape and accessibility

Wouter Bos — Tue, 22 Jun 2010 19:43:48 +0000

Although we all cheer loud for all signs that proves IE6’s decline, fact is that this browser will stay to be a pain in the ass for some time. And to be honest: this is not something new. There’s always some browser lagging behind and preventing web developers of using new cool techniques. Nothing new here. Supporting Netscape in time of its final decline was also hard.

Yeah, Netscape 4. Now that was a browser that just did not want to die. Netscape wasn’t updated after 1998 but in 2001 still about 5% of the internet users used Netscape. I got curious how the web would look like in a browser that is more than a decade old. So I downloaded Netscape 4.7 and loaded some major websites to see how they would look.

The level of accessibility of websites varies enormously. Let’s start with one of the worse:

Amazon.com

Welcome to our new and improved web shop

How the Amazon website should look like

As you can see: Netscape renders the page but context is virtually lost. And it clearly can’t handle the sprite image in the top left corner.

Twitter

A Twitter page in Netscape

How this Twitter-account should look like

The lack of solid white background color in combination with a rich-contrast background image that does get loaded is a serious problem. Not to mention all the hidden information that becomes visible. This website too is not very usable anymore.

Yahoo

Yahoo just blocks you

Yahoo has another approach: It just says that you’re browser is ancient and offers download links to newer browsers.

Google

...while Google just does it's thing

Google doesn’t complain and shows a page that looks remarkably well in Netscape 4. The links in the search results will still send you to websites that look like jigsaw puzzles, though

So you can’t browse with an ancient browser. So what?

Ok, this is indeed not a drama. But think of it this way: the web is a web of content. Content that becomes increasingly inaccessible if you don’t rebuild its content container, the website, every few years. Most organizations do that to be up to par with the latest browsers and designs but some just have to.

Help browsers with a handicap

Keeping content accessible is not just a hobby. It’s a major issue for websites of (semi)government organizations for example. They have to make sure content is open to anyone. Although they focus on handicapped internet users rather than handicapped browsers, one goal remains the same: a user should be able to use a website without the need of CSS, JavaScript or any other ‘fancy’ technique. A :hover is no use to a blind user, neither will color and JavaScript animation. That’s why such a person uses a different browser without such capabilities. And that’s why we have guidelines like WCAG.

It’s not surprising that many websites that follow WCAG guidelines or something comparable do reasonably well in Netscape 4. I’ll repeat it again: that’s a browser from 1998.

www.section508.gov

Unique: this website looks almost identical in Firefox and Netscape

www.section508.gov in Firefox

The web design of www.section508.gov just don’t look like it stems from the 1990s, it also uses ancient techniques from that era like tables for layout, image spacers and sparse use of CSS. All big no-no’s nowadays, but the website rendering is great.

Dutch web guidelines

In black and white, but ordered and readable.

The same website in Firefox

The difference in rendering between Netscape and Firefox is striking. Netscape is unable to read the CSS, but that’s a good thing here. Accessibility dictates that an HTML document should be structured. So when there’s no CSS to style the document, the document structure will remain.

But why does Netscape not load the CSS? It appears that the media attribute link markup is key here:

Netscape won't load this CSS


Netscape *will* load this CSS

Dutch semi-governmental website (www.groenendestad.nl)

The website in Netscape

In Firefox

The last site is a semi-governmental website developed at the company I work, Estate Internet. It’s a relative new site (2 years old) but still usable in both old an new browsers.

Hurdles

So it is possible to make websites that are still usable in ancient browsers. The main obstacle is that old browsers try to render stuff like CSS and JavaScript but choke on it halfway. In case of CSS it’s possible to block Netscape by adding the media attribute, but that’s still a hack. Old browsers should be protected from itself. One option is to just disable everything at the client side that could harm the rendering.

It would be nice if you could send unsupported browsers just the HTML, while others also receive CSS and JavaScript. But browser detection can be error prone. The only stable solution I know that is easy to implement is IE version detection through conditional comments. Consider this piece of code that only gives all non-IE browsers and all IE7+ browser the site’s stylesheet.

Conditional Comments will help us giving a soon-to-be ancient browser like IE6 the treatment it deserves .

Now it’s time to close Netscape again and start waiting for the new Firefox that supports basic CSS animation.

No related posts.

PixEm: Pixel to Em Converter

Wouter Bos — Mon, 16 Nov 2009 20:38:11 +0000

Through this post I want to publish my simple tool which I use when creating websites in the “em”-measurement. An older version of this program was called ”Pixel 2 em calculator” and was published on my personal blog. I never programmed a desktop application before, but it does the job and I used it for about a year now.

Download PixEm

If you want to read more about using about using em instead of pixels, I recommend the following articles:

No related posts.

For the sloppy clickers

Wouter Bos — Wed, 28 Oct 2009 19:21:23 +0000

The best example I can think of is a series of blocks that each contain just a head, an intro and a link to an article, like the one you see here underneath.

A list of articles

The only linkable items here are the “Read more” texts at the bottom of the blocks. The source code looks like this:



Lorem ipsum dolor sit amet

		Suspendisse potenti. Pellentesque nibh ...
		Read more

Nothing wrong with the code, but why don’t we replace the li with an a-tag? That way the whole block is clickable. Much easier for the sloppy clicker. Especially when you use the :hover pseudo-class to add an effect like changing background to make the clickable area even more obvious to the user.


   
Lorem ipsum dolor sit amet

Suspendisse potenti. Pellentesque nibh ...
    Read more

ul.articles a {
	float: left;
	width: 100px;
	margin: 0 0 10px 10px;
	background: #ccc;
}
ul.articles a:hover {
	background: #eee;
}

If you like to have some control over what Google indexes you might not want that the whole text block will be indexed as important text, but just the heading. In that case you might take a different approach. You could put the link in the head of the article block and let Javascript take care of making the whole blocks linkable. Then you’ll have to use some code like this:



Lorem ipsum dolor sit amet

Suspendisse potenti. Pellentesque nibh ...
    Read more

jQuery("ul.articles a:odd").each( function() {
	var anchor = this
	jQuery(this).parent("li").click( function() {
		document.location.href = jQuery(anchor).attr("href")
	})
	jQuery(this).parent("li").mouseover( function() {
		jQuery(this).addClass("alternateBackgroundColor")
	})
	jQuery(this).parent("li").mouseout( function() {
		jQuery(this).removeClass("alternateBackgroundColor")
	})
	jQuery(this).parent("li").addClass("link")
})

This is just an example, but I hope that I could show you what alternatives you have when you add a link to a website.