Email Graphic Design Basics: HTML Email Dimensions
When creating the content for your HTML emails, the dimensions are an important aspect to consider.
How wide is too wide?
What’s the optimal email design size to make sure my design appears across all email clients?
The size and layout can have an effect on the success of your email marketing campaigns.
And many times when asking these questions you can get multiple answers.
Some answers are even outdated.
Let’s cut through the jargon, the code, and the BS.
We’ve listed a couple of basic HTML email dimension pointers to keep in mind when designing your next send.
Ready? Let’s get started:
|» Free Bonus: Click here to get access to free blueprints to 10 proven marketing automation drip campaigns.|
What is the Standard Email Design Size?
While the average display dimensions have increased to beyond 1024×768, we recommend your email design size use a width of 600 to 650 pixels.
This may sound pretty small – but there’s good reason to stay within this width.
According to TechCruch, 75 percent of Gmail’s 900 million users access their accounts on their mobile device.
And there are plenty of email clients that do not display beyond 650px.
So why design an email to fit larger than the majority of devices you’re potentially sending to?
That’s where responsive email templates come in handy.
If you create your email any wider, your recipients may have to scroll both vertically and horizontally to view the email in its entirety.
That’s why you have to keep responsive email design in mind.
That’s a total pain for your subscribers or prospects to read.
Just look at how many emails are opened on mobile devices.
This is why many email geeks (ours included) are still using 600 to 650px wide as their standard email design size.
Create your email any narrower and your email may become very long in order to fit all of your content.
Despite the width norm of 600-650 pixels, formatting emails horizontally is an overwhelming popular trend among retailers.
Take home furnishings retailer Boston Interiors for example:
When you sign up for their newsletter, you receive this lovely designed welcome message with accompanying coupon. (Swish!)
Looking at their HTML, their email dimensions are exactly 600×1015.
That width is well within the 600 to 650px standard email width we recommend.
The welcome message design is responsive, and fits nicely when viewing in a Gmail app:
A good rule of thumb to remember is this:
The more you ask your email recipient to do in order to read your message, the more likely they are to lose interest.
Designing for the Preview Pane
Many email clients will display the top portion of your email in the “preview pane”.
For Outlook, they call this the Reading Pane.
This little area, if enabled by your contact in their email client, gives recipients a tiny view at your email before deciding to read the rest of your message.
The size of this preview pane varies depending on the email client and the recipient’s individual settings.
In general, you can generally expect that most of your recipients will see the top 250-500 pixels of your email in their preview panes.
With that in mind, it’s a good idea to include compelling HTML content in this area to entice your recipients to read further.
ALT Text and Your Email Images
ALT text is not something to ignore when putting together your email creative.
Not all email clients will display your images’ ALT tags, but they’re still worth using.
In the likely event that a recipient will have images blocked from viewing your email content, the ALT text is what they will see first; if the text is visible and enticing, more recipients will open and click through your mailings.
It’s best to make your ALT text concise and clear but try to use enough text to convey the content of the image.
If you have a shiny orange image button covered with text and photos of packages, set it’s ALT attribute with just the text needed to convey the value – i.e. “50% Off Shipping – Click Here” (assuming you were, unfortunately, unable to use a bulletproof button in the first place).
Most email clients will simply cut off the ALT text relative to the size of the image.
Keep small images’ ALT texts set to just a word or two, if possible, and limit your more descriptive lines of text to your bigger images.
Other Email Design Guidelines to Remember…
In addition to what we’ve already talked about, there are a few other things to consider when designing HTML emails:
- Design for simplicity! Avoid complicated elements at all costs and design using grid-based rows and columns.
- Stick with fonts that are cross-platform like Arial, Georgia, Times New Roman or Verdana.
- Don’t include one large image as the body of your email.
- Perform test sends of any email to check how the design delivers.
Designing Emails with Delivra
Delivra uses an intuitive user interface to let anyone create elegant, converting emails.
Our platform gives marketers and SMB owners time back in their day building emails with ease.
With features like our Email Previewer, which allows you to see what your subscribers will see before clicking send, to A/B testing which layout or design element generates the greatest engagement, Delivra has what you need to take your email marketing efforts to another stratosphere.
In addition, we have a support and design team that work as an extension of your team.
Celeste O’Dell, our Senior Graphics Designer and all around email designing wizard, has been designing emails in HTML and using our Drag and Drop Editor for years with us.
She recently shared her thoughts in an email design webinar we hosted…
Ready to see the Delivra Email Marketing and Marketing Automation Platform?