You have 15-30 seconds to catch your visitor's attention.
Yes, in most cases, a web surfer will decide in less than 1 minute whether they want to stay at a site. Your first screen must load in that time frame, or something in that first screen must catch their eye, or you have lost that visitor. Note, too, that even if your site is interesting, visitors will be reluctant to return to it in the future if it takes too long to load.
How do you get a visitor to stay, and get them to return? Here are a few guidelines:
- Pages should load quickly - the html and graphics, total, should be around 60k, according to most proficient web page designers.
- Pictures should be 20k or so each. Don't fall into the trap of resizing a photograph with html to make it smaller - if it's a 360k file, your visitor is STILL going to have to wait for that 360k file to load even if that picture is going to display in a 1-inch square.
- Each page should be short - two to three screens.
- Graphics, including the background image, should be small (byte size), few in number, and relevant to the content.
Layout - general:
- Remember that is the content of your site that will persuade your visitor to read what you have to say, and to go to your other pages.
- Tell your visitor, at the very beginning of the page, what is unique or appealing about your site. "This page is dedicated to my cat Fluffy, an extremely intelligent creature who can open doors by herself" is more appealing than "Welcome to my page!!!! Here I'm gonna talk about stuff I like!!!"
Layout - images and colors:
- Make liberal use of "white space."
- Don't code your page for a specific screen resolution - for table widths, use percentages rather than pixels. (Example: if you code your page to a specific width of 600, almost half the screen will be completely blank if a person is using a screen resolution of 1024x768.) Also, let text wrap naturally in paragraphs rather than coding line endings for your screen resolution..
- Don't center everything on a page (for example, lists of links centered like poetry are difficult to read).
- Avoid "under construction" signs or text - every well-done page is always under development.
- Don't put everything on one single, long page.
- If you must use frames, don't keep visitors stuck in them when they leave.
Layout - text:
- The background image should be just that - in the background, gently enhancing the page. People shouldn't have to wear sun shades when viewing your site.
- Visitors prefer to see several small, interesting photos of your cat doing something rather than just a single large portrait. Photos should be in .jpg format, and between 15-20k each.
- Colors should contrast well with the background image so the text is readable. Also, many people surf without graphics turned on, so don't code your page to have a dark background color with black text, or a light background color with white text.
- If you are using a bordered background, make sure that the text doesn't display on the border (viewing the page with different browsers and in different resolutions is a good idea).
- Take it easy with animations - one or two per page is ample. For example: Many people find it difficult to read a paragraph if cats are running across the screen in opposite directions above and below it, with a flashing paw leading into the paragraph.
- Likewise, try to avoid having a confusing "mish-mash" of images on your page - don't use a button from one set, a button from another set, and a third button from yet another.
Plug-ins and Music:
- Avoid filling up the screen from left to right margin - leave some "breathing room" at the sides.
- Text in paragraphs should be the default size of the person's browser - avoid specifying microscopic-sized text to "stuff" more information into a page, or huge text to fill it up.
- Don't use more than 2 different typefaces on a page (vary the type size or bold for interest).
- Note that if you code your page with a "fancy font," visitors will only see it that way if that font is installed on their computer.
- Text should NEVER blink.
- Plug-ins should be optional. Avoid coding your pages for any specific music player (such as Crescendo) - doing so makes that pretty tune unavailable to everybody who is using a browser straight out of the box.
- Likewise, avoid coding your page for a specific presentation player - usually, people won't download and install Shockwave, for example, just to see how cool your page is.
- Some people will flee a page quickly if they are "forced" to listen to music - it's often best to let them turn on the music (plus, your page will load faster if that 100k midi doesn't have to load). If you do "autostart" the music, put it at the top so the control is easily seen, and make sure the "off" button is visible. A few people have expressed an interest in the pop-up music window I use here at CatStuff - how to create your own is on this text page. (The site where I obtained this code from - which I modified slightly - no longer appears to be online.)
Banners, Web Rings, Links and Such:
- On your first page, provide visitors with a nicely laid-out menu system (labeled buttons, bulleted list, etc.) that links to your other pages.
- Don't force people to go through every subsequent page via a "next" button or link unless the "next" item relates directly to the topic on the current page. Likewise, don't force them always to have to return to your main page to go to another page. Instead, provide a navigation "system" - text links or small graphic buttons, in a list or menu, in the same location on each page (and make sure that each page has the same links).
- Avoid using multiple navigation schemes - for example, an image map, labeled buttons, text links, and a pull down menu, all provided on the same page or even on different pages, will confuse your visitors. There's nothing more frustrating than having to search an entire page to look for the link to another page.
- Consider using the same background and navigation buttons on all pages that are of the same general topic to visually tie the subject matter together.
- If you use image maps or labeled buttons, be sure to provide text links or "alt" explanations as well (older browsers don't handle image maps well, and some people surf the web without graphics turned on).
- Affiliate and click-through banners seem like a good idea - put a big blinking banner on your page for another site, and when your visitor goes to that site and buys something, you get paid a few pennies. But consider this: Do you want your site to receive just a quick glance before visitors dash off to another site? Don't you want to have enough content on your pages to entertain them, make them want to come back? For that reason, you will never find large click-through banners at the top of my main pages or blatantly flashing "in the visitor's face." (This is not to say, by the way, that I don't have a few affiliate banners here - but I have refused to feature them prominently.)
- Link-exchange banners: These banners are usually fair trades - you put up a banner on your site that displays other people's banners, and your banner gets shown on somebody's else's site. It's a good promotional method.
- Web rings: These, too, are a great idea - but geez, don't join 20 or 30 of them and put them all on one page!
- Links: I think every site must have a page of links - frankly, word-of-mouth is the way most sites are discovered. But use caution if you decide to display banners instead of text links: the page will load very slowly, and most people won't stick around long enough to see all the banners. I personally think that a text link with a brief explanation about what you found interesting at the site to be most useful.
- As odd as this may sound, look at your page ONLINE immediately after you publish it. Your page will load very quickly when you view it on your home computer, but may be really slow when you and others see it online. Too, some of the images may not have been uploaded to your web server and a resulting "red x" or "broken image" will be seen.
- Make use of the "title" function in your html coding - when someone bookmarks your page, this is what will show up in their Bookmarks.
- Be creative with the "alt" function for images (put your cursor on the cat below for an example).
- Check your spelling (smile). Also, ensure that your "story" flows smoothly and logically and is understandable to a complete stranger.
- Pleading with your visitors to sign your guestbook will only prove annoying to them - provide the option if you want, but don't beg.
- Remember that the above are guidelines - and there are always good exceptions to every rule!