Understanding the mechanics of creating a simple template

All Tasks > Web Site > Template Manager

This document presents the guidelines for producing modern web templates. 

Step 1:  Select Fonts

• A selection of fonts can be found at  https://www.google.com/fonts.  Most of these fonts will work on all devices and should not require any assistance from your web developer.
• Choose legible fonts with excellent readibility.  
• Avoid handwriting fonts. The non-conventional metrics of handwriting fonts can distort line spacings when browsers revert to system fonts.
• Avoid very light or faint fonts.
• Limit your fonts to two families.  Include a regular style and either italic or bold according to your preference. Adding more styles will slow down website loading times. 
• Pay attention to line spacing.  Spacing between lines (leading) should be easy on the eyes and not cause fatigue. A spacing of 1.5 works well.  

This website uses a single font family from Google Fonts: Open Sans -  400 style for copy, 600 style for semi-bold headings and 700 style for bold regular copy.

Step 2: Design on a 960 grid

A 960 grid is short for "960 pixels" and is a very popular web design grid. Most websites will display well in a 1024 horizontal resolution, which is the most common spread resolution in use today for desktops, laptops, i pads, tablets.

Standard ad sizes we recommend, those in bold are the most common sizes:

Step 3: Do not exceed a 1500 x 900 box for photos 

Wide screens will display wide photos, but most screens cannot see long portrait photos taller than 900 pixels. Wide photos on smaller screens often work because photos are usually centered and less than 200 pixels on either side may be cropped.

Step 4: Use contrast to increase legibility 

Your messages are most powerful when they are eye catching and easy to read. Using color and contrast correctly will make your website more appealing.  

Select a contrast between background and text colors that is pleasant to read. Too little or too much contrast can cause the reader to squint or make the website hard to read. 

You may want to consult this website to double check your color selections. http://www.dasplankton.de/ContrastA/ -- Use AA compliance as a minimum. AAA compliance tends to be darker.

Step 5: Avoid Overlapping, dropdown and fancy template items

In general, it is best to avoid overlapping elements.  They can cause serious challenges for programmers when creating your website and increase the likehood of your website displaying poorly on hand held devices.

Dropdown menus are useful on a desktop website, but unusable on hand held devices, so they should be avoided. If you must use dropdowns, you will need to provide an alternative layout to your developer for hand held devices.

Fancy items that appear to be floating can cause problems and should not be used. Exceptions are side buttons for social sharing and  top menu "sticky" bars. 

Top menu "sticky" bars should not exceed 30 to 40 pixels so they won't obstruct other content.

Step 6: Plan for responsiveness. How will your site look on a hand held device?

A responsive website reacts to smaller screens by rearranging content. You will want to consider which essential content you want visitors to see on a smaller screen and plan for it.  

Usually, navigation items are shrunk and columns are moved so the entire content fits on one screen.

Conclusion

Your programmer can provide extensive guidance and assistance with template creation, but this article provides the basics to get you started.  You can find more information on web design guidelines in our Template Programing Guide