Sending an email with no CSS. #EmailWeekly Redesign – Week 1

We’re re-designing our weekly newsletter in public.

The first email in our redesign experiment was coded in semantic, modern-web style HTML, with very little design formatting. By it’s nature, it was pretty accessible, and had a fairly intuitive content hierarchy.

Semantic code weighs much less

Last week’s email came in at around 200 lines of code and 14kb, whereas a previous version, with similar content, is 1000 lines and 40kb.

Even with no style, email still looks different

The default fonts and formatting for things like <h1> and <p> are way nicer in newer platforms like iOS and Gmail than in Outlook 2013, where everything defaults back to Times.

Newer versions of Outlook/Windows browsers tended to default to a sans-serif, but aside from typography, we almost achieved a consistent experience across email clients. Even Lotus Notes 7!

See the full Litmus results here.

Fluid email can get too wide

One thing the default text formatting didn’t do, but we perhaps should do as a basic design tweak, is consider the Measure. Our lines of text, particularly paragraph text, were sometimes too wide on a big screen, making it hard to read (thanks to the people who fed back on this). I guess, being fluid almost everywhere, it’s possible to resize the browser on desktop, but that’s less of an option on things like tablets. We’ll consider this for our future versions.

Accessibility

We weren’t expecting any major issues here, and the code checked out on both the Accessible Email checker and in our tests with screen-readers. We’ll be testing new versions once we add “design” and see how this affects accessibility.

This week we’re looking at adding some design to semantic HTML — to get #EmailWeekly sign up at http://emailweekly.co


We’re re-designing our weekly newsletter in public. Find out more here, subscribe here and see progress on github here.