Television ads are designed with the greatest possible recognition in mind. Thus they come with Descriptive Video Service for visually impaired clients, text for hearing impaired viewers, are viewable on virtually any size & resolution screen - including black and white - and sometimes even have a separate audio channel in another language. All within the defined technical standards. When will the same attention to detail be applied to Web design?
Elements of quality Web design include size, content, layout & navigation. All of these pieces are also intimately interlinked. The best content will be ignored by both users and search engines if it can't be easily accessed, either by poor layout, excessive download times, or obscure navigation.
- Navigation: Offering an intuitive method for accessing your information is vital. Meaningful content should be no more than 2 clicks away, otherwise viewers will start to lose interest.
- Layout: Providing a layout that can be grasped in a few seconds enhances visitor's staying. Too many disparate or scattered elements hampers users recognition of information.
- Size: Does matter! Studies show that waiting more than 15 seconds for a page to load frustrates viewers.
- Missing Links: No, this is not an anthropological comment, but an essential piece of Web design: to ensure that all pages are linked correctly. Imagine the users reaction if they clicked a menu button for the information they want, only to be told "Document not found."
- Spelling: This may seem elementary, but poor grammar & spelling can ruin the best intentions.
- Images: Perhaps the single biggest source of problems on the Web.
- Size - Images should be small & few enough to allow for a decent load time with slower connections. JPG's should be kept below 10-15K, and GIF's used whenever feasible. Yet graphics are the best point of using the Web. This leads to a delicate balance being required between visual content & speed.
- Colors - JPG's are better for photo or fancy images, and GIF's for simple art. But there are sometimes extreme differences in color balance between monitors & browsers that need to be accounted for.
- Size definition - Graphics with defined sizes allow a browser to start laying out the text immediately. Without size attributes, most of the images need to be downloaded before the browser can figure out how to format the page, leading to excessive blank screen time & again frustrating viewers. Also, if the size attributes are different than the actual image, the page can be laid out in advance, but the browser then needs to reformat the image to the new size.
- Alternative text - Images with the ALT text defined let viewers browse much more quickly, and provide content & navigation for visually impaired clients who use text-to-speech converters. This is especially true for maps & images that are links. Without meaningful text, graphics are useless to users who can not view images, or who surf with images turned off.
- Backgrounds - The proper use of backgrounds will enhance the content & use of your Web pages. Too busy a background, or too little contrast between the text & background is hard on the viewer.
- Tables:
- Size - Tables without size definitions allow flexibility between different browsers or monitors. A common problem is tables with set widths that are too large for smaller monitors, forcing viewers to frequently scroll sideways.
- Content - Overly complicated tables, or too many tables within tables may force the browser to take a significant amount of time to "think" about how to display the page, leading again to a blank screen problem.
- Tables are somewhat deprecated due to the increased use of style sheets. But they can still the best solution for a clean orthogonal layout, and definitely for presenting tabular data.
- Style Sheets: CSS code is immensely helpful in setting global definitions for all of your fonts, color, sizes, backgrounds, etc. It can also be very effective at increasing your search engine relevance.
- Forms: The proper use of forms invites the user to fill out the fields or click the buttons. Designers frequently use a form with text fields that are too small or that won't wrap your entry. Or that has buttons & checkboxes arranged in a counter-intuitive manner.
- Frames: Frames are an excellent method for providing clear navigation of a site. However, users without frames are frequently left in the dark with the comment "These pages require frames to be viewed."
Some further & more detailed issues of actual coding are:
- DOCTYPE: This tag at the beginning of the file is essential. It is required to adhere to proper Web syntax, and tells the browser what type of Web page follows. A great majority of Web pages omit this.
- META tags: These are one of the hidden secrets in a Web page. Designers add the description & keyword content that allow search engines to better index your site, but there are other tags that enhance recognition for both search engines and your browser.
- Fonts: Too many changes will lead to a chaotic presentation & may be useless in the face of the users settings. Also beware of using unusual fonts.
- Comments: Web pages are fairly understandable to most Web authors. However, comments in the code on unusual features or special areas are essential for later maintenance.
- Structured Data: even at the simplest level, proper declaration of page type and author are essential for proper search engine recognition. This is even more true for business information: name, address, phone, logo and much more - or e-commerce definitions of product, brand, price, variations.
A final note: for a truly universal design, it is essential to check the final product on both a Mac & a Windows platform, in different browsers, both horizontal and vertical on both tablets and phones, and maybe even with a text-only or text-to-speech browser such as Lynx. This may seem like too many permutations, but the viewer is always right!
