When folks set out to do an email newsletter, they sometimes get so excited about sending the thing out as quickly as possible before it’s even made that they often trip on their own feet in the process of trying to do so. This usually involves some semblance of a design, the acquiring of pretty, pretty pictures and the slapping together of some equally pretty, pretty text. Sadly, this often leads to shoddy implementation and the disorganized execution of something that may quite possibly leave a long-lasting and negative impression on its recipients. That said, at the onset of such a project, be sure to take a deep breath and spend a not insignificant amount of time coming up with a plan. You can hover over that Send button with that twitchy mouse finger of yours all you want but you shouldn’t click just yet.
Why? Because what you send out to your readership should be great. Right?
Before starting the design for your HTML email, content layout should first be considered. Never mind the exact wording of the content at this stage. Right now, it’s time to simply determine where things go. Placement is important as the presentation of the content will help express the message – the whole point of the email – to the intended audience. Bear in mind that how the information is placed subsequently determines the order or the manner by which your reader experiences it. This isn’t a non-issue one can simply hand-wave.
Ed: Sometimes your email service provider has thought of this for you, and offers you a bunch of newsletter templates or will even build them (hint, hint).
Explore layout options by composing wireframes. Wireframes, as the name suggests, are rudimentary graphical representations of a proposed layout made specifically to determine where content is going to live in the available real estate. This is done to allow freedom of experimentation without becoming too preoccupied with the way the final product is going to look or committing to any particular art direction. Put simply, a wireframe is a kind of plan depicted visually. Moreover, this is a way to quickly organize information without having to expend too much energy in creating a final product which may or may not get scrapped in favor for a different approach.
Now, some designers are exacting with their wireframes and will designate actual height and width values for the elements that comprise their wireframes. Depending on how you do things, doing so may be helpful but it may also paint yourself into a corner. Do what works best for you. And if that means a rough pencil sketch on paper to convey your idea to your team, so be it. A rough rendering on paper or whiteboard may be all it takes to get the plan to gel. The idea here is to present a plan of possible action rather than divest development time prematurely and, possibly, wastefully. The lack of formality can even expedite that process.
Do note that some layouts are more suited for certain objectives than others. Determine what the point of the email communication is before deciding upon a particular approach. This is key.
Some questions to consider:
- What is the primary focal point of the communication?
- Is the email meant to be an intimate dialogue between sender or receiver?
- Is pushing brand awareness the main goal?
- Is presenting options the main focus?
- How text-heavy is the communication meant to be?
- In terms of user experience, is the email meant to look like an extension of its associated web site?
- What is the bandwidth profile for your targeted audience (as large image files may affect download speed)?
See? That’s a lot to consider before even coming up with colors, fonts or hunting down the aforementioned pretty, pretty pictures or coming up with the pretty, pretty text. If what has been described above has not occurred or even been considered and you’re already at the hovering-over-the-Send-button stage, can you be sure that what you’re about to send could be as great as it could be?
Shouldn’t it be?