Software Development

Web style guide: What to include to keep your sites looking professional

Ryan Boudreaux advises on what to include when creating or updating a comprehensive web style guide so your sites' look and feel remain consistent and are easy to maintain.

webstyleguidefiga050614.gif

A web style guide makes it easier to maintain a consistent look and feel for your organization's sites. The guide becomes the authoritative source for policies, procedures, and best practices for website work for an organization's internet and/or intranet presence. It can be referred to across a diverse team that includes web developers, stakeholders, and content providers.

The tips I provide will help you focus on creating or updating your web style guide so that it becomes a clear part of your much larger web standards guide.

What to include in your web style guide

A comprehensive web style guide goes deeper than your average template design, look and feel, and theme; it includes a set of standards that are reviewed on a regular basis, along with a pattern library, and a list of allowed elements that help govern the content and formatting for all websites within the establishment.

Comprehensive web style guides will include a full table of contents, including instructions, standards, and procedures with actual code snippets and live samples, examples and templates that can be used that demonstrate the accepted usage for each common element. Elements might include boxes, clearing floats, colors, columns, disclaimers, fonts, forms, headings, images, and graphics, JavaScript and JQuery libraries, microsite styles, multimedia content, social media, tables, text, typography, widgets, and more.

I list several of the elements and go into more detail for those that might be included in a typical style guide, and conclude with links to additional resources. (All screen captures are taken from Chrome 34.0.1847.116 m as installed on a Windows OS desktop system.)

Boxes

Box and box-like elements are typically utilized to highlight specific web content, where an individual box style can have content requirements and then should be used as appropriately designated for that particular purpose. For instance, you may have a "Related Information" box that could have a title heading such as Related Information, More Information, Related Topics, or other title of interest that is not considered critical for featured content on the page.

You can also specify a header panel with a special font and color and special background color, along with a border color that matches with the color scheme. A sample "Related Information" box is shown in Figure A.

Figure A

webstyleguiderevfigb050614.jpg

Other boxes may include a Highlight Box, a News Box, or an Alert Box. A Highlight Box can be used to contain a set of related, critical, or featured content in relation to the page's main content. A News Box might list a schedule of events, press releases, or important calendar dates. An Alert Box should stand out with bright colors and possibly an alert icon that should be reserved for very important messages and not just for emergencies, but for high priority, short deadline, or other announcements that may require immediate action from the reader. A sample Alert Box is displayed in Figure B.

Figure B

webstyleguiderevfigc050614.jpg

Boxes can be used for a host of other purposes, including multipurpose with images, RSS feeds, Twitter, Facebook, widgets, advertisements, blogs, and other uses related to your business needs.

Color palette

Your website should have a set of colors that are used for specific needs and situations. You want to limit the palette to a dozen or so colors that are based on a scheme, template, or other boilerplate method to keep the look and feel consistent throughout your website. Several resources are provided that review color scheme selections.

Figure C

webstyleguidefigd050614.gif
 Image: Adobe

Data tables

Tables for displaying data are a necessary part of many websites; these data tables should be set to a common standard style for headers, columns, rows, borders, cell spacing, and cell padding. Zebra rows are a good way to help distinguish long sets of columns along a row. Other styling might include background colors, sortable table data, cell properties, and table widths, depending on where they are placed on the page.

Images and graphics

You need to have a standard for all images and graphics based on placement on the page, usage, and the type of page (e.g., a home page, a sub-page, or a microsite). Is it a header image, a banner image on a rotation, a sidebar image, or maybe a logo?

All images and graphics need to have a standard size, height, width, and file size limitation as well. A separate standard for thumbnails (small, medium, and large) and banner images should be established, so the website maintains a consistency throughout no matter the page or microsite. Images with captions and image gallery styles need to be established as well so that each time someone visits them they know what to expect.

Text

Text can include some rather mundane code specifications such as using emphasis <em> and/or italics <i> for stylistic differentiation depending on the instance of the text to be stressed. Using either strong <strong> for text with strong importance, or bold <b> for stylistic differentiation. Using the <small> element can be added to the text style library to represent caveats, copyrights, disclaimers, or legal restrictions. Other textual styles to consider include <code>, <blockquote>, <sup>, and headings <h1>, <h2>, and so on.

Also see

  • A List Apart Style Guide: While the intended audience is for authors who submit to their blogs, it still provides a good example of a style guide with a specific purpose, and it includes a set of general notes, guides for images, house styles including article titles, headings, subheads, elements, punctuation and more.
  • Publication Standards and Style Guides: Provides links to several examples of publication standards and web style guides currently utilized by eight U.S. federal public websites.
  • Starbucks Style Guide: A perfect example of an online web style guide reference for a major corporation, includes a grid framework, regions, blocks, promo layouts, content objects, in addition to several examples.
  • Web Style Guide, 3rd Edition: The Web Style Guide site is an unabridged, online version of the third edition of Web Style Guide: Basic Design Principles for Creating Web Sites, by Patrick J. Lynch and Sarah Horton.

What other tips would you offer to a peer who is working on a comprehensive web style guide? Post your suggestions in the discussion.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

0 comments

Editor's Picks