Moda in Pelle - Stepping into html email design
Ash Richards, head of the design team at Pure360.com talks us through the design process behind Moda in Pelle's email newsletter. From design proofing to finished template we get the full insight into what goes on during the creative process of html email design.
Moda in Pelle, a UK based boutique store has grown exponentially since the opening of their first shop in the mid 1970's.
Branching into eCommerce, their regular newsletter highlighted new products and sales throughout their stores and webshop, but the feeling was that it needed to be brought in line with the company branding and ethos.
The newsletter editor wanted a way to easily and quickly produce a professional looking, 'on-brand' message that was also consistent across mailings.
A key benefit to the initial consultation phase was they had already spent time considering the information they would want to convey in their future messages. With this information accompanied by examples of inspirational mailers, we got started with the design process.
Building stability in structure
Due to the limitations of how previous emails were produced, layouts could end up running quote long and wide. As a result of a structure that was only defined in fairly simplistic ways messages could turn nasty.
By looking at the future content plans, we were able to construct a grid structure which could later be converted into html tables during the build process. This allowed for more compact and rigid emails, applying a fixed width to keep everything in order.
The only imagery in previous emails were the company logo, on occasion basic banners.
Where the template design could come into its own was to create an aesthetically pleasing message that was then enhanced, rather than defined by its visual content.
To do this we took design elements from the website along with emails Moda in Pelle liked had taken inspiration fromand produced a more visually appealing design.
This also needed to fit in with their multi-channel marketing materials.
Applying a safety net
We wanted to add elements to the message to increase site visits even if the message content wasn't of immediate interest for the viewer.
Part of this was to include the navigation bar from the website. This allows readers to easily visit pages on the site if the specific items advertised weren't exactly what they were looking for.
Following the Trend
By following the typography styles set within the site and other cross platform marketing resources along with the already defined colourways, we were able to keep a visual association with the brand.
The use of horizontal rules and clean headers enabled the content to be broken into manageable rows. As well as making the content easier to digest, it also allowed for the visual division of content regions.
By provided guidelines for banner dimensions and positioning, highlighted content could be further emphasised and was no longer lost in the wash of information previously witnessed.
Tone of Voice
Even the little things should be 'on-brand' so we had to consider this when designing some of the functional features of the template such as online version links, send-to-friend and optout statements.
Whereas many templates would suit a generic straight-forward link to these pages, with Moda in Pelle's more friendly, feminine approach, we tailored the text to match their approachable stance.
We felt these would engage the reader and in a small way encourage them to keep receiving emails, feeling that there is more to Moda in Pelle than just sales.
Producing content fast
Beyond the design stage we recognised the importance of helping the newsletter creator with keeping a good working structure to the email. It is all too easy to provide somebody with a proof of concept only for it to be lost at the point of construction.
To ensure that what the client signs off on is what they send out each and every time we utilise html snippets. These snippets contain repeatable content blocks such as a product row or news block. This allows the end user to quickly copy and paste default content rows into their email template and modify as required with their default editor.
This ensures that the colours, font face and sizes correlate throughout messages further establishing the look and iconic branding established by the client.