Please enable JavaScript.
Coggle requires JavaScript to display documents.
Chapter 4 : Mobile Web Application Mobile Web Standards, Chapter 4b :…
Chapter 4 : Mobile Web Application
Mobile Web Standards
Mobile Web Standards
Need for Internet accessibility everywhere.
Demand for consistent services across all devices.
Standards serve to aid developers in creating mobile web applications.
Standards enhance interoperability, usability, and accessibility of mobile web content.
Aim to support any mobile device using web standards.
Emphasize the concept of "One Source Multi Use" for mobile web development.
The web is inherently unified, with standardized markup, styles, scripts, and multimedia.
Standards-based approach ensures compliance and usability across mobile browsers and platforms.
Success on the Mobile Web requires understanding and sometimes deviating from established rules.
Various standards
cover structure
presentation
client-side scripting for mobile web development.
World Wide Web Consortium (W3C)
Role
World Wide Web Consortium (W3C) is the primary international standards organization for the World Wide Web (WWW).
W3C ensures that the Web is accessible on various devices and supports different platforms.
The proliferation of powerful internet-capable mobile devices has increased the importance of W3C's role in enabling the Web for these devices.
W3C's ongoing work includes
Mobile Web Standards and API specifications
W3C Widget development
Mobile Web Best Practices
guidelines for designing accessible and Mobile-Friendly websites.
Mobile Web Best Practices
"Mobile Web Best Practices 1.0" is a W3C Web Standard aiming to enhance user experience on mobile devices.
It offers recommendations covering navigation, links, design, layout, content, technical issues, and user input.
The focus extends beyond technical aspects to include considerations about content delivery.
Key principles include:
Design for One Web
: Ensure content suits diverse devices, reducing costs and reaching more users.
Rely on Web standards:
Standards promote interoperability amid device and browser fragmentation.
Stay away from known hazards:
Thoughtful design minimizes usability issues due to small screens and keyboards.
Be cautious of device limitations:
Consider the varying capabilities of mobile devices when selecting web technologies.
Optimize navigation
: Simplify navigation and typing for small screens, keyboards, and limited bandwidth.
Check graphics & colors:
Exercise care with images, colors, and styles to accommodate different device characteristics.
Keep it small:
Smaller sites save time and money for users.
Use the network sparingly:
Employ web protocol features to mitigate network bottlenecks and latencies.
Help & guide user input:
Minimize the need for tedious input methods on mobile devices.
Think of users on the go
: Provide compact information for users dealing with time constraints and distractions.
W3C Working Groups focus on enabling the web on mobile devices.
Cascading Style Sheet Working Group
Device API Working Group
Geolocation Working Group
HTML Working Group
Web Applications Working Group
Other Mobile Web Standards proposed by W3C:
Wireless Markup Language (WML)
XHTML Mobile Profile (XHTML-MP)
HTML 5
Wireless Markup Language (WML)
WML is an early standard for displaying mobile web, built on top of Wireless Application Protocol (WAP).
WAP is a technical standard for accessing information over mobile wireless networks, used by mobile browsers.
WML was released by the WAP Forum and is based on XML.
The Nokia 7110 was one of the first mobile phone models capable of displaying Mobile Web using WML.
WML Structures
Each WML document consists of multiple cards.
A card represents a single screen.
Cards can be grouped into a deck, the smallest unit of WML sent to a WAP browser.
WML Basic Features
Text and images can be presented to the user.
UI presentation varies depending on the device.
Offers history mechanism for navigation and intercard navigation elements.
Allows saving state between different decks without server interaction.
Advantages
Compact and small in size.
Can be compressed using binary encoding to save bandwidth.
Saves state between cards within the deck without server intervention.
UI elements suitable for small screens.
Disadvantages
Limited UI screen elements.
Only supports monochrome images (WBMP).
UI screen implementation varies with devices.
Not suitable for displaying rich multimedia content.
XHTML Mobile Profile (XHTML-MP)
XHTML-MP is a specialization of XHTML designed for mobile devices.
XHTML-MP 1.0 was defined by the Open Mobile Alliance (OMA) and is an extension of XHTML Basic 1.0.
Mobile web pages developed using XHTML-MP can be viewed in HTML compatible browsers like Google Chrome and Internet Explorer.
Advantages
Extension of W3C-developed XHTML Basic.
Widely supported across different device platforms.
Compatible with web browsers supporting XHTML/HTML.
Supports Cascading Style Sheet styling.
Disadvantages
Developers may need to rely on ready-made templates.
XHTML is an extension rather than being designed specifically for mobile devices.
HTML5 (Hypertext Markup Language 5)
HTML5 is the current standard released by W3C for developing mobile web pages and mobile web applications.
It includes markup languages derived from HTML 4.01 along with new Modular Application Programming Interfaces (APIs).
APIs Supported by HTML5
Web Storage
Geolocation
Advantages
Well-defined W3C standard supported by most modern devices.
HTML5 APIs provide access to native mobile features.
Supports mobile web application templates and frameworks.
Disadvantages
Higher learning curve compared to XHTML-Mobile Profile.
APIs may not be supported uniformly across all devices or may be implemented differently.
Viewport in HTML5
The viewport is the visible area of a web page for the user.
HTML5 introduced viewport control using the <meta> tag.
Web Storage
HTML5 introduces technologies for client-side data storage, reducing reliance on server-side storage.
Data can be synced back to the server or remain only on the client device.
It functions as a simple client-side database, storing data in key/value pairs.
Types of Web Storage
Local storage: Data stored with no expiration date, available even when the browser or tab is closed.
Session storage: Data stored for one session, cleared when the browser is closed.
Advantages
Enables offline functionality for web applications.
Allows quick access to a large corpus of data without redownloading.
No server infrastructure required.
Disadvantages
Limited to storing strings.
Data is more vulnerable compared to server-side storage.
Not accessible from multiple clients.
Should only be used for non-critical data.
HTML5 Media Capture
Enables mobile web applications to access the device's camera, microphone, and more.
HTML5 Geolocation
Provides geographical position of the user.
More accurate with GPS-enabled devices.
WebGL (Web Graphics Library)
Renders interactive 2D and 3D graphics within compatible web browsers.
Integrated with other web standards for GPU-accelerated usage.
Other Useful APIs for Mobile
Device Orientation
Battery Status
Vibration
Notifications
Motion Sensors
etc
Chapter 4b : Mobile Web Application
Designing Interaction in Mobile Web
Designing Interaction in Mobile Web
How is mobile different?
Mobile design is distinct, not just in size but also in physicality and specifications.
Mobile devices offer unique design affordances and requirements.
Their lightweight and portability make them more convenient for regular use.
Users often develop a unique emotional connection with their mobile devices.
How, where and when
Mobile devices offer constant access, leading to more frequent usage.
They accompany us during various activities like commuting on a bus, walking, or even while watching TV.
Mobile devices are often used concurrently with other tasks.
Usage scenarios may involve challenging viewing conditions or distractions.
How we behave and feel
Different attitudes, behaviors, and priorities are observed while using mobile devices.
Mobile devices offer a sense of freedom and control to users.
Some users develop a genuine affection for their mobile devices.
Mobile devices are perceived as 'alive', an extension of one's body and personality.
Physicality and specifications
Mobile devices primarily use touch screens, necessitating gesture-based interactions alongside simple interface elements.
Due to their smaller dimensions, content structures on mobile devices are often expected to be simpler and smaller.
Designs for mobile devices need to be optimized for loading time and reduced data requirements due to limited bandwidth and connectivity.
Interaction Design:
Interaction design focuses on how users engage with information, directly or indirectly, to create a meaningful experience.
Considerations when designing interactions in Mobile Web:
Most modern mobile devices utilize touch screens, offering both opportunities and constraints.
Design should prioritize how users interact with the content, not just the content itself.
When designing for ergonomics, consider:
Device dimensions.
Good mobile developers consider different device dimensions.
Popular aspect ratios exist for mobile devices.
Two main orientations are common: portrait and landscape.
User holding patterns.
Users hold their phones in three basic ways: One Handed, Cradled, Two handed.
Users often change their holding patterns based on the task they are performing.
Heat maps denote frequently accessed areas: Green for less accessed, Yellow for natural, Red for frequently accessed.
The Thumb Zone indicates areas easy for thumb tapping, typically used in one-handed use.
Summary of user holding patterns: One handed—49%, Cradled—36%, Two handed—15%.
Gestures are crucial in mobile interaction design and include Press/Single Tap, Long Press/Long Tap, Double Press/Double Tap, Small Swipe, Large Swipe/Fling, Pinch/Spread.
Hit areas.
Information architecture.
Responsive sites tend to follow standard patterns, while native apps often use tab-based navigation.
There's no universally "right" way to architect a mobile site or application.
Popular mobile information architecture patterns include:
Hierarchy
Hierarchy follows a standard site structure with an index page and subpages.
Responsive site design may limit the flexibility of hierarchy.
Suitable for organizing complex site structures resembling desktop sites.
Hub & spoke
Hub & spoke pattern offers a central index for navigation.
Users navigate from the hub to specific sections (spokes) but return to the hub to explore other sections.
Ideal for multi-functional tools with distinct internal navigation and purposes.
Nested doll
Nested doll pattern guides users linearly to more detailed content.
Suitable for apps or websites focusing on singular or closely related topics.
Can be used as a subsection pattern within other parent patterns like standard hierarchy or hub and spoke.
Bento box
Displays detailed content directly on the index screen using components.
Suited more for tablets than mobile devices due to complexity.
Ideal for multi-functional tools and content-based tablet apps with a cohesive theme.
Tabbed view
Tabbed view: Familiar pattern for regular app users.
Sections tied together by a toolbar menu.
Enables quick scanning and understanding of app functionality upon opening.
Ideal for tools-based apps with a cohesive theme and multi-tasking capabilities.
Filtered view
Enables users to navigate within a dataset by selecting filter options.
Allows users to explore content according to their preferences.
Ideal for apps or websites with extensive content like articles, images, and videos, such as magazine-style apps or sites.
Handling Web Device Proliferation
Device proliferation
Each device displays applications slightly differently, affecting usability.
Mobile devices vary in:
Screen size
Aspect ratios
Screen densities (pixel densities)
Browser capabilities (support for HTML5 or XHTML-MP)
Strategies for handling device proliferation:
Detect, Adapt, Deliver (DAD) process:
Detect
: Identify the device requesting content using user-agent and device databases.
Adapt
: Format content to fit device constraints, including screen size and features.
Deliver
: Serve adapted content to the device, often requiring testing for compatibility.
Ideally, one system should handle multi-serving all content, with a central data source outputting content to various contexts using necessary external tools.
The DAD process is also called "multi-serving," serving the same content adapted to different devices.
Designing for Context
Application Use-Case:
Determine why users would utilize the application.
Understand the primary purpose, such as searching tickets, finding taxis, taking photos, sharing info, or getting status updates.
Situation and Timing:
Consider when users will use the application.
Assess if they will be alone, with friends, in tense situations, or during happy moments.
Target Users:
Focus on users, not just the app itself.
Identify the intended audience and predict their behaviors.
Location:
Determine typical usage locations of the application.
Evaluate if it's primarily used outdoors, indoors, in malls, at bus stations, or in diners/cafés.