Why do we need a web style guide?

A web style guide helps in communicating the framework under which changes are to be made to the website.

A significant amount of time and effort has been spent in coming up with a usable and useful website, but if subsequent changes are not aligned with the initial thinking, then the website can quickly return to its former state. The web style guide gives us a framework to avoid such situations.

But does that mean that the guidelines are cast in stone? No. The trick here is to create the guidelines based on principles rather than on rules. Having a rigid system will not work, but knowing the principles and their boundaries will ensure that our website is in tune with the many structural and visual changes that can benefit users.

Website Styles

truthmedia.com was initially designed to feature 3 basic styles: the homepage, index pages, and article pages.

This site was our first attempt at building a whole site on the WordPress (WP) blog structure. And due to the nature of the site being more informational than ministry-oriented, we will follow these guidelines regarding templates:

The homepage is its own template, and is actually a WP Page*. The homepage template (called “Front Page” in Page Template options) should only be modified by the Tech Team.

 

 
Index pages on this site are WP Pages, and generally refer to the 7 main nav links (About Us/Get Involved/News/Our Sites/Training/Contact + Changed Lives… 6 visible from the main nav bar and 1 “changed lives” page). There may be need to create additional index pages that are not part of the main nav (e.g. /marketing).

 
Article pages on this site will be referred to as those WP Pages that fall under an Index page in terms of navigation and hierarchy. (i.e. these pages are not typically standalone and belong under the context of an Index page)

 

* “WP Page” in this context refers to a literal page created within the WP dashboard through Write -> Write Page .
Page Templates

This site was originally created with 4 basic templates:

Default – designed typically for Article pages, and generally all pages that do not require Images Left/Right templates. This template can include inline images.

 

 

Images Left – designed originally for Article pages that required a visual component to help legibility of larger lists (e.g. Sites, Our Team). Unless otherwise instructed, this template should only use 50×50 icons that include borders.

 

Images Right – designed originally for the Main 7 Index pages, but can also be used for additional Index pages that require an image at the top of the page. Unless otherwise instructed, this template should only use 100×100 icons that include borders.

 

Contact – designed for use with the Contact form; should only be modified by the Tech Team.

 

 

 

Although there will be other template options under the Page Template drop-down list, these are generally reserved for use by the Tech Team. Unless otherwise instructed, Editorial team should only need to work with Default or Images Left/Right Page Templates.

Writing a Page

When writing a page, remember the following general rules (see the sample screen shot):

• add a Page Title that’s less than 35 characters long (incl. spaces), otherwise it will wrap onto a 2nd line. This is the text that will show on the top of the user’s browser window.
• in order to add the proper spacing between your Page Title and the first line of text, add the following code at the top of your Page Content: <h3></h3>
• if applicable, add header text (anywhere on a page) within <h3> tags in the Page Content area:
• e.g. <h3>Header goes here</h3>
• use the “Default” Page Template for most new content pages, unless otherwise instructed. Add any inline images using the “img” button in the Page Content area of the Write Page screen.
• to add any inline image on a page, use the img button to add a URL or use the “<img src=…” tag
• e.g. <img src="/images/path…/filename.jpg" align="right" border="0" hspace="10" />
• whenever possible, use a unique, good one-word description of the page you are creating in the Page Slug box. This is the text that will show in the user’s browser address path. We want to avoid long Page Slugs such as: “volunteer-mentoring-information-page”!
• use a hard-rule (solid line) to add underline to a header and provide a visual break/separation where needed. (e.g. see the Sites page for an example)
• e.g. <h3><font size="4">Women’s Sites</font><hr /></h3>

Contact

For more information or questions/concerns please contact:

Kim Chen
Creative Director
(t)  604.514.2007
(e) kimc@truthmedia.com