Newsflash: It’s 2016. Designing for desktop only is a sure-fire way to land your email in the trash and irritate your audience. Making emails that function as well on mobile as they do on desktop should be a standard practice for your team because scalability matters—particularly to hard-to-please Millennials, as we found out in our recent original research on Millennials and email.
We recognize two basic approaches when it comes to designing for mobile: mobile-friendly design and responsive design. We formerly would’ve put Fluid or Hybrid design in that mix, but it is quickly becoming irrelevant since Gmail has announced support for media queries.
What’s the difference? Let’s break it down…
A scalable design is readable and clickable no matter what environment it is being read in: mobile, tablet or desktop. There is only one version of the email and one layout, which is typically between 320 and 550 pixels wide. Design elements that typically come into play include:
- Touch-Friendly Links & Buttons – “U Can’t Touch This” is one song we hope would never be associated with our emails (however, we will steal a line from the Litmus Email Design Conference: “I Like Big Buttons & I Can Not Lie). This means bumping up the size for those “fat fingers.”
- Short, Direct Copy – People are more inclined to read headlines and bullets than huge blocks of text – especially on a small screen.
- A Clear CTA – The CTA button should be one of the easiest things to find and its text should entice even those who skipped over the body copy. For example, “See the Benefits” could be better than (God forbid) “Click Here.”
- Increased Font Sizes – Going right along with the need for short copy is a need for easily legible font sizes, with 14 pts being a standard minimum.
- A One-Column Layout – A phone’s smaller screen width, no stacking will be needed. And keep in mind what you want at the top because the next element you need in your mobile email is…
- A Content Hierarchy – If your email has a lot of info to impart, establishing a hierarchy for it should be a top priority.
A responsive design uses a media query, a special set of CSS styles. Media queries detect the screen size of a device and then “turn on” different sets of rules based on that screen size. They require more planning and testing than standard emails and won’t necessarily work in all email clients but fortunately, as of this past September, Gmail is no longer one of those clients!
Want to learn more about the Millennial email mindset? Join us and some of our closest email-obsessed pals for a Millennial-focused webinar on October 26 (less than two weeks!) entitled Millennials + Email: How to Engage Email Natives. We’ll be presenting some useful survey results plus tips for program cadence, frequency, creative and testing alongside top experts from Email on Acid, Fluent and Oracle.