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.





image

Back Older article Newer article

New theme released

Responsive Magento Theme - Gala Marcos

A truly impressive Magento template for fashion store from Galathemes, Gala Marcos. It amazes visitors by modern and high-fashion look, and also, neat design.

Read more

Our services

Installation

Magento Custom Development

Magento is the most powerful eCommerce system offering rich customization possibilities by extensions and modules.

We offer custom extension development performed by our full-time Magento experts to ensure the custom extension developed follow Magento code standard, optimized and pass our quality tests.

Read more

design

Magento Custom Design

Design and development a custom Magento template for your Magento store. Our designers and developers are specialists in Magento Commerce and have strong experience in Magento projects.

We provide all design in PSD files, template package and sample data. We also help you install the theme on your store if required. We start your project instantly and with highest priority.

Read more

Magento Template Conversion

PSD to Magento Theme Conversion

PSD to Magento Theme Conversion is a leading strength of us. We have an intelligent process and experienced staff, so you will save much time.

We easily convert a store designs in PSD format into a fully functional Magento commerce template. Quick and convenient for you to create an online store based on Magento is through "PSD to Magento Theme Conversion" service. We bring the flexibility, user friendly modules, and the extensions to improve the functionality of Magento.

Read more

Development

Magento Site Development

We update our Magento knowledge everyday. Having an excellent knowledge on Magento design, Magento programming and server optimization, we guarantee your project get done perfectly.

We apply the philosophy of agile project management to ensure your project always performs on the right way, you'll get updates frequently, any changes of scope of project can be informed early to minimize risks, time and cost.

Read more

Optimization

Magento Server Optimization

We realy provide the best service for you. Among them are optimized for Magento server is very important. Your ecommerce shop will flexibility and agility absolute. Connecting with customers, processing speed, the gentle query and sensitive to the search engine is very easy

Read more