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: <!DOCTYPE HTML>) 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: <!DOCTYPE HTML>) 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: <!DOCTYPE HTML>) 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 Percentof pages 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? .