portvilla.blogg.se - Responsive email for gmail tutorial

Responsive email for gmail tutorial how to#

With more people than ever opening emails on their mobile devices, it’s time that we take a critical look at our design approach and examine the process for creating great email experiences, regardless of screen size.

Responsive email for gmail tutorial how to#

But many of us are still in the dark about how to apply those principles to HTML email design. The math’s pretty easy on that one - a whopping 500% increase!Īs user experience designers, we’ve all seen how Responsive Web Design (RWD) techniques and a “mobile-first” approach have modernized websites over the last four years.

So how do we, as UX professionals, fix problems like these in our emails? How confident are we that it’s even worth our time to address HTML email problems on smartphones? Case in point: in the company’s 2014 year-end review of email client market share report, Litmus reported that email opens on mobile devices rose steadily from 8% in 2011 to 48% in 2014.

The spacing between the tap targets is unconscionable so when you try to tap one thing, you end up tapping three things.

The tap targets are way too small for your giant fingers.

The text is so tiny, you either zoom way in (and then you have to drag left, right, up and down to see the rest of the text) OR you get your reading glasses.

An overlapping mess of graphics, text and icons greet you and you immediately think “unsubscribe” and/or “delete.”.

If you’re a smartphone user, you’ve probably experienced the frustration of opening an HTML email on your device and having one or more of the following things happen: How to Quickly Wireframe & Prototype a Responsive EmailĮver wondered how to design the perfect email template for any device? We’ve got you covered with this practical piece that explains a mobile-first approach to email design.