Mobile Web Overview

Jan 15, 2019 | Publisher: Jack Zheng | Category: Technology |  | Collection: Mobile and Web Lecture Notes

Mobile Web A Comprehensive Overview CSE 3203 Mobile System Overview http://cse3203.azurewebsites.net 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 Spring 2019 https://www.edocr.com/v/k52p5vj4/jgzheng/Mobile-Web-Overview Overview This lecture notes provides a high level overview of mobile web. This overview is comprehensive to cover as many aspects as possible but keep them at a high level: What is mobile web and why do we care about it? Mobile web definition and scope Key supporting technologies Challenges or differences brought by mobile computing Mobile website strategies: independent mobile site, one web, adaptive, responsive Mobile web app High level design considerations and principles Development tools, frameworks, and services Web technologies used for mobile apps Learning resources 2 Some Key Data on Mobile 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 3 What is Mobile Web? Web sites vs. web apps Mobile web apps looks like and is used like native 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. https://www.scnsoft.com/blog/mobile-web-app-types It's mainly about user experience, particularly with a focus on user interfaces and interactions. Mobile web sites: focus on the optimization of web sites to be used on mobile devices. Mobile web apps: emphasizes functional features specifically designed for mobile devices. Web apps are also focused on user interface and interaction. It has also impacted the application level architecture. Single page app Progressive web app Serverless architecture Mobile web refers to the use and development of web sites and web applications that are delivered over the Internet to smart mobile devices (and optimized for these devices). Extended Meaning Narrowly speaking, mobile web (site or app) is delivered to browsers. They are dependent on browsers. Broadly speaking, mobile web also covers the use of web technologies in mobile app development, where browsers are not used. These apps 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, used by various kinds of apps This course mainly focuses on mobile web sites; module 12 will cover some web apps. 5 Mobile Web History 1992 IBM Simon PDA was released. Has calendar, fax, email, music camera, etc. but did not have a web browser. 1997 Wireless Application Protocol 1.0 Networking protocol created to allow mobile devices to access the internet for services such as e-mail, stock prices, SMS, etc. It Is open, non proprietary. Uses WML (wireless markup language ) for text and graphics. Adopted by many vendors such as Sony, Motorola, etc. Allows for an explosion in mobile specific websites and browsers. 1994 pocketweb Pocketweb, the first mobile web browser for a PDA is released for the Apple Newton. However, choices for mobile web browsers remains limited 2G 2007 2002 3G 2005 .mobi domain is created for mobile specific websites first iPhone is released. Native app market explodes. WAP 2.0 Released to address 1.0 shortcomings. Uses WML, XHMTL, and WCSS to give users a better experience 2010 4G 2013 Major companies try to leverage the power of the mobile phone by making mobile payment solutions common. HTML5 web development pushes to the forefront allowing for a better mobile web experience but WAP 2.0 still dominates. HTML5 mobile frameworks such as jQuery mobile become popular Wireless companies begin to advertise 4G wireless (10x3G) speeds en masse touting streaming TV, streaming movies, faster web access, etc. as customer benefits. Native app market grows by leaps and bounds as the iPhone and Android systems become household names. Opera Mini, SkyFire, are popular mobile browsers 4G 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: - Android (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 Why Web? What kind of apps is better with Web? Information and content focused (media, magazine, news, forum); simple interaction (mainly tapping for navigation); highly dynamic content; frequent updates. Example: Yahoo, Financial Times, Quora 9 Web has a broader reach Mobile Web Is Top Of Funnel, Mobile App Is Bottom Of Funnel https://avc.com/2015/09/mobil e-web-is-top-of-funnel- mobile-app-is-bottom-of- funnel/ "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." https://www.youtube.com/watch?v=m-sCdS0sQO8 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/ Key Technologies behind Mobile Web HTML5/CSS3/JavaScript HTML5 represents a major advancement on the client development More powerful CSS3 and JavaScript make client applications more interactive and responsive Mobile browsers Mobile web are delivered through mobile browsers, which have reduced features than their desktop counterparts. Modern web browsers provide some new capabilities to create native-like web apps, such as launch from the home screen, run offline, access internal hardware, etc. 12 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 13 <a href="tel:+14155557777">Order Pizza Now!</a> <a href="sms:+14155558888?body=Hello">Text me!</a> Rise of JavaScript 14 #1 in GitHub since 2014 https://octoverse.github.com/projects#languages #1 in StackOverflow since 2013 https://insights.stackoverflow.com/survey/2018 Most in demand and salaries, 2015 https://gooroo.io/GoorooTHINK/Article/16300/Programming-languages--salaries-and-demand-May-2015 http://www.techrepublic.com/article/here-are-the-3-most-in-demand-coding-languages-and-where-you- can-find-a-developer-job/ Other rankings #1 The RedMonk Programming Language Rankings since 2015 https://redmonk.com/sogrady/2018/08/10/language-rankings-6-18/ #2 in student programmers in hackathon (#1 is HTML/CSS) http://studenthackers.devpost.com/2015.html #2 in Developer Economics survey https://dashboard.developereconomics.com/?survey=de15#mobile SharePoint/WordPress is moving to JavaScript https://arc.applause.com/2015/11/24/wordpress-javascript-calypso/ https://developer.wordpress.com/calypso/ https://developer.wordpress.com/2015/11/23/the-story-behind-the-new-wordpress-com/ Mobile Browsers 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 use, data storage, etc. 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 Mobile browser still have issues 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. 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 15 Mobile browsers will be covered in details in module 2 Differences of Web on Mobile People use mobile devices differently because of their mobility Prefers short and simple interactions Use for multiple purposes and interactions between apps. Mobile device is not the only platform; usually used together with other devices multi-device experience https://www.thinkwithgoogle.com/advertising-channels/mobile-marketing/device-use-marketer-tips/ 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 overall 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; variable connectivity; frequent switching among networks. https://queue.acm.org/detail.cfm?id=2441756 Device capability: Slower processors and memory Limited multitasking and simultaneous browser tabs/windows More device functionalities 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. 16 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/ 17 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://art.yale.edu http://berkshirehathaway.com https://www.scana.com https://www.weather.gov http://www.boxofficemojo.com https://www.java.com/ http://www.blue-ray.com http://www.senate.ga.gov https://www.trsga.com http://cobb.com See more: http://cubicle-h.blogspot.com/2018/08/website-mobile-friendliness-testing.html KSU web 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 18 More and more major sites have been changed mobile friendly since 2014. Mobile Web Friendliness Testing Website based viewers https://material.io/tools/resizer/ http://www.responsinator.com Automated testing tools https://search.google.com/test/mobile-friendly https://www.bing.com/webmaster/tools/mobile-friendliness https://ready.mobi Loading speed test: https://testmysite.thinkwithgoogle.com Browser tools https://www.digitalcitizen.life/emulate-mobile-device-desktop-browser 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 https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/emulation Other tools https://www.browsersync.io 19 This subject will be covered in details in module 11 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) Goodwill: https://mgwdonate.ging.org (used a third party service) 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 This subject will be covered in details in module 3 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: https://www.yahoo.com http://dealnews.com https://gillette.com https://m.newegg.com https://github.com/vmware http://www.atlantawatershed.org 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 24 Mobile Web App Mobile web apps are still websites and delivered through browsers. They are more focused on a particular functionality without cluttered information and content. https://www.androidpolice.com/2018/01/26/opinion-mobile-web-apps-finally-becoming- alternative-native-apps/ App-like web site looks and acts like a native mobile 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 See an example "Sencha Fastbook "here: https://www.youtube.com/watch?v=XkDWLcErzGs Some features: Launch from home screen (like an app): http://www.howtogeek.com/196087/how-to-add- websites-to-the-home-screen-on-any-smartphone-or-tablet/ Running offline OS level notification Hardware capabilities like GPS, etc. Take it to another level: progressive web app (optimized app-like web site) 25 Extended reading: https://www.sencha.com/blog/create-web-apps-with-the-capabilities-of-native-apps/ This subject will be covered in details in module 12 Progressive Web App Progressive web applications (PWAs) are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native applications. PWAs combine the flexibility of the web with the experience of a native application. https://en.wikipedia.org/wiki/Progressive_web_applications Examples Twitter https://buildfire.com/progressive-web-app/ More readings 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/ 26 Design Principles and Considerations Consider the difference of user experience on mobile vs desktop Web site or app? Consider their pros and cons and select the most appropriate one Follow the general conventions and design principles Selectively apply design patterns and best practices Adapt to screen size and density Touch friendly UI: touch area, touch target size, gestures Others Handle browser compatibility and feature detection Design for performance Tools Adopt a design language for consistency Use a design tool to assist design and development Strategy Mobile first Design for multi-screen use patterns This subject will be covered in details in module 4 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/ 28 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/ 31 Design Patterns and Practices Articles and reports Google https://www.thinkwithgoogle.com/marketing-resources/experience- design/principles-of-mobile-app-design-engage-users-and-drive-conversions/ Designing for touch http://4ourth.com/Touch/ https://alistapart.com/article/organizing-mobile http://bradfrost.github.io/this-is-responsive/patterns.html https://designmodo.com/content-patterns-mobile/ https://uxplanet.org/mobile-design-best-practices-2d16d37ecfe Resource and pattern collections https://pttrns.com http://www.mobile-patterns.com https://www.interaction-design.org/literature/topics/mobile-ux-design Android patters: https://unitid.nl/androidpatterns Books Mobile UI Design Patterns https://www.uxpin.com/studio/ebooks/mobile-design-patterns/ Mobile Design Pattern Gallery https://www.amazon.com/dp/1449363636 - one sample chapter http://www.uxbooth.com/articles/mobile-design-patterns/ Designing mobile interfaces: http://4ourth.com/wiki/Designing%20Mobile%20Interfaces 32 Detail design patterns and practices will be covered in module 5 to 8 Development Tools Testing and validation https://search.google.com/test/mobile- friendly https://www.google.com/webmasters/to ols/mobile-friendly/ https://testmysite.thinkwithgoogle.com http://validator.w3.org/mobile/ Responsive design test https://material.io/resizer/ http://www.responsinator.com https://www.browsersync.io http://mobiletest.me Emulator https://developers.google.com/web/tool s/chrome-devtools/device-mode/ https://developer.mozilla.org/en- US/docs/Tools/Responsive_Design_Vi ew http://www.mobilexweb.com/emulators 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/ Generator https://www.duda.co/mobile-website https://codiqa.com Design tools https://wireframe.cc https://jdittrich.github.io/quickMockup/ https://pencil.evolus.vn 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. Major frameworks Ionic React Angular Bootstrap jQuery mobile: http://jquerymobile.com Sencha Touch Titanium Appcelerator Framework7 More: http://mobile-frameworks-comparison-chart.com Platforms and Frameworks https://html5boilerplate.com/mobile/ http://www.initializr.com/ Bootstrap: http://getbootstrap.com jQuery mobile: http://jquerymobile.com More: http://mobile-frameworks-comparison-chart.com/ 34 This subject will be covered in details in module 10 Apps using Web Technologies Mobile web also refers to the use of web technologies for mobile app development that are not dependent on web browsers These apps 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, used by various kinds of apps 35 This course will NOT cover these subjects. 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: http://phonegap.com Appcelerator Titanium IBM MobileFirst 36 Web View All the smartphone operating systems support the use of WebViews in apps. WebViews are a small view component to handle web page content (HTML/CSS, etc.). A WebView can be a tiny part of the app screen, as shown in Figure 1, a whole page, or anything in between. WebView Apps The entire app or at least most of it uses one big WebView Some example apps Facebook, Evernote, Instagram, LinkedIn, Uber, Slack, Twitter, Gmail, the Amazon Appstore, and many others are or have been WebView apps Quora (figure on the right) 37 https://www.uxmatters.com/mt/archives/2018 /08/mobile-apps-native-hybrid-and- webviews.php Services and Service Providers Mobile backend as a service (MBaaS), also known as "backend as a service" (BaaS) is a model for providing mobile app developers (also web apps) with a way to use backend services through Web APIs These services usually include database, file storage, user access and management, push notifications, social networking services, emails, and others Developers can focus on front end development and don't need to develop and maintain a backend server themselves The global The Mobile Backend as a Service Market is expected to grow at USD ~$87 Billion by 2023, at ~64% of CAGR between 2017 and 2023. https://www.marketwatch.com/press-release/mobile-backend-as-a-service- market-size-share-market-intelligence-company-profiles-and-trends- forecast-to-2023-2018-06-01 Top providers Kinvey Azure https://docs.microsoft.com/en-us/azure/app-service-mobile/ Sencha IBM 38 Data, Stats, and Reports Key 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 39 Key Readings This lecture notes https://www.edocr.com/v/k52p5vj4/jgzheng/Mobile-Web-Overview Mobile web differences https://www.paradoxlabs.com/blog/mobile-vs-desktop-10-key-differences/ Mobile development options Mobile web app: https://www.scnsoft.com/blog/mobile-web-app-types Developing Mobile Web Applications: When, Why, and How https://www.toptal.com/android/developing- mobile-web-apps-when-why-and-how Why Separate Mobile & Desktop Web Pages? http://www.lukew.com/ff/entry.asp?1390 ONE web (responsive), adaptive, and separate mobile site (Google describes the three techniques) https://www.thinkwithgoogle.com/marketing-resources/experience-design/building-websites-multi-screen- consumer/ https://www.wired.com/2013/05/the-two-flavors-of-a-one-web-approach-responsive-vs-adaptive/ One web: http://adactio.com/journal/1716/ Some history http://www.phonearena.com/news/Evolution-of-mobile-web-browsing_id9059 https://developer.mozilla.org/en-US/docs/Web/Guide/Mobile Mobile site design for performance: https://queue.acm.org/detail.cfm?id=2441756 40 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 http://www.mobilexweb.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 41

Download

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

About Jack Zheng

Associate Professor at Kennesaw.edu

Comments

You must log in to comment