Hot Rum Cow
When we see responsive email designs in the wild, it makes us happy. But when we see an email that’s not only looks great on mobile devices, but also covers some of my personal loves (cocktails and magazines that smell like books), then two words come to mind - ‘gallery worthy’.
This announcement for Hot Rum Cow magazine, designed by White Light Media and built by Binary Vein is a by-the-book example of responsive design in practice. As Adam at Hot Rum Cow explains:
The ‘Twitter Mobile Makeover’ in the Guide to Responsive Email Design really did it for me. It assured me that if we built a responsive website, we also needed responsive emails. It also had me interested in code all of a sudden - not my usual day’s work.
Despite being ‘not a usual day’s work’, this design shows mastery over mobile tricks and techniques, including code to prevent phone numbers and addresses from turning blue. The source code is well worth a look if you’re interested in what it takes to build a mobile-optimized design from the ground up.
Overall, the warm colours, great imagery and code that makes up this design makes me feel as good as a sip of hot toddy… Cheers, guys and gals!
Designed by
White Light Media
Posted by Ros Hodgekiss
30th August
Sorry mates, but I don’t see the responsiveness at all… How does it adjust to different screen sizes? :/
30th August
Hey there Robert, if you were to receive this newsletter on your mobile device, you would likely see a version that’s optimized for its small screen dimensions. Be sure to check out our Guide to Responsive Email Design to see more examples and find out how this is done :)
30th August
Thanks for the mention Ros. Working on the next one now too.
30th August
do u know what typeface is used for “newsletter” ? ^^
31st August
Hey there Proov, you’ll find that Georgia is used for headings and Arial for body text :)
15th September
i recently coded set of responsive email templates,plz check out here
http://www.mojo-themes.com/item/shopmail-product-offer-responsive-email-template/
As discussed above i used various techniques for mobile optimization such as Attribute selectors for writing css for media queries, code to prevent phone numbers and addresses from turning blue