FIT1050 Web Fundamentals
Mobile Web Design and Development
Copyright Warning
Copyright By PowCoder代写 加微信 powcoder
Commonwealth of Australia Copyright Act 1968
This material has been reproduced and communicated to you by or on behalf of Monash University in accordance with section 113P of the Copyright Act 1968 (the Act).
The material in this communication may be subject to copyright under the Act. Any further reproduction or communication of this material by you may be the subject of copyright protection under the Act.
Learning objectives
Evolution of mobile browsing
¡ñ Changes in communication technology
¡ñ Changes in browsing devices Mobile content delivery approaches
¡ñ Compare strategies for delivering mobile content Mobile web design
¡ñ Device display considerations
¡ñ User input considerations
Evolution of Mobile Browsing
Early mobile web browsing
Due to limited bandwidth and technical capabilities of early mobile devices, information access was not a typical web browsing experience:
¡ñ WAP (Wireless Application Protocol) provided a standard protocol stack for mobile phones.
¡ñ WAP browsers were limited in features.
¡ñ WML (Wireless Markup Language) was very
simple compared to HTML.
¡ñ WAP Gateways translate HTML to WML.
Evolving mobile connectivity
¡ñ Slower than dial-up Internet: ~9.5Kb/s
¡ñ Mobile data cannot be used during
phone calls
¡ñ Faster than dial-up Internet: ~100Kb/s
2.75G EDGE
¡ñ Equivalent to early broadband internet speeds: ~350Kb/s
¡ñ Expected data rates vary based
on situation.
¡ñ Stationary or
walking: ~2Mb/s
¡ñ Typical moving
vehicle: ~348Kb/s 3.5G HSPA
¡ñ Up to ~14Mb/s
3.75G HSPA+
¡ñ Up to ~150Mb/s
¡ñ Long-Term ¡ñ
Evolution ¡ñ
¡ñ Theoretical speeds
reaching 300Mb/s
¡ñ Typical speeds
~10-100Mb/s ¡ñ
4G LTE Advanced ¡ñ Up to 1Gb/s
¡ñ Mid-band: 100-900Mb/s
¡ñ High-band: 2Gb/s
Listed speeds are theoretical maximums
¡ñ Shown in kilobits, megabits and gigabits.
¡ñ Typical speeds are dependent on many
factors, usually 10% of theoretical speed
2020 5G NR
Different frequency bands for different levels coverage and bandwidth. Low-band: 50Mb/s
How different types of 5G are utilised
Evolving web browsing devices
From feature phones and PDAs, to smartphones and tablets.
Google’s mobile ranking update
In November 2016, many news sources reported…
“Mobile internet usage surpasses desktop usage for the first time…”
– https://bgr.com/2016/11/02/internet-usage-desktop-vs-mobile/
2015-2016 also saw mobile-friendly updates to Google’s ranking algorithms. Affectionately termed by popular media as: “Mobilegeddon”
StatCounter global trend leading to Mobilegeddon
Some predicted that this trend would continue to the demise of desktop browsing…
The aftermath of Mobilegeddon
Global trends are not the whole story
Basing predictions on global trends without considering the localised demographics and events is an unreliable approach.
Web development site W3Schools has said the following on the subject of its web browser statistics:
“You cannot – as a web developer – rely ONLY on statistics. Statistics can be
misleading. Global averages may not always be relevant to your website.
Different sites attract different audiences.”
http://web.archive.org/web/2015/http://www.w3schools.com/browsers/browsers_stats.asp
Consider the following localised statistics
https://gs.statcounter.com/platform-market-share/desktop-mobile-tablet/
Use analytics for real user behaviour
Mobile Content Delivery Approaches
How websites are accessed
Excluding search, entering a web site address is more difficult on mobile devices.
¡ñ Software keyboards are more difficult to use accurately
¡ñ Characters required for URL entry are sometimes hidden
¡ñ Long URLs might not be fully visible while typing
There are a few commonly used solutions:
¡ñ Shorter URLS
¡ð URL shortening tools: https://tiny.url/, http://bit.ly/
¡ñ QR codes and NFC tags
¡ð User may need to install an app and be in close proximity
¡ñ Voice input (mostly executing web searches)
What do you think? Are these safe?
Mobile content serving approaches
Generally, one of 4 methods used to serve web content for mobile devices:
¡ñ Desktop website + native app
¡ñ Desktop site + mobile site
¡ñ User-agent sniffing
¡ñ Responsive web design
Each method has its own strengths and weaknesses.
https://developers.google.com/web/fundamentals/codelabs/your-first-multi-screen-site
Desktop website + native app
Request: GET http://www.example.com
Website Folder
Desktop Website
Response Data
Request Data
Desktop site + separate mobile site
Request: GET http://www.example.com
Desktop Website
Mobile Website
Desktop Site Files
Mobile Site Files
Request GET http://m.example.com
Common mobile URL formats
¡ñ Mobile site in a sub-folder: http://example.com/mobile ¡ð Implies that mobile content is less important.
¡ñ Mobile site on a subdomain: http://m.example.com
¡ð Implies that mobile content is somewhat equivalent to desktop.
¡ñ Mobile site on dedicated TLD: http://example.mobi
¡ð Requires registration of an extra domain, can’t combine with country TLDs.
-Lee has argued against the use a dedicated mobile TLD.
“The Web is designed as a universal space. Dividing the Web into information destined for different devices, user, or classes of information, breaks the Web in a fundamental way.”
Separate sites + user-agent sniffing
Request: GET http://www.example.com; User-agent: Mozilla/5.0 (Windows NT ; WOW64) Firefox/45.0
Desktop Website
Mobile Website
Desktop Site Files
Mobile Site Files
Request GET http://www.example.com; User-agent: Mozilla/5.0 (Linux; Android; Nexus 5) Chrome/49.0
Single responsive site
Request: GET http://www.example.com
Responsive Website
Website Folder
Request GET http://www.example.com
Designing for Mobile Devices
Design considerations
Differences between mobile and desktop – both features and limitations influence how we plan and execute designs.
¡ñ Variety of screen sizes, resolutions and aspect ratios
¡ñ Varying CPU power and RAM limitations of devices
¡ñ Unpredictable bandwidth and data limits
¡ñ Touch is the most common user input method
This considerations are not exclusive to mobile devices, but impact users with mobile devices more frequently.
Review: Touch target sizes
As discussed in Lecture 8 (Accessbility), touch input is less accurate than mouse pointer input. Major platforms recommend similar finger-friendly target sizes.
¡ñ Physical ~7-10mm ¡ñ Apple 44px
¡ñ Google 48px
¡ñ Microsoft 40px
These px measurements are in device-independent CSS pixels that already take into account any scaling from the device pixel ratio.
Physical dimension vs. screen resolution
Screen resolution vs. viewport resolution
Screen reachability
For single-handed use, thumb-zone affordance may need to be considered.
Adapted from: http://scotthurff.com/posts/how-to-design-for-thumbs-in-the-era-of-huge-screens
Changing mobile navigation conventions
Consider placement of core app features, and fixed position menu bars.
What compromises are being made here?
Mobile-friendly keyboard input
An advantage of mobile input is the ability to programmatically select different keyboard layouts.
Input types are easy to set.
https://developer.apple.com/library/archive/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html
Responsive design with viewport breakpoints
CSS breakpoints allow different styles to be applied based on viewport width.
Desktop & Tablet Landscape Large Tablet Mobile & Small Tablet
media=screen media=(max-width:960px) media=(max-width:768px)
Testing mobile websites
Actual hardware (real physical devices)
¡ñ Most accurate, but expensive and inconvenient for comprehensive testing
Simulators and emulators
¡ñ Simulators (such as Chrome’s device mode) are somewhat accurate
¡ñ Emulators provide more accurate rendering, but inaccurate performance
Screenshot services (e.g. https://www.browserstack.com/screenshots)
¡ñ Not interactive, still useful for quick layout checks
Interactive remote devices (e.g. https://www.browserstack.com/live) ¡ñ More expensive than screenshot services, may exhibit some lag.
¡ñ Web-servers and server-side scripting.
¡ñ Create a simple database-driven content management backend.
Self-study
¡ñ Continue working on your assignment using your chosen template.
¡ñ Remember to use Chrome’s DevTools to inspect and modify the page.
¡ñ Participation Milestone 4 takes place in this week’s lab class.
¡ñ You must attend your allocated lab class for this participation assessment.
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com