Designing for Mobile Devices

Transcription

1 Designing for Mobile Devices October 2010 Pawel Zareba

2 Table of Contents Mobile market overview... 3 Smartphone penetration... 3 Mobile browsers:... 9 Browser detect techniques Progressive enhancement: Mobile UI Javascript Performance: Touch events Web standards Mark-up Validation Emulation Viewports & Zooming Issues: Screens: HTML5 compatibility CSS Media Queries: Click-to-Call SDKs Frameworks: Other Related: Examples: Refferences:... 33

3 Mobile market overview Popularity of different mobile browsing platforms country by country: Smartphone penetration

4

5

6 report/

7

8

9 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: 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

10 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 Mobile Browsers Details

11 Browser detect techniques PHP switching code [ including cache Detecting specific phone Device Atlas [ Wurl & Wall [ Tera-WURFL [ 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 [

12 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.

13 Progressive enhancement: xhtml -> CSS -> CSS3 -> JavaScript [screenshoots] [screenshoots]

14 Mobile UI

15

16 Javascript Performance: Javascript performance test: Performance optimization: Touch events Touch events on iphone: Touch events corss-platform comparison:

17 Web standards Standard markup language for pages is xhtml mobile profile (xhtml mp) ( oduction) W3C: Web server must support URL without requiring www Ideally separate domain Tab index Access Key Phone on click No frames Best Practices: o o o o Presentation: Mobile Sitemap: &hl=en Apple Developer Centre: b/conceptual/iphonewebapphig/metricslayout/metricslayout.html #//apple_ref/doc/uid/tp ch6-sw1

18 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" " <html xmlns=" <head> <title>xhtml MP Tutorial</title> </head> <body> <p>hello world. Welcome to our XHTML MP tutorial.</p> </body> </html>

19 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): mobiready testing tool: Acid2 Browser Test:

20 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:

21 Screens: Around 80% less space than on regular page

22

23

24

25

26 ual/iphonewebapphig/metricslayout/metricslayout.html#//apple_ref/doc/uid/ TP CH6-SW1 HTML5 compatibility

27 CSS Media Queries: /* Smartphones (portrait and landscape) only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) only screen and (max-width : 320px) { /* Styles */ } /* ipads (portrait and landscape) only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* ipads (landscape) only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* ipads (portrait) only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* Desktops and laptops only screen

28 and (min-width : 1224px) { /* Styles */ } /* Large screens only screen and (min-width : 1824px) { /* Styles */ } /* iphone 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"

29 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>

30 Click-to-Call iphone: <a href="tel: " target="_self">description</a> Other phones: <a href="wtai://wp/mc; "> SDKs Android: Apple:

31 Frameworks: jquery:

32 Sencha:

33 Other Related: UI psd Android sites-to-visit-from-your-android-phone/ Examples: Refferences: Device libraries

34