Download Designing for Mobile

DESIGNING FOR MOBILE
Lunch & Learn Series | February 20, 2014
DESIGNING FOR MOBILE
Danielle Weiss
Sr. User Experience Designer / Design Team Lead
[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
2
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)
Tweet Us with #HilemanGroup
3
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.
Tweet Us with #HilemanGroup
4
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
Tweet Us with #HilemanGroup
5
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
6
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
7
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
Tweet Us with #HilemanGroup
8
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
9
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
10
RESPONSIVE WEBSITE DESIGN
2014 Medical Innovation Summit
http://summit.clevelandclinic.org
Tweet Us with #HilemanGroup
11
RESPONSIVE WEBSITE DESIGN
Cleveland Clinic Landing Pages
http://www.clevelandclinic.org/lp/hearing-loss/
Tweet Us with #HilemanGroup
12
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
13
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
14
ADAPTIVE WEBSITE DESIGN
Cleveland Clinic Samson Global Leadership Academy
http://www.samsonexecedconnect.org
Tweet Us with #HilemanGroup
15
ADAPTIVE WEBSITE DESIGN
Marc’s
http://www.marcs.com
Tweet Us with #HilemanGroup
16
DESIGN APPROACH
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
17
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
18
Tweet Us with #HilemanGroup
19