Responsive email design for Château Bauduc

Responsive email design for Château Bauduc
May 10, 2012 Rhys Harry

We’ve been helping Gavin Quinney, owner of Château Bauduc & producer of a cracking drop of Bordeaux, with email marketing for nearly 4 years. With mobile email browsing predicted to overtake desktop before too long we agreed it was time to review Bauduc’s email newsletter design.

Chateau Bauduc Responsive email design

Platforms

Similar to techniques used for responsive web design (read our article here), we intended to deliver different levels of content across the 2 platforms. The key for mobiles is to strip out anything superfluous, any images & graphics that aren’t essential to the content have to go.

Getting skinny

Bandwidth has a hand in losing images on mobiles – not everyone will have a WiFi connection let alone 3G. Physical width is the other factor. We coded the email to shrink from 600 pixels wide to 300 for mobiles, this combined with hiding article photos allows the text to display clearly as you can see when compared to its older brother.

Chateau Bauduc Responsive email design

 

The result is an email newsletter that looks great no matter where it’s opened. You can see it online here – take a look on desktop & mobile to see how it changes.

If you’re interested in Bauduc wines (the house bottles at Rick Stein & Gordon Ramsay’s restaurants) why not subscribe to Bauduc news on their website.

2 Comments

  1. Michael Guthrie 7 years ago

    Interesting post. How are you targeting the two platforms? And how does it look on outlook?

    • Author
      Rhys 7 years ago

      Hi Michael, we used css to alter the layout on smaller devices, in particular the declaration ‘@media only screen and (max-device-width: 480px)’. If you look at the source code of the online version linked in the post above you’ll see the relevant code.

      In regard to Outlook, it looks as good as can be expected. We keep email newsletter layouts relatively simple to ensure that obstructive but widely used software such as Outlook doesn’t break the email into something hideous. Having said that, some of the really old software used by one or two people has no hope with html emails but there has to be a cut off point otherwise we’d have to send nothing but plain text emails.

      You can see the screen tests (including Outlook) & spam filter results for this email here.

Leave a Reply