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.

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