You’ve probably noticed that the majority of email newsletters you receive these days are designed with a fixed width as opposed to a fluid layout.
This is because the majority of email clients and web-based email providers don’t use the full width of your screen to display an email message. Whether it’s advertising on Gmail, a menu in Hotmail or your Inbox in Outlook, a chunk of screen real estate is often already being used.
Remember, your recipients are busy and impatient, so horizontal scroll bars are even more of a no-no in email than a web page. Because of this, it is a good idea to keep your emails to a fixed width of no more than 550-600 pixels. This should ensure that in the majority of cases, your subscribers can view your email as you intended.
Obviously the height of each email you send will vary depending on the amount of content. At the same time, it’s good to keep in mind that a lot of your recipients may scan your email in a preview pane before they decide to read the entire thing.
The average preview pane is around 300-500 pixels high, so make sure you include any important bits of your email in this area. First impressions count. A good way to check how your email looks in a variety of email readers is to use our design and spam testing tool, which gives you screenshots of your campaign as it will appear.
Many email clients don’t display images by default, so it’s important to know what shows up instead. We’ve tested to see how alt attributes are displayed (or not displayed!) in popular email clients. But before we look at the “how,” let’s look at the “why” in ALT text.
Any web designer attentive to accessibility understands the benefits of ALT attributes. It’s cardinal purpose, of course, being that it briefly describes an image to someone who is visually impaired via a screen reader. Screen readers read all of the text on a page, denoting lists, links, headlines and ALT attributes in images.
For example, when loading markwyner.com a screen reader would read something similar to the following:
Webpage: Mark Wyner Design, Web Design Studio—Portland, Oregon.
Link 1: Navigate directly to content.
Page headline, link 2: Mark Wyner Design.
Sensible design. Accessible content. Usable interface.
Global navigation.
Home.
Link 3: About.
Link 4: Services.
Link 5: Portfolio.
LInk 6: Contact.
[…]
Note how the screen reader announces the page headline and all links, referencing the latter with numbers.
Image ALT attributes is also read aloud, prefaced with the announcement that the forthcoming copy is a text alternative to an image.
So the following image:
<img src="file.jpg" width="528" height="405" alt="[photo: bowler picking up a Greek Church]" />
May be read as:
Image: Bowler picking up a Greek Church
A secondary purpose, however, is to describe an image to someone who can not or chooses not to view images in their browsing device or email client.
Sadly, the latter doesn’t always work out because many browsers/clients either do not render ALT attributes when images are disabled or render their own variations thereof.