Home > Support > Developers > Design Best Practices Guide

Best Practices for Designing for QuantumCMS 3.0

Templates and Design

The average QuantumCMS site consists of two basic templates – a home page, and a content page. The home page generally has more prominent branding, slightly different text styles, and often promotes content within the site to the home page. A content page is the general template used for all remaining pages on the site, including the site search results, press, indices, and any custom applications.

In order to ensure that your designs don’t require additional templates, there are some basic guidelines to follow:

• If you are using an HTML editor such as DreamWeaver, set after you create the first content page, define areas of the page as templates, and do not allow further editing of those sections. This should include everything except for the body content of the page itself.
• If your designs require a different look for each page or section, keep a consistent layout and use alternate images of colors for the modified look. If you are using different images, set each image to the same dimensions for each page (matching the size of the largest image from your collection).
• By default, the footer of each site should include the “Powered by QuantumCMS” image and link, a copyright date and name, and a link to the site map. If there are any other links in the footer, please identify the page to which it should link.
• For important site elements, such as navigation or content, make sure there is enough contrast in the color scheme. Not all users will have the same monitor calibration as yours, so it’s necessary to account for variations.
• Don’t rely too heavily on large images for the design. Not all users will be able to download them as quickly, and they can be a hindrance to search engines if images are used where text could be used.
• Account for different window sizes in the design. Presume most users will be using a window at 800x600 as a base, so your design will need to scale down to it. Even within that window, after factoring browser chrome and scrollbars, designs should scale down to 700 pixels in width in order to ensure there is no horizontal scrolling.
• If the design is “liquid,” meaning it resizes as the user’s window expands or contracts, be sure the design elements can scale – whether by tiling images, fading images to a color, or simply extending color bars as examples.
• Account for a breadcrumb navigation element in the design. Remember that as the site grows and page names become long, this breadcrumb will grow as well.
• Account for a search feature on the site. All that is required is the search field itself and a submit button.

Images

There are some general guidelines to follow when optimizing images for the web. While there are exceptions to these rules, these will be appropriate for most circumstances.

• Photographic images should be saved as JPG files. In general, using a “Save for Web” feature in most image editing packages will provide you with further options. Save your images as Progressive, and you can often set the quality settings to around 40% without obvious image degradation.
• Images of flat color or line-art should be exported as GIF. GIF files are limited to 256 colors, but that can often be reduced to save file size (for example, single color text can often be exported as 8 colors). Horizontal gradients (left-to-right) should be avoided as they do not compress well. GIF files also support transparency, which is useful for matting an image to a background color.
• Images on the page should never be resized within the authoring tool or by any means other than resizing the image in your image editor and exporting it as the new size. This prevents users from having to either download a file much larger than they need (if scaled down) or viewing an image that’s much more pixelated than it should be (if scaled up).

Navigation

We recommend that all navigation for your site be text-based. This allows the site maintainer the ability to add or edit pages without the need to contact anyone to create and upload images. It also helps with overall search engine placement. Following are some general guidelines when prototyping navigation:

• When presenting prototypes built exclusively in Adobe Photoshop or a similar image editor, leave the navigation text as “Aliased.” This most accurately displays how the average user will see the text in a browser – not as clean, anti-aliased text that we see in images, but as the rest of the copy on the web page will appear. While some browsers support “font smoothing,” the vast majority do not yet.
• The navigation should account for a top-level that will always be available, and a secondary level that will reside in a consistent location, but change links to reflect the navigation available to the user.

Content Entry

When using the authoring tool to enter content into a site, there are some general guidelines to follow that will help ensure a consistent look throughout the site:

• Always paste content as plain text. This will help ensure no styles are retained from your word processor or an old site from which you may be copying content.