MWD BLOG

When designing for mobile optimization, it is important for the design to be easily resized for various widths from desktop width (about 640 pixels across) to mobile width (about 320 pixels across). Thus, designs need to be as fluid and flexible as possible. Below are some standards and practices we have found that work best for rendering emails on both mobile screens and desktop monitors.

• A mobile optimized layout, because of its limited width, is best reduced to a single column. This means that the traditional desktop email layout (which often features large, photographic images and multiple sidebars) renders horribly on a mobile device, often with elements and multiple columns rendering as a confusing jumble. Additionally, the mobile browser often resizes photographic images, creating a loss of image quality and text legibility.

• Mastheads need to be as clean, simple, and straightfoward as possible for resizing. This is best achieved by having a single logo or simple image, less than 300 pixels wide, be the sole occupant for the space.  Or, alternately (but not recommended) the logo can be placed in tandem with a short “live-text” headline using a “universal” font (such as Arial, Helvetica, Verdana, Times, Georgia, or Courier).
• Sidebars, if absolutely necessary, also need to be as clean and as simple as possible. Because we need the layout to be as fluid as possible, a solid background color and/or a single, solid, hairline border are strongly recommended over gradient or image backgrounds. The sidebar should be less than 280 pixels wide, so that it rests comfortably within the smaller 320 pixel mobile width. Keeping your sidebar on the slim side also means that your sidebar image won’t need to be resized and suffer from a subsequent loss of quality. Sidebars ideally stack above the main copy on mobile screens and, in a sense, become a sort of masthead with a headline and call-to-action up front. Because of this, it is recommended that sidebars be kept copy light and as succinct as possible.
• Borders are often used to wrap around entire email messages. In a mobile-optimized environment, these work best as a thin hairline of a single solid color (again, avoiding gradients or images).
• The rounded corners often seen in web and email design elements are not recommended because of cross-browser incompatibility and errors in rendering in the slimmer, mobile environments.

In conclusion, because of the wide array of monitor and screen sizes in both desktop and mobile environments, your email templates need to be simple and flexible. Because mobile and desktop emails are not separate entities, but rather one email that adapts differently when rendered on different devices, your templates need to have simple mastheads that fit to any size screen, a single, slim sidebar that can stack above or below the main body copy, and as few extraneous design embellishments as possible.

This all said, simple does not mean designs can’t be attractive and attention grabbing. In a world where we are increasingly bombarded with information and visual stimuli, designs that are simple and elegant tend to cut through the clutter much more effectively than designs that are ornate or busy. For an email message to be successful (both in and out of the mobile environment), it is better to keep your layouts simple and elegant than to loose an audience due to clutter or poor browser rendering.

Examples

Click thumbnails to zoom

Anthony Blair Borders is the former senior web designer at Donordigital, the online fundraising, marketing, and advertising company.