Underachievement as pertained to by gender ►
◄ All together now, ''Boring, boring Super Dave...''
If you're designing web pages, whether for your own enjoyment or for profit, your pages have the opportunity to look, smell and feel as good as the very best. I'm certainly not suggesting that I'm perfect, but below are some things I try to keep in mind.
At All Times, Be Professional
You need to present content fast: after only a few seconds with no results, many people will have moved on. Get your viewer's attention quickly. Shove some text up while you're waiting for the graphics to arrive. Within the site, if you know that something's going to take a while, warn the reader before they click the link.
Try to be consistent. Things like layout, background textures, and recurrent navigation elements let people know that they're still on your pages. I also make external links open in a new window, though this is a bit of a throwback in terms of modern web etiquette and you might want to consider marking them as such if you do this. The point is: people get to know what to expect.
Pick strongly contrasting text and background colours. If you use background textures, they need to be flat and unremarkable—a border image may impact less on your text's readability and look more professional.
A quick statistic: about 10% of male surfers will be colour-blind, and many more will have sight problems. It's in your interest to cater for everyone, keeping font sizes reasonable and colours clear.
If you're going to go for anything other than a serif style font like Times New Roman, use it everywhere. You may find that there are one or two common fonts in that style, such as the sans-serif Arial and Verdana fonts. Just remember that your pages should look acceptable formatted in any font since different machines, systems and browsers may have different defaults and different fonts.
Avoid Anything Fancy
Most browsers don't show anything inside a table until they have every piece of text and image which makes it up. A reader may left staring at your background texture for what seems like an age. One solution is to split text into at least two tables so that the short first one is already on screen whilst the second loads. It feels faster, and gives people something to focus on.
If only a few people can see or hear your fancy gizmos, be they Shockwave gadgets, Java applets, or ActiveX programs, is there really any point to them? Slow downloads and incompatibilities aren't friendly, especially to people with little computer experience. Flash is unnecessary and overly platform-specific.
Avoid glaring animations and irritating sounds. Subtle animations with few frames that don't catch the eye as much are better, as well as quicker to download. Sounds get annoying very quickly. It's particularly bad for sounds attached to an index page because you get the noise every time you hit the "back" button.
Avoid Frames
Frames have consequences. Not only do they reduce the amount of space on screen for content, they render search engines unable to reference your pages in many cases; if they do get listed, they'll appear outside the helpful navigation frames you designed.
However, even if you don't use frames yourself, others may. You can use JavaScript to force your pages out of frames automatically, or include a link on each page to reload itself with target="_top" inside the anchor tag.
Make Your Images Work For You
If you provide the heights and widths of images, the browser can move on and display the rest of the page whilst that graphic downloads, so the viewer gets your pages faster. If you're lazy, consider doing at least images at the top.
Use the "alt" tag when possible, because a surprising number of people surf with the graphics turned off. Many people don't have cheap net access yet. This particularly applies to navigation buttons.
Keep reducing their proportions. Lose 10% of the screen size and you've lost 19% of the file size. Reduce the number of colours in each image, so that if possible they're 8-bit or less, and slash file sizes. Try more aggressive compression settings (but keep the originals safe!) Know when to use GIFs and when to use JPEGs. (GIF for cartoony images, JPEG for photos.)
Re-use your images on as many pages as is possible without them becoming boring. If it's already in the browser's cache, it doesn't need to be re-fetched.
Not Everyone Will See The Same Pages
Don't assume that everyone is running Windows, or the same browser as you. This means not using HTML code which doesn't work on at least two popular browsers (basically Internet Explorer and Mozilla/Netscape.) Tags like <BLINK> or <MARQUEE> only serve to exclude people. Browsers may have different defaults on the Mac or under Linux, and these represent growing markets.
If you must specify fonts, use them properly. It is more acceptable to specify a font if you add a font family, because the browser should then sort out an alternative if needed. You can assume that everyone's default font is probably a Serif face. If you want a monospace font, then good mark-up is <font face="Courier New, monospace">, or if you want a sans-serif font, you should use something like <font face="Verdana, sans-serif">. The trick is to specify the font family after mentioning the font, which can be harder to achieve if you're using a WYSIWYG designer.
A much, much better way to use fonts is not with font tags, but cascading style sheets. These are surprisingly simple, and save you generating massive HTML files full of font tags. They also allow you to change the way all of your titles are displayed by changing one file... less effort for you, less hassle for others. Try a simple guide such as Sizzlin' HTML Jalfrezi which has a stylesheet section.
Since Macs have different fonts to PC owners, after the font name and before the font family, try to include the name of a Mac font of that type—Helvetica, for instance, is the equivalent of Arial/Verdana, and all Macs should have it.
Different browsers have different defaults of things such as page margins, table cell spacing and padding, frame borders and so on. If in doubt, specify all of the available options for tags. Pure WYSIWYG editors make this difficult—this is another compelling reason to learn at least some HTML.
When using interface-altering stuff such as JavaScript, Java, Flash etc, try to maintain as transparent backwards compatiblity as possible: if there has to be a marked visual difference, try to use a "selective" display of content, showing the basic unadorned text on the page at the very least. You should never code Flash text blocks.
If using JavaScript specific to a particular browser, note this for the record. For example, you can't have a link to bookmark your site in Netscape, but can in Internet Explorer. Make it clear that clicking that link may not work for everyone.
Try to stick to scripts which are cross-browser compatible. Often problems arise simply because of sloppy programming. If in doubt, check popular script repositories for similar scripts certified compatible. DynamicDrive is a good one.
Keep Your Site Easy To Navigate
A neat, orderly directory structure underlying your site makes for a logical progession between pages. For example, I employ several layers: a general index, a specific subject index, followed by actual content, which may in itself be a sub-index. However you do it, make sure that the viewer is aware at each stage available on the next click.
A familiar interface on each page is reassuring for users. This requires consistent use and layout of buttons and "return" links. JavaScript may help here. Facilities such as e-mail and guestbooks are great for generating feedback (however, because of the way browsers handle e-mail clients, people are more likely to write in a guestbook, particularly if they aren't surfing from their own machine.) If you have access to PHP, by the way, coding your own e-mail feedback form isn't especially difficult.
Consider having an overall site map, a single page from which all others are directly accessible. This site map could then be linked to from all pages, and the user will then be able to discern the logic in your site layout. And there should be some.
If you insist on using JavaScript events to change the text in the status bar, don't forget to blank it again when the pointer is moved away, otherwise you'll confuse people. Code which scrolls text in the status bar also makes it impossible to see where links lead... and if your visitors don't trust you, they won't click.
If someone saved one of your pages to disc, would they easily be able to find it again later on the net? Fix this. Stick your root URL (or even just the site name) somewhere on every page. I suggest the page title, if your URL is short enough.
💬 Comments are off, but you can use the mail form to contact or see the about page for social media links.
