Responsive Design: Quick Guide for Email Templates and Websites

Studies show that more than half of emails were opened on a mobile device in the first half of 2013 and eMarketer predicts that eCommerce sales from tablets and mobile devices will reach almost 25% by 2017. However, seven out of ten recipients will delete an email if it doesn’t look good or work well on their tablet or smartphone, and the same goes for websites. Clearly, it’s time to consider responsive design for email marketing and eCommerce websites. The following is a quick guide for making the most important elements of your emails and website responsive.

Click the image to expand.

Email:

image

Content as a Grid - Layouts change depending on screen size, so think about how content can be rearranged into a grid of moveable parts that will make sense in any layout.

Font Size - Make sure text in an image doesn’t scale down so much that it’s impossible to read, and always choose fonts that are clear and easy to read.

Subject Lines and Pre-header Text - Email inboxes on smartphones show sender or company name, subject line and pre-header text. Subject lines, while important, get cut off if they’re too long, so use the pre-header text to really engage and entice the recipient.

Navigation - Website navigation or menu links in emails typically don’t get a lot of clicks, so move them to the bottom of the message and stack neatly in easy-to-click buttons.

Design for Thumbs - It’s been reported that nearly one-third of all mobile click-throughs are made by accident, so think both about how mobile emails look, and how recipients will interact with them. Design to avoid accidental clicks, but also be sure buttons, links and other tap targets are large enough for fingers and thumbs to deliberately click on, and that there is enough padding around tap targets so users click on the correct link.

Website:

Mobile in Mind - Starting designs with a 'mobile first' mindset is recommended when you have more mobile than desktop traffic. Design for the majority first, while supplying viable options for the smaller percentage of users.

Context - A common misconception is that you have a mobile user’s attention for only a fleeting moment. The truth is that people use mobile and tablet devices in a variety of contexts, so it's important to deliver consistent content across all mediums.

Mobile Touch Points - Studies show thumb usage on phones and tablets and the range where the most action happens. Don’t put important action items in a dead zone like the top center of a tablet, and leave a 40x45px area around all buttons and links to prevent accidental clicking.

Load Times – Assume that many users will be looking at sites on 56k modems (desktop/tablet) or slow 3G mobile networks (smartphones). It’s a collaborative effort between developers and designers to reduce complexity and weight on mobile devices, but trimming down javascript and following best practices for front-end development will help load times.

Feature Detection - While you should design and build your site to be device agnostic, you can still take advantage of the unique abilities mobile and tablet devices have over desktop counterparts—such as location-based GPS, accelerometer and multi-touch—to enhance the user’s shopping experience.

To learn more about how your Magento Enterprise Edition website and emails can benefit from responsive design, join Listrak and O3 World for a free webinar, Reaching Holiday Shoppers with Responsive Design.


RSS: This Entry| All Blog Posts (RSS)