|
|||||
Make
it fast Can
I find what I want? Icons
Margins Repeating elements
640 by 480 design Minimise scrolling Short paragraphs Transparent GIFs Jumping around Use a
216-colour palette Test, test and
test again Netscape:
Offline Viewing Check your links Who are you? Don't be a Ghost
site Top
resources
Nothing kills a user's desire to visit your page more than a slow loading page. Keep your GIFs and JPEGs as small as possible, and to speed them up, specify the graphic's size in the IMG tag. This way Netscape displays the text in your document leaving gaps where the graphics will appear, filling them in later on, for example:
<IMG SRC = "parrot.gif" ALT="A crimson parrot " WIDTH=200 HEIGHT=152>
Your user now has some text to read while the graphics are loading. Another Netscape possibility is loading a small thumbnail image first and following it with a larger, higher resolution version:
<IMG SRC="parrot.gif" LOWSRC="parrot_s.gif" ALT="A crimson parrot " WIDTH=200 HEIGHT=152>
You can get the same effect using an animated GIF with two images, a small thumbnail which loads first and then the larger, higher resolution image.
If you have to use a graphic larger than 50Kb in size, and you can't reduce the number of colours or its size, then try inserting it towards the end rather than the beginning of the page. This way your audience will have something to look at while your graphic is loading.
You'd be surprised how many times users fail to find the information they want on the sites they are visiting. Make sure all the information on your site is easy to find. Menubars and contents lists are a handy way of showing your user what is available and make it easy for them to locate it. If you have a large and growing site, offer a site overview or table of contents page to give user's a bird's eye view of your site. You can do this in an outline form or like an organisation chart, but make sure the page contains hot links, too. This gives the user the feeling that your site has a structure and there may be payoffs in exploring it. Also make sure that your user knows how to contact you if they need more information, say, by including your e-mail address at appropriate positions throughout your site and also including your telephone number. On the subject of telephone numbers, include an international dialling version for overseas callers and always give an alternative to 1800 numbers.
Contrary to what you might believe, the meaning of an icon is not always evident from the picture itself. If you're using icons, choose ones that are unambiguous in their meaning, and for the benefit of text-only browsers, and the graphically less literate, add text links as well. Icons with pictures and text overlays are also a good choice. The Web itself is a great source of icons but if you are looking for a thoroughly professional range, then the CorelWEB.GALLERY suite is worth considering. It includes over 8000 Internet-ready clipart images, including backgrounds, icons, buttons and lines as well as alphabets and numbers. This is a sample of the icons from the set.
One easy way of adding structure to a Web page is to use a narrow left margin for your site navigation and leave the rest of the screen for the page's own information. The PC User online and offline pages are a great example of this and the use of a simple graphic containing the dark border gives you maximum graphic clout for a small graphic size. The Lotus site (pictured) also uses the same effect. Designing a page like this gives the 'look' and feel of frames without the necessity of having to actually use them. There are, however, two things to watch with this technique. Firstly, if you are using the left-hand margin to double as a coloured background for text and you are positioning the text using a table, specify the table widths as pixels, not percentages. Secondly, make sure that your graphic is wide enough so it does not inadvertently repeat on larger displays -- test it at 800 by 600 and 1024 by 768 resolution, to make sure.
If every page of your site looks different to every other page, it won't look like a site at all -- just a mish-mash of dissimilar linked pages. Like any other presentation or document, your site should have an overall 'look' which will comprise a number of elements such as background colour or graphic, menubars, icons, text colour, style and size. Each page should contain all or most of these elements so that from one page to the next your user knows they are still in your site. Repeating elements from one page to the next not only saves design time, but it also speeds up your site for visitors because after negotiating the first few pages, most of your images will be in their browser's cache and will be loaded from there. Our own PC User online and offline pages use many repeating elements.
Notwithstanding that you may own a 17 or 24in monitor capable of displaying 32-bit colour at 1280 by 1024 resolution, the harsh reality is that many Web surfers are still looking at your page in 256 colours on a 640 by 480 screen, although this minimum, will, over time increase to a 800 by 600 screen. When you're designing for the Web, take this into account and design your page to work at these lower screen resolutions and colour ranges. This is particularly so if you use frames and if your page is text heavy; make sure it is easy to read at a lower resolution.
The more your visitor has to use the scrollbars to move around your page, the more frustrated they will get. Good sites make full use of the screen and minimise scrolling by using a number of smaller pages instead of one big one. However, if you create more smaller pages, make sure they load fast or you'll create problems not solutions. Additionally, if your user is likely to need to print your information, by all means have lots of small pages for them to browse, but also include all the information on an additional page and create a link to it for easy printing.
Reading information on the screen is much more difficult than reading it on paper. So make it easy for your visitor to read, particularly text-heavy material. Use large spaces between paragraphs and keep your paragraphs as short as possible so there is plenty of intra paragraph white space on the screen. Choose a font style that is legible; bold type and italics are less easy to read than the default browser font so resist the temptation to present large pieces of text in any headline font.
Use the transparent option to save GIF files that would otherwise have white borders around them. Transparency allows you to select one transparent colour for a graphic so that on your Web page the background image or colour will show through in all the places where this transparent colour appears in the graphic. To create a transparent GIF using Paint Shop Pro: open the file, select the Eyedropper tool and right-click on the colour you want to be transparent. Now select File, Save As and in the List Files of Type box select GIF -- CompuServe. In the File Sub-Format box select Version 89a -- either Interlaced or not, select the Options button and select Set the Transparency Value to the Background Colour and click OK and click OK again to save.
If you have a large or text-heavy page, use jumps so that your visitor can more easily navigate around. Having a list of topics at the top of the page linked to headings further down the page allows the visitor to quickly locate information on even quite long pages. A tag like this creates a link to a location further down a page:
<A HREF="#Saving">Saving a text file</a>
nd the <A Name = ...> tag at the target location creates the position marker for the browser to "jump" to:
A NAME="Saving">Saving a text file</a>
Note that the jump point name has a hash symbol (#) before it when used in the <A HREF...> tag and none when used in the <A NAME...> tag and that the capitalisation of both words must be identical.
And your jumps don't have to take you downwards through a page, you can use them to move up a page, too.
There are 216 colours that comprise the palette that most Web browsers use. These colours are rendered the same way not only across browsers but also across platforms -- Macs and PCs. This palette is known as a 'browser safe' palette. If you use colours which are not in this palette you can't be sure how the page will look. And if you stick to these 'browser safe' colours then you know they'll appear as solid colour and will not be dithered. There is an excellent online version of the palette at: Lynda's Homegurrlpage: http://www.lynda.com/. You can, however, test any colour number to see if it is in the palette as only these hex and decimal numbers will appear in its RGB specifications:
hex decimal
00 00
33 051
66 102
99 153
CC 204
FF 255
For mathematically minded readers, the palette itself is comprised of every possible RGB combination using these six numbers. This gives you 6 x 6 x 6 = 216 possible colours.
Before you go online, test your site with as wide a range of browsers as you can. Most browsers will work offline so you can load and view your page without having to upload it. Check to see how each page looks in each browser -- you may be surprised how different a page can look from one browser to another. If your site works best with a particular browser, place a note on the page telling the user this, with a link to where they can download that browser.
Load Netscape as usual and, if you are running Trumpet Winsock, either don't select Dialler, Login and minimise the window or, if you have already logged in, select Dialler, Bye to logout. In Netscape use File, Open File and select the file to view. You'll be able to see the page as it will appear on the Web although any links on the page won't work. If you encounter a "DNS not found error", configure Netscape so it loads a blank page (instead of looking for your homepage) using Options, General Preferences, Appearance, Startup, Start With, Blank Page.
URLs seem to be in constant motion. Check your page regularly to make sure the links are still current. You can do this manually by loading your page and checking each link individually or there are programs which will do the work for you, such as the Shareware program, CyberSpyder reviewed by John Hilvert in September '96 (page ^^) and which can be downloaded from http://www.cyberspyder.com. While you are at it, make sure that the colours for your links and visited links can be seen clearly against any background graphic. While visited links that disappear into the background may seem cute, you'll discourage repeated reference to your site as users won't be able to see the links they've previously accessed.
As with any communication, before you begin your page design, have a clear picture of who you are, what you want to say about yourself or your business and who your audience is. There is no point using a neat conservative design if you are a creative organisation wanting to show the world how hip you are. Likewise, you wouldn't use an over the top design for a legal office or an accountant. Your design should reflect the tone of your organisation and pass on to your viewers the messages you want them to get about your organisation.
Don't let your site fade into oblivion. If your site always looks the same and isn't regularly refreshed it will simply be ignored by regular visitors (and aren't they the ones you want to encourage?). A good site changes regularly, so try to post something new at least once a month. If you have a 'What's New!' section, your regular visitors can check there to keep up with your changes and additions. And giving your site a major makeover once a year will keep it fresh and interesting into the future. On the topic of Ghost sites, check out: http://www.pathfinder.com/technology/ghostsites/ghost1.html
User level: Beginner to Accomplished
These two books are a wonderful source of information and advice on Web design. You won't find a lot of raw HTML code here but you will find great ideas for building everything from a homepage to a full-blown commercial site. Anyone serious about designing for the Web should have one or both in their library:
* Creating Killer Web Sites, The Art of Third-Generation Site Design, by David Siegel, Hayden Books.
* Web Concept & Design, A comprehensive guide for creating effective Web sites, by Crystal Waters.
And at last a book that anyone who uses Paint Shop Pro for designing graphics for the web will enjoy:
* Creating your Own Web Graphics with Paint Shop Pro, by Andy Sharfan and Dick Oliver, Que.
Top of page
|What's New | Software | Net Guides | Web Workshop | Net Sites | About PC User |
All text © 1997 Australian Consolidated Press - PC User Magazine