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
<link rel="stylesheet" type="text/css" href="/screen.css" media="screen, tty" />

Netscape *will* load this CSS
<link rel="stylesheet" type="text/css" href="/screen.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.

<![if !IE]>
    <link href="css/main.css" type="text/css" />
<![endif]>
<![if gte IE 7]>
    <link href="css/main.css" type="text/css" />
<![endif]>

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.

The Bright Lines, as seen through 'readability'

Lately I came across Readability. It’s a bookmarklet (works only in FF, Safari and Chrome) that alters any website into a more readable one. It does so by presenting it in a book form. At a first glance I thought it as a nice  tool, but I wasn’t sure I was going to use it. Then I thought that it was a real good example that you as a user have more to say than you think.

We always accept the usability of the websites for what it is. If it’’s good, it’s good. If it’s bad it’s bad. But the frontend of the website is built on your computer, in your browser. You have a certain level of control over the HTML, CSS and Javascript.

The most common way to make a website better is by using ad blockers. Yes, some people do live of advertising, but I don’t think that means you should be obliged to see them if you don’t want to. Especially when they distract. The best thing about ad blockers is that it doesn’t require any knowledge of web development at all.

Another example is CoolIris that convert image pages of popular websites like Google Images or Flickr into a 3D wall of images.

A more techie Firefox plugin that I use is Stylish. I use it to add my own CSS to websites I regularly visit. Most of the time I use it to remove section that I regard useless with a simple display: none. A more powerful variation of Stylish is the plugin Greasemonkey. With Greasemonkey you can alter the websites with Javascript. And just like Stylish, you can publish your customization of the website through the plugin.

So that’s a reminder for me to see that websites are not cast in stone. Popular websites will on the client side be hacked by a small minority of users to cater their own needs. And if a site is really in need of improvement, plugins that help non-technical users would spread like wildfire.

Related posts:

1. Popups dodging popup blockers

• The menu on the top right was large and clunky. Because of that it didn’t leave much room for more links.
• The ‘logo’ on the top left did not feel like a real logo mainly because it was … well … just not designed well.
• The shadow effect on the columns looked cool, but because it was made with PNG8 images instead of PNG24, it wasn’t possible to add an background image to the page.

What I did like was the scalability of the website. you could as easily view the page on your (i)phone as it would be on your large, wide computer screen. I dropped support for mobile phones. There are lots of Wordpress plugins to cater the mobile devices. I have to dive into that some time. For now anyone with a mobile device can grab the RSS feeds.

I still have to fix a few styling glitches but I thought the design was good enough to make the switch. Here are the most important aspects of the design:

• Use of rgba as background color. This makes it possible to set opacity for just the background instead of the whole box. rgba is not supported in IE, so you will have a solid white background then.
• Using opacity in the columns makes it possible to use large backgrounds. That gives me a reason to pick up my photography.
• The use of webfonts. This was something I was eager to use. This is something designers and web developers alike have been waiting for. The implementation isn’t perfect, but it looks well in Firefox and on the Apple. IE and Webkit on the PC still need some tweaking. I’ll go in to more detail in an upcoming article. For now I’ve been glad to be able to experiment with a real web site instead of running some tests with webfonts.
• Less data: I removed irrelevant data where I could. It’s most apparent in the list of articles on the homepage where I removed information like categories, tags and dates.
• Links become visible with an underline when a column is hovered. This will make the website look less crowded. It’s a bit like the folder tree view in Vista’s Windows Explorer: you will only see the folding icons (the plus and minus icons next to the folders) when that section is active.

There are some things I have to do:

• Make a logo that is suitable for creating a favicon
• Tweaking the fonts for IE & Webkit on PC.

No related posts.

Creating something from scratch can be empowering. It also gives a sense of control, because you can determine what the specifications should be of a product. Better: you don’t only know the specifications by heart, you also know just what strings you need to pull in your code. Getting to know a product that you didn’t code from scratch seem hard to master. And it can even harder to know it’s limitations. That’s not a situation that you want to be in, when talking to a customer. And so it seems better to stay in control and build an application of your own for your own needs.

A CMS for everyone

And so in-house coded CMS systems pop-up everywhere. But why? Are the ideas of those companies about Content Management Systems so different compared to what is already on the market? Most likely not. In many cases the euphoria of having your own CMS will turn to into a slowly simmering frustration because the time needed for bug fixes and feature request doesn’t match at all with the time that’s available.

We all know that creating a product needs time. But what we tend to forget is that keeping a product “healthy” and up-to-date also costs a lot of time in the long run. And so we have a plethora of CMS systems with loose ends and incomplete functionalities. Most of the time with an unfinished “help”-function.

For years I was accustomed to do as much as you can yourself. But now that the internet is getting bigger and bigger, you see companies specializing. Some companies are focusing on only one or a few products like a CMS, while the creators of websites ask themselves: “Am I better in building a CMS or in creating websites?” In most cases it’s the latter. And so it’s better to find a product that helps you to do the job fast instead of slowing you down.

Example: a quick flash video player

Now you may think that a CMS is an obvious thing you shouldn’t build yourself because the codebase is so large. Well, lets take something that needs less lines of code: a simple Flash video player. Many companies have developed their own Flash video player. Because it’s just relatively easy to do. But again: why? Most of the time such a in-house coded player has minimal documentation, if at all. And if you find documentation it’s likely out of date. What really bugs me if you’re asked to just “Fetch that player from our previous project”. Like that’s an acceptable codebase.

I recently decided to go with the open source Flow player. I fell for the various options to customize the player. Soon I discovered all kinds of advantages you wouldn’t have with your own code: Forums, wizards and extensive documentation. I could send a designer a link to a wizard that enables him to skin the video player at a basic level. I also could pass the player to another team member without having to explain every step in the code. The documentation is online, help yourself. Let me continue with my work.

Another example: Javascript libraries

Libraries really can speed up your work. They do not only provide lots of canned functionality, but libraries like Prototype, Mootools and jQuery can also really speed up your own coding. jQuery really helped me to code faster, more stable and in less lines of code. It made coding in avascipt even more fun.

There are lots of resources out there. As a web developer you need not only to know your code languages, you also need to know when to use some existing code and know where to find it.

No related posts.