August 2004 Newsletter

Glossy Brochure or 3-Ring Binder?

**** The 4specs Perspective

It seems that web designs are getting more complex and less usable instead of simpler and more useable for architects and engineers. Using printed materials as a metaphor, I see that there are two directions that a web designer can go.

1. 64 page glossy brochure - using all the bells and whistles.
2. 3-ring binder with a 4 page color brochure and 250 pages of photocopied materials.

Most architectural binders in 1995 typically consisted of a 4-16 page color brochure (frequently the one used in Sweets) and 50-250 pages of quick printed or photocopied materials.

Today most websites look more like a 64 page color brochure having fancy embellishments found in a resort time-share brochure.

The goal of a website is to sell materials through specifications. You want your website to be friendly to designers, including those on dial-up connections. You also want it to be friendly to search engines - so that more designers will find you.

Thinks To Do:

• Make sure that all of your design materials are online and don't require registration or a password for access. Look through your 3-ring binder to be sure all of you information is available. Look through competitor's binders and look for ideas for additional information.
• Have a site map linked from home page. If your products cross CSI sections and divisions, have a site map using MasterFormat to show an architect how your products fit into their construction project.
• Have a special home page for design professional's under 30,000 bytes (gizpped size) including images.
• Provide a search routine for your website
• Work on navigation so people can find better their way around your website
• Optimize all images for minimum file size - reduce size and compress
• Use design-time includes for ease of maintenance - change one place and it changes everywhere it is included.
• Work with Google Webmaster Guidelines and Yahoo Guidelines [no longer works].
• Gzip pages - will deliver html in 1/6 the time.
• Provide PDF's at a lower resolution - 72 dpi will work well for screens and looks OK when printed. A standard higher-resolution pdf makes the page load much significantly slower. Make your pdf's printable. No colored backgrounds with white text.
• Maintain existing page and directory names when possible. For stability, develop a long-term strategy for naming files. Use directory' default page for key pages, rather than index.html.
• To make returns to the page faster, set up a 1 day cache for all pages.
• To make repeat visits faster, set up a 5-year cache for all images.
• Deliver all pages as static pages (perhaps with only server-time includes). All content management systems must provide static pages for at least the top 25 pages accessed.
• Design pages so they work well on 800 pixel-wide screens (older browsers) as well as 1280 pixel-wide screens (a 17" flat screen monitor).
• Design pages so they can be printed - this can be a bit tricky, but doable. You can try CSS formatting for pages to be printed. Or, provide printable pdf's, although this can cause the page and pdf not to contain the same information.
• Design your website so the pages work well in Opera, Mozilla and Apple Safari as well as Internet Explorer.

Things Not to Use or Do:

You might want to use these points to help you evaluate web designers. If they are not willing to do a website without these "bells and whistles", then you should interview another designer. One designer complained that I was not permitting a "modern" website and restricting web design to 1998 standards . I agreed with him, and suggested that the 1998 standards work fine for a 3-ring binder website.

• No Splash pages
• No Frames
• No Flash
• No Animated images
• No Active-X controls or special plugins
• No javascript (ok only for logging page loads for web reports such as WebTrends Live)
• No images that represent text - search engines frequently do not follow image links
• No dropdown boxes
• No mandatory use of cookies or session ID's
• No DHTML
• No mouseovers
• No large images on website or images that are sliced to make them smaller
• No popups, window resizing or other browser tricks
• If you must use a content management system or Lotus Notes, provide static pages for the top 20 pages to improve speed and search engine use.

--------------------------------------

Colin Gilboy
Publisher - 4specs
Contact us