Clareo Consulting, LLC

Skip Navigation

Web Development Best Practices

The creation of functional, attractive, and modern Web sites is much more than knowing how to use a graphical Web page design program. Creation of top-notch Web sites requires intimate knowledge of the nature of the Web and how to use it for best effect, both technically and in terms of the needs of the Web visitors to a particular site.

Clareo Consulting carefully crafts Web sites that implement a host of Web industry best practices. These practices, be they technical or non-technical, are followed in order to achieve the best possible return on investment from Web sites created by Clareo. This document highlights key best practices implemented by Clareo, along with the actual benefit to the site owner and visitors to the site.

Browse or print this page for reference, or skip down to any of the following categories:

back

User-Friendly Page Layout & Function

Technique Benefits

Layout & organization match industry expectations

While each Web site can and should have its own unique flair, it should also conform the essential layout and organization of other Web sites in the same industry.
  • Visitors' pre-conceived expectations for a site's appearance are met. Visitors have specific expectations for each industry's Web page - an art gallery site should look much different than that of a bookseller, but different bookseller sites should have layout characteristics in common for their customer's benefit, much as competing gas station signs bear the same organization of prices
  • Visitors more immediately find the features of the site they expect, such as "search the site" boxes, etc.
  • Visitors to the site can more easily find the content they seek

Pages within the site have consistent appearance

Each page within the site should have the same, or a similar layout
  • When users navigate from page to page, they do not need to re-orient themselves
  • Content is more easily found when it is in the same place on each page
  • Navigation links to other pages are more effective when they have a consistent location and appearance

Pages load rapidly over a variety of connections

Pages are designed to load rapidly over both high and low speed connections
  • Allows users of handheld, wireless devices to use the site effectively
  • Allows users of old, slow connections to use the site effectively

Graphical page components are complementary

Graphical components of pages are attractive, but treated as complementary to the textual content, rather than the focus of the page, unless the pages' content is inherently graphical, such as a product photos
  • Allows visitors to more rapidly obtain the content they seek, without being distracted by visually "over-the-top" graphics.
  • Allows the site to continue to be valuable even when graphics are disabled, such as over a slow connection or on a handheld device such as a cellular phone

back

Effective Site Navigation Scheme

Technique Benefits

Navigational tools are consistent from page to page

Main navigation links are the same on each page in location, appearance, and functionality.
  • Visitors don't get lost or waste time trying to navigate the site
  • Consistent navigation links improve page load speed

Navigational tools are easily found but unobtrusive

Navigational links on the site are easy to find and visually attractive but will have limited "Las Vegas glitz".
  • Helps keep the visitor's focus on the content of the site

Navigation tools show the structure of the site

Navigational tools, through a variety of techniques, display the hierarchical structure of the site
  • Helps visitors to immediately obtain a sense of the overall organization of the site, allowing easier access to sought information

Navigation tools identify current page

The current site page is easily identified by a change in the appearance and/or function of the navigational controls
  • Helps visitors to maintain a sense of their location in the overall site when they have navigated from the home page through other pages on the site
  • Helps visitors arriving directly at a "deep" page of the site from a search engine or link from another site to know exactly where they are in the site.

Navigation tools always work

Navigation tools continue to work with old browsers, graphics turned off, large and small screen sizes, and with add-on applications ("plugins"), and JavaScript turned off
  • Ensures that one of the most critical features of the site continues to work, no matter what access platform the visitor uses

Links open in the same window

Links on the site, with limited special exceptions, will not open new windows. Links are capable, however, of being opened in a separate window if the user so elects using their browser controls.
  • Prevents confusing or annoying the user when an unwanted window opens
  • Prevents conflict with some "pop-up blockers"
  • Allows the browser's "back" button to continue to work

back

Content is Written for the Unique Medium of the Web

Technique Benefits

Site content is "scannable"

Contents of the site are created so that they match the viewing behavior of the average visitor for that type of content. Most content, with the exception of reference content, is short, to-the-point, and easy to review at-a-glance.
  • Site content more effectively accessible to the typical Web visitor who scans instead of reading
  • Keeps visitors on the site longer as they find the site is not "too dense" or time-consuming

Detailed reference material will still be available

The site will contain needed reference material that is easily found via other "scannable" pages.
  • Allows visitors to know that more information is available, and where to find it if they need it.
  • Promotes visitors' "bookmarking" pages on the site for easy return later

Titles, headings and sub-headings used effectively

Well-written and brief page titles and headings are a part of every page.
  • Titles and headings assist visitor's scanning behavior
  • Title & headings are easily found by and given extra weight by search engines

Content is written in "inverse pyramid" style

Page content is written in journalistic style, so that the most important content is at the top, especially in the first paragraph.
  • Supports visitors' scanning behavior
  • Strong initial content spurs the visitor to read more

Lists are used effectively

Bulleted and/or numbered lists are used effectively
  • Supports visitors' scanning behavior

Important contents are highlighted

Important content is highlighted through tools such as "pull-quotes" and judicious bolding of important text
  • Supports visitors' scanning behavior
  • Strong initial content spurs the visitor to read more

back

Pages Automatically Adjust for Different Access Devices

Technique Benefits

Pages automatically reformat themselves

All general purpose pages on the site are designed so that they can easily be set to automatically re-format themselves for different media
  • Allows both current and future use of the site on a wide variety of media
  • Makes the site more compatible with devices such as "screen readers" used by disabled visitors.

Pages automatically reformat when printed

The screen version of each general purpose page will re-format itself when printed without the use of a separate "print friendly" version
  • Keeps critical content up front on the printed version, avoiding clutter by removing un-needed menus, and adjusting text sizes for print use

Pages automatically reformat for handheld devices

Each general purpose page will automatically reformat itself when viewed on a modern handheld computer or "smart phone"
  • Allows the site to be accessed from virtually anywhere, at any time
  • Maximizes the use of a rapidly growing segment of computer use

back

Sites are Created with Search-Engine-Optimization in Mind from the Start

Technique Benefits

Key words are identified and included

Site and industry-specific key words likely to be sought by visitors are identified and included throughout the site
  • Helps to maximize search engine rankings pointing to the site when key words are used

Page titles are carefully crafted

Page titles are crafted so that they maximize the use of search key words
  • Maximize search engine rankings for search engines that give extra weight to title text

Headings and Subheadings are used liberally

Textual headings and subheadings are used to offset content text, and are crafted to contain search key words
  • Maximize search engine rankings for search engines that give extra weight to heading text

Key words concentrated at top of page

Key words are concentrated in the uppermost portions of pages
  • Prevents search engines from missing key words at the bottom of a very long page, when the search engine limits the amount of content it indexes per page

Links to other pages contain key words

Intra-site links and links to other pages will contain searchable key words
  • Maximize search engine rankings for search engines that give extra weight to link text

Site contents contained within text, not graphics

Content of the site that is to be found by search engines is in textual format, not contained within a graphic image
  • Allows search engines to find content text as they cannot "see inside" graphical images.

Site content in "plugin" application use minimized

Unique site content contained in "plugin" applications is minimized
  • Allows those search engines that cannot find content within "plugins" like Flash to be found and indexed

Each page has a well-crafted "Meta-Description"

The (hidden to the human, but visible to search engines) "Meta-Description" tag will have a well crafted paragraph of content that describes the page
  • Allows an effective page description summary to show in the search listings of search engines that display this content. NOTE: This text no longer helps search ranking results, but it does provide an opportunity for an excellent description that can induce the searcher to visit the page.

back

Sites are Crafted Using Modern Technical Standards

Technique Benefits

Site conforms to current international standards

The site will conform to accepted international standards promulgated by the Web standards body, the World Wide Web Consortium (W3C - www.w3c.org)
  • "Future-proofs" the site as best possible, as future standards can be expected to expand-upon, but not replace current, modern standards
  • Makes the site easier to maintain, both for the original developer and those that follow
  • Makes the site more compatible across a large range of hardware devices

Site conforms to current W3C standards

Individual site pages are coded to the "XHTML 1.0 Strict" standard or on rare occasions when an add-in technology does not allow it, to "XHTML 1.0 Transitional"
  • Better compatibility with a variety of past, present and future Web browsers
  • Better compatibility with a variety of hardware devices, from computers to printers, to handheld cellular phones, and others yet to be developed
  • Better "accessibility" for disabled users

Pages are tested for validity to their W3C standard

Pages on the site, at the time they are delivered, are tested for full compliance to their W3C specification using the W3C's online validator (http://validator.w3.org).
  • Ensures conformance to the design standard

Page layouts are crafted with "CSS", not "Tables"

Page layouts are designed so that their appearance, including content location and positioning is controlled by Cascading Style Sheets (CSS), not the outdated and now non-standard method using HTML Tables
  • Conformance to W3C standards
  • Much of the visual appearance of all pages of the site can changed with simple changes to a single file, instead of changing every page
  • Labor costs to update the site's visual appearance in the future are minimized
  • Faster page load times
  • Lower web hosting costs when site is hosted on a plan that charges based on the amount of information transferred

Site functions with add-on technologies disabled

The site will continue to function in a usable manner when a visitor has add-on technologies disabled or not present:
JavaScript
Flash
Moving graphics (QuickTime, etc.) Still graphics
  • Allows the site to have effective function even for users without certain browser features, and use the add-on features to complement the site for those users that do have the add-on available.
  • Allows the site to work when corporate firewalls and policies prevent the use of add-on technologies
  • Allows the site to work when visitors' anti-virus software may disable some add-on technology
  • Allows the site to work when used on a low-speed device such as a wireless handheld browser
  • Allows the site to be more functional and accessible to disabled users using assistive devices such as screen readers