Email width and message content width in Stripo: How to set the right size

When planning and implementing an email campaign, marketers focus on defining objectives, segmenting the audience, personalizing content, creating compelling subject lines, formulating a clear CTA, etc. But content alone does not determine the success of your marketing efforts. The technical side of the project matters too. Email width, message content width, and email graphic size are important technical elements that affect readability, rendering, and the overall recipient experience. And various email design tools deal with it differently.

This article focuses on email width, message content width, and email graphic size as crucial email parameters, explains how to choose and set them up in the Stripo email design platform depending on the email type and recipient device, and highlights typical mistakes users make in dealing with these aspects, with recommendations on how to avoid them.

Key takeaways

1. Message content width is the horizontal space within the email where text and images are placed. 
2. Email width is the total size of the layout canvas.
3. The standard email width is 600px.
4. To set the message content width in the Stripo email design platform, you should find the General Styles section, go to Global Styles & Layout tab, and use the stepper to configure the value.
5. Message content width differs by email type. The more text in it, the smaller it should be.
6. To let the message render well on mobile, you should keep the Responsive Design toggle switched on when creating emails in Stripo.
7. Graphics should generally match the message content width (typically 600px for standard desktop layouts).
8. When crafting emails, you should keep in mind the width limitations imposed by different email clients and screen sizes.

What is message content width?

The size of email graphic items (headers, banners, body images, etc.) as well as the text in the email is not something the designer chooses arbitrarily. They should fit within the predefined boundary limited by the maximum viewing pane. How well they fit is dictated by the message content width, as measured in pixels, or the horizontal space within an email allocated for images and text.

Message content width shouldn’t be confused with email width. The latter describes the size of the total layout canvas, whereas the former refers to the active area within it that contains focal elements.

Both metrics are vital because they keep your emails properly sized, which can make or break their deliverability, readability, and compatibility across devices.

What’s the standard email width and why? 

The boilerplate email width is 600 pixels. Staying within the email width ensures a clean look for your emails, so they require no horizontal scrolling on any gadget type. Why 600, you may ask? The reason behind this exact number is a mixture of legacy tech and modern usability requirements.

You might also like

HTML email boilerplate: What it is and how to use it for faster email development

In the early days of HTML email, 800×600 was one of the most common screen resolutions, and designers typically limited email layouts to about 600px to leave room for email client navigation panes. Besides, this width aligns with typography best practices, which recommend 50-75 characters per line as the optimal readability criterion. 

The basic index remained basically unchanged with the advent of mobile devices and smaller screens, since the layout rendered well on them without breaking. However, modern responsive design technologies allow for greater flexibility in email widths, so brands experiment with 700px email widths. Some brands experiment with layouts as wide as 800-960 px for desktop-focused newsletters or complex multi-column product showcases, although these designs require careful responsive testing. 

Still, such attempts are more exploratory and sporadic than systematic, with the majority of email-driven businesses sticking to the good old 600px. So, if you decide to switch to 600+ px, you should conduct thorough preliminary testing of the new email format. 

For most marketing emails, a message content width between 600 and 640 px works well, with 600px remaining the safest cross-client option. Typical headers should be 600px wide and 400px high maximum; banners: not more than 680px wide (400px high); and CTA buttons: 300px wide and 75px high. Can you do it in Stripo?

How to set message content width in Stripo

The Stripo email design platform is easy to use, so setting the message content width is a cakewalk that takes just three simple steps:

1. On the right side of the tool’s home page, you will see the General Styles section. Choose the Global Styles & Layout tab in it.
2. In the drop-down menu, find Message Content Width.
3. The message width button has plus-minus size adjustment options. Possible size values range from 320px to 900px, but the width is set to 600px by default. If you want to change it, use the stepper to configure the message content width.

But what value should you enter? It depends on the type of email you’re building. 

Choosing the right width by email type

Different messages benefit from different content widths:

• newsletters. The standard 600px allows for easy reading of a newsletter without resorting to horizontal scrolling;
• promotional emails. The same is true here: 600px width does the job perfectly well;
• transactional emails. The maximum width of password resets, order confirmations, and receipts shouldn’t exceed 640px;
• text-heavy messages and personal updates. These should be kept to a maximum of 550px to reduce reading fatigue;
• specialized campaigns. If most of your audience reads emails on desktop devices, you can experiment with wider layouts, but always test them carefully across email clients.

In case your audience prefers mobile devices, Stripo can help your emails render well on them, too.

How width works with responsive design

By opting for responsive design, you ensure your message’s layout automatically adapts supported layouts for mobile screens. How do you do it in Stripo? If you scroll down the Global Styles & Layout tab of the General Styles section, you will find the Responsive Design toggle switch. It’s set to ON by default; make sure you keep it that way and don’t switch it off by mistake or oversight.

Problems of another kind may occur with the message width when you adopt the mobile-first design approach. Inexperienced designers who optimize their messages for small screens fall into the mobile scale-up trap when their layouts and images are stretched across larger screens to fit the 600px width traditionally used for desktops or tablets. To rule out such an outcome, we recommend leveraging responsive frameworks instead of relying on fixed pixels when crafting mobile-first email designs.

What about graphics in an email? Does email width have anything to do with its size?

How message content width affects email graphic size

These two notions are directly related. While the content width deals with the message boundaries, the email graphic size describes the dimensions and file weight of the images the message contains. Simply put, the best size for an email graphic is the one that fits exactly within the width constraints. 

When you are looking for the best graphic size for email, keep the following points in mind:

1. The 600px yardstick. The standard email graphic size should equal this number, unless you want the email client to stretch or shrink images. 
2. Hi-DPI scaling. First used on Apple Retina screens (hence its other name, “Retina scaling”), this display technology enables designers to create images at 1200px, which are then displayed to a 600px format. The resulting images look crisp, but the text is still readable even on high-resolution screens. 
3. Mobile responsiveness. To prevent mobile data lag during dynamic scaling down of the message for small screens, you should keep the image file size under 1MB (ideally between 100KB and 200KB).
4. 72 dots per inch (DPI) is a misleading number. It originated in the 1980s when Apple Macintosh printers could produce images only with this ratio. Modern screens cram far more dots/pixels per inch (from 220 to 550), so this number now reflects the size of the image if you want to print it out, not how it looks on a screen.

The choice of email width is also conditioned by the ESPs that will deliver your message to recipients.

Width and email client rendering

How do email clients that dominate the contemporary industry handle different width properties? 

• Desktop and web clients

Gmail, Apple Mail, and most modern email clients display traditional 600px layouts reliably. Responsive behavior depends on the email client, with desktop Outlook remaining one of the most restrictive environments.

• Mobile clients

Android Gmail and iOS Mail rely on smaller viewports (as a rule, from 320px to 414px), so responsive email design is non-negotiable. Very large images may cause layout issues in Samsung Mail.

• Yahoo and older Webmail

Wider layouts may not display as intended in some older webmail clients.

• Microsoft Outlook

The Microsoft Word rendering engine used by this desktop app doesn’t see eye to eye with layouts exceeding 600px. So, margin and padding issues are symptomatic of 600+ px emails rendered by this client. 

Definitely, staying within the standard 600px email width is a safe bet for any ESP. What about other size-related pitfalls that email designers encounter?

Common email width mistakes and how to avoid them

• Ignoring mobile rendering for text

You can’t expect a 600px desktop layout to shrink when rendered on mobile. You will just get illegible, microscopic text.

Fix: You should leverage CSS media queries or fluid-hybrid coding to make desktop layouts stack as an easily readable column on small screens.

• Inserting too large images

Sometimes, designers enrich their emails with images that are several thousand pixels wide, hoping the email client will scale them down easily. But it doesn’t. It just cuts away the overflowing code that exceeds the HTML threshold (for Gmail, it is 102KB), hiding the bottom of the message. Plus, such an oversized file takes forever to load. 

Fix: Make sure the image isn’t wider than the message content field, and use a specialized tool (such as TinyPNG, iLoveIMG, or ImageOptim) to compress it.

You might also like

What is email clipping? Causes, limits, and how to fix it

• Sending image-heavy but text-scant emails

Such emails are not only unreadable when images are turned off but also cause mobile scaling issues. They’re even unlikely to reach the recipient, as email security software will send them to the spam folder.

Fix: First of all, aim for a healthy balance between images and HTML text rather than relying primarily on images. Second, don’t include the text in the image; format it as HTML text. 

• Forgetting about margins and padding

The content looks cramped on smaller screens when you place buttons, logos, and the text near the 600px edge.

Fix: All sides of your content block should have default padding between 15px and 30px. Also, configure the size of CTA buttons to be at least 44px by 44px so that mobile users can tap them easily. 

• Never utilizing the mobile test send

Trying to make short work of it, some designers assess the look of the message they’ve crafted by relying on the desktop preview in the email builder. As a result, they never notice overflowing containers, text wrapping, and spacing issues that pop up when viewed on mobile.

Fix: Sending a test email to Android and iOS devices, as well as to different email clients (Outlook, Gmail, Apple Mail, you name it), is a must. Only after you ensure the message renders well across all of them is the email ready to be sent to customers. Stripo integrates with Email on Acid, allowing you to build and test emails without leaving the editor.

Wrapping up

The right email width and message content width influence readability, rendering consistency, and the overall subscriber experience across different devices and email clients. Stripo makes it easy to configure these parameters while supporting responsive design and reusable layouts. 

By following width guidelines, optimizing your graphics, and testing your emails before sending them, you can create campaigns that look professional, display reliably, and perform consistently for every recipient.

FAQ

1. What is the best width for an email?

It’s the one that rules out horizontal scrolling on desktop and enables responsive templates to scale down on mobile, where screens are much smaller. In terms of pixels, it’s 600. 

2. Is 600px still the standard email width?

Yes. Some designers experiment with 640px, 700px, and even 960px, but 600px-wide emails are still the golden standard for messages to render cleanly on desktops and scale gracefully on mobile devices. 

3. Can an email be wider than 600px?

Technically, it can. With desktop screens becoming ever wider, 800px-wide emails allow for modern, expansive layouts. However, such emails require additional measures (media queries, responsive CSS, content framing, HTML minimization, and more) to let them render well across all devices and email clients. 

4. What width should I use for mobile emails?

You don’t need to create a separate mobile-width email. A standard 600px responsive email automatically adapts to smaller screens when Responsive Design is enabled.

5. What is the best email graphic size?

Graphics should fit within the standard email width of 600px. It could be twice as much for Apple’s Retina displays, but you should export images there at 1.5x or 2x and compress the file size to keep it under 1MB. Best practices for email graphics recommend different approaches for different image types. For instance, banners and hero images should be up to 600px wide; and logos shouldn’t exceed 150px. 

6. Does message content width change my image sizes?

It does. If the image is wider than the message content width established by the email client, it will be downscaled. If it’s much narrower, it will be stretched, resulting in a blurry or pixelated picture. For optimal rendering, try to keep your image width close to the standard 600px.

7. What happens if I turn off Responsive Design?

If you do, the desktop layout of your email will remain that way across all devices. As a result, recipients who open it on mobile devices will see microscopic text and broken layouts that require zooming, pinching, and horizontal scrolling to read the message properly.