Email Graphic Design Basics HTML Email Dimensions
When creating the content for your HTML emails, the dimensions are an essential 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 affect 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:
What is the Standard Email Design Size?
While the average display dimensions have increased to as high as 1920×1080, we recommend you use an email design size width of 600 to 650 pixels.
This may sound pretty small – but there’s a good reason to stay within this width.
Of Gmail’s 1.5 billion users, 75% of them are said to use the mobile Gmail app to view their email messages.
And there are plenty of other email clients that do not display beyond 650 pixels.
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 than that, your recipients may need to scroll vertically and horizontally to view your email in its entirety.
That’s why you must keep responsive and properly formatted email design in mind.
What is a Responsive Email Design?
Responsive email design is designing your emails to automatically adjusts themselves to fit whatever screen size your viewers are seeing your email on. These emails rely heavily on CSS media queries that help the email change depending on the rules you have set within the queries. This also allows you more freedoms with font sizes, colors and other pieces of your email content because you can set the parameters.
Responsive vs. Mobile-Friendly
The primary difference between responsive email design and mobile-friendly design is the fact that mobile-friendly design typically utilizes a single-column layout. This ensures that your email looks the same no matter which device you are using to view it.
While both responsive and mobile-friendly designs are great, some email designers prefer one over the other. For instance, as mentioned earlier, responsive design allows you more creative freedoms, while mobile-friendly ensures that your email functions correctly across all devices. For many marketing teams, functionality trumps creativity – especially as more and more people are turning to mobile devices for viewing their emails.
Just look at how many emails are opened on mobile devices. In 2018, the total fell around 61%. That’s well over half of all email opens happening on mobile devices such as smartphones and tablets.
Source: Super Office Blog
This is why many email geeks (ours included) are still using 600 to 650 pixels wide sizes as their standard email design size.
Create your email message any narrower, and your email message may become too long, requiring your reader to scroll forever on to see all of your content.
Despite the average width of 600-650 pixels, formatting emails horizontally is an overwhelmingly popular trend among retailers.
Take this example from Banfield Pet Hospital:
Source: Really Good Emails
When you sign up for their newsletter, you receive this lovely email designed with a welcome message and an accompanying coupon. (Swish!)
The welcome message design is responsive and fits nicely when viewing in a Gmail app:
A good rule of thumb to keep in mind is this: The more you ask your email recipient to do while reading your message, the more likely they will lose interest and abandon the email.
You can also check out some other examples of solid eCommerce email designs here on our blog.
Designing for the Preview Pane
Many email clients will display only the top portion of your email in the “preview pane.”
For Outlook, they call this the Reading Pane.
This area, if enabled by your contact in their email client, gives recipients a view at your email before deciding to read the rest of your message.
The size of this preview pane can, and will, vary depending on the email client and the recipient’s individual settings.
Typically, you can generally expect that most of your recipients will see the top 250-500 pixels of your email message in their preview panes.
Keeping that in mind, it’s a good idea to include compelling HTML content in this top portion in order to entice recipients to read further.
In this example from Blue Apron, they included one heck of an enticing header to pique the reader’s interest, even if they only see the top portion of the email.
Subject Line: Forget the candy, this deal is the sweetest one yet!
Header text: A Deal to Die For
Source: Really Good Emails
Readers are going to see this appealing combination and instantly want to know what this spooktacular deal is. This will encourage them to click and open the message or keep on scrolling to see what else it says.
ALT Text and Your Email Images
ALT text is not something to ignore when putting together your email content.
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.
In this email newsletter, everything rendered wonderfully, so readers don’t have to worry about missing out on anything.
Source: Campaign Monitor
However, thanks to one issue or another, this same email newsletter didn’t render properly for reader number 2. Sure, while there is some ALT text included, it’s not included for everything, leaving readers wondering what all they are missing out on.
Source: Campaign Monitor
When uploading your images, it’s considered the best practice to add in some version of ALT text, so your readers still get the most out of your email, despite rendering issues.
When it comes to writing you ALT text, it’s best to keep it clear and concise, but you should try to use enough text to convey the full content of the image. An excellent example of this practice would be the “Friend Us on Facebook” alternate tag in the image above. It’s straight to the point, so users don’t have to question what was there.
If you have a shiny orange image button covered with text and photos of packages, set its alternate text attribute with just the words 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. If you have the urge to get more creative, consider using creative text within images instead. That way, if the image doesn’t render correctly and you’ve adequately placed alternate text within it, users won’t miss out on valuable information.
- Don’t include one large image as the body of your email. This is just a bad idea, especially since many email clients automatically block images for user security. If all your reader’s see is a giant empty box with a broken image icon in the corner, they are going to assume your message wasn’t necessary.
- Perform test sends of any email to check how the design delivers.
Delivra uses an intuitive user interface to let anyone create elegant, converting emails.
With features like our Email Previewer, which allows you to see what your subscribers will see before clicking send, and A/B testing, which allows users to test a layout or design element to see which 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 works as an extension of your team.
Ready to see the Delivra Email Marketing and Marketing Automation Platform and what it can do for you? Then make sure to request a demo today.