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

DESIGNING FOR MOBILELunch & Learn Series | February 20, 2014

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

mailto:[email protected]

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)


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.


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


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


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


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


9


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


10


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


11

RESPONSIVE WEBSITE DESIGN2014 Medical Innovation Summithttp://summit.clevelandclinic.org


http://summit.clevelandclinic.org/

12

RESPONSIVE WEBSITE DESIGNCleveland Clinic Landing Pageshttp://www.clevelandclinic.org/lp/hearing-loss/


http://www.clevelandclinic.org/lp/hearing-loss/

http://www.clevelandclinic.org/lp/hearing-loss/

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


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)


15

ADAPTIVE WEBSITE DESIGNCleveland Clinic Samson Global Leadership Academyhttp://www.samsonexecedconnect.org


http://www.samsonexecedconnect.org/

16

ADAPTIVE WEBSITE DESIGNMarc’shttp://www.marcs.com


http://www.marcs.com/

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?


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?


19 Tweet Us with #HilemanGroup

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

Documents