Email Marketing
What makes a good subject line?
Subject lines are an important part of your email, so heres how to not mess them up.
Read More →
Its one of the most fundamental email design questions: How wide should your email be? Heres the answer.
If youre just here to find a quick answer, here it is: Most email designs today are between 600px and 700px wide. You no longer have to stick to a maximum width of 600px, as many outdated resources still suggest. Instead, pick a width that works with your design and the complexities of your layout.
In this video, we break down the most popular email widths.
Are you up for a bit more of a deep dive into the world of email widths to find the optimal width for your email template? Awesome! Lets dive right in.
When youre designing an email, the width attribute specifies how wide an HTML element in this case the div or table containing all your email content can stretch. On the most basic level, the email width dictates how wide the canvas is that you can fill with content. The ideal email width gives your design enough breathing room, renders across clients, and allows you to work with the amount of columns that youd like to display.
For a really long time, 600px was the gold standard of email width. Why? For a long time, most emails were read on desktop devices, with email clients like Outlook, Yahoo! Mail and Hotmail being among the most popular reading environments. If we go back about ten to fifteen years, most desktop screens hovered around a resolution of 1024x768 pixels, and the most popular email clients provided viewports that were about 600px wide. For emails to display properly and without horizontal scrolling, email designers wanted their emails to match that viewport width. Thats why it used to be important to stick to a maximum email width of 600px.
Over the last few years though, a lot has changed. If youre reading emails on a computer, you might be looking at a screen with a 1920x1080 resolution. Reading your emails on an iPhone 11 Pro Max? Thats 1242x2688 pixels available to make your emails shine. Low screen resolutions should no longer restrict your email design width and email clients are no longer limited to 600px view ports either.
It's also time to bust another myth that keeps being repeated: You might see resources recommending that your email shouldnt be wider than 640px because Gmail would not display background colours if your email stretches beyond that. That too is no longer true. Today, Gmail displays background colours beautifully, no matter how wide your email (or your browser window) is.
Today, we see many email designers venture beyond 600px to give their email designs just a little more space. Most emails fall somewhere between 600px and 700px though.
What exactly the best width is depends on what youre planning to do with your design. Especially when youre working with multi-column layouts, picking an email width that supports your column count is crucial.
The perfect email width doesnt exist it all depends on what exactly youre trying to do with your email design.
Tweet this →
Lets say youre looking to build a template that features three columns. Youll want to pick an email width that divides evenly by three. A 600px email, for example, can be evenly divided into three columns at 200px each. If your email was 620px wide though, youd be in trouble: 620px divided by three makes 206.67px but theres no such thing as a .67 pixel. Because you have to work with full pixels, youd have to make one column slightly larger as the others and that makes designing your email a whole lot more complex. Thats why the question of how many columns youd like to support is one of the most important considerations when settling on your email template width.
There are two choices for email width that have grown increasingly popular with email designers whore moving beyond 600px:
You dont have to stick to these common widths though. Think about your email layout and your column structure first and then pick an email width that makes it easy to support your design goals.
Curious how fellow email designers work with custom widths that go beyond 600px? Lets look at a few examples!
This email from Apple thats promoting their AirPods is 712px wide. This makes it work nicely when viewed on large screens, but its also set up to scale down nicely when viewed on smaller devices.
This beautiful email by Behance scales to a maximum width of 800 pixels. To power its asymmetrical look, the designers break up the 800px email width into a grid of 16 columns at 50 pixels each. A layout this complex would be close to impossible to do with a smaller width.
ActionRockets weekly roundup of email news maxes out at 1600px wide, but has several break points so that the layout works down to around 300px width. The risk of having sentences appear too wide (the Measure, aka amount of words per line) is mitigated by using multiple columns, and large font sizes. Most of the article content items are squares, and up to 5 appear on one line, but each square is only ever shown as a max 320px wide.
___________________
In this webinar with our friends at Really Good Emails and Mailchimp we look at some of the basic design principles that make for a good email design. Youll learn the fundamentals of layout and color use and why its a great idea to keep things simple.
Taxi helps marketing teams make better quality email, quicker, at a larger scale.
