Mindshare Labs’ Design Guidelines for Dynamic Websites

Written by:
Posted in: ,
Published: July 23, 2010

At Mindshare Labs, we work with a lot of print and graphic designers and have found these guidelines to be essential when implementing a designer’s work as a dynamic web application (CMS, blog, shopping cart, etc). you can download a PDF version of this document here.

Choosing Fonts

Body Copy

Generally, it is best to use “web safe” font stacks for large areas of text. A font stack is a list of fonts that a browser will use in order of preference (e.g. Ideal font, Close alternative font, Common font, and Generic font-family).

Here is a simple font stack builder: http://www.codestyle.org/servlets/FontStack

Heading Copy

Certain typefaces can be dynamically embedded using various advanced techniques based on Flash or JavaScript. Because these techniques require more processing and additional plugins they should only be used for small areas of text (like page headings).

Note that not all fonts allow embedding. Many font foundries specifically prohibit use embedded use of their fonts. We can help you determine if a specific font will work or not.

fontsquirrel.com is a good source for free fonts that can be embedded for use in headings.

Backgrounds

Web backgrounds can be made up of solid colors and/or images. If images are used they can either be repeated (tiled) along the browsers X axis (width), Y axis (height), or both.

Because we don’t know what screen resolution a site visitor will have, if you decide to use a photograph as a background image your design must also include space beyond the edges of the photo. This way we will know how you want us to handle situations where the site visitor’s browser extends beyond the background photo. See the example below:

Resources for better understanding web backgrounds:

Design Width

Every fixed-width web design must be designed around a target screen resolution. At the time of this writing, most sites are designed to fit a screen size of 1024 x 768 pixels. The generally accepted maximum page width for a design target the 1024 x 768 resolution is 960 pixels wide.

This leaves room for various browser add-ons, scrollbars, and whatnot that the site visitor may have enabled. A margin of at least 30px on either side is a good rule of thumb. So if you decide to design for a target screen width of 1280px your main content area should be at most 1220px wide.

You can get up-to-date browser display stats from NetMarketShare.

Bottom line: our current recommendation is to make the width of the content area 960 pixels wide (or less).

PSD Requirements and other considerations

  • Create a separate PSD file for each page template. This keeps file sizes down and reduces the possibility of errors.
  • Delete all hidden layers.
  • All designs must be at 72dpi.
  • Remember to include styles for link and button rollover (aka mouseover) states.
  • Remember to style basic HTML elements in your templates. These may include numbered and bulleted lists, tables, form elements, block quotes and citations, inline images, paragraph text, headings, etc. If no styling is provided for these types of elements, we will use our discretion in styling them and subsequent style change will be billed to the client.
  • If the design has drop down menus or some other animated element, you must include the styling and graphics for those. If no styling is provided for these types of elements, we will use our discretion in styling them and subsequent style change will be billed to the client.