Mobile Web Overview

Sep 25, 2018 | Publisher: Jack Zheng | Category: Technology |  

Mobile Web A Comprehensive Overview CSE 3203 Mobile System Overview http://jackzheng.net/teaching/cse3203 IT 4213 Mobile Web Development http://jackzheng.net/teaching/it4213 IT 5443 Web Tech and App Development http://it5443.azurewebsites.net/ IT 6753 Advanced Web http://jackzheng.net/teaching/it6753 Jack G. Zheng Fall 2018 https://www.edocr.com/v/k52p5vj4/jgzheng/Mobile-Web-Overview Questions What is mobile web and why do we care about it? What are the basic choices to develop and deliver contents and services to mobile devices? What are the major design considerations and principles? What are the popular development tools, frameworks, and services? Where can you learn more about mobile web? How can web technologies be used to create mobile apps? Overview Mobile trends and stats Mobile web definition and scope Mobile website strategies: one web, adaptive, mobile version Mobile web application High level design considerations and principles Development tools 3 Some Key Data http://gs.statcounter.com Web traffic by operating systems, device type/vendor, browser type http://netmarketshare.com Web browsing by device type (mobile accounts for about 50%) Internet Trends by Mary Meeker http://www.kpcb.com/internet-trends Mobile usage as % of Web usage Time spent per adult user per day with digital media Cisco Mobile Visual Networking Index (VNI) Forecast https://www.cisco.com/c/en/us/solutions/service-provider/visual-networking- index-vni/index.html#~mobile-forecast Average data connection speed Total of mobile connected device Average traffic (data usage) per device The percentage of mobile data traffic out of all fixed and mobile data traffic The percentage of mobile connections will be 'smart' connections Mobile traffic per mobile-connected end-user device per month 4 What is Mobile Web? It's mainly about user experience, particularly with a focus on user interfaces and interactions. Web sites: focus on the optimization of web sites to be used on mobile devices. Web applications: focus on functional features, with UI specifically designed for mobile devices. Web applications can be delivered through web sites or other types of apps (mobile app, hybrid app, browser app, etc.). Recently it has begun to impact the application level architecture. Mobile web refers to the access and use of web sites and web applications over computer networks through web browsers using smart mobile devices (and optimized for these devices). Extended Meaning In an expanded meaning, mobile web also covers the development and use of web technologies in mobile app development, particularly for the frontend. Users typically do not use these apps directly in browsers. These app may include: Hybrid web app Use of web components (Web View) to display web pages in native apps mBaaS, through the use of web APIs and services 6 Mobile App Development Options 7 https://developer.salesforce.com/page/Native,_HTML5,_or_Hybrid: _Understanding_Your_Mobile_Application_Development_Options A program designed to run directly on a specific mobile operating system. A web based application that runs in any web browser especially that designed for mobile devices. Applications developed using Web development technologies and wrapped in a mobile app container * New to the diagram: cross- platform native app (Xamarin) * New to the diagram: app like web site https://developer.salesforce.com/page/Native,_HTML5,_or_Hybrid:_Understanding_Your_Mobile_Application_Development_Options http://www.telerik.com/blogs/everything-you-wanted-to-know-about-native-hybrid-and-web-apps-but-were-afraid-to-ask http://www.sitepoint.com/native-hybrid-or-web-apps/ http://www.ymedialabs.com/hybrid-vs-native-mobile-apps-the-answer-is-clear/ Comparison of the Three Development Options Native Apps Mobile Web Hybrid Device features Can fully utilize platform/OS features if allowed, such as camera, location, sensors, and interactions with file systems and other apps. Access to devices features are limited to the browser environment. Can utilize platform/OS features if provided by the SDK, which are usually provided as JavaScript APIs. UX/UI Best; smooth interaction as UI is very responsive. Not as good as native app; may have delays. Looks like an app, but may have performance issues. Development Platform Applications are platform dependent. They have to be written and/or compiled to a specific OS*. Example: - Andriod (Java) ( Android ) - iOS (Objective C, Swift) - Windows (.Net, C#) - * Xamarin (all) Web applications are cross platform and can use standard languages such as HTML/CSS/JavaScript. Programs runs in browsers, although they may have slightly differences in different browsers. Hybrid applications are developed using standard web technologies, but complied to each specific platform. Distribution / Installation App Store, or direct downloaded; need installation Web; no installation App Store, or direct downloaded; need installation App or Web? 9 http://arc.applause.com/2015/09/2 8/digital-strategy-apps-vs-web/ "I like to think of this way. The mobile web is the window of your store. Users window shop on your mobile website. Getting them to download and install and use your mobile app is like getting them to come into the store. And that's where the action is long term." App vs. Web The old desktop vs. web? 10 http://xkcd.com/1367/ Trending for Mobile Web http://www.telerik.com/blogs/everything-you-wanted-to-know- about-native-hybrid-and-web-apps-but-were-afraid-to-ask http://www.mediapost.com/publications/article/265873/cons umers-may-prefer-mobile-web-to-apps.html A recent survey of U.S. consumers by Quixey (in 2015) found that 66% of respondents said they prefer the mobile Web to apps. http://www.appcelerator.com/resource- center/research/2015-mobile-trends-report/ 50% use on a daily basis among adoption leaders. 1.Objective C has had its day. The once-mandated language of iOS developers is under assault from cross-platforms tools. 2. JavaScript, and its derivatives, continue climbing across sectors. They are now the primary language for 12% of mobile developers, and 13% of those working in the cloud. http://www.visionmobile.com/product/developer-economics- state-of-developer-nation-q1-2016/ Mobile Web Delivered in Browsers Web sites vs. web apps Web apps are also web sites, just more functional oriented; they are too delivered via browsers, and share the same web site UI design principles and practices. Web apps are also focused more on user interaction and device interaction. https://www.scnsoft.com/blog/mobile-web-app-types Mobile browser market https://netmarketshare.com/browser-market- share.aspx?id=browsersMobile http://gs.statcounter.com/browser-market- share/mobile/worldwide https://en.wikipedia.org/wiki/Usage_share_of_web_ browsers 12 Differences of Web on Mobile Screen Screen size is smaller http://www.statista.com/chart/2269/smartphone-shipments-by-screen-size/ Screen resolution is lower and density is higher http://developer.android.com/about/dashboards/index.html Fragmented market: properties vary a lot among devices Orientation: vertical screens accounts for 29% of usage Interaction method: touch is different form pointing device like mouse https://www.nngroup.com/articles/mouse-vs-fingers-input-device/ Connection and speed: mobile device connection is less stable, inconsistent, and slower https://queue.acm.org/detail.cfm?id=2441756 Device capability: Slower processors and memory Limited multitasking and simultaneous browser tabs/windows Mobile devices have much more functionality integrated: cam, mic, sensors, GPS, etc. Browser capability Compatibility: browser behaviors are different from desktop browsers Fixed browser size (on the same device) Viewport difference and automatic zooming Delay: a more noticeable delay as the application resides on the web vs. directly on the native platform Weaker plug-in support, no Flash, PDF, etc. People use mobile devices differently because of their mobility 13 https://www.paradoxlabs.com/ blog/mobile-vs-desktop-10- key-differences/ The Problems Why make websites mobile friendly? Non-mobile-friendly sites create user experience and functional problems Search engines also include mobile friendliness as in ranking - https://webmasters.googleblog.com/2018/03/rolling-out-mobile-first-indexing.html A real story https://cheekymonkeymedia.ca/blog/mobile-friendly-does-it-really-matter Design/content problem not optimized for mobile devices Content too small and difficult to view Content hidden Interaction problems Links are crowded and difficulty/inaccurate to tap Mouse hovering does not work mobile Slow and error-prone typing Performance problems because of connection issues and device capability Some interesting problems documented http://bradfrost.com/blog/post/mobile-web-problems/ http://wtfmobileweb.com/ 14 Use a tool to examine the problems! https://testmysite.thinkwithgoogle.com https://ready.mobi Major Problematic Sites Particularly problematic for small businesses https://medium.com/@dave_sloan/only-30-of-small-businesses-have- mobile-friendly-websites-ad6ef9f71eb5 Not mobile friendly (as of Sept 2018) http://cobb.com/ http://www.boxofficemojo.com https://www.java.com/en/ http://www.senate.ga.gov https://www.weather.gov/ http://superior-web-solutions.com/ https://www.trsga.com KSU applications https://owlexpress.kennesaw.edu/prodban/bwckschd.p_disp_dyn_sched https://kennesaw.curriculog.com/ See some studies here https://canonicalized.com/mobile-friendly-study/ https://www.markbrinker.com/good-bad-medical-website-design 15 More and more major sites have been changed mobile friendly since 2014. Mobile Website Delivery Strategy Design for multi-screen experiences https://www.thinkwithgoogle.com/articles/buil ding-websites-multi-screen-consumer.html Separate mobile version site Ikea: http://m.ikea.com/us (jQuery Mobile) Costco: http://m.costco.com https://www.gwdonate.org One Web One Web means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using. http://www.w3.org/TR/mobile-bp/#OneWeb Why Separate Mobile & Desktop Web Pages? http://www.lukew.com/ff/entry.asp?1390 One Web One Web Does not mean that the content is available in exactly the same representation across all devices. The context of mobile use, device capability variations, bandwidth issues and mobile network capabilities all affect the representation. Approaches Responsive design Adaptive: device detection and adaptation Or dynamic serving as in http://www.google.com/think/multiscreen/whitepaper- multiscreenconsumer.html Hybrid: RESS (Responsive + Server Serving) Examples http://mashable.com (responsive) http://google.com or Wikipdia.org (adaptive) Responsive Web Design Ethan Marcotte coined the term responsive web design and defined it to mean fluid grid/ flexible images/ media queries in a May 2010 article in A List Apart http://alistapart.com/article/responsive-web-design Basic principles and practices Fluid grid - no horizontal scrolling Adaptive/flexible image Media query Responsive Web Design (RWD) is a Web design approach aimed at crafting sites to provide an optimal viewing experience, easy reading and navigation with a minimum of resizing, panning, and scrolling, across a wide range of screen sizes and devices. Examples Responsive examples http://kennesaw.edu https://cobbcounty.org http://mashable.com http://mediaqueri.es (more examples here) Non-responsive examples http://goodwillng.org (not mobile friendly) http://www.atlantawatershed.org/ (adaptive) Adjust the browser width and see the changes or use a tool like responsinator.com or browser developer tools. Adaptive Dynamic Serving Adaptive design is about serving pages based on device feature detection Also called dynamic serving as in http://www.google.com/think/multiscreen/whitepaper- multiscreenconsumer.html Example: http://dealnews.com http://www.atlantawatershed.org Yahoo.com https://m.newegg.com https://github.com/vmware Adaptive design has different perspectives http://bradfrost.com/blog/post/the-many-faces-of-adaptive-design/ https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/ - this one drives a lot of discussions I also agree with most comments but not the article itself RESS: Responsive Design + Server Side Components http://www.lukew.com/ff/entry.asp?1392 Comparison: http://www.lukew.com/ff/entry.asp?1509 20 App Like Web Site App-like web site looks and acts like an app (browser hidden, etc.) but is actually a web site This will give the website an "app" look and feel without installing anything at first But they are still dependent on the browser to drive them Primitive solution: pin it to your home screen http://www.howtogeek.com/196087/how-to-add-websites-to-the- home-screen-on-any-smartphone-or-tablet/ Take it to another level: progressive web app (optimized app like web site) https://developers.google.com/web/progressive-web-apps http://arc.applause.com/2015/11/30/application-shell-architecture/ http://developer.telerik.com/featured/what-progressive-web-apps- mean-for-the-web/ http://gonehybrid.com/are-progressive-web-apps-the-future-of- mobile-apps/ 21 HTML 5 and Mobile Web How does HTML 5 play a role in facilitating mobile computing? Standardize mobile web development Eliminates the need to create, maintain, and support apps for different mobile platforms (native platforms) HTML 5 has provided a set of features and tools for building mobile apps Mobile friendly tags/attributes (number, phone - activate relevant phone features) JavaScript APIs to devices features 22 <a href="tel:+14155557777">Order Pizza Now!</a> <a href="sms:+14155558888?body=Hello">Text me!</a> Browser Support and APIs Browsers have increase its capabilities to work with mobile devices through browser APIs; many of these are part of HTML5. Common types of APIs XMLHttpRequest makes it possible to load additional content from the Web without loading a new document, a core component of AJAX. The Geolocation API makes the user's current location available to browser-based applications. Offline Touch events Drawing Several APIs make the integration of Web applications with the local file system and storage seamless (Indexed Database). https://www.w3.org/standards/webdesign/script https://www.w3.org/standards/techs/mobileapp However, the standardization of these APIs are more troublesome. Many of these APIs are browser specific. https://developer.chrome.com/apps/api_index https://developer.mozilla.org/en-US/docs/Web/API/Using_the_Browser_API 23 Considerations and Practices Follow the general conventions and design principles Web site or app? Consider their pros and cons and select the most appropriate one Consider the difference of user experience on mobile vs desktop Adapt to screen size and density Touch friendly UI: touch area, touch target size, gestures Consider performance Others Handle browser compatibility and feature detection Design for performance Strategy: mobile first Details will be covered in additional modules in IT 4213 Mobile Web Development Adapt to Screen Sizes and Density Set up the correct viewport https://developers.google.com/web/fundamentals/design-and- ui/responsive/fundamentals/set-the-viewport Content prioritization: Non-major content needs to be off screen For example, menus are considered as non-major content Content over navigation Layout: single column design works best Luke Wroblewski has summarized some common layout patterns in two articles "Multi-Device Layout Patterns" http://www.lukew.com/ff/entry.asp?1514 "Off Canvas Multi-Device Layouts" http://www.lukew.com/ff/entry.asp?1569 Navigation (menu placement) http://bradfrostweb.com/blog/web/responsive-nav-patterns/ http://bradfrost.com/blog/web/complex-navigation-patterns-for- responsive-design/ 25 Content Prioritization Non-major content needs to be off screen Touch Friendly UI Rule of the thumb: thumb (one or two) oriented operation is common http://www.uxmatters.com/mt/archives/2013/02/how- do-users-really-hold-mobile-devices.php Aware of hot areas - http://www.lukew.com/ff/entry.asp?1649 Touch targets Touchable areas instead of links Size of touch targets: http://www.smashingmagazine.com/2012/02/21/finger -friendly-design-ideal-mobile-touchscreen-target- sizes/ Gestures Gestures represent the future UI opportunities - http://www.lukew.com/touch/ Provide interaction feedback Activate the most appropriate pseudo keyboard Mobile First Mobile First is a philosophy created by Luke Wroblewski that highlights the need to prioritize the mobile context when creating user experiences. Allows websites to reach more people Forces designers to focus on core content and functionality (What do you do when you lose 80% of your screen real estate?) Let designers innovate and take advantage of new technologies (geolocation, touch events and more) Reference http://bradfrostweb.com/blog/web/mobile-first- responsive-web-design/ http://www.lukew.com/presos/preso.asp?26 https://blog.intercom.io/why-mobile-first-may-already-be- outdated/ 28 Design Patterns and Examples https://pttrns.com http://www.mobile-patterns.com http://www.mobiletuxedo.com/category/ui- patterns/ https://bradfrost.github.io/this-is- responsive/patterns.html http://adaptive-images.com (image adaptation) https://material.io/guidelines/ 29 Mobile Web Friendliness Testing A website based tool: https://design.google.com/articles/introducing-resizer/ http://www.responsinator.com Automated testing tools https://search.google.com/test/mobile-friendly https://www.bing.com/webmaster/tools/mobile-friendliness https://testmysite.thinkwithgoogle.com/ https://ready.mobi Browser tools https://developers.google.com/web/tools/chrome- devtools/device-mode/ https://developers.google.com/web/tools/chrome- devtools/device-mode/emulate-mobile-viewports https://developer.mozilla.org/en- US/docs/Tools/Responsive_Design_Mode 30 Apps using Web Technologies Web technologies can be used for app development that are not directly using web browsers These app may include: Hybrid web app Use of web components (Web View) to display web pages in native apps mBaaS, through the use of web APIs and services 31 Hybrid Web Apps Hybrid apps are apps developed based on the web technologies (HTML, CSS, JavaScript) and wrapped in a platform specific native container Similar to Java and .Net's vision of Write-Once-Run-Anywhere Device features are exposed through JavaScript API The execution of the app relies on the browser engine of the OS it is installed in Gartner Says by 2016, More Than 50 Percent of Mobile Apps Deployed Will be Hybrid http://www.gartner.com/newsroom/id/2324917 Major framework: Apache Cordova PhoneGap Appcelerator Titanium IBM MobileFirst 32 Services and Service Providers Mobile backend as a service (MBaaS), also known as "backend as a service" (BaaS) is a model for providing web app and mobile app developers with a way to link their applications to backend cloud storage and APIs exposed by back end applications while also providing features such as user management, push notifications, and integration with social networking services. Top providers Kinvey Sencha Parse Azure https://docs.microsoft.com/en-us/azure/app- service-mobile/ 33 Application Framework The main aim of frameworks is to increase productivity by reducing efforts which eventually saves lot of time for developers to resolve any other important issues in the app or game. These frameworks provides inbuilt tools for developers to work instantly on difficult and lengthy part of coding. Vendor frameworks Android SDK Cocoa Touch Major third party frameworks Ionic jQuery mobile: http://jquerymobile.com Sencha Touch Titanium Appcelerator Framework7 More: http://mobile-frameworks-comparison-chart.com 34 Development Tools and Frameworks Testing and validation https://search.google.com/test/mobile-friendly https://www.google.com/webmasters/tools/m obile-friendly/ https://testmysite.thinkwithgoogle.com http://validator.w3.org/mobile/ Responsive design test https://material.io/resizer/ http://www.responsinator.com http://johnpolacek.github.io/Responsivator/ http://www.mobilexweb.com/emulators https://www.browsersync.io https://material.io/resizer http://mobiletest.me Emulator https://developers.google.com/web/tools/chro me-devtools/device-mode/ https://developer.mozilla.org/en- US/docs/Tools/Responsive_Design_View http://www.mobilexweb.com/emulators Generator https://www.duda.co/mobile-website https://codiqa.com Feature detection http://caniuse.com http://mydevice.io Modernizr: http://modernizr.com http://www.screenresolution.org http://detectmobilebrowsers.com http://ryanve.com/lab/dimensions/ http://mobilehtml5.org/ https://deviceatlas.com/ Platforms and Frameworks https://html5boilerplate.com/mobile/ http://www.initializr.com/ Bootstrap: http://getbootstrap.com jQuery mobile: http://jquerymobile.com PhoneGap: http://phonegap.com More: http://mobile-frameworks-comparison- chart.com/ CDN https://cdnjs.com http://www.asp.net/ajax/cdn https://developers.google.com/speed/librarie s/devguide Data, Stats, and Reports Organizational reports Cisco Visual Networking Index http://www.cisco.com/c/en/us/solutions/service- provider/visual-networking-index-vni/index.html KPCB Internet Trends http://www.kpcb.com/internet-trends https://www.fcc.gov/reports-research https://www.ctia.org/the-wireless-industry/infographics-library General stats http://www.netmarketshare.com http://gs.statcounter.com http://marketshare.hitslink.com Browser: https://en.wikipedia.org/wiki/Usage_share_of_web_browsers Other Reports http://mobiforge.com http://www.visionmobile.com/reports/ http://www.pewinternet.org http://www.appcelerator.com/enterprise/resource-center/research/ https://www.slideshare.net/comScoremarcom/presentations Android devices: http://developer.android.com/about/dashboards/index.html 36 Good Resources Community resources http://www.w3.org/Mobile/ http://www.w3.org/standards/webdesign/mobi lweb https://www.linkedin.com/groups?gid=300279 8 Online learning resources http://www.mobilexweb.com/ http://www.quirksmode.org/mobile/ https://alistapart.com https://www.udacity.com/course/mobile-web- development--cs256 Vendor resources https://developers.google.com/search/mobile- sites/ https://developers.google.com/web/fundamen tals/ http://msdn.microsoft.com/en- us/library/aa286514.aspx https://developer.mozilla.org/en- US/docs/Web/Guide/Mobile http://www.kinvey.com/native-web-hybrid- developers-ebook http://www.ibm.com/mobilefirst/us/en/ http://www.mobiletuxedo.com Influencers http://www.lukew.com http://www.nngroup.com http://www.theresaneil.com Books http://www.amazon.com/dp/1449334970 http://www.amazon.com/dp/1849693188 http://www.amazon.com/dp/1593274874 http://www.amazon.com/dp/1449311415 http://www.amazon.com/dp/1449363636 General news and resources http://mashable.com/category/mobile-web/ http://www.smashingmagazine.com http://www.quirksmode.org/blog/archives/mo bile/ https://mobiforge.com 37 BSIT "Mobile and Web" elective track CSE 3203 Mobile System Overview http://jackzheng.net/teaching/cse3203 IT 4213 Mobile Web Development http://jackzheng.net/teaching/it4213 IT 5443 Web Tech and App Development http://jackzheng.net/teaching/it5443 IT 6753 Advanced Web http://jackzheng.net/teaching/it6753

A comprehensive overview of mobile web, including mobile website design, mobile web app, and web technologies used in mobile apps. 

About Jack Zheng

Associate Professor at Kennesaw.edu

Comments

You must log in to comment