Mobile email design starts with reading order: the customer should understand the offer, the important condition, and the next action without zooming. A Shopify product grid that looks spacious on a desktop can become a stack of tiny images on a phone. Build for the smaller reading space first, then check what happens when text grows, images fail, or columns stack.
Build a clear reading order
Use a simple single-column structure for the main message. Put the promise, supporting explanation, and primary action in an order that still makes sense when images are unavailable. Additional product blocks should support that action rather than compete with it.
Keep important copy as live text. Readers should not need to zoom into a promotional image to discover the offer or its conditions. Choose an email-safe font and a comfortable body size; around 16 pixels is a useful starting point, then test the actual rendering. A long translation may need more vertical space, not smaller letters.
Design the first screen around one decision
Sketch the narrow version before arranging a desktop grid. For a product launch, the reading order might be product name, one sentence explaining its use, a supporting image, price context, and a button. The reader should understand the offer even if only that first part is visible. A large decorative banner should not push every useful detail below several screens of scrolling.
Start body text near 16 pixels with enough line spacing to separate lines comfortably, then inspect the sent email. These are design starting points, not a rule that every label and heading must share a size. Use a clear jump between body and headings, and preserve a comfortable amount of space around the main action. Shrinking the entire template to fit is usually the wrong response to a crowded layout.
For two product cards, keep each image, title, price, and link in the same component. When the cards stack, the customer should see one complete product before the next begins. Avoid a structure that stacks both images first and both descriptions afterward; that forces readers to reconstruct which details belong together.
Let components grow with their content
Avoid fixed-height text areas and hard line breaks used only to make one desktop title look balanced. Leave buttons enough padding for a longer label, and make the whole clickable area comfortable to tap. Put space between nearby links so a thumb does not choose the wrong destination.
Use descriptive alternative text for informative images and keep decorative images from adding unnecessary noise. Check text contrast against the real background, including any dark-mode changes. A pale label that looks elegant on your monitor may be difficult to read outdoors on a phone.
Use a preview matrix that exposes weak components
A useful matrix includes a narrow phone-sized view, a larger view, images unavailable, dark mode where supported, and realistic customer data. For translations, include the longest version rather than testing only the shortest. Look at the message as a whole and then inspect the areas most likely to fail: product titles, price strings, buttons, and footer links.
- If a button label wraps, allow its height to grow and check its padding; do not cut off the action word.
- If a product name touches the next block, remove a fixed height and give the text room to wrap.
- If important information disappears with images, move it into live text and use the image as support.
- If nearby links are hard to tap separately, increase their separation or reduce the number of competing actions.
Preview the failure cases on purpose
In Sendvio, preview the template with real customer data and inspect it at a narrow width. Try a long name, a missing personalization field, a longer price, and a product with an unusually long title. Then send tests to the email apps your customers commonly use.
For a two-product promotion, check the stacked order: product image, name, price, and action should remain together. If they separate, simplify the block. The goal is not to reproduce the desktop arrangement at any cost. It is to preserve the meaning and make the next action obvious without zooming, guessing, or horizontal scrolling.
Check contrast on the actual text and background combination. For ordinary text, a contrast ratio of at least 4.5:1 is a useful accessibility baseline; sufficiently large text has a lower minimum of 3:1. Those values do not replace a complete accessibility review, but they make color decisions less subjective. Test small gray labels as carefully as the main headline.
Save the repaired component as part of the reusable template, then test it again after substantial changes. A good mobile template does more than avoid horizontal scrolling: it preserves the reading order, the customer's ability to understand the offer, and a clear, usable next action across the email environments you actually support.