I write e-newsletters and e-mail news blasts for several clients (see, for example, here). Like most e-newsletters, they’re designed to be read in an e-mail app (or, for people who use web-based e-mail, a browser) along with an identical web-based version for people whose e-mail apps can’t handle html.
Most use customized templates offered by the big mailing services (MailChimp, Constant Contact, etc.) But one of my clients handles the mailing in-house, which requires me to use a custom html template that I prepared. Originally, the template had a fixed width of 600px (the width of the masthead graphic).
While working on the latest issue, I started thinking about the limitations of the fixed-width approach in today’s online-centric environment. In the old days, all you had to worry about was different monitor widths. Now, you also have to factor in web browsers and RSS readers, which is where more and more of us are reading our messages — not to mention the burgeoning mobile sphere, which has to fit everything into notecard-sized screens or thereabouts.
I see two problems with using a narrow fixed-width design for this particular newsletter:
- Readability. The contents have to be incredibly short, otherwise the reader will have to do too much scrolling. If the newsletter consists of teasers with links to the site, that’s not as big a deal. But this particular newsletter usually consists of three or four complete (three-four paragraph) stories.
- Design. On wide monitors, or even normal ones, the blank space on either side of the central text column looks and feels like a colossal waste of space. It conjures up memories of web design circa 1998.
So I decided to play with the width to see what the newsletter looks like with a variable-width format. The stories are the same length, but they look shorter, which hopefully will increase readability and click-throughs. And because you can now get more than one headline on the screen at any one time, hopefully the reader will want to continue reading.
One simple and subtle change to the graphic elements: the original rectangular masthead looked lost and disconnected floating in the middle of the wider screen, so I tried a simple scalloping of the sides to subtly reinforce a visual notion that the graphic now has more “breathing room” and can expand out into the surrounding space freely.
Happily, the client liked the redesign and the issue just mailed. I’m looking forward to getting feedback from the readers on the new design. Hopefully, they’ll like it too.