The Metia Newsletter

Following on from my previous blog, we sent out our monthly client newsletter this week, which used responsive design. The newsletter can be found here.

It took a lot of website scouring, twittering and dissection of other emails’ code. Oh and good ol’ blood, sweat and tears!

The main changes from desktop to mobile:

• Layout – two column layout changes to one
• Images – square image on desktop changes to a cropped letterbox version on mobile, taking up less screen space.
• Social Buttons – at the top the buttons grow in size, at the bottom they rearrange to fit text better.
• Text Size - all text grows larger for mobile.
• View in browser – this link is dropped from mobile version.

(You can resize in your browser to see these changes)

Being the proud owner of a Samsung S3 I’d noticed a lot of emails that claimed to be responsive but which didn’t work on it, so I made it my priority to make the newsletter work on S3 and iPhone (the two biggest selling handsets). It does. At the small sacrifice of some other handsets. Going forward I’ll be working on enlarging the circle of handsets it works on –  and including  tablets in the mix.

If anyone’s got any tips they’d care to share (especially for Windows Phone devices) please leave them in the comments below! (NB A tip for Samsung, take a look at max-width instead of max-device-width)