Extravision Blogs

3 different ways to design email for mobile

March 25, 2015

Providing a good user experience, not only for desktop but also for mobile is crucial to keep your subscribers happy and interested. There are a few different types of mobile design so here’s a little breakdown of the different approaches…

I see this in 3 levels:

Scalability, Simple – Design and build an email that works on desktop and mobile without having to do extra work.

Fluidity, Adaptable – Using percentage widths to adapt to screen size.

Responsive, Control – Combination of the above with ability to swap, change or hide content on mobile.

There are a few key things to keep in mind for your mobile design, whichever approach you apply.

• Use single column layout
• Keep width of email no wider than 600 pixels
• Use larger text
• Use larger CTA’s
• Keep copy short and sweet

Which approach do I go for?

Scalability

Just to clear the picture, what you see on your desktop email is what you see on mobile but ‘scaled down’ so I’d recommend any designs to comply with the above.

Why should I use this approach?

• Simple
• Time saving
• Testing the flow of mobile users
• Reliable across most mail clients and devices

Fluid design

A fluid design is similar to a scalable design but the email adapts to any screen size without ‘shrinking’ the content to fit simply by using percentage widths.

Why should I use this approach?

• Simple layout
• Text heavy – but do reduce it where you can
• Reliable across most mail clients and devices

Responsive design

Now with responsive design, you have more control over how your email displays on mobile. It could almost become 2 ‘separate’ designs.

Why should I use this approach?

• Majority of audience are mobile users
• Flexibility on desktop and mobile design
• You have most control of the layout
  • Multi-column-to-Single-column layout
  • Hide/show content
  • Change order of content
  • Change content
• Reliable across most mail clients and devices 

Finding the right balance

In the ideal world, a responsive template would set your campaign apart from competition. But simpler approaches can be just as effective and save over-complicating your processes.

You can get drawn into the ‘mobile world’ quite easily but there are still a decent amount of people viewing emails on their desktop machines. So check your audience and determine what your needs are before deciding on your approach.

Posted by Andrew Chau
Email Design, Tip of the month

No comments

Comments are closed.