designing for mobile lunch & learn series | february 20, 2014
TRANSCRIPT
2
DESIGNING FOR MOBILE
Danielle Weiss
Sr. User Experience Designer / Design Team [email protected]
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
Tweet Us with #HilemanGroup
3
MOBILE WEB PRESENCEWhy 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)
Tweet Us with #HilemanGroup
4
MOBILE WEB PRESENCEWhy 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.
Tweet Us with #HilemanGroup
5
MOBILE WEB DESIGN STRATEGYProvide an Improved User ExperienceThe 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
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
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
Tweet Us with #HilemanGroup
8
ADAPTIVE WEBSITE DESIGNWhat 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
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
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
Tweet Us with #HilemanGroup
11
RESPONSIVE WEBSITE DESIGN2014 Medical Innovation Summithttp://summit.clevelandclinic.org
Tweet Us with #HilemanGroup
12
RESPONSIVE WEBSITE DESIGNCleveland Clinic Landing Pageshttp://www.clevelandclinic.org/lp/hearing-loss/
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
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)
Tweet Us with #HilemanGroup
15
ADAPTIVE WEBSITE DESIGNCleveland Clinic Samson Global Leadership Academyhttp://www.samsonexecedconnect.org
Tweet Us with #HilemanGroup
16
ADAPTIVE WEBSITE DESIGNMarc’shttp://www.marcs.com
Tweet Us with #HilemanGroup
17
DESIGN APPROACHWhich 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
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