Jacobi_Erik_Week4PresentationMobile

Fundamentals of Web Design

Week 4 Final Presentation

Mobile/Tablet Web Design

Erik Jacobi Full Sail University ID: 42115974

Internet Marketing Bachelor

Table of contents

Introduction Mobile Usage Impact on Web Design Advanced Accessibility Implementation & Examples Recommendation

Full Sail University | Fundamentals of Web Design | Presentation: Week 4 | February 1st, 2015

Table of contents

Introduction Mobile Usage Impact on Web Design Advanced Accessibility Implementation & Examples Recommendation

Full Sail University | Fundamentals of Web Design | Presentation: Week 4 | February 1st, 2015

Introduction

With the development of smartphones not only the way we communicate with each other changed. At the latest with the introduction of the iPhone and the power and ease to interact with media on it the way we see, use and integrate the internet in our days changed. It evolved and today our data and websites are accessed from multiple devices of different screen sizes and formats.

-> This is the final presentation, that was created in order to fulfill the last weeks big multimedia assignment related to the class “Fundamentals of Web Design” instructed by Theresa Weber of the Full Sail University. As assignment itself the deeper purpose is to reflect the learnings and to learn how to deal or analyze trends in order to deliver a design for the maximum satisfaction of a customers business.

Full Sail University | Fundamentals of Web Design | Presentation: Week 4 | February 1st, 2015

Table of contents

Introduction Mobile Usage Impact on Web Design Advanced Accessibility Implementation & Examples Recommendation

Full Sail University | Fundamentals of Web Design | Presentation: Week 4 | February 1st, 2015

Mobile Usage

-Drift from desktop to mobile

-73,4% of online population accessed the

internet from their mobile device in 2013

-More mobile devices than people in the

world: 7,22 billion devices

Desktop vs Mobile

Full Sail University | Fundamentals of Web Design | Presentation: Week 4 | February 1st, 2015

Table of contents

Introduction Mobile Usage Impact on Web Design Advanced Accessibility Implementation & Examples Recommendation

Full Sail University | Fundamentals of Web Design | Presentation: Week 4 | February 1st, 2015

Impact on Web Design

Full Sail University | Fundamentals of Web Design | Presentation: Week 4 | February 1st, 2015

-Multi-Screen experience

-Marketing

-Mobile Web vs Web Apps

Web Design Trends

Impact on Web Design

Full Sail University | Fundamentals of Web Design | Presentation: Week 4 | February 1st, 2015

-Multi-Screen experience

-Marketing

-Mobile Web vs Web Apps

Web Design Trends

Table of contents

Introduction Mobile Usage Impact on Web Design Advanced Accessibility Implementation & Examples Recommendation

Full Sail University | Fundamentals of Web Design | Presentation: Week 4 | February 1st, 2015

Advanced Accessibility

Full Sail University | Fundamentals of Web Design | Presentation: Week 4 | February 1st, 2015

-Progressive enhancement

-Rely on HTML & CSS

-No Flash and reduce Javascript

-Plenty of workarounds

Language and Technology

Table of contents

Introduction Mobile Usage Impact on Web Design Advanced Accessibility Implementation & Examples Recommendation

Full Sail University | Fundamentals of Web Design | Presentation: Week 4 | February 1st, 2015

Implementation & Examples

Full Sail University | Fundamentals of Web Design | Presentation: Week 4 | February 1st, 2015

-Responsive

-Readable

-not fully functional

-hypebeast.com

Best Cases

Implementation & Examples

Full Sail University | Fundamentals of Web Design | Presentation: Week 4 | February 1st, 2015

-HTML 5 rich media

-Fully responsive

-suitsupply.com

Best Cases

Implementation & Examples

Full Sail University | Fundamentals of Web Design | Presentation: Week 4 | February 1st, 2015

-Full functionality

-Complex information

-Progressive Enhancement rules obeyed

-booking.com

Best Cases

Implementation & Examples

Full Sail University | Fundamentals of Web Design | Presentation: Week 4 | February 1st, 2015

-Jay-Z Life+Times Magazine

-Not responsive

-Message and feeling get lost

-lifeandtimes.com

Worst Cases

Implementation & Examples

Full Sail University | Fundamentals of Web Design | Presentation: Week 4 | February 1st, 2015

-Worst Case Web Apps

-Pop-ups/Resolution

-wtfmobileweb.com

Worst Cases

Table of contents

Introduction Mobile Usage Impact on Web Design Advanced Accessibility Implementation & Examples Recommendation

Full Sail University | Fundamentals of Web Design | Presentation: Week 4 | February 1st, 2015

Conclusion

Let us not talk about the numbers and examples I just showed. Let us better think about the way we are accessing the internet and when we are accessing it and not even realizing this anymore.Think about how you are using your smartphone or tablet. You should see that at least it is not foreseeable which device you will use next to access the internet or websites specifically. To make or establish a responsive website design should be seen as an additional revenue channel. All the users that possibly join your website from a mobile device should be able to access all the necessary functions to get in touch with you and your business.

‣ Use progressive enhancement and build websites that are at least responsive and accessible in all their main functions from every screen!

Full Sail University | Fundamentals of Web Design | Presentation: Week 4 | February 1st, 2015

Thank you for your Attention!

Erik Jacobi ID: 42115974

Full Sail University | Fundamentals of Web Design | Presentation: Week 4 | February 1st, 2015

Links: - Gube, J (2010, 16th December). 8 Tools For Easily Creating a Mobile Version of Your Website. Retrieved from http://mashable.com/2010/12/16/create-mobile-site-

tools/ - Henry, S.L.(2013, 26th September). Mobile Accessibility. Retrieved from http://www.w3.org/WAI/mobile/ - Hellwig, J. (2012, 4th January). Responsive Webdesign & CSS3 Media Queries. Retrieved from http://blog.kulturbanause.de/2012/01/responsive-webdesign-css3-

media-queries/ - Sareen, H. (2014, 6th June). How Apps Overthrew Web Development and Changed the Internet. Retrieved from http://insights.wired.com/profiles/blogs/how-

apps-overthrew-web-development-and-changed-the-internet-2#axzz3QddKDILF - Sultan, Z. (2015). WTF Mobile Web. Retrieved from http://wtfmobileweb.com/ - Wentworth, T. (2011, 5th August). Why Mobile Design Should Never Be an Afterthought. Retrieved from http://mashable.com/2011/08/05/mobile-design-priority/ - Ma, S. (2011, 17th January). Designing for the Mobile Web: Special Considerations. Retrieved from http://www.uxmatters.com/mt/archives/2011/01/designing-for-

the-mobile-web-special-considerations.php - W3C (2015, 2nd January). Graceful degradation versus progressive enhancement. Retrieved from http://www.w3.org/wiki/

Graceful_degradation_versus_progressive_enhancement - Buckler, C. (2009, 22nd September). Progressive Enhancement and Graceful Degradation: an Overview. Retrieved from http://www.sitepoint.com/progressive-

enhancement-graceful-degradation-basics/

References

Full Sail University | Fundamentals of Web Design | Presentation: Week 4 | February 1st, 2015

Pictures: - Gheorghiu, G (2010, 10th July). Can a Recommendation Turn Against the Person you Recommend? Retrieved from http://www.technologyevaluation.com/

NavExp/media/TEC_Blog/2010/06/recommendations.PNG - Wilston, M (2013, 18th September). Tips to Design Web Pages that Function Better on Mobile Devices. Retrieved from http://www.techsling.com/wp-content/

uploads/2013/09/responsive-mobile-web-design.jpg - Songcast University (2012, 3rd August). MOBILE USAGE IS SKYROCKETING – 4 TIPS TO PREPARE FOR THE MOBILE USER. Retrieved from http://

blog.songcastmusic.com/wp-content/uploads/2012/07/HiRes.jpg - iSpyoo (2015, 31st January). How To Spy On Cell Phone Free? Retrieved from http://ispyoo.com/wp-content/uploads/2013/12/How-To-Spy-On-Cell-Phone-

Free.jpg - Statista (2015). Mobile phone internet user penetration worldwide from 2012 to 2017. Retrieved from http://www.statista.com/statistics/284202/mobile-phone-

internet-user-penetration-worldwide/ - McCarthy, N. (2014, 1st September). Global Internet Usage By the Numbers. Retrieved from http://www.statista.com/chart/2647/global-internet-usage-by-the-

numbers/ - CDIXON (2014, 7th April). The decline of the mobile web. Retrieved from http://cdixon.org/2014/04/07/the-decline-of-the-mobile-web/ - Green, S. (2012). Tablet. Retrieved from http://thenounproject.com/term/tablet/4103/ - Prado, L. (2013). Tablet. Retrieved from http://thenounproject.com/term/tablet/13997/ - Suitsupply (2015). Suitsupply. Retrieved from http://eu.suitsupply.com/de/home - Hypebeast (2015). Hypebeast. Retrieved from http://www.hypebeast.com - booking.com (2015). booking.com. Retrieved from http://www.booking.com - Jay-Z’s Life+ Times (2015) Life+ Times. Retrieved from http://www.lifeandtimes.com - Onbile (2015). Onbile. Retrieved from http://www.onbile.com/ - Mippin (2015). Mippin Mobilizer. Retrieved from http://www.mippin.com/web/maker/mobilize.jsp?from=blog&new=1 - Wirenode (2015). Wirenode. Retrieved from http://www.wirenode.com/ - Mobify (2015). Mobify. Retrieved from http://www.mobify.com/

References

Full Sail University | Fundamentals of Web Design | Presentation: Week 4 | February 1st, 2015