Design for mobile and accessibility

0:00 Design for everyone

Picture someone reading your email on a bus in Karachi, on a small phone, in bright sunlight, on a patchy connection, with images blocked by default. Now picture someone in London reading the same email with a screen reader because they're visually impaired. And someone in Riyadh reading it in Arabic, in dark mode. Would your email work for all three? In this lecture you'll learn mobile-first layout principles, how to make emails work with images off, the accessibility checklist, dark mode and right-to-left support, the code patterns behind robust emails, and a ten-minute test you can run before every send.

0:44 Mobile-first layout

Most email is read on phones, so design mobile first, then check desktop. Single-column layouts are easiest to read on small screens. Most templates are around six hundred to six hundred and forty pixels wide on desktop and scale down on mobile. Build a clear visual hierarchy: headline, short supporting text, one prominent button, then secondary content. Give elements white space. Make tap targets at least around forty-four by forty-four pixels, with space between links. And use body text of roughly fourteen to sixteen pixels or larger. Think of a thumb, not a mouse pointer.

1:25 Images

Images need special care. Many email clients block images until the reader allows them, so your email must make sense with images off. Always add alt text that describes the content or function, like summer skincare routine: cleanser, serum, SPF. Avoid image-only emails. Put key messages and calls to action in live text and bulletproof buttons, which are built with HTML and CSS rather than pictures of buttons. Compress images so emails load quickly on mobile data, and use GIFs sparingly, avoiding rapid flashing. Here's the key idea. If your offer only exists inside a picture, many people will never see it.

2:09 Accessibility

Now accessibility. Accessible emails reach more people and usually perform better for everyone. Colour contrast: text must stand out from its background, and WCAG guidance recommends at least four point five to one for normal text. Don't rely on colour alone, like sale prices shown only in red. Use descriptive link text, read the pricing guide, not click here. Keep a logical reading order in the HTML so screen readers read things in the right sequence. Set the language attribute so screen readers pronounce correctly. Use real headings where your builder supports them. And include a plain-text version.

2:52 Dark mode and RTL

Two special cases. Dark mode: many readers use it, and it can invert or adjust your colours. Use logos with transparent backgrounds or a subtle outline so they stay visible, avoid text baked into light-background images, and check brand colours still meet contrast. And right-to-left languages like Arabic and Urdu: set the direction attribute to right-to-left and the language to Arabic or Urdu, and test that alignment, punctuation and numbers display correctly across major clients. Mixed Arabic and English content needs direction set on each block. The code patterns for both are in the lesson text.

3:34 Code patterns

Let's look at the code, briefly. A bulletproof button is a small table cell with a background colour and a link inside, styled with padding, font and colour. Because it's live text, it shows even with images off, and screen readers can read it. And in the document head, you can set the language and direction, like lang equals ar and dir equals rtl, plus colour-scheme hints and a dark-mode style block. Support for dark-mode CSS varies by client, so always test. One more technical point: Gmail clips emails whose HTML is larger than about a hundred and two kilobytes, which can hide your unsubscribe link. Keep your HTML lean.

4:22 Example 1: skincare image-only email

Let's do a simple worked example. A skincare brand sends a promotional email that's one big image: headline, products and button all baked in. With images off, Outlook shows a blank grey box. Screen readers say image. And dark mode turns the white background into an ugly patch. They rebuild it: a live-text headline, three product images with alt text, a bulletproof button, and a logo with a transparent background. Same look for most readers, but now it works for everyone. And mobile click rate improves, because the button is finally big enough to tap.

5:03 Example 2: Riyadh bilingual template (illustrative)

Now a realistic scenario. A Riyadh home-goods retailer rebuilds its template as a single column with two language blocks: Arabic first, right-to-left, then English, left-to-right. Live-text headlines, bulletproof buttons in each language, alt text in both languages, and a dark-mode-safe logo with a transparent background and a light outline. They test across Gmail, Apple Mail and Outlook, and everything aligns correctly, with readable buttons in dark mode. The result: mobile click rate rises, and customer-service messages asking why the email looks blank stop completely.

5:40 Footer + 10-minute test

Every marketing email also needs a footer: an easy-to-find unsubscribe link and preference centre; your business name and postal address, which CAN-SPAM requires for commercial email in the US and is good practice everywhere; a reminder of why the person is receiving the email; and links to your privacy notice and contact details. Then test before sending. Here's a ten-minute test. Turn images off. Check contrast. Listen with a screen reader, like VoiceOver or TalkBack. Zoom to two hundred percent on desktop. Check language and direction for Arabic or Urdu. And read it on a phone, in daylight.

6:23 Mistakes and measures

Common mistakes. Image-only emails with no alt text. Tiny text and cramped links on mobile. Low-contrast brand colours, like pale grey on white. Arabic text displaying left to right or with broken punctuation. And bloated HTML that gets clipped by Gmail. How do you measure success? Every campaign passes the images-off, dark-mode and screen-reader checks before sending. Your mobile click rate is at least as high as your desktop click rate. And no clipped emails in Gmail. When those three are true, your design isn't getting in the way of your message.

7:03 Recap and try this now

Let's recap. Design mobile-first with a single column, clear hierarchy, readable fonts and big tap targets. Make emails work with images off, using alt text, live text and bulletproof buttons. Follow accessibility basics: contrast, descriptive links, reading order, language settings and right-to-left support. Handle dark mode, keep HTML under Gmail's clipping limit, and include a compliant footer. Here's your try this now. Send a test of one of your emails to yourself, and run the ten-minute test from the lesson text: images off, dark mode, a screen reader and a phone in daylight. List every issue and how you'll fix it.