Classic (Rigid) Design
Tightly controlled layouts. Designs based on developer preferences and/or assumptions. Multiple templates necessary for multiple device support.
HTML email, maximum width should be 550 to 600 pixels to allow for the viewing space in most email programs and Web mail viewing areas. If the email is likely to be printed, like a donation receipt, you should keep to 550 pixels to ensure that the email will print on one page.
Text email should have hard returns after no more than 50-60 characters to make sure they look the way you intend in the reader’s email program. You can make yourself a guide for this by typing 60 X’s across the top of the text area and deleting them before sending the email.
Heather Gardner-Madras | strategic creative
Design for adaptability.
Allow users to decide on screen preferences such as font and dimensions. Mobile friendly by default.
Only use absolute length units when the physical characteristics of the output medium are known. [1]
Responsive web design encourages us to deliver layouts that work well on any screen or device. We need to forgo questions such as 'which is the best resolution' or 'how many screen sizes should we develop our layout for'. A responsive design will flow with the user and fit into their preferences/accessibility needs.
Responsive design consists of several primary practices and is based on the following design aspects:
- percentages
- em units
- fluid grids
- flexible images
- CSS media queries
Of the responsive web design characteristics, percentages and em units are more relevant to HTML email.
Percentages
Your users will have large screens and/or small screens. A percentage based layout will be adaptive to any screen size.Percentages are used sparingly and generally for higher level page elements such as the .
em units
em units are originally, in the typography industry, named after the letter 'M' and used to denote the width of a capital M. em units arecurrently measured, in web development, as the height of the element font size, not the width of a capital M.
em units are relative to the parent element. To get your design started off, set the font size for the highest parent element, such as the to 1em. That will set the font size to the user browser preference. For a header element, such as paragraph, you can set the em value greater than one, such as 1.5em or 2em. This will make the header element 1.5 times or two times larger than the body text (the parent element).
When the user font changes, the size of M changes relative to the user preference and the relevant page element(s). The whole layout will stay in-tact if you have the foresight to allow for the flexibility provided by em units.
em units can be used horizontally and vertically. You can measure margins, padding, etc. as em units for any page element(s).
Further Reading
W3C article on web design best practices.
A List Apart: Responsive Web Design
A Book Apart: Responsive Web Design
Goldilocks Approach
Aspiration | Supported by Surdna Foundation and California Consumer Protection Foundation | Privacy Policy 
Web Imagery and 
Brattleboro Tech Collective | Design by 
Kontent Design
Tuesday, 04 August 2009
Properly formatting your html emails is very important if you want to make sure that they appear how you expect in your constituent's email clients. Choosing things like height, width, graphic size and font style can make your message look sharp but if the formatting isn't right on just one aspect, the entire message could become skewed. Therefore, it's important to not only follow styling rules for your email blasts but also to test your email messages out on various email clients, providers and operating systems.
With regard to the email message itself, a general guideline if you are going to specify a width for your email is to keep the width between 450 and 650 pixels. Most email providers have windows that display this width well. If your email width goes beyond the window available to it in the email client, then your readers will have to scroll horizontally to see the entire message. This should be avoided not only because more information than necessary is hidden, but also because with the small amount of time that readers spend deciding whether or not to read each individual email, it isn't in an organization's best interest to require that reader extra scrolling just to see what the email message is about.
For additional resources and articles, check out these: