Responsive Design
TinyEmails automatically generates responsive HTML that adapts to any screen size. Every email you build is mobile-optimized by default; no extra work needed.
How responsive emails work in TinyEmails
The email builder generates inline CSS with media queries that handle:
| Behavior | Desktop | Mobile |
|---|---|---|
| Columns | Side by side | Stack vertically |
| Images | Original size | Scale to fit width |
| Font sizes | As designed | Slightly larger for readability |
| Buttons | Inline width | Full width (easier tap target) |
| Padding | As designed | Adjusted for narrower screens |
Preview responsive layouts
Use the preview panel to test your email at different widths:
- Click Preview in the top bar
- Toggle between:
- Desktop: full-width email (600px)
- Mobile: narrow view (320px)
- Tablet: medium view (480px)
- Switch between views to verify your layout works at every size
Column stacking
The Columns block automatically stacks on mobile:
| Desktop layout | Mobile layout |
|---|---|
| 2 columns side by side | Column 1 on top, Column 2 below |
| 3 columns in a row | All 3 columns stacked vertically |
| 1/3 + 2/3 split | Narrow column on top, wide column below |
Controlling stack order
By default, columns stack left-to-right, top-to-bottom. In the column settings:
| Option | Behavior |
|---|---|
| Normal order | Left column on top |
| Reverse on mobile | Right column on top |
| Hide on mobile | Column is hidden on mobile |
Mobile-specific settings
Several blocks offer mobile overrides:
| Block | Mobile setting | Purpose |
|---|---|---|
| Spacer | Mobile height | Reduce spacing on small screens |
| Image | Mobile width | Force full-width or specific width |
| Button | Full width on mobile | Easier to tap |
| Text | Mobile font size | Increase for readability |
| Columns | Stack behavior | Control how columns rearrange |
Best practices
| Practice | Why |
|---|---|
| Keep email width at 600px | Standard width that works in all email clients |
| Use 14px minimum font | Smaller text is hard to read on mobile |
| Make buttons 44px tall minimum | Apple's recommended tap target size |
| Use single-column for key content | Complex multi-column layouts can be unpredictable on mobile |
| Test with real email clients | Gmail, Apple Mail, and Outlook render differently |
| Avoid wide fixed-width images | Use percentage widths or max-width instead |
Email client compatibility
TinyEmails generates HTML compatible with:
| Client | Support level |
|---|---|
| Gmail (web) | Full |
| Gmail (mobile) | Full |
| Apple Mail | Full |
| Outlook 365 | Full |
| Outlook 2019/2021 | Full (uses Word rendering engine, some layout differences) |
| Yahoo Mail | Full |
| Samsung Mail | Full |
| Thunderbird | Full |
Design your email mobile-first: start with the most important content at the top, use large touch-friendly buttons, and keep the layout simple. Then refine the desktop version.
Always send a test email to yourself and check it on your actual phone before sending to your list. The preview panel is helpful but doesn't catch all email client rendering quirks.