Lesson 8: Miscellaneous Topics Related to Web Design

The Web Designer's Pre-flight Checklist

I always look for these elements in web sites:

1. Clean, easy to update design/structure.
2. Good usability in the design - and all that implies.
3. Fast loading 'light' pages.
4. Intelligent use of technology - using Flash when it makes sense not because you want a 'cool' intro!
5. The website's ability to convey the meaning/message of the website quickly, if not instantly.

1. Clean easy to update design/structure.

Just a few short years ago, the web was full of dancing mice, spinning globes, and animated construction workers, things have since changed and design principles are now actually put to good use ... amazing!

The problem that we find now with many websites is that the design is not flexible. Websites constantly change, so if you find that putting in a new navigation button is going to take a lot of work, you have to reconsider your design. You should be able to freely add and remove elements from your pages with little to no trouble - that only makes sense.

2. Good usability in the design - and all that implies.

Usability is one of the new buzzwords that people like to use, but what does it mean? In a nutshell, usability is referring to (in web design) how easy someone can get around your website ... how usable it is. If someone has to 'hunt' for your 'home' link or your contact information, then you have a usability problem.

3. Fast loading 'light' pages.

This is one of the oldest rules in the book! People will leave your site like a flash if your site takes over 10 seconds to load on a 56k modem. That means your pages have to be less than 60k - images and all.

Being that this is such an old rule of web design, you would think everyone would keep their pages light, right? Wrong! Just take a look around and it's not hard to find 250k Flash websites! This checklist is just a reminder of what we all know, but sometimes in the excitement of building our masterpieces, we can forget ... so check the checklist!

4. Intelligent use of technology - using Flash when it makes sense not because you want a 'cool' intro!

I think this is obvious to most people. All the technology used to build websites are just tools; we use a screwdriver when we need to, not because we want to. (Of course, I've been known to hammer nails with a screwdriver and saw wood with a steak knife). The point is that you need to let the goal of the website dictate what technology you are going to use, and not what the flavor of the month happens to be at the time.

5. The website's ability to convey the meaning/message of the website quickly if not instantly.

The one thing that gets on my nerves when I'm surfing the web is when I come to a web page where I can't figure out what the website is about. (Ok, maybe pop-up windows are worse, but this still ticks me off!) Typically, these turn out to be what I would call 'artsy' websites, where the design is pleasing to the eye, but I have to 'dig' to get the point of the website.

Make sure that your visitors can easily know what's going on (and why) when they get to you, otherwise you won't be conveying your message too well because people will just be leaving your website.

Definition of a 4th generation web site

4th generation web sites have all the elements of a 3rd generation web site along with the following:

1. The proper use of markup (HTML): only structural tags in the HTML, use of CSS, proper use of structural tags in the layout (<h> tag order in a document for example).
2. Respect to usability in web site design: using proven layouts
3. Search engine-aware web pages and web site.
4. Well structured - easily updateable.
5. Automatically printable with CSS media type linked CSS files.
6. In a nutshell: a web standards compliant website.

Hardware you need to start designing web sites

You don't need any special hardware to create web pages. Just a standard computer and an Internet connection so that you can put (upload) your website onto the web - this is assuming you want to get your website on the web.

Fortunately, web design is not like 3D animation where you need the latest and most powerful PC's to be competitive. These days home computers are so fast that even three or four-year-old PC's are more than enough to handle all your web design needs. If you're not convinced and you still want to spend a couple of thousand on a new PC, give me a call!

Before you go out and spend your cash consider these points:

HTML pages are just simple text documents

Web design is more or less about creating HTML pages. Html pages are just simple text documents that use special 'key-words' called tags. To make a long story short, simple text documents are so easy to create and manipulate that hand-held devices can easily view them! Oh, and just in case it's not clear, even the most powerful handheld PDA's (personal digital assistant) only have a small fraction of the power/speed of the slowest of desktop computers or laptops.

Ok, some of you are crying that web pages are not just about text and HTML. There are images that have to be created and inserted into your pages, and we all know that image manipulation can really take a lot of juice (computer power). This is true in print work (where images have to be much heavier) but it doesn't apply to web design because images used in web pages (Gif's, Jpeg's and PNG's) have to be made really light so that they don't take forever to download. In a nutshell, what this all means is that images only need a lot of juice if they are heavy images.

For those graphic designers out there who know print, images used in web pages (and all screen graphics by the way) need to be reduced to a PPI (DPI) of 72 to 76, a big contrast to the usual 300 DPI when working in the print world!

What are 'LIGHT' images?

Now that you are getting into the web game, you are going to hear a few things over and over again. One of these is the expression: making your images and your pages 'light'. You will hear people say: 'keep your web pages light ...' or 'keep your images light ...'

What the nerds are talking about is the size of the images in terms of file size; we are not talking about how bright an image is.

So how big (or better yet how small) do images and pages have to be to be considered 'light'?

The last several years of web experience has shown that if people have to wait more than 10 seconds to see your page, you can kiss most of your traffic goodbye. High speed Internet access is growing, but sadly still too many people are using dial-up connections.

Last statitics I heard put the number of people on (slow) dial-up connection at about 60%. This number of course will vary from place to place, but the bottom line is that you should expect to have many surfers hitting your web pages at 56k or less.

56k is the speed of the fastest of dial-up modems you can expect, and 56k modems download at a speed of about 5.6 kilobytes per second. With this in mind, and the 10-second rule I just mentioned above, you can see that shooting to create pages under 60k (kilobytes) is a good idea.

The best way to keep your web pages 'light': image optimization.

The heaviest aspects of most web pages are the images. Following the old 80/20 rule we should concentrate on making our images as light as possible without making them look ugly. The process of 'lightening-up' an image, is commonly referred to as 'optimization'.

How to optimize your images

Just about all the image editing programs out there (programs like Adobe Photoshop, Xara, Macromedia Fireworks) have the built in capability to output/create images that are as light as possible. These programs have special export filters that are designed to produce web-optimized images. When you start using image-editing software (and you will, if you are designing web pages) you will find that the process is pretty painless, though you will probably have to tweak things as you go along.

A little common sense can speed up your pages

Besides using these tools, there is no substitute for common sense approach; you may one day have to ask yourself if you really need that image that takes up half the page! Big pictures that take up a lot of space on the page will typically be pretty heavy...

Remember that unless you are National Geographic, * Walt Disney, or Playboy, people are probably less interested in nice graphics/photos and more interested in the information/service your web site provides.

Conclusion

I hope that it's clear that when it comes to web design, heavy-duty computers are not needed and are just a waste of money.