Home » Magento News » Useful guides for email templates and Magento website

Useful guides for email templates and Magento website

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.



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.

Call to action buttons - Call-to-action buttons will increase click through rate of your email, these buttons often comes with colorful design and interesting text.

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.

2. 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.

Source: magentocommerce.com

About Gareth

Gareth is an editor at Tutorial Magento. His special hobby is to share magento knowledge and experience with everyone.


  1. avatar

    I am specially interested in mobile touch points. Ad you know, mobile commerce is now the hot trend. Having a responsive website and a Magento mobile app will help you catch the trend and boost sales.

  2. avatar

    Outstanding internet site. Plenty of helpful tips right here. Now i’m transmitting the idea to many close friends ans as well giving with delicious. And of course, thanks a lot with your sebaceous!

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Scroll To Top