Designing for Mobile Devices October 2010 Pawel Zareba
Table of Contents Mobile market overview... 3 Smartphone penetration... 3 Mobile browsers:... 9 Browser detect techniques... 11 Progressive enhancement:... 13 Mobile UI... 14 Javascript Performance:... 16 Touch events... 16 Web standards... 17 Mark-up... 18 Validation... 19 Emulation... 20 Viewports & Zooming Issues:... 20 Screens:... 21 HTML5 compatibility... 26 CSS Media Queries:... 27 Click-to-Call... 30 SDKs... 30 Frameworks:... 31 Other Related:... 33 Examples:... 33 Refferences:... 33
Mobile market overview Popularity of different mobile browsing platforms country by country: http://stargrange.com/mobile-market-share-feb-2010/ Smartphone penetration http://blog.nielsen.com/nielsenwire/online_mobile/android-soars-but-iphone-stillmost-desired-as-smartphones-grab-25-of-u-s-mobile-market/
http://blog.nielsen.com/nielsenwire/online_mobile/android-soars-but-iphone-stillmost-desired-as-smartphones-grab-25-of-u-s-mobile-market/ http://blog.nielsen.com/nielsenwire/online_mobile/android-soars-but-iphone-stillmost-desired-as-smartphones-grab-25-of-u-s-mobile-market/
http://blog.nielsen.com/nielsenwire/online_mobile/android-soars-but-iphone-stillmost-desired-as-smartphones-grab-25-of-u-s-mobile-market/
http://tamspalm.tamoggemon.com/2010/05/30/palm-pre-in-admobs-april-2010- report/ http://entropydigital.co.uk/2010/08/be-careful-with-latest-smartphone-marketshare-data/
http://gigaom.files.wordpress.com/2010/03/go-smartphone-os-r6-1.jpg
http://www.browse-tools.com/tag/smartphone-market-share-2010/
Mobile browsers: Full Browsers: Safari Webkit support; iphone users are pretty decent at upgrading their phones to the latest firmwares, so you generally have to test in the latest version only; Does not have caching; Fairly slow when it comes to JavaScript. Use CSS animations and transitions instead; Zooming: all elements retain their fixed values, while most competitors adapt the width of text elements to the current zoom level. Thus, very long lines of text are hard to read on Safari. Android Webkit Webkit support; Testing requires both an 1.x and a 2.x device Dolfin Samsung; WebKit support; Poor support of especially in the viewport properties BlackBerry Webkit- Default browser of BlackBerry OS 6 and higher Opera Mobile - MeeGo, Symbian, Windows Mobile; Presto; Disadvantages of opera: http://www.quirksmode.org/blog/archives/2010/07/operas_problems.html Palm WebKit HP; WebKit; MicroB Nokia N900; Gecko; Phantom LG; WebKit; bugs in meta viewport; Symbian WebKit Nokia, WebKit; Symbian WebKit is the mobile browser with the highest installed base in the world; Versions 1-3; Caching is extremely aggressive; you always have to flush the cache before reloading your test pages; Poor JavaScript performance. S40 WebKit Nokia, Webkit; Firefox - Android, MeeGo; Gecko; Trident; BlackBerry old RIM, BlackBerry old;mango; Poor JavaScript performance; See appendix B ID Mobile Microsoft; Windows Mobile; IE on Windows Mobile 6.5 is based on IE6 and calls itself IE6. IE on Windows Mobile 6.1 is based on
IE4 and also calls itself IE6; IE on Windows Mobile 6.5 already calls itself Windows Phone; NetFornt - LiMo, Windows Mobile; Samsung and SonyEricsson phones; Obigo Teleca, Brew, LiMo, MeeGo; LG phone Mini Browsers: Opera Mini - Android, bada, BlackBerry old, Brew, ios, S40, Symbian, Windows Mobile Bolt - BlackBerry, BlackBerry old, Symbian, Windows Mobile Skyfire - Browser discontinued as of version 2.0; it s now a skin over Android WebKit Ovi Nokia UCWeb - The most popular browser in China Attachment A: Summarize of the mobile browsers http://www.quirksmode.org/mobile/mobilemarket.html Mobile Browsers Details http://www.quirksmode.org/mobile/browsers.html
Browser detect techniques PHP switching code [http://mobiforge.com/page/switching-code-php] including cache Detecting specific phone Device Atlas [http://deviceatlas.com/] Wurl & Wall [http://wurfl.sourceforge.net/] Tera-WURFL 2.1.3 [http://www.tera-wurfl.com/] o Redirecting mobile visitors to the mobile version of your site o Detecting the type of streaming video that a visiting mobile device supports o Detecting iphone, ipod and ipad visitors and delivering them an iphone-friendly version of your site o Used in conjunction with WALL4PHP or HAWHAW to create a website in an abstract language which is delivered to the visiting user in CHTML, XHTML, XHTML-MP, or WML, based on the mobile browser's support o Detecting ringtone download support and supported ringtone formats o Detecting the screen resolution of the device and resizing images and wallpapers/backgrounds to an appropriate size for the device. o Detecting support for Javascript, Java/J2ME and Flash Lite WordPress Mobile Pack [http://wordpress.org/extend/plugins/wordpress-mobile-pack/]
Disadvantages: It s incomplete. There s just no way we re going to be able to incorporateall devices in this detect. And even if we miraculously did, the next week a new device would hit the market and we d be incomplete again. It s unreliable. You re always going to miss something or make a mistake in your detection. It s an arms race. If device detection really catches on, browsers will start to spoof their user agent strings to end up on the right side of the detects. Web developers will retaliate by even more finely-grained (and even less complete and reliable) detects, which will cause the browser vendors to improve their spoofing etc. This has happened on desktop (just ask Opera about it), and we should keep the mobile space free of this nonsense. It s cheating. If you make any mistake at all (and that s inevitable, really), you re either denying advanced functionality to a browser tht can handle it, or sending advanced functionality to browsers that can t handle it. In either case you cheat your end users. It s inflexible. Sites that were created for any device will be much more flexible in all kinds of situations because the web developer planned for the unknown. Conversely, if you rigidly sort devices into groups and then code for those groups, this rigidity is going to make your site unable to react to the unforeseen.
Progressive enhancement: xhtml -> CSS -> CSS3 -> JavaScript http://jquerymobile.com/designs/ http://jquerymobile.com/designs/#smartphone [screenshoots] http://jquerymobile.com/gbs/ [screenshoots]
Mobile UI
Javascript Performance: Javascript performance test: http://www.youtube.com/watch?v=e9baqcks7as&feature=player_embedded Performance optimization: http://www.amazon.com/even-faster-web-sites-performance/dp/0596522304 Touch events http://www.devlounge.net/2010/05http://www.quirksmode.org/mobile/advisorytouch.html Touch events on iphone: http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/ Touch events corss-platform comparison: http://www.quirksmode.org/mobile/tabletouch.html
Web standards Standard markup language for pages is xhtml mobile profile (xhtml mp) (http://www.developershome.com/wap/xhtmlmp/xhtml_mp_tutorial.asp?page=intr oduction) W3C: http://www.w3.org/mobile/specifications Web server must support URL without requiring www Ideally separate domain Tab index Access Key Phone on click No frames Best Practices: o http://www.w3.org/tr/2008/rec-mobile-bp-20080729 o http://www.w3.org/tr/mobile-bp/ o http://www.w3.org/2005/mwi/bpwg/techs/techniquesintro o Presentation: http://mobiforge.com/files/training/index.htm Mobile Sitemap: http://www.google.com/support/webmasters/bin/answer.py?answer= 34648&hl=en Apple Developer Centre: http://developer.apple.com/library/safari/#documentation/internetwe b/conceptual/iphonewebapphig/metricslayout/metricslayout.html #//apple_ref/doc/uid/tp40007900-ch6-sw1
Mark-up Mobile web pages come in several markup dialects, including WML, XHTML Basic, XHTML MP and chtml. WML is an older standard that is supported by many browsers, and still widely used in some markets. chtml is used primarily in Japan, but also some parts of Europe. XHTML Basic and XHTML MP are almost identical subsets of HTML, used globally, but particularly in North America and Europe. XHTML dialects are the newest and most expressive of markups, and are gaining usage. XHTML Basic 1.1 and XHTML MP 1.2 are a good choice for new development, but your choice will vary according to your target market. [Google Webmaster Centre] Example: <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/dtd/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>xhtml MP Tutorial</title> </head> <body> <p>hello world. Welcome to our XHTML MP tutorial.</p> </body> </html>
Validation Valid pages are likely to render correctly on more mobile devices. Published mobile markup standards include: XHTML Basic 1.1 XHTML MP 1.2 chtml WML 1.3 Validators include the following: Mobile-friendly XHTML Validator (W3C) Mobile-readiness checker (.mobi) mobileok Basic Checker (TAW) WuRML (shadowplay.net) HTML VALIDATOR (based on Tidy and OpenSP):http://users.skynet.be/mgueury/mozilla/ mobiready testing tool:http://ready.mobi/launch.jsp?locale=en_en Acid2 Browser Test:http://www.webstandards.org/action/acid2/
Emulation You may be confident that your page is valid XHTML or valid WML, but are you certain that it's going to look right on a real phone screen? Use an emulator to test your page, and avoid the hassle of buying them all. Phone Simulator (Openwave) Mobile emulator (.mobi) i-mode emulator (DoCoMo) User-Agent Switcher (Firefox plug-in) wmlbrowser (Firefox plug-in) XHTML Mobile Profile (Firefox plug-in) Google resources About mobile sites and the Google index Other resources W3C Mobile Web Best Practices.mobi Switch On! Guides The Wireless FAQ mobileok Basic Tests WURFL (Wireless Universal Resource File) Viewports& Zooming Issues: http://www.quirksmode.org/mobile/viewports.html http://www.quirksmode.org/mobile/viewports2.html
Screens: Around 80% less space than on regular page
http://developer.apple.com/library/safari/#documentation/internetweb/concept ual/iphonewebapphig/metricslayout/metricslayout.html#//apple_ref/doc/uid/ TP40007900-CH6-SW1 HTML5 compatibility http://www.quirksmode.org/html5/compatibility.html
CSS Media Queries: /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* ipads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* ipads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* ipads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen
and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iphone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ } We can also serve alternative style sheets using the same queries as attributes on your link elements: <head> <link rel="stylesheet" href="smartphone.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)"> <link rel="stylesheet" href="smartphone-landscape.css" media="only screen and (min-width : 321px)"> <link rel="stylesheet" href="smartphone-portrait.css" media="only screen and (max-width : 320px)"> <link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)"> <link rel="stylesheet" href="ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)"> <link rel="stylesheet" href="ipad-portrait.css"
media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)"> <link rel="stylesheet" href="widescreen.css" media="only screen and (min-width : 1824px)"> <link rel="stylesheet" href="iphone4.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)"> </head>
Click-to-Call iphone: <a href="tel:555-1212" target="_self">description</a> Other phones: <a href="wtai://wp/mc;+4407546353737"> SDKs Android: http://developer.android.com/sdk/index.html Apple: http://developer.apple.com/devcenter/ios/index.action
Frameworks: jquery: http://jquerymobile.com/gbs/
Sencha: http://www.sencha.com/products/touch/demos.php
Other Related: http://www.1stwebdesigner.com/development/snippets-html5-boilerplate/ http://www.stemkoski.com/how-to-design-websites-for-mobile-phones/ http://mobiforge.com/developing/story/lightweight-device-detection-php http://validator.w3.org/mobile/ http://articles.sitepoint.com/article/designing-for-mobile-web/3 http://designingwebinterfaces.com/iphone-3g-design-tips http://www.smashingmagazine.com/2009/07/21/iphone-apps-designmistakes-overblown-visuals/ http://mobify.me/tour/http://jquerymobile.com/gbs/ http://geocongress.us/app/ http://www.sencha.com/products/touch/demos.php UI psd http://www.1stwebdesigner.com/resources/designing-iphone-ultiateroundup-resources/ Android http://designreviver.com/tips/8-ways-to-make-your-website-mobile-friendly/ http://www.warriorpoint.com/blog/2009/05/26/android-switching-screens-inan-activity-with-animations-using-viewflipper/ http://androidandme.com/tag/mobile-web-design/ http://androidandme.com/2009/06/news/a-look-at-mobile-web-design-5- sites-to-visit-from-your-android-phone/ http://androidandme.com/2010/02/news/new-android-and-me-mobile-sitelive-now/ Examples: http://m.vw.com/ http://m.geeksquad.com/ http://androidandme.com/ http://www.bbc.co.uk/mobile/web/ Refferences: http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries http://www.quirksmode.org/blog/archives/2010/09/state_of_mobile_1.html http://www.quirksmode.org/blog/archives/2010/09/state_of_mobile_2.html Device libraries
http://deviceatlas.com/downloads