[111Design.ca]

111Design Consulting

Supporting Industry Standards and Accessibility [Navigation]

Menu

[Nuke]

design tips

Content updated on: 2007/01/09

websites that suck

How, exactly does a Website suck? Well "sucking" goes beyond ugly appearance. Usually that is just the tip of the iceburg. Then even an aesthetically pleasing design can suck like a black hole—Annoying (IMHO) is worse than ugly. Inexperienced designers tend to think, "the more images the better" or "use images for everything"—navigation links, headings, even blocks of text. There are plenty of reasons for not doing this, and not doing a whole lot of other things someone at some time must have thought were "cool".

We've all come across Websites that have that nasty little warning on them: "Best viewed in (browserX+version/ 800x600 screen resolution/ Flash plugin required/ Javascript enabled...)", and of course you should be running Windows too! Here's a scary thought. What about users (like me) who frequently surf with image loading turned off? Those transparent spacer gifs holding your pixel-perfect table-based layout together are gone. Not a pretty sight now, is it?

Let's face it, a Web browser is a Graphic User Interface. User being the operative word. Forcing visitors to change their screen resolution and/or browser security settings—or forcing them to download some plugin they don't want will effectively drive them away. They will hit their "Back" button and never return.

The Browser War is over. Open Notepad (or text editor of your choice) and type that 1,000 times!

Nowadays, there is no need to code different pages for IE and Netscape. Differences in display can be worked out in the stylesheet, some styles (or the entire style sheet) being hidden from buggy browsers. Standards-compliant browsers can have the fancy stuff. Does it bother me that someone using Netscape 4 sees the unstyled content on my site? Not a bit. It is functional, readable, easy to navigate and loads fast. If Mister Netcape 4 User really cared about how pretty the Web looked, he would have upgraded his browser by now. Designers need to give up the notion of absolute presentational control. It is not going to happen, no matter what lengths you may go to to try and force what you see on someone else. Any Website that does not function properly—or prevents certain users from accessing its content is a Website that sucks.

what are web standards?

Errors in the markup as well as semantic errors can cause unexpected display and/or usability problems. If you're unfamilar with the term, "Web Standards", read this article before preceding to the Tips.

a different perspective

Here are some simple exercises you can do to experience first-hand how others may be viewing your Site. Accessibility does not just apply to disabled users or the "browser challenged". Trust me though, there are browsers out there that will mangle your layout worse than this. And of course, don't forget to run your pages through Cynthia. To cover all bases, you should also check for sufficient contrast and foreground/ background colour difference. Gez Lemon's Extension for Firefox does the job quite nicely.

Ready to begin?

First, go into your "Internet Options" or "Preferences" menu and disable everything—Image Loading too. Now increase your screen resolution to something dramatically higher than you are accustomed to. If the text is readable and makes sense without the graphics, good! But maybe you just have excellent eyesight. Put on a pair of prescription eye glasses. No, they can't be your own! Is it readable now? Remember, Internet Explorer cannot scale text that's been coded in absolute units like pixels. Next, resize the browser window to half the width of the screen. You have to imagine that's all the space you've got and you have no means of scrolling horizontally (like in WebTV). Leaving the browser window like this, decrease the screen resolution to something like 640x480. And for the final test, turn your mouse on its back and try using the keyboard to navigate.

You don't have to go through all this for a Flash Site. Just load the page in a text-mode browser, or any version of Internet Explorer with Active-X disabled. Nothing there? Uh... Houston, we have a problem.

You may also be wondering what Search Engines can and can't see. That's covered here as well. A Search Engine "sees" more or less what a text-only, non-java-enabled browser does.

This is not a comprehensive HTML tutorial, but if you follow at least some of the advice on these pages, I guarantee you'll get: more traffic; more visitors bookmarking your page and returning, and more (and better quality) reciprocal links—a major factor in determining Search Engine ranking.

A good Web designer is a perpetual student, always learning and experimenting. So take the time now to learn about Web Standards and Accessibility. And help make the Web a better place for everyone.

tips index [toxic waste]

  1. Embedded Multimedia (Flash and background music)
  2. Javascript*
  3. Server-side Includes and other tips for reducing page weight
  4. Frames and Iframes*
  5. Proprietary Code (page transitions, colored scrollbars, blink, marquee)
  6. The Title Tag*
  7. Meta Redirects*
  8. Launching New Windows*
  9. Images (bullets and dividers, animation, alt text, dimensions)
  10. Semantic Purity and Web Authoring Tools*
  11. Testing and Validation*

Copyright © 2003-2009, 111Design.ca