Presentation from the Framsia meetup describing a few baby steps to mobile friendly web sites

1. Jon Arne Sæterås Product Director, Mobiletech Twitter: @jonarnes Email: jas@mobiletech.mobi

3. Some differences

4. Context

5. View port

6. Pixels

7. Some Quick-Wins

8. Media Queries

9. JavaScript

11. Page view growth: 2009-2010: 109% 2010-2011: 150% Unique users

12. 23,7% of pupulation Device OS Source: Mobiletech.no/Forbrukerog media

13. 23,7% of pupulation Browser Connection Source: Mobiletech.no/Forbrukerog media

14. Bedtime Desktop preferred Breakfast / commuting

15. iPad ready?? http://www.apple.com/ipad/ready-for-ipad/

16. Common pitfalls Don’t forget that Data traffic is expensive The the network is slow The device has lower processing power That the interaction model is unknown That the screen is smaller

17. Context Hardware OS Physical capabilities tech perspective Browser WRT App Social networks Local user profile CRM Superlocal Home/abroad Telco network WiFi Bandwidth

18. Logic is moving More front-end! Get started! Feature detection, not device detection

19. View port The visual part of the web site http://www.flickr.com/photos/dm-set/3579287485/

20. On a desktop viewport = size of <html/> = size of the browser window

21. Visual Viewport Layout Viewport

22. Layout viewport default width iPhone Safari: 980px Opera: 850px AndriodWebKit: 800px IE: 974 px Symbian WebKit: Tries to keep the layout viewport equal to the visual viewport. BadaWebkit: layout viewport as wide as the widest element Blackberry: layout viewport equals the visual viewport at 100% zoom

23. Best user experience when visual view port width = layout view port width = device-width

24. 1px != 1px iPhone 4 has 640 physical pixels, but layout viewport is 320 “High DPI” screens “CSS pixels” Zoom level Not the same as physical pixels on the device Decides how many physical pixels a CSS pixel covers Read More: http://www.quirksmode.org/mobile/viewports.html http://www.flickr.com/photos/korosirego/

26. Different “kinds” of pixels

27. Users ZoomBaby steps: How to make use of this? http://www.flickr.com/photos/andrewrennie/

28. Overriding the default <meta name="viewport" content="width=240, height=320, user-scalable=yes, initial-scale=2.5, maximum-scale=5.0, minimum-scale=1.0" /> Width/Height of viewport Zoomable? Initial zoom <meta name="viewport” content="target-densitydpi=device-dpi" /> device-dpi: Use the device's native dpi as target dpi. low-dpi: 120dpi medium-dpi: 160dpi, which is also the default as of today high-dpi: 240dpi <number>: We take any number between 70 and 400 as a valid target dpi. 4 has 640 physical pixels, but layout viewport is 320

29. iPhone4 High DPI trick 640px wide <imgsrc=“image.png” width=“320” alt=“highdpi” /> Pysical image size = visual viewport width * pixel ratio

30. Media Queries <stylemedia="handheld” type=“” /> Small screens For big screens

31. Media queries Target size of viewport with a different CSS <link rel="stylesheet" type="text/css” media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)” href=“small-device.css" /> Landscape or portrait? <link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait-style.css” /> <link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape-style.css” /> <link media=”all and (-webkit-min-device-pixel-ratio:2)” href=”highDPI.css” type=”text/css” rel=”stylesheet” /> High DPI screens

32. Detect iPad if(navigator.platform== "iPad”){ //put iPadcss into the dom } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { /* “iPad” style*/ }

33. Javascript

35. PhoneGap – native wrapper (http://www.phonegap.com/)

36. jQuery Mobile – (http://jquerymobile.com/)

37. Zepto.js - jQuery like (http://zeptojs.com/)

38. Jo - Mobile App Framework (http://joapp.com/)

39. Unify - (http://unify.github.com/unify/)

40. Wink Toolkit - Transitions/Animations (http://www.winktoolkit.org/)

41. ChocolateChip Mobile - (http://chocolatechipmobile.wordpress.com/)

42. WebApp.Net - (http://webapp-net.com/)

43. baseJS - only Apple (http://paularmstrongdesigns.com/projects/basejs/)

44. XUI - compact (http://xuijs.com/)

45. iWebKit - (http://snippetspace.com/projects/iwebkit/)

46. jQTouch - jQuery plugin (http://www.jqtouch.com/)

47. UiUIKit - Universal iPhone UI Kit (http://code.google.com/p/iphone-universal/)

48. CiUI – (http://code.google.com/p/ciui-dev/)

49. PastryKit – Apple’s proprietary framework (http://davidbcalhoun.com/2009/pastrykit-digging-into-an-apple-pie)

50. LessFramework – (http://lessframework.com/)

51. Modernizer – Feature detection (http://www.modernizr.com) Tips: Don’t use combined css and js frameworks. Don’t use jQuery Don’t use iPhone-only libs

53. Use a manifest

54. Useinlineimages

55. HTTP headercache

57. Inline images Reduces number of http request (latency) <imgsrc="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/ /ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" width="16" height="14" alt=”inline”/>

58. Storage window.localStorage.setItem('key', 'value'); window.sessionStorage.setItem('key', 'value'); window.sessionStorage.removeItem('key'); window.localStorage.removeItem('key'); window.sessionStorage.getItem('key'); window.localStorage.getItem('key'); window.sessionStorage.clear(); window.localStorage.clear(); Cookieson steroids

59. HTTP response header 200 OK Connection: close Date: Tue, 04 Jan 2011 20:05:52 GMT Server: Apache Content-Type: text/html; charset=UTF-8 Client-Date: Tue, 04 Jan 2011 20:05:52 GMT Client-Peer: 89.221.244.18:80 Client-Response-Num: 1 Vary: Accept,User-Agent Cache-Control: no-transform, max-age=3600 Expires: <some time in the future> Last-Modified: <some time in the past> Allow caching. Don’t forget images, css and js http-headers

60. Mobile SEO 140 bill web searches pr month x 5%on mobile = 6-8 billion mobile searches Make search engines aware of your site. Submit a mobile site map Handle mobile crawlers Enable deep linking Meta tags <meta name=“Handheldfriendly” content=“true”/> <meta name=“MobileOptimized” content=“240”/> <link rel=“alternate” media=“handheld” href=“”/>

61. Redirect mobile user agents Not bullet proof! Client side or server side Deep linking <script language=javascript> if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))){ if(confirm('Hey, is it an apple in your hand? Mobile site?')) location.replace("URL HERE"); } </script>

62. Is the mobile web becoming desktop-web-like?…or is the web becoming more mobile aware? Jon Arne Sæterås Product Director, Mobiletech Twitter: @jonarnes Email: jas@mobiletech.mobi