Readable Email and Web Pages

It’s 2024. If you’re still designing websites or email like you would design an 8.5x11" promotional hand-out on a sheet of paper, you really haven’t been paying attention to how people use the internet over the past decade.

• A lot of people read on their phones. Make sure you’re not breaking word wrap or forcing the text to be too tiny.

• With email especially, just because they had a network connection when their device downloaded your message doesn’t mean they have one now. Maybe they’re going through email on the subway. Maybe they’re in a building that blocks cell signals inside because of the construction materials. (Ask me how I know!) In short: Don’t assume they can (or want to) download your images. Make sure any remote images are either expendable or described effectively in the ALT text.

  That said: “Effective” ALT text varies a lot with the image’s purpose and context, and IMO it’s as much an art as a science, with competing priorities and disagreements. Remember, it’s not a caption, it’s an alternative presentation of what you want the image to convey.

  • For a snapshot or portrait you might want to briefly describe who’s in it and what they’re doing.
  • For an artistic photo you might want to describe the esthetics.
  • For an action photo you probably want to describe what’s happening.
  • For a picture of text (like a logo, or “40% off large pizzas until Saturday!” in an email), you may just want to repeat or summarize the text, and not get into details like “A photo of a pizza with cheese and pepperoni, with one slice lifted on a metal server. The company logo appears above it.”
  • And if the image is purely decorative, you can always deliberately give it a blank alternative.

• Not everyone has wireless broadband. Or even wired broadband. There are people connected at slow speeds because broadband still isn’t available in their area. There are places with spotty cell coverage. Maybe they’re at the edge of that signal-blocking building and can get juuuust enough bandwidth to retrieve the text part of your page. Don’t overdo the file sizes on your images and scripts!

• Apps may switch the color scheme for dark mode. At least make sure your design isn’t going to turn into dark gray on black!

• Many web browsers have support for a reader mode that tries to strip away all the navigation, ads, etc. and show only the article itself (with varying success), or the user might be using a read-it-later service like Pocket that tries to do the same thing (and that brings us back to not having internet access at read time).

• Back to email: if you are formatting it, include a useful plaintext version!

And that’s not even getting into accessibility issues!

• Getting back to the font size, some people turn it waaay up in order to read. Don’t block that!

• Color schemes can break down if someone has color blindness and can’t tell two contrasting colors apart.

• High-contrast mode can mix badly with color schemes.

• Some people can’t read visually at all and need a screen reader so they can interact via sound.

Of course, the real kicker here is that plain HTML, with basic paragraph formatting and maybe bold and italics, is automatically displayed (or read) the way the recipient’s system is configured. Part of your job as a designer is to not get in its way.