1. GO MOBILE. GO RESPONSIVE

2. 185 mil mobile internet users in India <35yrs Values convenience more 17% Check email on Smartphone India Statistics on Mobile Internet users in India 3G Users Actively using internet Indian population on mobile and other devices Source: IAMAI, Nielsen Report, 2013

3. Users opening emails on mobile 30% of emails were opened on Mobile in Quarter 1 2014- 15 45% Expected by end of 2014 What we noticed Brands say - Approximately 35% of website traffic is from Mobile devices Source: netCORE Laboratory

4. Delete emails if they are not mobile compatible How do users react to emails that are incompatible? Out of every 100 potential buyers in India, 21 users delete emails for want of clear content visibility Source: Consumer Views of Email Marketing, 2012

5. What it means for marketers? Out of 5,00,000 opens, 1,05,000 delete your emails Out of 1,00,000 opens, 21,000 delete your emails Out of 10,00,000 opens, 2,10,000 delete your emails

6. Designing emails such that they are easily readable on every device available (mobile, tablet, laptop and desktop) What it responsive email design? When responsive code is embedded, the email identifies a device’s screen and display size and renders the appropriate layout

7. Desktop view

8. Tablet view

9. Mobile view

10. 3 Key elements of Responsive email design 1 Flexible Layout 2 Flexible Images 3 Media Queries

11. Flexible layout: Creates a grid framework by positioning and laying out the margins and spacing. 1. Flexible Layout Changing layout based on the screen width Desktop: 3 columns Tablet: 2 columns Mobile: Single column scroll down Columns laid out such that text is easy to read Regardless of the device on which the email is read, vital information has to remain visible

12. Flexible images: This feature allows you to scale images to load efficiently across all devices. 2. Flexible Images Problem Images are not naturally fluid and may be cut off or displayed out-of-scale as the browser width narrows. Solution 1. Size the images in percentage rather than absolute pixel dimensions 2. Set the original width of the image as the max width (100%) so that the image does not scale larger than its actual size Result: Image adjusts to the screen size in proportion to the content Image 1 Image 2

13. 3. Media Queries Media Queries: Set of styles applied to the layout to re-position information to adapt to the screen size. Exampl e Making changes in the navigation of the email for better email experience The navigation from the top of the desktop is repositioned to the bottom in the mobile, giving each tab good visibility DesktopMobile

14. TIPS ON GOING RESPONSIVE

15. RESPONSIVE ON DIFFERENT DEVICES Desktop Tablet Mobile

16. RESPONSIVE ON DIFFERENT DEVICES Before Responsive design: iPhone scales its content down to make it fit to the device width Before Responsive design: Android maintains the set e-mail width and makes the user scroll horizontally for the content to be read iPHONE ANDROID PHONE After Responsive design: Email looks the same on both iPhone and Android phone

17. EASY TO CLICK CTA Minimum clickable area of 22X44 pixels for CTA Desktop Mobile

18. SCALE IMAGES

19. HIDE CONTENT Content hidden in the mobile view to improve user experience

20. REARRANGE PAGE ELEMENTS Don’t just hide content, change the display by rearranging the page elements

21. INCLUDE LARGE FONT Have large font to highlight

22. Not all rules of responsive design are supported by all mobile email clients. Older versions of desktop browsers, Android Gmail and Blackberry do not support media queries. Some challenges of Responsive Email Design

23. India will have more than 500 million mobile internet users by 2018 Morgan Stanley Report

24. Your customer is getting savvy.. Go responsive OR…

25. ..Go out of business

26. #1. If your emails are not responsive mobile customers delete your emails #2. The 3 key elements of Responsive email design are: Flexible Layout, Flexible Images and Media Queries #3. Use Table based layout and Inline CSS for all your Responsive html’s #4. Hiding and scaling content in mobile view makes it clutter free and gives user a better experience #5. Flexible layout is a must have when you are creating a responsive html Key learnings of today’s Webinar

27. _________________________________________________________________________________________________________ 8th Floor, Peninsula Towers, Peninsula Corporate Park, Lower Parel (W), Mumbai - 13 Email: sales@netcore.in | Phone: +91 22 6628 8403 | Missed Call: 022 6155 0888