Skip to main content

Must-have style guide Content

If you've just paid thousands of dollars to have your website professionally designed, it's crucial to protect your investment by ensuring that the site can easily be maintained by anybody coming in after the design phase. Whether you plan to outsource your site maintenance to a third party or use your in-house web team, a well-written style guide is a necessity, as it will assure that any changes will be made consistently and according to the original design specifications.

Typically, your web development vendor will assemble a style guide as part of the deliverables of the site design. However, a style guide can be developed after the design process has been completed. Some web developers may create style guides as discrete projects or, as is often the case with Collaborint, we create a style guide as part of our site maintenance services for clients who did not previously have one.

The information in your style guide will vary greatly depending on the size and purpose of your website. Based on our site maintenance experience, we recommend the following style guide content as a minimum:

Browser and Platform Specifications

Provide a detailed specification for required browsers, monitor size, and platform capability - if your website was designed with a lot of laptop users in mind, for example, you would need to consider browser width when creating new pages. Likewise, if your company policy is to use one specific brand or version of browser, it's important to list this to ensure display compatibility.

Site Structure

Big-picture information about your website organization:

  • Navigation and site architecture
    As the blueprint for your website, this might be provided as a site map or as a flowchart.
  • Directory structure
    This section should detail at least the top and second-level directories, including directories for images and source files. Ideally, the entire directory structure would be described, making it a good reference when adding new pages or sections to the site. A well-organized directory structure will facilitate keeping your website in good shape as it grows and changes.
  • File naming conventions
    Methodical and careful consideration of filenames will keep them organized and improve your user's browsing experience.

Design

Critical design information that your site maintenance team will need when updating graphics or modifying or adding new pages:

  • Source files
    This section specifies the original source files (e.g. Adobe Photoshop or Illustrator files, Macromedia Fireworks files, etc.) used to create all images, including navigation, menu items, buttons, etc.
  • Color
    Provide a color chart with hexadecimal/RGB red, green, blue values for the primary color schemes, and describe any secondary palettes the site may use.
  • Cascading Style Sheets
    If style sheets were implemented, include a guide with a list of id and class tags as well as examples of how each are to be used.
  • Font specifications
    Include a detailed description of all fonts used on the site, including both HTML fonts and those used for graphical text elements.
  • Templates
    Page layout templates are an excellent way to ensure consistency and continuity between sections. If your site uses templates, make sure adequate documentation is provided to identify how and when to use each template.
  • Multimedia requirements
    If your site has multimedia components, such as Flash animations, video or audio files, or other interactive elements, include details on what those files are, and how they should be handled when making changes.

Website Administration

Whether your website is simple or complex, it is crucial to include all infrastructure and administrative information to ensure everything will continue to function properly after any changes are made.

  • Site access
    Specify where your website is hosted as well as how the team assigned to maintain it can access it. Be sure to provide access information such as the server's IP Internet Protocol address, log-in usernames and passwords, and contact names in case of technical difficulty.
  • Custom tools
    If the web developer created any custom tools for your site, include the location of the tools (within the site structure) and provide documentation on how they should be handled. Include the names of any web programming languages used to ensure that your maintenance team will be able to accommodate them.
  • Third-party components
    Many sites contain elements from third-party software or content providers, such as syndicated news, financial calculators, or usage tracking software. Your site maintenance team may need to coordinate efforts with the third parties when making changes; therefore, include any such components and indicate their location within the site structure, how they were implemented, and contact information for each party.
  • Databases
    If your site has a database, specify which database is being used (e.g. Oracle, SQL Structured Query Language Server, MySQL My Structured Query Language, etc.). If the site uses multiple database tables, include a description of each one and what function it serves. For example, if there is a database table associated with emailed forms, indicate the form's location in the site structure, which database table collects submitted information, and how the data is retrieved.

This is not an exhaustive list of the type of content that could be included in a style guide, and you may have information you wish to add that is germane to your website. Regardless of the type of content contained, think of the style guide as an owner's manual for website maintenance. Having this information available will help your maintenance team keep your site looking as good and working as well as it did on the day it was launched.