Style versus Design

A few words on making your site work well, from the owner and designer of Ordovician Webworks, a small company that tries to design intelligent and meaningful Web sites. I also teach Web page design and basics, tips and tricks at a local educational institute.

Style is an entirely personal matter. Like an appreciation of music, art or literature, it depends on the individual whether a Web page style is good or bad. Just because I don’t like purple letters on a green background doesn't mean it’s bad style. The author may think it’s superb styling. It’s a matter of personal taste.

The issue of good or bad is only relevant in design, rather than in style. It’s bad design if the page is unreadable, or obscured, but not necessarily due to bad style. Design elements can be enhanced to retain or complement the overall style.

Many "Web design gurus" pontificate on style in a dictatorial fashion, stating which layouts work best, which colour schemes, which typefaces. Adherence to their guidelines would see a homogenized Web, dulled by similarity. Pages should reflect the individuality of the authors or owners, not necessarily fit into a worldwide fashion statement for HTML authors. It’s good to be idiosyncratic, eccentric and individual, but always be careful not to let personal style interfere with or override the elements of good design.

A web page or site should meet 
certain basic design criteria:

• It should be readable. Without legible text, the content cannot be appreciated. Text should not be obscured by graphics, colour choices or other elements.

• It should be navigable. Users should be able to move easily from page to page, find content quickly and efficiently and always have a grasp of where they are within the site hierarchy. Hyperlinks should provide easy routes to other areas within the site, plus to related pages online. Email links or feedback forms should give users a way to comment to the owner. Remember, suers may find themselves catapulted into the middle of a site by a search engine. Make sure they can find their way around from any page.

• It should be accessible using currently popular technology. Pages should load reasonably quickly, and elements such as scripts or graphics within the site should not make it inaccessible to users. Excessively long pages should be broken into more digestible sizes. Large files can be made available as single elements to users as downloadable files. Large graphics should be represented as smaller, even thumbnail images users can link to for the full-size image. Extraneous or gratuitous technologies such as sound files, animations, etc. should be eschewed when they image negatively on accessibility. Never forget that many users have 28.8kb or even 14.4kb modems, and are surfing with older browsers.

• It should be consistent. To provide easy visual identification of elements for the user, Web pages should have consistent use of images, themes, buttons, frames, etc. Thematic consistency makes it easier for the user to concentrate on the content. Users should also be able to recognize that they are within your site, not wonder if they have been transported outside though a link.

• It should be technically correct. Web pages should not have HTML coding errors, script errors, missing graphics, broken links, etc. They should also be devoid of major grammatical and all spelling errors. There are many tools available to ensure correctness in these areas, so a Web site with errors of this nature only hurts the credibility of the site owner.

• It should be logical and coherent. Regardless of the nature of the content, it should be organized in a way that users can follow and understand the owner’s intent. Data should be presented in a manner which is appropriate to the appreciation and understanding of that data. Use of headlines, horizontal rules, tables and lists are encouraged to separate logical elements and present content in an easily recognizable manner.

• It should be kept current. Owners should update pages as often as required to keep the data and hyperlinks current. Outdated pages may be important as archival material or historical content, but they should be moved to the background or out of the main hierarchy so more current material can be presented. Also, outdated HTML coding should be replaced with current usage to be ready for changing standards.

• Keep it simple. Simplicity is generally more efficient than complexity for presenting information. Too many elements may distract the user from the content. Use what best enhances the content and eschew anything that will interfere with understanding or appreciation of your message.

Beyond that, owners/authors should consider themselves free to develop their own style. Whether and how you use colours, fonts, tables, frames or graphics is up to you, as long as you meet these basic requirements for good design.

There are no 'style police' who will come in the night to take you away if you use green letters on a red background. You won't be punished if you stuff overly large graphics, blinking animations or scrolling marquees on your page. But you may find your site is not popular as a result. Sometimes personal style has to take a back seat to common sense and simple accessibility.

Style versus Content

As users, we cannot always validate the content of a site ourselves, so we must approach Web content as skeptics and agnostics. Web users must be more skeptical and cynical towards web content than with other media (radio, TV, newspapers, etc.) because there are few checks and balances to ensure online content is valid. And that makes us vulnerable to those who would control and trick us.

One way to add credibility to content is to link your site with others of related content. Show users you have done your background research: list sources and relevant links. Even include contradictory material where necessary to let users determine for themselves the validity based on all sides of an argument. Content bereft of supporting data from other sites or outside sources, can only be treated as individual opinion. Links are not a proof of validity - but they allow users to go outside the site's borders to look for other ideas and opinions.

Remember that simply because something is said, presented or implied online, even on reputable sites, doesn’t mean it is necessarily true or correct. Or even current. Use more than just your judgment and common sense: use your ability to surf and search for related material that strengthens or disproves a statement or argument. Learn to doubt and research your doubts. Skepticism, even mild paranoia is healthy when online.

Without connections, a Web page is an orphan on the Net. Its content is isolated, adrift from useful associations. Even where content is not subject to controversy or argument, it behooves the owner to provide links to similar or supporting content, as a way of reinforcing the material. If, for example, you show a picture of you and your dog, list kennel clubs, breed groups, or other owners’ pages which reiterate the reasons for liking that breed. Connections of this sort create Net communities and strengthen the interactivity of the Net.

Textural content is easily overridden by graphic content and visual or special effects. Design your page to allow the text to have the visual importance it requires. If the content requires the user to read, make it easy for them to do so. Many graphical or audio elements can distract the user, so use them in ways to complement or enhance your text, not detract from the message. Most users have a limited range of typefaces - make sure you list alternatives to anything fancy and special.

Style versus design is an old argument, similar to the 'form vs. function' argument in architecture and industrial design fields. In an age of sound-bites and two-minute attention spans, it's not surprising to see far more attention given to web site style than its content. Design elements like grammar are often ignored by young programmers who emphasize graphic elements and coding - at the cost of credibility. The inability to tell the difference between homonyms like "its" and "it's" or "your" and "you're" seriously denigrates a site's credibility. This reflects very poorly on the designer's ability to use English and thus communicate effectively.

Content is a site's foundation. It is what brings users to your site, what brings them back, and what makes them stay longer. Users today are demanding more depth in their content, more comprehensiveness. A simple white page with black lettering can be a powerful and respected site if it has significant content that users find useful, fulfilling and understandable. A site busy with animations, Javascript, rollovers and other technical marvels will fail to impress users if they cannot find enough content to keep them there.

Research is another tool to emphasize content. The Web is full of hoaxes, gibberish, untruths, urban myths and dissimulation. Anyone who adopts these for their own site simply spreads the stupidity. How many times have we all seen sites that repeat "truths" behind popular sayings - such as the real meaning behind sayings like the "rule of thumb" or "wet your whistle," or the origin of words like "honeymoon" and "Jeep"? Most explanations are part of popular mythology - not 'hidden' truths or amusing trivia. They are usually wrong - often fabrications that are as transparent as lies to anyone who bothers to research a little deeper into respectable sources. But they get perpetuated by people who see them as amusing or interesting and put them on their own site. This turns the Web into a tool to spread superstition and ignorance.

Click here to download a PDF colour chart of the named HTML colours, or click here for a Corel Draw version (V12), and here for a Corel Draw palette file.

The author is a member of the HTML Writers' Guild.

Top of page

Post your comments, share opinions and ask questions on the Mumpsimous FORUM.

Email me at ichadwick@sympatico.ca if you want to add your two cents' worth or to just comment. Check back again. Last updated March 20, 2005.

Click here to go back to my home page. Click here to go to my site about Ordovician Webworks. Or here for my notes on Web page essentials.