Thursday, November 18, 2010

A Design Guideline

Use the metaphor of resources to determine consistent, implementable URL and URI patterns for your pages. Sketch your site's map. But only just sketch.  If you don't understand how this relates to your design, consider that "pages" is just a metaphor itself and the branches of site map don't necessarily mean "page". 

Lay out for substantive content first. 

Get specifications for the devices you expect to support for access to your information.  Generalize the specifications into a set of parameters characterizing a category of media, rather than device.  Create a style profile for each generalized category of media space. You might have a Desktop space, a high-definition smartphone space, a low-definition mobile space, a tablet space, etc.  Consider each profile a proxy for one of your audiences.

Define your profiles incrementally. Choose a grid or columnar layout, and flow content into place.

Follow Occam's Razor:
pluralitas non est ponenda sine necessitate 
Which is to say, don't use more markup than absolutely necessary to convey the meaning of the message. Use CSS for style. Don't use DIVs for positioning or include other gratuitous markup for layout tricks.  Don't rely upon the relative positions and parent/child relationships in the markup for style or layout effects beyond in-line layout.

Include a browser reset. That will eliminate browser-introduced pluralities. The Yahoo! UI library has one. Eric Meyer has another. There are plenty of examples.

Choose a dominant typeface family and style to fit the message, audience, medium, and purpose.  Use a san-serif font for body text, a serif font for headings. Align the sizing of both, since characters in two fonts will often differ in size. Use a font stack to specify the desired font, one or more fallback fonts, and a generic family as a stand-in. Carefully consider use of an OT/TTF or SVG Webfont with or without a foundry service like Typekit or Typotheque, or WOFF.

Choose a subordinate typeface for UI controls. Distinguish them with different colors or a different font family.

Determine word spacing, letter spacing, line spacing,

Use Em for relative sizes, but understand that one Em is equal to 100% of the font size property in effect within the context of the markup. So there is a cumulative effect of the settings.

Use proper glyphs for hyphen, en-dash, em-dash, and minus signs (I don't on my blog). Use the HTML entities for these and other special characters.  (See smartypants or typogrify.)

For text blocks and columns, use multiples of ems to set line width relative to multiples of characters. Aim for 10-15 words or 75-100 characters per line. Set line height with a unitless number so that it is based on the font size.

CSS3 may support hanging punctuation (quotes and parenthesis are hung in the margins.)

Check out,,
Post a Comment