MOBILE WEB STANDARDS
Mobile Systems Seminar Talk 7 Francesco Luminati Introduction
• The “mobile world” is a booming market • Need of Internet everywhere • Need of same services on every devices
• Standards intended to help Developers
• Which are the mobile standards • What is the real situation on the web Structure
• Organizations
• Early standards
• Present standards
• Future Trends
• Browsers
• Top1000 research
• Conclusion Organizations
• Open Mobile Alliance (OMA) • Standards for mobile phone industry • Several important members like Sony-Ericsson, Motorola, Samsung • Union in 2002 • Wireless Access Protocol (WAP) Standard
• World Wide Web Consortium (W3C) • Most important web standards organization • HTML 4, XHTML 1, HTML 5, XHTML Basic
• Mobile Web Initiative • Improve the mobile web experience • Best Practices Early standards
• Situation: • 2G networks, GSM • Constricted hardware • GPRS after 2000
• Wireless Application Protocol (WAP 1.0) • WAP Forum (now OMA) • Set of proprietary standards • Markup language and transport protocols
• Wireless Markup Language (WML) • XML based language • Between Internet and the devices there is a WAP Gateway
• XHTML Basic 1.0 • W3C • Intended to support most limited devices • Restrictive XHTML with images and basic tables support • No script and frames
Present standards
• Situation • 3G networks, UMTS • 2G networks still diffused in remote regions • Smartphones
• Wireless Application Protocol 2.0 • Redesigned by OMA • TCP/IP and HTTP • XHTML-MP for markup Content standards
• XHTML Mobile Profile • Extends XHTML Basic with elements in forms, legacy and presentation and add support to internal style sheets • V. 1.1 support to scripting and events • V. 1.2 full support to form and file upload
• XHTML Basic 1.1 • Full support to XHTML forms, presentation, events and style elements
• Coordination between W3C and OMA • Very similar standards
• Both standards compatible with every XHTML browsers Presentation and multimedia standards
• Cascading Style Sheet (CSS) • Wireless CSS in WAP 2.0 (WCSS) • Subset of CSS 2, provide base functionality for mobile devices • CSS Mobile Profile by W3C (CSS-MP) • Similar to WCSS, adds optional set for advanced browsers • If optional set implemented, very similar to CSS 2.1
• Scalable Vector Graphic (SVG) • XML document to describe vector graphics • High scalability • SVG Tiny and Basic
• Synchronized Multimedia Integration Language (SMIL) • XML based language to describe animations, timing, visual transitions, … • Multimedia Messaging Service (MMS) Mobile Web Best Practices
• Defined by the Mobile Web Initiative (W3C) in 2008 • Set of recommendations finalized to improve the user experience
• Give advice about navigation and links, design, layout, content, technical issues and user input
• Not concentrated just on technical problems, but also non technical like the delivered content Future trends
• “One Web” • Reach the same functionality and content everywhere on every devices • Need of a flexible standard
• Web 2.0 from JavaScript to HTML 5 • Now tons of JavaScript code • Future HTML 5 markup • Natively browser-side support Future trends
• Web versus App • Fusion of the browser with online and offline application • Chrome OS
• HTML 5 • Better layout structure • Offline support • Web application work without connectivity • Natively support of many functionality, like video and audio
• HTML 5 as the new “One Web” standard? Browsers
• ACID3 test: • Standards compliance test • 100 subtests on various web standards and technology • HTML, XHTML, CSS, JavaScript, …
ACID3 results on mobile ACID3 results on desktop browsers browsers
100 100 90 90 80 80 70 70 60 60 50 50 Tests Tests
40 Tests 40 30 30 20 20 10 10 0 Android 2.3 iPhone IE Mobile 7 Firefox Opera Mini 0 Safari 4.3 Mobile 4 Safari 5 Chrome 10 IE 9 Firefox 4 IE 8 IE 6 Mobile browsers Desktop browsers Top1000 research
• Top 1000 webpages from alexa.com
• 4 User Agents: • Android 2.2 default browser • iPhone 4 Safari browser • Nokia 6600 default browser • Firefox 4 desktop browser
• Purpose and motivation of the test: • Evaluate the situation on the web • Check if standards are used and correctly applied • Check if best practices are applied and still actual Standards declared • Markup standards • Retrieved from the “Doctype” declaration (e.g. HTML5: )
Overwiev Mobile vs Desktop standards
900
800
700
600
500 Mobile Standards
Pages 400 Desktop Standards Not declared 300
200
100
0 Android UA Iphone UA Nokia UA Firefox UA User Agent Standards declared • Markup standards • Retrieved from the “Doctype” declaration (e.g. HTML5: )
Mobile standards
Nokia UA
XHTML Mobile 1.0
Iphone UA XHTML Mobile 1.1 XHTML Mobile 1.2 User Agents User XHTML Basic 1.0 XHTML Basic 1.1
Android UA
0 50 100 150 200 250 Pages Standards declared • Markup standards • Retrieved from the “Doctype” declaration (e.g. HTML5: )
Desktop standards
Firefox UA
Nokia UA HTML 4 HTML 4.01 XHTML 1.0
User Agent User XHTML 1.1 Iphone UA HTML 5 Others
Android UA
0 100 200 300 400 500 600 700 800 900 Pages Markup validation • Validator tool of W3C (http://validator.w3.org) • Check a webpage against the grammar it declare to use to find errors • No HTML5 validation
Validation errors
Firefox UA
Nokia UA
0 errors less than 20 errors
User Agent User between 20 - 100 errors Iphone UA more than 100 errors
Android UA
0 100 200 300 400 500 600 700 Pages Browsers
• ACID3 test: • Standards compliance test • 100 subtests on various web standards and technology • HTML, XHTML, CSS, JavaScript, …
ACID3 results on mobile ACID3 results on desktop browsers browsers
100 100 90 90 80 80 70 70 60 60 50 50 Tests Tests
40 Tests 40 30 30 20 20 10 10 0 Android 2.3 iPhone IE Mobile 7 Firefox Opera Mini 0 Safari 4.3 Mobile 4 Safari 5 Chrome 10 IE 9 Firefox 4 IE 8 IE 6 Mobile browsers Desktop browsers Webpages size • Total size with external objects (images, scripts, css,…) • Best Practices limit to 20 Kbyte Total size
Firefox UA
Nokia UA
less or equal 20 Kbyte between 20 - 100 Kbyte User Agent User Iphone UA more than 100 Kbyte
Android UA
0 100 200 300 400 500 600 700 800 900 1000 Pages Webpages size • Markup size without external objects • Best Practices limit to 10 Kbyte
Markup size
Firefox UA
Nokia UA
less or equal 10 Kbyte between 10 - 20 Kbyte User Agent User Iphone UA more than 20 Kbyte
Android UA
0 100 200 300 400 500 600 700 800 900 1000 Pages Objects on Webpages • External images, css, javascript, flash, text files • Included in a page with HTML tags, like “img”, “script”, “object” Pages with at least one object
100.00%
90.00%
80.00%
70.00%
60.00% Android UA 50.00% Iphone UA
40.00% Nokia UA Percentpages of Firefox UA 30.00%
20.00%
10.00%
0.00% Images CSS JavaScript Flash Text files Others Object type Objects on Webpages • External images, css, javascript, flash, text files • Included in a page with HTML tags, like “img”, “script”, “object” Average number of ojects per page
Firefox UA
Nokia UA Images CSS JavaScript User Agent User Iphone UA Flash Text files
Android UA
0 10 20 30 40 50 60 70 Objects Objects on Webpages • Images formats/standards
Images standards
Firefox UA
Nokia UA
JPEG GIF
User Agent User PNG Iphone UA Icon
Android UA
0 5000 10000 15000 20000 25000 30000 35000 40000 Images Objects on Webpages • Objects compared with the Markup
Average object size
70
60
50
40 Android UA Iphone UA Kbytes 30 Nokia UA Firefox UA 20
10
0 Images CSS JavaScript Flash Text files Markup Object Conclusion
• Mobile web standards are a good try, but didn’t achieve a good diffusion
• Evolution in hardware was so fast, that they are maybe not necessarily anymore
• Effort should be in evolving one universal standard and 100% compatible browsers
• Fusion between web and app is around the corner Questions? Question 1
• Do you see the need of intervention about standards and best practices viewing this results? • The web itself should be more conscious of mobile devices? Question 2
• Is a mobile web standard a necessity today? • If yes which kind of standards, still presentation and content or new one for new problems? Question 3
• What do you mean about one universal standard, is it good, is it possible? Question 4
• What do you think about the browser-based operating systems for mobile devices? • Is there no dangers in being always connected?