Cerberus – Responsive Email Patterns

If you ever got to code an email, you are aware what a dreadful experience it is. It became even worse when the RWD (responsive web design) became so popular and widespread. You have to bear in mind the popular mobile devices and also the most used email clients. Most designers hate doing emails as it is a really tiresome task and when you start testing, you wish you never accepted doing them.

There are already some solutions for responsive email templates that look good on mobile devices and in most popular email clients such as Zurb and Internations. There are also many designers that try to make the nightmare of coding emails into a pleasant experience by creating responsive patterns.

Cerberus is one of the ways you can choose to create emails. It is offers some very simple but solid and tested patterns for responsive HTML emails. The best news is that they look good even in Outlook.

Cerberus - Responsive Email Patterns

Here is what the author says about Cerberus:

“It’s just a few responsive email patterns that go a long way. The code blocks are compartmentalized so that they may be used, reused, and nested to build an email. Everything has good email client support, including Outlook, Android, and even mobile Gmail.

There are two templates, one that relies media queries and one that does not. “

template-default.html

wireframe-default

View Demo

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

This template relies media queries to force table columns into rows and shrinks images, all while maintaining the layout’s spacing, padding, and alignment.

 

template-fluid.html

wireframe-fluid

View Demo

This template focuses on one layout that looks good on all screen sizes. Good for when media queries aren’t available to detect device size and reconfigure the layout.

DOWNLOAD


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *