Style Guide

This document is designed to help Punch users create accesssible pages and maintain a consistent look and feel across the site.

• Headings
• Images
• Links
• Text
• Meta data
• Keyboard shortcuts
• Adding content from Word
• Consistant use of terminology
• Specific instructions for DLS Medical website

Using headings correctly on the web

To create a heading for a webpage users must always use an actual heading rather than just using bold text.

It is important that users do not attempt to create their own custom headings by using bold text, differing typefaces, sizes and font styles. Always set headings (from the dropdown menu in the quick editor or main editor toolbar) to take advantage of the features highlighted below and to maintain consistency across the site.

Why headings are important

• Using headings takes advantage of features in screen readers. Headings are read out to help users quickly understand the page structure without having to read the entire page.
• Google also prefers well structured pages and some browsers allow users to tab between headings, aiding navigation for all users, particularly users with motor disabilities and blind or visually impaired users.
• There are six levels of headings from heading 1 (the most important) to heading 6 (the least important).
• There should only be one heading 1 used on a page and this is automatically used by the page layout to display the logo so heading 1 should never be used by Punch authors. The main page heading uses a heading 2 so ideally Punch authors should be using heading 3 and below.

Using images on your pages

Alternative text for images

Every single image on every single page of your site should have a text equivalent (refered to as "Alternative text" in the image dialog screen). This doesn't mean that you need to describe the image in detail. The goal of the 'alt' text is to state the purpose of the image, not translate its entire content from a visual format to a textural one.

Screen readers read it, text-only browsers display it, Google indexes it, and visual browsers can display it as a tooltip. Hover your mouse over the image below to see its tooltip (alt text).

Uploading images to the Punch File Library

When you create new images to display on your website ensure that you optimise them carefully first. You goal when optimising images is to strike a balance between quality and file size.

Always complete the 'Title text' when uploading images. This will act as default 'alt text' for anyone that chooses to display your image on a page.

Resize your images before uploading

If you want to display an image on a page such as this one you are reading (rather than directly linking to it like this), make sure you set its width to 610 pixels or less. This will ensure the images displays correctly without 'breaking' the page layout which would happen if a larger width is used. The width of the column this text appears inside is 501 pixels.

Link Tips

Why you should avoid 'Click here' links

"Link text must be written with care. To be usable, accessible and to help with search engine indexing, link text must clearly identify the target of the link. "Click here" does not give any indication of the content on the linked page."

Read this short article on 'Click here' links in full and why they are bad linking practice. The W3C also have some quick tips on why 'Click here' links should be avoided and suggest alternatives.

Alternative text for links

Punch gives you the option to provide additional link information using the 'mouse over message' attribute found in the link dialog box.

Web browsers show a small box with the contents of the mouse over message attribute when a users mouse cursor is moved over the link text. This is called a 'tooltip' (see example above, or any link in the content of this page).

Screen readers can be set up to read out this additional information, so the mouse over message benefits all visitors to the site.

The mouse over message is very much like alternative text used for images and can be just as important.

The mouseover message is particulary important for link text that appears in a menu because the link text is generally quite short (in page edit found under 'Page Properties > Link - Link mouse over message'). It can help a user decide whether to follow a link by providing a description of the content found on the linked page.

Not opening links in new windows

The choice of whether a link will open in a new window should be that of the end user's, not the page author's.

The one thing every web user understands is the "Back" button. It's an integral part of browsing the web. Follow a link, go back. Explore a search engine result, go back. If a user follows a link and it opens in a new window then the back button will not work. Some text readers do not notify users that a new window has opened and this can cause confusion.

If you really have to open a link in a new window then use the 'Mouse over message' attribute for the link and explain that the link will open a new browser window (in page edit this is found under 'Page Properties > Links - Mouse over message').

Links to other websites

Links to external websites should have an explanation in the 'Mouse over message' informing the user that they are about to visit an external site (hover over these links for examples).

Links for downloading documents

When providing links to documents, files or images for downloading, it is good practice to provide the filesize of the document after the link. This way, a user has an idea of how long the download might take and whether or not they want to download.

See the example below (hover over the icons and the links):

Useful Downloads

 Aliquam laoreet volupat massa (PDF document 146k)
 Alipsum Dolore Oct 2005 (PDF document 246k)
 Cras ut Lactus (PDF document 1.4Mb)
 Elementum Posuere Metus Semper (Word document 46k)

Links to documents should also be opened in a new window.

The document icons in the example above help identify links to downloads on your page. The following document icons are available in the Punch File Library (in a folder called 'document_download_icons') to use with document/file download links (hover your mouse over them for information):

General link care

Take care not to include space before or after your link text when selecting text for links. Rollover the two links below:

• This link includes a space after it.
• This link includes no space after it.

Avoid cutting and pasting links in Punch pages. There is a danger the link will not work if it is copied from another page and it will lose its formatting as shown below:

• This link has been cut and pasted so has lost its consistency (in some browsers).

Styling text

• Avoid colouring text (the way in which this website is built means your styles will be overridden in most cases).
• The only coloured text on a page should be links, and in some cases headings, and are set by the websites styles.
• Text sizes are set automatically and should not be overridden.
• Fonts are set automatically so avoid changing the font.
• Indenting text adds automatic styling (see top of this page) to make it stand out and can help break up a page, but should only be used for quotations.

Adding essential data to your page

Browser Window Title

The overall webpage title (when editing a page click 'Page Properties / Details: Browser window title') is very important as outlined in this short W3C article on the title attribute (called 'browser window title' in Punch).

Meta Data

Traditionally, the information we put on the page is content. Meta data is information used to describe or define that content. So, it's not content in and of itself, and it doesn't appear on users' screens. Instead, meta data sits silently in the background, adding commentary to the page for anyone, or anything, who cares to look.

Meta tags are how many of the search engines index your site. This can determine how you place on the search results when someone does a keyword search at a search engine or on the sites own search page.

Keywords

After carefully considering the pages function and audience, the keywords for a page on a gardening site might resemble the following:

herbs, herb garden, growing herbs, gardening, garden, herbology

You can always revise and add to your keywords listing. By filling in the relevant terms, phrases, and concepts related to your page, you increase your chances that people searching for the information you have will find you. Because many search engines are case sensitive, it is suggested that you use lowercase keywords, as this is how most users enter search terms.

Description

The description for a gardening site might look like this:

Find out everything you need to know about growing herbs in your back garden.

This description is short and to the point. It doesn't try to account for every on the page. Instead, it's a solid summarization of the pages primary content.

Extra options and keyboard shortcuts in Punch

There are a few keyboard shortcuts provided in the Punch Editor that users of Microsoft Word will find familiar.

• Bold - Control + B
• Italics - Control + I
• Undo - Control + Z
• Find - Control + F
• Bullet List - Control + T (main editor only)
• Soft return - Shift + Enter
  Explanation: There may be an instance where you want to enter some text on new lines, but pressing the enter key results in a new paragraph being created and the resulting text looking something like:
  
  This is my first line
  
  This is my second line
  
  To place the text immediately beneath the last line hold the Shift key whilst pressing return to create a 'Soft Return'
  
  This is my first line
  This is my second line
  
  (Note: be careful when using line breaks, internet users may have their browser text size set differently to yours, so text will flow differently for different users).

Adding content from Word

Always use the Word import feature when adding content from Microsoft Word. Never cut and paste into Punch directly from Word as this brings with it hidden code that can cause problems when published on your site.

There are two simple ways to import Word documents.

1. Drag and drop your Word document onto the Word icon in the top tool bar.
2. Open the main editor and right click in the editor window and choose import Word document.

Consistant Terminology

It's important that we are consistent with certain web related terms across the website (and all marketing material and emails). You'll find many different ways of writing these terms across the web and in print. Our recommendations for problematic terms are:

• email, not Email, E-mail, e-mail
• online, not on-line, Online
• Web, not web (when referring to 'the Web')
• Internet, not internet (when referring to 'the Internet')
• intranet, not Intranet
• extranet, not Extranet
• website, not Web-site, Web site, Website
• webpage, not Web-page, Web page, Webpage
• username, not user ID, user name

Additional Help

Please email duncan@solutions.co.uk with any comments or suggestions for this information.

Specific instructions for DLS Medical website

Product Pages

The link on the thumbnail image loads the first enlarged image. There are hidden links that link to and load subsequent images in each 'lightbox'. The lightbox references are using each products product code.

Product Image Sizes

Thumbnail image size: width must be 124 pixels. Ideally height would be the same but it can be left open to allow any height.

Enlarged image sizes: maximum suggested sizes are

width 960pixels x height 480pixels

Example Code

Disposable Gallipot (AVM0338)

Description	2 litre polypropylene bowl used for ligula eu cursus tincidunt, urna massa feugiat mauris.
Material	Polypropylene
Size or Capacity	2000ml 200mm diameter x 95mm
Carton Quantity	100
Carton Dimensions	2000ml 200mm diameter x 95mm
Carton Weight	2000ml 200mm diameter x 95mm
Pallet Quantity	40