Hints & Tips for Web Design

Posted : 23 Jan 2002

Just a few things that might help you when making web pages or web sites. You are hopefully doing these things or understand how things work behind the scenes to enable you to get the best out of any web sites you are doing. Most of this stuff is common sense and you pick most of it up with your first site. But hopefully there are a couple of useful tidbits for people at all levels.

1) Most screens in the world are 15" (640x480 pixels) and 17" (800x600 pixels). Market share of people who have larger displays (19" and larger) is quite small. Some people do operate their screens at higher resolution but as our populations age and our eyesight gets worse with age then people need to see bigger things on screen, not smaller. For best practice design your web layout to fit within 800x600 pixels (or even 640x480). Allowing for scroll bars and menus, etc.. makes the usable area a little bit less than this. Far better to make people scroll down than scroll across. There are many ways to setup frames/tables and using clever design to make your design fit any screen resolution. Even more advanced technologies using java/javascript/dynamic html and xml are available also but beyond the scope of this short article. Try making the web page narrower than your design and see if anything reflows.

2) 90% of people use PC's, 10% Macs (rough stats here). 80% of people use Internet Explorer, 20% Netscape (again rough stats and there are other browsers out there but with very limited market share). Most of you use Macs and a large % use Netscape. The problem with doing your site and testing it in Netscape on a Mac is that you are only catering to 2% of the market - not a good idea. Things generally look pretty much the same on each computer type with different browsers but often very different across platforms. PC text and fonts in particular can be quite different to Mac text and fonts. Try to use common fonts to both platforms like arial or helvetica. Personally I find times roman to be too small. Font sizing can vary quite dramatically depending on user settings, browser versions, browser type and computer. Sometimes you just cant win and have to go for what works best in most cases. If all else fails make the text a graphic and then you should be fine but any graphic takes longer to load than an image. Sometimes weird things happen - like some versions of Netscape didn't support coloring of individual table cells but Explorer did. You just have to learn these things from experience. Netscape 6.2 on Mac and PC is quite a jump up from Netscape 4.7.x and I recommend you give it a try. I had almost switched over to using Explorer after being a Netscape user for many years (anyone remember Mosaic?) until Netscape 6 switched me back again. If you are keen you can try iCab or Opera for clean, simple, fast browsing.

3) Don't have any spaces in any file name being uploaded to the Internet. If there are any spaces then the transfer process will generally insert a %20 into every space causing the file name to be different and links to consequently break after upload. If you need to use a break between works/characters most people use _ (underscore). Don't use / or . as these can confuse browsers of your site and/or your web server/browser.

4) Use consistent file names - generally lower case are preferred and not upper or title case.

5) Only use non standard plug-ins if you REALLY have to. And always warn people on the front page before you try to load the plug-in. Most common animations use flash but you can do some really clever things even with animated gifs and thereby not require the use of a plug in.

6) In general make photos into jpegs and logos (with limited colors) into gifs with indexed colors but there are the odd exceptions to the rule. Most of the web graphic optimisers (Imageready and Fireworks) do an excellent job these days and it is quite hard to tune images smaller than these programs can do quickly and easily.

7) Differing versions of browsers support different versions of java/javascript and this can really turn around and bite you at times. Older browsers don't support the technologies at all or poorly. Really old browsers even have little or no support for tables. Best to specify on your home page what browsers you recommend - generally version 4 or higher support all the required basic technologies (java/javascript/tables/frames, etc.) But best to use the newest versions.

8) When uploading your site keep everything in the same order/location as otherwise links get broken. Set the preference in your ftp program to maintain a permanent connection as otherwise your connection can time out.

9) Keep image sizes and page sizes as small as possible. Break pages up if you have to. Testing pages and sites on your hard disk is very quick, cable or adsl still quite fast but the poor deprived people with modems have to suffer with slow load times and don't make their misery any worse unless you like being a sadist.

10) I recommend that you tell people what is suggested for best viewing on the home page - resolution, colors, browser version, plug-ins, etc.

11) Be consistent with buttons and menu bars - try and put them in the same place on every page.

12) A pet hate of mine is people using logo and graphic symbols for labelling things without accompanying text labels. Not recommended. Text is much easier and quicker for people to decipher. Assuming that your text is legible of course ! If you have to use symbols and text together.

13) Once you have the basics down try adding some spice with image rollovers, frames, invisible tables, etc. The potential here is enormous. Look what Macromedia have done with Dreamweaver Ultra Dev - amazing. Do any of you program in directly postscript or would you rather use Quark? Don't have to fiddle with html much these days, the programs do it all for you. The only problem is keeping up with the rapidly evolving standards, program upgrades and technologies which seem to change daily.

14) Don't forget to add the page tilte to every page. I often see untitled page headings.