Implementing Responsive Design for your Website – 8 Practical Tips
Recent studies show that more than half of emails were opened on a mobile device in the first half of 2013. According to eMarketer, a leading online researcher, eCommerce sales from tablets and mobile devices are expected to reach almost 25% by 2015. However, almost 7 out of 10 people will delete an email if it does not work well on their smartphone or tablet. The same thing holds true for websites. This clearly means that responsive design is here to stay and its high time you consider responsive design for email marketing as well as other eCommerce websites. To make your website responsive, it is recommended to make follow the following points:
1. Arrange the content as a grid. This means that you need to think about how your content can be arranged as a grid of moveable parts that makes sense in any layout regardless of the device used. This is because the layout ultimately depends upon the screen size.
2. While scaling down text in an image, make sure it doesn’t scale down too much. If this happens, then it will be difficult and nearly impossible to read the text. Hence, always choose fonts that are clear as well as easy to read.
3. When using navigation buttons or menu links in emails, you need to understand that these typically do not get a lot of clicks. Hence, you need to move them at the bottom of the message and arrange them in neat looking easy-to-click buttons.
4. Nearly one-third of mobile click throughs are made by accident, so design your links in such as way that they do not get clicked accidentally. Ensure that the tap targets on the phone screen have enough padding around, so that users are able to click on the correct link.
5. While designing for a mobile website, it is recommended to design for a mobile only website in case you have more mobile than desktop traffic. You need to design for the majority first, and also supply viable options for the smaller percentage of users.
6. It is advisable to put important action items in a zone where is can easily be accessed by the user’s thumb. However’ do not put important action items in a dead zone such as the top-center of a tablet.
7. It is best to assume that users will be connected to a slow connection. At the same time, it is best to use trimmed down java script and also follow best practices in order to make your front-end development amicable for faster load times.
8. Take advantage of unique mobile as well as tablet devices and make use of the additional features such as location based GPS, accelerometer, as well as multi-touch, so that you can greatly enhance the user’s shopping experience.