Responsive Design for Emails

With the explosion in mobile devices over the past few years it’s no surprise that mobile-first and responsive design have become the standard when building new web applications. And while users spend a considerable amount of time browsing the web and using apps on their mobile devices, they spend an equal or greater amount of time reading email.

But if you’ve subscribed to any number of newsletters or interacted with products / services that communicate via email, it’s quickly apparent that techniques for developing emails have failed to keep up with modern design and device requirements.

Last week Etsy posted this great article on creating responsive emails that actually work…

You get a mobile-oriented design on phones, a desktop layout on Gmail, and a responsive, fluid design for tablets and desktop clients.  It’s the best of all worlds—even on clients that don’t support media queries.

Check out the article for more details on how this technique works and try out the code which they kindly posted to GitHub:

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s