Mobile Web Overview

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

Mobile Web A Comprehensive Overview CSE 3203 Mobile System Overview IT 4213 Mobile Web Development IT 5443 Web Tech and App Development IT 6753 Advanced Web Jack G. Zheng Fall 2018 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 Web traffic by operating systems, device type/vendor, browser type Web browsing by device type (mobile accounts for about 50%) Internet Trends by Mary Meeker Mobile usage as % of Web usage Time spent per adult user per day with digital media Cisco Mobile Visual Networking Index (VNI) Forecast 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,_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,_HTML5,_or_Hybrid:_Understanding_Your_Mobile_Application_Development_Options 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 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 Trending for Mobile Web about-native-hybrid-and-web-apps-but-were-afraid-to-ask 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. 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. 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. Mobile browser market share.aspx?id=browsersMobile share/mobile/worldwide browsers 12 Differences of Web on Mobile Screen Screen size is smaller Screen resolution is lower and density is higher 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 Connection and speed: mobile device connection is less stable, inconsistent, and slower 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 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 - A real story 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 14 Use a tool to examine the problems! Major Problematic Sites Particularly problematic for small businesses mobile-friendly-websites-ad6ef9f71eb5 Not mobile friendly (as of Sept 2018) KSU applications See some studies here 15 More and more major sites have been changed mobile friendly since 2014. Mobile Website Delivery Strategy Design for multi-screen experiences ding-websites-multi-screen-consumer.html Separate mobile version site Ikea: (jQuery Mobile) Costco: 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. Why Separate Mobile & Desktop Web Pages? 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 multiscreenconsumer.html Hybrid: RESS (Responsive + Server Serving) Examples (responsive) or (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 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 (more examples here) Non-responsive examples (not mobile friendly) (adaptive) Adjust the browser width and see the changes or use a tool like or browser developer tools. Adaptive Dynamic Serving Adaptive design is about serving pages based on device feature detection Also called dynamic serving as in multiscreenconsumer.html Example: Adaptive design has different perspectives - this one drives a lot of discussions I also agree with most comments but not the article itself RESS: Responsive Design + Server Side Components Comparison: 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 home-screen-on-any-smartphone-or-tablet/ Take it to another level: progressive web app (optimized app like web site) mean-for-the-web/ 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). However, the standardization of these APIs are more troublesome. Many of these APIs are browser specific. 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 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" "Off Canvas Multi-Device Layouts" Navigation (menu placement) 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 do-users-really-hold-mobile-devices.php Aware of hot areas - Touch targets Touchable areas instead of links Size of touch targets: -friendly-design-ideal-mobile-touchscreen-target- sizes/ Gestures Gestures represent the future UI opportunities - 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 responsive-web-design/ outdated/ 28 Design Patterns and Examples patterns/ responsive/patterns.html (image adaptation) 29 Mobile Web Friendliness Testing A website based tool: Automated testing tools Browser tools devtools/device-mode/ devtools/device-mode/emulate-mobile-viewports 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 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 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: Sencha Touch Titanium Appcelerator Framework7 More: 34 Development Tools and Frameworks Testing and validation obile-friendly/ Responsive design test Emulator me-devtools/device-mode/ US/docs/Tools/Responsive_Design_View Generator Feature detection Modernizr: Platforms and Frameworks Bootstrap: jQuery mobile: PhoneGap: More: http://mobile-frameworks-comparison- CDN s/devguide Data, Stats, and Reports Organizational reports Cisco Visual Networking Index provider/visual-networking-index-vni/index.html KPCB Internet Trends General stats Browser: Other Reports Android devices: 36 Good Resources Community resources lweb 8 Online learning resources development--cs256 Vendor resources sites/ tals/ us/library/aa286514.aspx US/docs/Web/Guide/Mobile developers-ebook Influencers Books General news and resources bile/ 37 BSIT "Mobile and Web" elective track CSE 3203 Mobile System Overview IT 4213 Mobile Web Development IT 5443 Web Tech and App Development IT 6753 Advanced Web


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


You must log in to comment