Responsive Design Guide. The fundamentals of designing and building mobile optimized

Transcription

1 Responsive Design Guide The fundamentals of designing and building mobile optimized

2 With the rapid increase of smartphone and tablet adoption, mobile opens are growing exponentially every day. Responsive Design is a must-have for today s digital marketer to ensure the best user experience, and consequently, to drive engagement and sales. Here is the info you need to get started. What is Responsive Design? Responsive Design is a sophisticated coding technique that provides: One HTML. One layout that adapts to different devices and screen sizes. Flexibility to show the same content, or restrict the amount of content shown, on a small mobile screen without having to build two separate s. Effi ciency gains, after initial rework. The optimal viewing experience for the users. What s In It For Your Customers? The campaign renders the best way for their devices. With Responsive Design, you don t have to create multiple versions of your to render on multiple devices. The links, buttons, and calls-to-action are suited to thumb-clicking as opposed to mouse-clicking. On a mobile device, they don t have to pinch and zoom to understand the message. They can open the same on a desktop and it renders as originally designed for the larger screen.

3 Why Should You Invest? We are experiencing a mobile revolution! More than 100 million smartphone users in US 88% of users check mobile every day More than 1/3 of s worldwide are opened on a mobile device 63% of Americans will immediately close or delete an not optimized for mobile. 78% of young people, ages12-17, have cell phones, and more than half of those are smartphones In today s digital world, making your display optimally on mobile devices is just as important as ensuring it can be read in long-standing clients like Outlook and Gmail. In fact, mobile client usage is soon expected to surpass both that of webmail and desktop clients. Providing a sub-optimal reading experience on the small screen will eventually have an impact on the majority of your subscribers. Can you really afford not to address this? Sources: emarketer, Return Path, Litmus, Pew Internet & American Life Project Responsive is moving the needle for our clients. 66% Improvement in click through rate Global Financial Services Company Increase overall click rate, revenue per and click to conversion rate Global Technology Company Im- 11% Lift in clicks 100% Lift in conversions Entertainment Company 12% Increase in mobile unique clicks Members-only shopping site

4 Start with the Basics... Mobile Optimized Design Legibility Use large fonts (14px for body copy and 22px for headlines) Carefully consider color choices for good contrast of text vs. background. Consider a single column layout and trimming your s to px wide so the user doesn t have to side scroll. Touchability Increase font sizes, line spacing, button sizes and white space to enable finger tapping. To avoid clicking errors, try not to make links close to the edge of the screen or to each other. If applicable, link the product, the name and the call-to-action (CTA) for more clickable areas. Don t be afraid to make your calls-to-action big! Relevance Hide inessential elements such as links, copy and and images to reduce visual clutter. Make calls to action large and limit other options. Consider the hierarchy of your content and keep it short and to the point. Make sure the landing pages are mobile-friendly too.

5 What Can be Done in Responsive? We use several techniques to optimize the experience for mobile recipients including updates to design, layout, and content. CSS media queries are added to the to detect screen size and give specifi c instructions on how to display for devices under 480px wide. Headers and footers can be modified Most mobile devices are touch screen, and it s much easier to touch a large button vs. a small text link. Text links can be made into larger buttons to improve the users experience. We can change the color, size, box radius and font style of the button. Text based Footer Links New Footer Links Desktop version Footer links are too small to read and click Responsive version Larger thumb-friendly buttons

6 Layouts are flexible A 3-column viewed on a small screen will usually mean the content is very small. By re-ordering the content into one column that stacks, it has more space, making it easier to read and interact with. Desktop version 3 column layout would be hard to read when re-sized Responsive version Stacking the layout keeps products the same size Design elements can change Elements can be swapped, hidden, resized or changed. In some instances elements such as images or text can appear in a mobile device even though they are not on the desktop version. Mobile-friendly navigation that is easier to finger tap Mobile friendly message with large call to action gets straight to the point Large cross-sell modules are swapped out with stackable and easy to understand text based messaging Desktop version Responsive version

7 Responsive Considerations and Design Solutions Many decisions need to be made in the design phase for optimal responsive design including: What to show and hide Users don t need to see everything when viewing on a mobile device. If possible, make sure that they can see your main messaging without having to scroll. Keep only essential information, especially above the fold (top 480px). Full Navigation Keeping the existing navigation bar takes up over 50% of the available space on a smaller screen. Half Navigation By optimizing the navigation bar for mobile use, more of the content is visible within the preview pane. No Navigation By removing the navigation bar, the voucher code and lead offer can both be seen within the preview pane. How to stack your layout Right content needs to display under left if splitting columns. Start with a design of 640px wide and split into two 320px width columns. Use guides of 50% of your designs and always consider how the right would look under the left. Avoid overlapping images and work in a grid. 4 column layout makes content small Split columns allow content to stack 2 on 2 Desktop version Responsive version

8 Designing with Responsive in mind Responsive Design isn t as simple as taking an and tweaking a few lines of HTML. There are many design considerations that need to take place first. ALWAYS think about how your design elements will look on a small screen and how they will stack on top of each other. POOR DESIGN DESIGN IMPROVEMENTS Poor contrast of text Overlapping content makes it hard to cut in half Small button is hard to reach and tap 50/50 split is ignored Gradient background will look off when split Improved contrast Removed overlapping Enlarged button 50/50 split respected Removed gradient Using multiple links in an image Image maps will not work in Responsive so in order to have a large image include multiple links, it will involve sophisticated responsive coding. Some simple solutions include having a module link to one single page, designing in a way that the links can be stacked, or using a template where the links are in the same place every time so you don t have to constantly recode it. Overlapping of elements make it hard to stack Multiple call to actions means links to different pages Template will likely not be the same every month Sliced images must add up to 320px when they are resized for mobile making coding difficult

9 Are You Ready to Get Started? Some things to consider: Do you have the stats? Understand what share of your opens and clicks are happening on a mobile device. Do you have a streamlined campaign production process? Get smart about baseline production use wireframes, fi nd effi ciency. Update HTML in the master wireframe and don t reinvent the wheel every time. Do you have the HTML talent? Your creative team and HTML developers will have to work hand in hand to for optimal display. If you don t have the talent, you have a team of experts at e-dialog who can make it happen. Do you have a proper test plan? Isolate the subscribers who ve shown a mobile propensity. Conduct an A/B test of business-as-usual vs. mobile optimized. Do you have buy-in? Make sure all stakeholders in your organization understand the commitment and potential upside to responsive. Next Steps If you feel that Responsive Design would benefit your business, please call or USSales@e-dialog.com