Design / Email guide

How to make your email readable on a phone

Choose a layout, size your text and buttons, and check how columns stack on a phone. Learn what to preview and what to test in a received email.

Start with the information your reader needs, use a layout that fits a narrow screen, and check the result after sending yourself a test.

Put the most important information first

For a workshop invitation, readers need the topic, date, time zone, price, and booking link. Write those details before choosing images or colors. Keep the date and price near the booking button so nobody has to search for them.

For a newsletter, choose a lead story and follow it with shorter summaries. Read the text from top to bottom: this is the order someone should see when columns stack on a phone.

Start with one column

A single column is a good starting point for invitations, welcome emails, and short updates. Around 600 pixels is a common desktop width. Leave space at the sides so the text does not touch the edge of the screen.

If you use two columns, check their order in the phone preview. Watch for wide images or long web addresses that force sideways scrolling. Short descriptive links are easier to read than a full URL.

Keep text readable and buttons easy to tap

Try 16-pixel body text with enough line spacing to follow each sentence. View it at actual size. If a paragraph feels crowded, shorten it or add space rather than reducing the font size.

Give the main button a label such as Reserve a workshop place. Aim for a tap area around 44 pixels high, with space between nearby links. Use strong contrast between text and background; a ratio of at least 4.5:1 is a useful target for normal text. Underline links within paragraphs so color is not the only way to spot them.

Keep essential details outside images

Some inboxes hide images. Write dates, prices, and the main action as text in the email, even if they also appear in a graphic. Add a short image description, called alt text, for pictures that carry useful information.

Resize and compress photos before uploading them. Images should shrink to fit the screen. Check that the email still makes sense when pictures do not load.

Preview with your real copy

In Lettershape, replace the template text before adjusting the spacing. A longer headline may wrap onto another line. Switch between desktop and mobile to look for crowded buttons, large gaps, and a main link that is hard to find.

Click Save when you finish editing; changes are not saved automatically. The two previews show browser layouts, so they cannot tell you exactly how every inbox will display the email.

Send yourself a test email

Download or copy your design and send a test through your usual email tool. Open the received message on a phone and a computer. Check links, images, and reading order. Try dark mode if your readers use it.

If a column or image breaks the layout in one app, simplify that section in Lettershape and send another test. Keep the version you tested for the final send.

Related guides

More help with email design.

Start with the Free plan

Create and download
your first email for free.

Create an account, verify your email address, and choose a template to edit.

Create a free accountSave up to 3 designs. No credit card required.