Responsive email

‘A slice of Slimming World’

• Project published: August 2014
• My role:
  • content development
  • UX & visual design
  • code & testing

The brief for this project was to design and build a responsive email to keep Slimming World Online members informed of updates to the subscribers area of the site.

Liasing closely with the site content team, I developed and iterated the design, adding features such as the in–page anchors in the header to act as a table of contents, and working with the theme of ‘a slice’ to break the main image out of the layout grid as shown in fig. 1 below.

Code & test (& rinse & repeat)

I used the Ink Framework from Zurb as a basis for the CSS. This was heavily customised during the development process.

Some aspects of the original design proved very difficult or impossible to reproduce with the level of precision and cross–client support required, so some compromises had to be made.

I didn't enjoy the build for this project — the convoluted markup needed to make an email work responsively is completely at odds with my prefered coding style of clean, structured, semantic markup. I am, however, quite pleased with the end result.

Sample rendering