1. DESIGNING FOR MOBILE Lunch & Learn Series | February 20, 2014

2. DESIGNING FOR MOBILE Danielle Weiss Sr. User Experience Designer / Design Team Lead dweiss@hilemangroup.com dweiss@hilemangroup.com What we’ll cover… Importance of a Mobile Web Presence Mobile Website Design Strategy Responsive Design vs. Adaptive Design Which approach is right for you? Questions 2 Tweet Us with #HilemanGroup

3. MOBILE WEB PRESENCE Why is a mobile web presence important? Because mobile is important to your target audience. The smartphone market is now larger than the PC market. 56% of American adults are now smartphone owners. (Source: Pew Internet & American Life Project, 2013) 55% of mobile owners access mobile web (Source: Pew Research Center, 2012) 53% of American consumers use their smartphones to access search engines at least once a day (Source: Google and Mobile Marketing Association Survey) 66% of Americans ages 24-35 own a smartphone (Source: Nielsen, 2012) 3 Tweet Us with #HilemanGroup

4. MOBILE WEB PRESENCE Why is a mobile web presence important? Competitive Advantage The mobile web is no longer a concept – it's a mainstream reality that will impact any organization that aims to communicate with target audiences online. 4 Tweet Us with #HilemanGroup

5. MOBILE WEB DESIGN STRATEGY Provide an Improved User Experience The ease with which a mobile user can navigate site features and use mobile websites influences overall engagement. Determine user needs for a mobile environment vs. desktop environment Design site navigation and page layouts that support mobile usability Content strategy is appropriate for a mobile environment and supports message architecture Visual design supports your online brand, is engaging, and aids usability 5 Tweet Us with #HilemanGroup

6. RESPONSIVE VS. ADAPTIVE What’s the difference? Before we can compare the advantages and disadvantages of the two it’s important to understand the key differences. Both methods aim to provide your users with an optimal mobile experience Users who access your websites through their mobile devices really do not care what method you use The difference is how the mobile solution is developed 6 Tweet Us with #HilemanGroup

7. RESPONSIVE WEBSITE DESIGN What is Responsive Website Design? Website design approach that aims to optimize the viewing experience across a wide range of devices from desktop to smartphones. One website for all devices – desktop, tablets, smartphones Reformats the page layout per screen resolution Ideal for sites with less complex functionality and high volume of content 7 Tweet Us with #HilemanGroup

8. ADAPTIVE WEBSITE DESIGN What is Adaptive Website Design? Adaptive design detects specific devices to provide the user with a separate mobile website. Like responsive design, it also aims to optimize the user’s viewing experience. Separate website for desktop and mobile devices Detects the user’s device, not screen resolution Ideal for websites with high amount of functionality 8 Tweet Us with #HilemanGroup

9. RESPONSIVE WEBSITE DESIGN Advantages of Responsive Website Design Excellent mobile design solution for landing page campaigns, information rich microsites, or smaller content-heavy websites Quick and easy to maintain web content for all devices Cost-effective mobile design approach, if implemented at the same time as full website build 9 Tweet Us with #HilemanGroup

10. RESPONSIVE WEBSITE DESIGN Disadvantages of Responsive Website Design Not a custom mobile experience - site structure and page layout is limited due to various screen resolutions Not able to customize message or content to a mobile audience Loads all website content; can cause slower performance speeds Need to rebuild entire site to implement 10 Tweet Us with #HilemanGroup

11. RESPONSIVE WEBSITE DESIGN 2014 Medical Innovation Summit http://summit.clevelandclinic.org 11 Tweet Us with #HilemanGroup

12. RESPONSIVE WEBSITE DESIGN Cleveland Clinic Landing Pages http://www.clevelandclinic.org/lp/hearing-loss/ 12 Tweet Us with #HilemanGroup

13. ADAPTIVE WEBSITE DESIGN Advantages of Adaptive Website Design Allows for a custom mobile experience: Separate mobile site structure (navigation) Mobile-specific page layouts/templates Mobile content strategy: custom tailor your message to a mobile audience Do not have to rebuild full desktop site to implement Only loads device specific resources (smartphone, tablet, laptop); Results in increased performance Excellent mobile solution for large sites with a vast amount of information and high functionality; provide only what’s important to mobile users 13 Tweet Us with #HilemanGroup

14. ADAPTIVE WEBSITE DESIGN Disadvantages of Adaptive Website Design Requires more time to maintain mobile site content (two separate websites vs. just one) May require the highest level of investment (case by case) 14 Tweet Us with #HilemanGroup

15. ADAPTIVE WEBSITE DESIGN 15 Cleveland Clinic Samson Global Leadership Academy http://www.samsonexecedconnect.org Tweet Us with #HilemanGroup

16. ADAPTIVE WEBSITE DESIGN 16 Marc’s http://www.marcs.com Tweet Us with #HilemanGroup

17. DESIGN APPROACH 17 Which design approach is right for you? The tactic used to develop your mobile website should be inline with your design strategy. Determine the goals of your mobile website What are you trying to achieve through a mobile website? Does your website provide complex functionality or mostly static content? Evaluate your current site’s analytics What mobile devices are currently accessing your full website? Which pages are they visiting on mobile devices? What percentage of your users are coming from mobile devices? Consider your site’s audience What do your users need from your mobile website? Tweet Us with #HilemanGroup

18. CONCLUSION 18 Key Takeaways… Establishing a mobile web presence is important Developing a mobile web design strategy should be your first step Your strategy should be built on analytics and user research Responsive and adaptive design methods are not one-size fits all approaches Users don’t care how you do it, they just care that you have a mobile optimized website that is easy to use. Questions? Tweet Us with #HilemanGroup

19. 19 Tweet Us with #HilemanGroup