Today more than 60% of all emails are opened on mobile devices.This means that if your email isn't responsive, half your audience is seeing a broken layout.

In this article, we'll cover what responsive email coding is, why you need it, and how to set it up even without a coder.

What is responsive coding?

Responsive coding means the email's layout adapts to the screen size:

  • on desktop, the email looks wide and expanded,
  • on a smartphone, blocks rearrange, buttons get bigger, and text becomes readable.

This is done using:

  • media queries (CSS),
  • a block structure (tables + nested elements),
  • editor components (already built into Letteros).

Why does it matter?

✔ Improves readability → more clicks.✔ Reduces unsubscribes → less irritation.✔ Looks professional → builds trust.

Emails without adaptation look like this on mobile:❌ tiny text,❌ cropped images,❌ buttons that are too small.

How to set up responsiveness in Letteros

Step 1. Use ready-made blocks

In the Letteros editor:

  • blocks and modules are already responsive,
  • tables, columns, and buttons rearrange automatically.

There's no need to write media queries — just build your email from ready-made elements.

Step 2. Check the preview

Before sending:

  • open the preview,
  • check the desktop and mobile view,
  • test the size of the fonts and buttons.

Tip: buttons should be at least 44×44 px so they're easy to tap on a phone.

Step 3. Avoid fixed sizes

❌ Don't insert 1000 px wide images without adapting them.❌ Don't set a fixed width on tables.

Use relative sizes (e.g. a block width of 100%) or constrain width using containers (max. 600–650 px).

Step 4. Check on real devices

  • Send a test email to yourself.
  • Open it on a phone, tablet, and laptop.
  • Check whether anything has shifted out of place.

Common mistakes

⚠ Complex grids with a lot of columns — better to simplify them.⚠ Fonts smaller than 14 px — hard to read on mobile.⚠ Hidden elements (via display: none) sometimes still show up in older clients.

Conclusion

Responsive coding isn't about "coding by hand" — it's about correctly using ready-made tools. In Letteros, you can build a responsive email in a couple of hours, even if you've never written a single line of code before.