Designing for Mobile - Hileman Group Lunch & Learn Series
Download as PPTX, PDF0 likes329 views
The document discusses the importance of having a mobile web presence, emphasizing that the smartphone market has surpassed that of PCs and that a significant portion of consumers use smartphones for web access. It compares responsive and adaptive website design strategies, highlighting their respective advantages and challenges in creating optimal mobile experiences. The key takeaway is that establishing a mobile web presence and developing a tailored design strategy based on user needs and analytics is essential for organizations aiming to connect with their audience effectively.
Designing for Mobile - Hileman Group Lunch & Learn Series
- 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 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 2Tweet 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) 3Tweet 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. 4Tweet 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 5Tweet 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 6Tweet 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 7Tweet 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 8Tweet 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 9Tweet 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 10Tweet Us with #HilemanGroup
- 11. RESPONSIVE WEBSITE DESIGN 2014 Medical Innovation Summit http://summit.clevelandclinic.org 11Tweet Us with #HilemanGroup
- 12. RESPONSIVE WEBSITE DESIGN Cleveland Clinic Landing Pages http://www.clevelandclinic.org/lp/hearing-loss/ 12Tweet 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 13Tweet 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) 14Tweet 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. DESIGNAPPROACH 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. 19Tweet Us with #HilemanGroup
Editor's Notes
- #6: Improved User Experience - Mobile websites are specifically designed for handheld devices - nobody wants to browse a desktop website on their smartphone! By designing your website specifically for smartphones and other mobile devices, we can make it as easy as possible to use your site, read your content, or make purchases. Mobile usability is a huge factor in improving the user experience and make a positive impression with your audience when it counts. Determine user needs for a mobile environment vs. desktop environment: are the needs of your users the same or have they changed when it comes to the device they are using? What are the main tasks a user is likely to complete when on a smartphone vs a desktop computer? Not sure? Analytics and User Research can help play a bit part in answering these questions and determining a mobile design strategy Make sure your mobile site is easy to navigate on a mobile device; especially a smartphone. Design Page structures support mobile usability; think about how this differs from desktop to tablet to smartphone; smartphones – typically one column; consider portrait and landscape view on a phone Content strategy is appropriate for a mobile environment; consider the length of copy, image and video sizes; should your message be different for your mobile audience vs. your desktop audience? Should it be prioritized differently? Is the voice and tone of your content consistent with your overall brand? Visual design of the mobile site supports your online brand? Is it engaging – does it look profession and portray your brand? Does the visual design also aid mobile usability – links are easily recognizable; font size and face are easy to read on a mobile device?