Web Development 101
Several years ago web development was a boutique industry with technical skills a necessity. As the years have gone by, the skills needed for basic web development have slowly diminished to the point that, today, almost anyone can create a complete website in a matter of hours. Simple WYSIWYG authoring tools, such as Dreamweaver and FrontPage, with their standardised interfaces are often no less usable than software people use on a daily basis (Word, for example) making the transition a painless one.
This evolution has opened the Internet up to a degree once thought impossible. The downside to this explosion is the growing number of sites that prove impossible or painfully difficult to navigate due to poor layout, flawed navigation, colour and formatting choices. To prevent these visual nightmares, here are a few basic tips for new web developers.
Fonts. Use a standard font such as Arial or Verdana. You may have a font on your computer that you've grown attached to, but there's no guarantee that users of your website will have the same font installed on their computers, making the resulting page they will see entirely unpredictable.
Use a font colour that contrasts well against your page background: black on white is always a safe choice. If the font and background colours are too similar, people will have difficulty reading your text. Neon fonts are a definite no-no.
Avoid italicised fonts as they are much harder to read, and try not to use more than two or three font sizes on the same block of text. Pages with many different font sizes make a site more difficult to read and visually chaotic (unless, of course, this is the effect you're looking for!).
Backgrounds. Neutral colours are best; yes, boring perhaps, but bright colours can be overbearing and reduce the legibility of text. Some browsers also refresh the page more slowly as you scroll down a page, which combined with a bright background may produce a flashing light-show that will have your users flying into epileptic fits en masse! Not really, but you get my drift. Oh, and if you decide to use a background image, don't watermark it, as this can be distracting when scrolling down long pages.
Navigation. Found a nice Flash or Java manu system have you? Feel free to use it, but make sure it isn't the only means of navigating your site. Many users won't have the plug-ins necessary to utilise them and will be faced by empty grey blocks rather than buttons. Put standard HTML links on the page just in case. Make sure that whetever primary navigation system you use remains the same on every page.
If the navigation layout changes on different pages you will have your users tearing their hair out in frustration. Lastly, bear in mind natural human interactions with the page. In most Western cultures people's eyes will be drawn to the top left-hand corner of the screen and then right, along the top of the screen. Your main navigation should ideally be near where they look first on your page.
Images. Always use an appropriate image compression format. If you're compressing an image with large blocks of the same colour (such as logos and most navigation buttons) use something like GIF. If you're compressing a photograph or complex image with lots of gradients, textures and highlights use JPEG. Using the wrong format will increase the file size dramatically. And try not to put more than 100KB of images on the same page; any more can cause aggravation for dial-up users (of which there are still many).
Finally, and this is a biggy, don't re-size an image on your page using the HTML size tags. If you shrink the oscreen size of a large image on your page (in pixels), the actual file size (in KB) still remains the same. This means that a very small image on your page may still take a very long time to download. Use something like Photoshop (or even Paint) to re-size the image instead, thereby preventing the need for me to throw things at my monitor and swear profusely when visiting your site. And don't increase the size of an image using the same tags. This will cause pixellation of the image, making it look grainy and jagged.
Contact pages. If you decide to put up a contact page, be cautious about plastering your email address on it. Trust me, it will be an unwelcome surprise when the spam starts rolling in. If you are able, use a contact form, or conceal your email address from spiders (those programmes that trawl through websites for content) using Javascript. Think about creating an email address specifically for the site; one that you can abandon if things go haywire.
General Usability. Try to maintain standardisation across your pages. This may mean spending some time coming up with a page template at the outset, but it will make things considerably easier for you and your site's users down the track. If you're coming from a print background remember to think broadly in squares and rectangles when designing a page. Circles and curves may look nice, but they're difficult to implement.
Consider the screen resolution of your users. Most people will be using a screen resolution of 1024x768 (pixels, width by height) or above, but there are still quite a few using 800x600 or less. If your page is wider than 750 pixels these users will be forced to scroll sideways to view the full width of the page. It's up to you to decide what compromises you make to accommodate varying resolutions, but try to avoid extremely wide tables or images as a rule.
If you use links, make sure they're clearly identified as links (underlined, for example) and make sure you don't use the same format for plain text (I hate it when people underline text on a site but it isn't a link, but that may just be me!)
Finally, remember that these are just guidelines. Many of them may be broken under the right circumstances with great results. Guidelines are a useful tool, but web development is as much an act of artistic creativity than a purely technical one! Now fly! Be free, my little grasshopper!
Posted by at April 8, 2005 11:53 AM
