Topic 4-B — Mobile Web Experience (Full Study Notes)

Mobile Web vs Desktop Web

• Definition (W3C): “Mobile Web” = browser-based Internet services accessed from handheld devices (smartphones, feature phones, tablets) over any wireless network.
• Two viewpoints
  • User – simply web content reached via a mobile device.
  • Developer – a bundle of best-practices, design patterns & new code required to adapt sites to mobile constraints.
• Key differences
  • Distinct browsing experience & contexts (on-the-go, short sessions).
  • Behavioural shift: fewer “pop-up” multitasking situations.
  • Radically different browser DPI & aspect ratios.
  • Navigation is contextual, not global; platform UX = tapable vs clickable.
  • Slower networks, higher latency; weaker CPU & less RAM on devices.
• Reflection Q: “When do you choose Desktop vs Mobile Web?” – encourages situational design thinking.

Why Mobile Presence Matters (Business & Usage Statistics)

• Vast majority of users abandon non-mobile-optimised sites → lost sales & brand equity.
• More people now search for product/service info via mobile than desktop.
• Businesses can no longer ignore the “mobile revolution.”
• Global usage highlights (2016):
  • > mobile Internet users than desktop.
  • $52.7\%$ of all Internet users access via mobile.
  • Google ranks sites partly on mobile compatibility.
  • $4$ of $5$ consumers use a smartphone to shop.
  • $50\%$ abandon a page if load time >10\,\text{s}; $60\%$ never return.
• U.S. content categories with mobile-first engagement (Aug 2013):
  • Photos $92\%$ mobile / $8\%$ desktop.
  • Maps $86\%$ / $14\%$.
  • Games $78\%$ / $22\%$ … down to Portals $25\%$ / $75\%$.
• Sharing behaviour: mobile sharing ≈ $7.7\%$ of total activity vs desktop $4.1\%$ (≈ $2\times$ more social).
• Malaysia snapshot
  • $20.6\,\text{M}$ active Internet users ($68\%$ pop.).
  • $18\,\text{M}$ active mobile-Internet users ($59\%$).
  • Avg daily usage: $4\,\text{h}\,38\text{m}$ PC/tablet vs $3\,\text{h}\,37\text{m}$ mobile.
  • $56\%$ use social media apps, $47\%$ do location-based search, $37\%$ do online banking.

Evolution of the Mobile Web ("Eras")

1. WAP 1.0 Era
   • Protocol suite bridging devices & Internet via WAP gateway.
   • Mark-up: WML.
   • Popular worldwide except Japan (NTT DoCoMo i-Mode, CHTML).
   • Obsolete; unsupported by modern iOS/Android browsers.
2. WAP 2.0 Era (released $2002$, mainstream $\approx2004$)
   • Deprecates WML; introduces XHTML-Mobile Profile.
   • Aligns closer to regular HTTP; enables “$m.$” sub-domains (e.g.
   $\text{m.facebook.com}$).
3. HTML5 Era
   • Promotes single URL with responsive views (no dedicated mobile URL).
   • Exposes native-like APIs (camera, mic, GPS, GPU).
   • Foundation for Progressive Web Apps (though term not used here).

Mobile Site Architectures

• Separate mobile site (m-subdomain)
  • Distinct HTML/CSS codebase.
  • Pros: tailored UX; legacy support.
  • Cons: duplicate content, SEO & maintenance overhead.
• Responsive Web Design (RWD) • “Flexible layouts that adapt to any size/orientation.” • Three pillars:
  1. Flexible grid-based layouts (percent widths).
  2. CSS3 media queries.
  3. Flexible images/media.
     • Advantages:
     – Single HTML & CSS to maintain.
     – Works on all devices, improves UX, future-proofing, adaptability.

Mobile Browsing Experience & Navigation Paradigms

• Browsers implement one or more navigation modes:

1. Cursor Navigation
   • Emulates mouse cursor via arrow keys + fire/enter.
   • Browser auto-jumps to nearest clickable element.
   • Requires hardware keypad/D-pad.
2. Focus Navigation
   • Most common on low-/mid-range non-touch devices.
   • Highlight rectangle shows current focus; arrows move focus.
3. Touch Navigation
   • Resistive & capacitive screens; supports gestures: touch, double-touch, drag, swipe, fling.
4. Multitouch Navigation
   • Extension adding simultaneous multi-point input, e.g. pinch, two-finger tap, rotate.
   • Improves sensitivity & gesture vocabulary.

Touchscreen Technologies

• Resistive Touchscreen
  • Works by pressure; any pointing object (finger, gloved finger, pen) triggers touch.
  • Pros: high accuracy (handwriting), cheap.
  • Cons: multilayer glare, poor sunlight visibility, limited/no multitouch, soft layer prone to scratches.
• Capacitive Touchscreen
  • Detects change in electrical field from human skin.
  • Pros: multitouch, good sunlight visibility, glass surface more scratch-resistant, highly responsive.
  • Cons: needs conductive stylus/finger (no normal gloves), precision limited to fingertip $\approx1\text{ cm}^2$, costlier.
• Accessory: Capacitive gloves embed conductive thread enabling winter use.
• Further learning resources (lecture links):
  • “How Touchscreen Works” (YouTube).
  • “Resistive vs Capacitive Touchscreens” (YouTube).

Zoom Experiences on Mobile Browsers

• Basic Zooming
  • Page rendered $1{:}1$ initially; user can scale fonts; scrollbar appears when overflow.
  • Modern browsers allow gesture-based zoom to improve readability.
• Smart Zooming
  • Advanced mode where any zoom level allowed; fonts, images & layout scale cohesively.
  • One gesture/menu switches from full-page view to paragraph view (e.g., Palm WebOS, Prezi demo).
• Visual examples given via emulator screenshots.

Browser Architectures: Direct vs Cloud/Proxied

• Direct Browsers
  • Connect straight to website server.
  • All processing/rendering done locally on device.
  • Favoured by privacy-conscious users; no intermediate server.
• Cloud-Based / Proxied Browsers • Use a proxy in the cloud to fetch & optimise pages before delivery. • On-the-fly benefits:
  1. Remove non-mobile features.
  2. Compress data & images.
  3. Pre-render for faster display.
  4. Convert Flash/unsupported formats.
  5. Encrypt traffic.
  6. Cache for later quick access.
     • Reduced bandwidth, faster navigation.
     • Examples: Opera Mini, Nokia Xpress, Chrome (Data Saver).
• Drawbacks
  • Privacy concerns; all traffic flows through proxy.
  • Image/media quality may degrade; inconsistent rendering vs direct browsers.
  • Developers face extra cross-browser variation.

Lecture Take-Away Summary

• Compared Mobile vs Desktop Web from user & developer angles.
• Tracked Mobile Web history: WAP 1 → WAP 2 → HTML5 & i-Mode alternative.
• Architectural choice: $m.$ sub-domain vs Responsive Web Design.
• Explored browsing experience: Cursor, Focus, Touch & Multitouch navigation; zoom behaviours.
• Hardware focus: Resistive vs Capacitive touch technologies.
• Differentiated Direct vs Cloud/Proxied mobile browsers with pros & cons.

Administrative / Exam Note

• Test 1 (Common Test)
  • Date: $4\,\text{Nov}$
  • Time: $3{:}00\,\text{pm} - 5{:}00\,\text{pm}$
  • Venue: DK2
• “Gentle Reminder” – prepare based on today’s content.

Ethical & Practical Implications (implicit discussion)

• Accessibility & inclusion: slower hardware/network, touch precision → necessitate responsive, efficient designs.
• Privacy vs performance trade-off with cloud browsers.
• Business competitiveness relies on adapting to user behaviour metrics.