Mobile/Tablet Design

prepared by:

Anthony Guerra

The Growth of Mobile/Tablet Usage

From Back Then to NOW…

• In 2007 consumers used desktop devices 175% more than they used mobile devices.1

• Since 2007 mobile device usage has increase by 375%.2

• In 2007 only 22% of the public used a cell phone to access the Internet.3

• Since 2012 mobile phone usage has grown by over 600 million people.4

Mobile Phone Users* 2012—2015

3.9

4.125

4.35

4.575

4.8

2012 2013 2014 2015

4.77

4.55

4.33

4.08

*Mobile Phone User indicated in Billion$.

The Growth of Mobile/Tablet Usage

From NOW Into the Future…

• From now until 2017 there will be over 600 million more people using a cell phone.5

• By the end of 2017 over 50% of the global population will use a smart phone as their mobile device.6

• By the end of 2015 88% of smart phone users will use their cell phone to browse the Internet (very close to desktop and laptop computers).7

• More than 80% of smart phone users spend time on apps. 26% of the 80% spend their time on social media apps.8

Mobile Phone Users* 2014—2017

4.4

4.6

4.8

5

5.2

2014 2015 2016 2017

5.13

4.95

4.77

4.55

*Mobile Phone User indicated in Billion$.

The Impact of Mobile/Tablet Usage on Web Design

Build to Conform…

Designers need to consider…

• Screen size of mobile device • Browser type9

• and Accessibility

TODAY it’s all about

Responsive Design

Making sure your website conforms to all screen sizes and devices.

Accessibility Barriers for People with Disabilities

Websites Should Address…10

• Information dependent on color • Image and type size • Alternate text • Form fields • Audio only information • Visual only information • Mouse only • Third-Party operability plugins • Alt text for links • Legibility • Animated content • Browser translation

Technologies Addressing Accessibility Barriers

Predictive Usability… (technologies developed to make using devices less dependent on physical interaction.)

• Technologies such as IndieUI11 will make usability predictable and scroll or click based on the users preferred preferences.

• WAI-ARIA12 addresses problems people might have in controlling a mouse.

• HTML5 is adding functionality to improve accessibility.

Non-Responsive Website Examples

Website Example 1: Simply the Best Catering www.simplythebestcatering.com

Non-Responsive Website Examples

Website Example 2: Catering to You www.cateringtoyouinlittlerock.com

Responsive Website Examples

Website Example 1: Rebecca Jean Catering www.rebeccajeancatering.com

Responsive Website Examples

Website Example 2: L’auberge de I Ill www.auberge-de-l-ill.com

Updating Your Website for the Future

Updating Your Catering Website for the User Experience:

• Responsive - conforms to all devices that are Internet ready.

• Use WordPress as a CMS for great flexibility and being responsive-ready.

• Alt Tags on images, videos and links. • Ensure that menu and booking

plugins are responsive as well.• Introduce methods for make booking and viewing the menu much easier on smaller devices. • Create offers above the fold.

References 1—3, 7—8. Bosomworth, Danyl. January 15th, 2015. Smart Insights. Mobile Marketing Statistics 2015. http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/ 4—6. N.A.. January 16th, 2014. eMarketer. Smartphone Users Worldwide Will Total 1.75 Billion in 2014 http://www.emarketer.com/Article/Smartphone-Users-Worldwide-Will-Total-175-Billion-2014/1010536 9. Routledge, Paul. October, 2013. JUMP. Thinking Responsively - Web design for a new generation of devices. https://www.wesayhowhigh.com/blog/thinking-responsively-web-design-for-a-new-generation-of-devices 10. Yesilada, Yeliz, Chuter, Alan & Lawton-Henry, Shawn. January 22nd, 2013. W3C - Web Accessibility Initiative.

Shared Web Esperiences: Barriers Common to Mobile Device Users and People with Disabilities. http://www.w3.org/WAI/mobile/experiences

11. Lawton-Henry, Shawn. October 3rd, 2012. W3C - Web Accessibility Initiative. IndieUI Overview. http://www.w3.org/WAI/intro/indieui 12. Lawton-Henry, Shawn. June 12th, 2013. W3C - Web Accessibility Initiative. WAI-ARIA Overview. http://www.w3.org/WAI/intro/aria.php

Images Page 4: Screen Size. iStockPhoto. http://www.istockphoto.com/vector/responsive-design-concept-49523428?st=4d1106d Page 5: Boy with Laptop. iStockPhoto. http://www.istockphoto.com/photo/school-kids-online-12304963?st=88f6e9c Page 5: Deaf Man Using Sign Language. iStockPhoto. http://www.istockphoto.com/photo/deaf-man-using-sign-language-on-the-tablet-52065754?st=f86b36d Page 6: Man with Laptop. iStockPhoto. http://www.istockphoto.com/photo/young-disabled-employee-working-35751268?st=e6dfb05 Page 7, 8, 9, 10: Mobile Screen Shots. MobileTest.me. http://mobiletest.me/ Page 7: Simply the Best Catering Screenshot. www.Simply the Best catering.com. http://www.simplythebestcatering.com Page 8: Catering to You. cateringtoyouinlittlerock.com. http://www.cateringtoyouinlittlerock.com Page 9: Rebecca Jean Catering. rebeccajeancatering.com. http://www.rebeccajeancatering.com Page 10: L’auberge de I Ill. www.auberge-de-l-ill.com. http://www.auberge-de-l-ill.com Page 11: Napkin notes. iStockPhoto. http://www.istockphoto.com/photo/web-design-question-27805121?st=0d5386e