Skip to content
English
Login to Steer
  • There are no suggestions because the search field is empty.

Creating Effective Email Templates in Steer

This guide provides the essential technical specifications and design best practices for building high-performing, responsive email templates using Steer.

Email Editor Main Screen

Great email design is just as vital as your message and your audience. Use this guide to master the specs and sizes needed for custom designs in Steer. With our drag-and-drop editor, creating eye-catching, custom emails has never been easier.

Don't feel like building a custom email from scratch?

Steer's Brand Team uploads refreshed email and text templates on a regular basis. Our team strives to create content our shops would like to use; saving them time on sending out effective marketing. Check out our pre-designed templates in Steer!

Jump to: 

Template Width & Height Specs

Email Builder Column System Explained

-> Column Specs

-> Column Stacking Logic

-> Advanced Do Not Stack Feature

-> Customizing Column Width

-> Customizing Column Vertical Alignment

Image Specifications

Typography & Text Tips

Button (CTA) Specs

Email Design "Don'ts" & Best Practices

Quick Checklist before Sending

Template Width & Height Specs

Steer's email builder is designed to be mobile-responsive by default, but following these standard dimensions helps ensure the best rendering across all email clients (Outlook, Gmail, Apple Mail, Etc.).

Template Width (Desktop + Mobile):

⭐ Recommended Width (Desktop): 600px

    • This is the "golden rule" for email to ensure it fits within the reading panes of most desktop clients.

⭐ Maximum Width (Desktop): Up to 900px

    • The builder supports this size, but test thoroughly for how the email looks in the inbox of multiple providers. Outlook can tend to distort wider email templates which will affect the appearance of your design in the customer's inbox. 

⭐ Mobile Template Width (Mobile Viewport): typically 320px - 480px

    • Please check the mobile view before sending your email to ensure it is scaled properly and to your liking. Click the cellphone at the top of the email builder to see the mobile view
Switch from Desktop View to Mobile View

💡Pro-Tip: You can use the "Hide on Mobile" or "Hide on Desktop" settings to create different content for different viewports—for example, showing a large, detailed banner for desktop and a simplified, fast-loading version for the mobile viewport.

Email Builder Column System:

Steer's email builder uses a 12-column grid. In the builder, every row of your design is divided into 12 invisible "units" or "slots." When you add multiple columns to a row, you are essentially deciding how many of those 12 units each column will occupy.

This section includes the following tips regarding columns:

Column Specs Quick Tips:

Feature Best For... Mobile Behavior
1 Column (12/12) Hero banners, main body text, call-to-action buttons. Remains full width.
2 Columns (6/6) Product features (image + text) side-by-side. Stacks (Image on top, Text below).
3+ Columns Icon sets, navigation links, or photo galleries. Stacks into a single vertical list.
No-Stack Toggle Small icons (Social Media) or "Logo + Text" headers. Stays side-by-side on mobile.

⭐ Single Column: Best for mobile readability.

⭐ Multi-Column: Use for desktop layouts (e.g., 2 or 3 columns). These will automatically "stack" vertically on mobile devices.
 
⭐ Total Columns Must Equal 12: Any combination of columns in a single row must add up to exactly 12.

    • 2 Equal Columns: 6 + 6 units.

    • 3 Equal Columns: 4 + 4 + 4 units.

    • 4 Equal Columns: 3 + 3 + 3 + 3 units.

    • Asymmetric Layout: 4 units (sidebar) + 8 units (main content).

Why 12? The number 12 is highly divisible. It allows you to create layouts of 2, 3, 4, or 6 equal columns easily, which covers almost every professional email design need.

Column "Stacking" Logic:

The "stacking" feature is what makes your email design responsive.

⭐ Desktop (Horizontal): On a computer, columns sit side-by-side because there is enough horizontal space (usually 600px+).

⭐ Mobile (Vertical): On a smartphone, the screen is too narrow to fit columns side-by-side without making the content unreadably small. Steer's email builder automatically "breaks" the row and stacks the columns on top of each other.

    • Example: A "3-column" row on desktop becomes "3 rows of 1 column" on mobile.

Email Auto Stacking Columns

Advanced Feature: "Do Not Stack on Mobile"

Sometimes, you don't want columns to stack. For example, if you have a row with two small social media icons or a small logo next to text, stacking them might create too much vertical white space.

⭐ How to use it: In the Steer email builder while on the Mobile View of your design, click on a row, and in the property panel on the right, you will see a toggle for "Do Not Stack on Mobile," toggle this on to keep your columns from stacking vertically on mobile devices.

⭐ What it does: When enabled, the columns will stay side-by-side even on small screens.

Email Editor - Do Not Stack on Mobile

⚠️ Warning: Use this sparingly. If you have too much text in side-by-side columns on mobile, the text will become very narrow and hard to read.

Customizing Column Widths

You are not restricted to equal sizes. In the Steer email builder, you can hover between columns and drag the divider to resize them.

⭐ Fixed increments: As you drag, you will notice the columns "snap" to the 12-unit grid lines.

Email Editor Column Widths

💡Pro Tip: Use a wide column for text (8 units) and a narrow column for an image (4 units) to create a sophisticated "magazine-style" layout that still stacks perfectly on mobile.

Column Vertical Alignment

When you have columns side-by-side with different amounts of content (e.g., one column has a long paragraph and the other has a short button), they may look uneven.

⭐ Vertical Alignment: The email builder allows you to set the vertical alignment for each column by adjusting the Padding of each column.

Email Editor Column Padding

💡Pro Tip: Use a "Middle" alignment for a balanced look when placing a small image next to a block of text.

Image Specifications

Using properly sized images in your email helps ensure the design looks nice to the customer and the deliverability rates. Images that are too large can trigger spam filters or fail to load on certain devices and for those with slow connections. 

⭐ Supported File Formats: Utilize the file formats below when building your email design.

File Type Best for.. Important Notes
JPG/JPEG

Photos, gradients, complex artwork.

 

Pros: smaller file size, widely supported.

Use “high” quality, but compress enough to keep size <150–200 KB per image where possible.
PNG Logos, icons, simple graphics, anything needing transparency or very crisp edges.

Pros: good for type‑heavy graphics (headers, badges) where sharpness matters.

Watch file sizes; complex PNGs can get large.
GIF Only if you truly need animation. Use sparingly.

Keep very short and low‑resolution; animated GIFs get huge fast.

Outlook only shows the first frame, so front‑load the main message.

⚠️ Warning: Avoid using SVG, WebP, AVIF, & HEUC file formats as they are not widely supported by all email providers. 

⭐ File Size: Keep individual images under 1MB (ideally under 200KB).

⭐ Resolution: For Retina (high-density) displays, upload images at 2x the display size.

    • Example: If an image block is 600px wide, upload a 1200px wide image. The builder will scale it down while maintaining sharpness.

⭐ Banner Sizes:

    • Desktop Banner: 600px–700px (W) x 90px–200px (H).

    • Mobile Banner: ~350px (W) x 100px (H). 

⭐ Alt Text: Always add "Alternative Text" in the image settings for accessibility and for when images are blocked by the recipient's mail client.

Email Editor Image Alt Text

 

Typography & Text Tips

Text is the most important part of your message. Ensure it remains readable on small screens.

⭐ Font Size Recommendations:

    • Body Text: 14px – 16px (minimum 14px for mobile legibility).

    • Headers: 22px – 24px.

    • Line Height: Set to 1.4 or 1.5 for better readability.

    • Font Choice: Stick to "Web Safe Fonts" (Arial, Helvetica, Georgia, Times New Roman) for 100% compatibility. If using a unique font, always set a web-safe fallback font in the editor.

    • Text-to-Image Ratio: Maintain a ratio of roughly 60% text to 40% images to avoid being marked as spam.

Buttons (CTA) Specs

Buttons need to be "thumb-friendly" for mobile users.

⭐ Button Spec Recommendations: 

    • Minimum Size: 44px x 44px (the standard hit area for fingers).

    • Padding: Ensure there is enough "Negative Space" around the button so it’s easy to tap without hitting other links.

    • Font: Use bold text for the CTA, typically 16px or larger.

Email Editor Button Settings

Email Design "Don'ts" & Best Practices

⭐ Total Email Weight: Aim to keep the total HTML file size under 100KB. Gmail "clips" (hides) emails that exceed 102KB.

⭐ Avoid Complex Code: Don't try to paste complex external CSS or Javascript into the editor; email clients do not support them. Stick to Steer's built-in styling tools for best results.

 

⭐ Background Images: Be aware that Outlook (Desktop) often blocks background images. Always set a Background Color as a fallback so your text remains readable if the image doesn't load.

⭐ Footer Requirements: To comply with anti-spam laws (CAN-SPAM/GDPR), your template must include:

    • Your physical company address.

    • An "Unsubscribe" link.

Email Footer Requirements

Quick Checklist before Sending your Email Design:

Before sending your email design to your customers, send a test email to yourself from Steer and complete the following checklist. 

IMAGE

✅  Send a Test: Always send a real test email to your own inbox (check both desktop and mobile).

✅ Preview on Mobile: Use the "Mobile" toggle in the editor.

✅  Check Alt Text: Are all images described?

✅  Test Links: Do all buttons and images lead to the right URL?