Browser Opera Blog

Ian Loveland asked:


Would you deliberately build a website that you knew would be unreadable by three quarters of your customers? Of course not! And yet, it happens - and there’s a good chance that, without realising it, you have, too. Here’s our guide to making sure your website is seen by everyone.

The whole point of making a website, the whole point of publishing it on the Internet under your domain name, is so that people will read it, right? It’s just common sense that you’d want to make it easy for your visitors to read your site. And yet most companies make websites which contain defects:

* Defects which make it hard for visitors to find the site at all,

* Defects make it difficult for visitors to get to the information they’re looking for, and

* Defects make it impossible for visitors even to read the information when they find it!

Sounds stupid? It happens all the time! Take a look at these common errors, and see how many of them are in your website.

Fixed-width layouts

You’ve seen websites where the content appears in a band in the centre of the browser window? If you expand the size of the window, the content stays in the middle. Nick James has a website like this. Peter Jones goes even further - he even lets you set the colour and position of the background!

So: what’s the problem?

Small screens: The website designer has no idea what size screen the visitors are using. If the content won’t fit, then either the stuff on the edges won’t be seen at all, or else the user will have to keep scrolling backwards and forwards to read each line of text.

Who uses “small” screens?

Laptop screens, though they’re better than they were, tend to have limited resolution.

Some services offer web surfing on TV. TV resolution is only as good as the very earliest, VGA computers.

It’s becoming common for people to surf using a phone or PDA. Their screens are very limited!

Large text: Nearly all web browsers provide a facility to change the size of the text. It’s really intended for partially-sighted users, but phone and PDA users with tiny, matchbox-sized screens find it very useful as well.

Many users, either on desktop computers or on PDAs, set the text size much bigger than the graphics. A fixed-width layout - at best - will squeeze the enlarged text into a narrow column. At worst, the whole screen can fall to bits!

Large screens: It’s not so serious, nor so obvious, but fixed-width layouts also inconvenience visitors with good-quality screens. They’ve got large screens so they can see more! If your website is squeezed into a narrow column, most of the visitor’s extra-large screen is blank - there’s no more webpage being shown.

He wants to see more. You’re showing him less! Do the math!

How can you check?

* Different browsers have different facilities. The more you have, the more checks you can do:

o If you’re using Internet Explorer, you can change the text size. See what happens to the page. You can also zoom the whole page in and out, to get an idea of what happens on very large or very small screens.

o If you’re using Firefox, then you can adjust the text size almost without limit.

o If you’re using Opera, then you can’t change the size of the text, but there is a great tool for simulating a small-screen device.

* Look at the website using a phone or a PDA.

Graphics and Flash

In order to give the graphic designer complete control of the user’s experience, some websites are designed to be nothing more than graphics - there’s barely any actual text there at all! Sometimes it’s done as a series of image files assembled together on the page, and sometimes all the graphics are inside a Flash file.

There’s no doubt, some of these websites look spectacular. Look at Coke’s Happiness Factory for an example.

So: what’s the problem?

* They’re not usable. The webpage looks like a videogame. The controls don’t look like controls, they move around the screen, and they don’t work in obvious ways.

* They’re not controllable. If you re-size the browser, the content doesn’t resize. It’s useless on small screens or for partially-sighted users.

* They’re not fast enough. You have to download the entire website before you can see anything at all. (Normal websites build up the screen as their parts are loaded). Most users expect to be able to see a website in less than three seconds.

* They’re not search-engine friendly. Search engines read text. They can’t read graphics or animations. Nothing in a graphics website will ever be indexed by a search engine

Flash-based websites aren’t all bad! if the content you’re showing is inherently graphical, or animated (or, indeed, is depicting a videogame), then Flash is entirely appropriate for it.

But, understand that those aren’t conventional websites. Conventional considerations of search-engine friendliness and user accessibility and such like don’t apply to them.

The problems appear when what should be conventional websites are built out of Flash, then the owners wonder why their websites aren’t generating any traffic.

How can you check?

* Switch off the images and plug-ins in your browser. Whatever is left on the screen is the real content.

Non-anchors

Normal webpage programming provides a perfectly good way to make something happen. It’s called the anchor. When you see something underlined like this, and the mouse pointer turns into a hand when it moves over it, and something changes when you click it - that’s an anchor.

But some web programmers want to be a bit clever, so they fake their anchors. They write special code to make something which isn’t an anchor behave pretty much like an anchor - the underline, the little hand, the something happening when you click it. Like this. Looks just the same, doesn’t it?

So: what’s the problem?

* Search engines don’t understand them. Search engines use anchors to find their way to your website, and around it. But if the anchors on your page are these tricky, pretend anchors, the search engines won’t understand them, and so won’t be able to read your site.

* Keyboards don’t understand them. If the visitor is using a phone or a TV which doesn’t have a mouse, he has to move from anchor to anchor using the cursor keys or tab keys. Even laptop users often find it easier to use the keyboard than to use the glide-pad. But the anchor selector only works on real anchors, not on pretend ones.

* Page readers don’t understand them. It’s not just blind users who have their web pages read to them People often listen to webpages while they’re travelling. Page readers make a little noise to indicate an anchor. They don’t do anything about a pretend anchor.

* Browsers don’t always understand them. Non-anchors rely on JavaScript to work. Not all browsers allow JavaScript, and those that do allow users to switch it off for security reasons. No Javascript: no pretend anchors.

How can you check?

* Don’t use your mouse to navigate around a page - try using the tab key instead. (Shift-tab to move backwards)

* Switch off “Javascript” or “Scripts” in your browser, and see if the website still works.

Relying on colour.

Did you know..? In some parts of the world, 1 male in 8 is affected by some form of colour blindness?

It’s perfectly natural to use colour to make your website look more attractive, or to provide information (such as box-outs or animated menu items). But what looks great on one display may end up looking terrible on another. If you rely on colour to say something, you may end up saying nothing!

Bright primary colours can be as bad as gentle pastels.

What’s the problem?

* People can be colour blind. Some of your viewers will have some form of colour blindness. Red/green signals are a common convention which causes particular trouble for the colour blind.

* Screens are often colour blind. Liquid crystal displays are notoriously inaccurate at reproducing colour - what appears on the screen is often quite different to what you asked for. They get worse in bright light.

* Paper is usually colour blind. Most people print on black-and-white laser printers. There’s no colour reproduction at all. The printout is the most durable reproduction of your webpages!

How can you check?

* The easiest way to check a web page is to print it out on a monochrome printer. (Don’t cheat - remove any printer-specific CSS from the page)

* There are more sophisticated tools available at the Colorblind Web Page Filter. It will show you your website in various kinds of simulated colour-blindness.

* Finally, you can get special boxes which you plug in-line with your monitor to make it simulate various kinds of colour-blindness.

Rambling

Most writers are paid by the word. Skilled copywriters are taught “The more you tell, the more you sell”. So the best writers you can hire will give you long essays, covering every angle and objection, so that your website can convert the maximum number of visitors.

So: what’s the problem?

* Too many words are bad. People read from screens slower than they do from paper. Text on screens needs to be bigger than text on paper in order to be legible. Screens are generally smaller than paper. All these, taken together, means that a computer screen is a somewhat inefficient way to acquire information! Hardly anybody will read all the stuff your writer has written.

* Too many thoughts are bad. Generally, visitors to your site are not reading literature. They’re trying to find some piece of information, probably to help them to take a decision. If they can’t see right away that the page tells them what they need to know, they’ll look for another page.

Search engines think the same way! If they read your page, and can figure out what the page is about, then they’ll be able to recommend it. If the page rambles from one thought to the next, the search engine will never understand what the page is saying, so won’t ever show it.

How can you check?

* Look at every page in your website. Can you write a 50-word summary of the page? Can you write a 10-word title?

* Use Webtool to find out what search engines think your website is about.

* Monitor whether your visitors prefer to read from the screen, or print your pages to paper.

Not saying enough.

The opposite problem to rambling is not saying enough. You see them all over the web:

* Catalogue pages which show the name of a product, a catalogue number, and a “Buy now” button;

* News pages which list only titles.

So: what’s the problem?

‘Nuff said.

Summary

It’s not difficult to put together a simple website. Making a website with “Wow-factor” is slightly more difficult. But to build a real, industrial-strength website - and still keep it looking great and working seamlessly - that takes experience and expertise.

So, how can you tell whether a web developer is a beginner, a “getting better”, or a battle-hardened expert? Just look at the websites they’ve developed, and apply the tests in this article. You’ll soon be able to tell which is which!



Vincent