This document provides an overview of mobile web development best practices. It discusses viewport settings and using media queries to optimize layout for different screen sizes. It also recommends techniques like inline images, caching, and local storage to improve performance on mobile. The document encourages front-end logic and feature detection over device detection. Overall, it offers guidance on designing responsive websites that provide a good user experience across diverse mobile platforms and browsers.

1. Jon Arne SæteråsProduct Director, MobiletechTwitter: @jonarnesEmail: jas@mobiletech.mobi

2. Baby steps…Mobile webMobile internet usage will be bigger than most people thinkMobileFirst!Some statistics

3. Some differences

4. Context

5. View port

6. Pixels

7. Some Quick-Wins

8. Media Queries

9. JavaScript

10. CacheCurrent global scene470 mill print newspapers per day920 mill cars1.15 bill fixed phone landlines1.5 bill credit card users1.6 bill tv sets1.4 bill PCs (inc laptops and tablets)1.3 bill mobile internet users2 bill internet users3.75 bill unique mobile users4.25 bill mobile phonesNew TVs are web enabledIncluding tablets!Including mobile54% of the planets population. Any age1.3 bill sold in 2010. ~300mill smartphones -> up 75% since 200917% are app capable97% with a browserSource: TomiAhonen, comScore, Nielsen

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

12. 23,7% of pupulationDeviceOSSource: Mobiletech.no/Forbrukerog media

13. 23,7% of pupulationBrowserConnectionSource: Mobiletech.no/Forbrukerog media

14. BedtimeDesktop preferredBreakfast / commuting

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

16. Common pitfalls Don’t forget thatData traffic is expensive The the network is slowThe device has lower processing powerThat the interaction model is unknownThat the screen is smaller

17. Context HardwareOSPhysical capabilitiestech perspectiveBrowserWRTAppSocial networksLocal user profileCRMSuperlocalHome/abroadTelco networkWiFiBandwidth

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

19. View portThe visual part of the web sitehttp://www.flickr.com/photos/dm-set/3579287485/

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

21. Visual ViewportLayout Viewport

22. Layout viewport default widthiPhone Safari: 980pxOpera: 850pxAndriodWebKit: 800pxIE: 974 pxSymbian WebKit: Tries to keep the layout viewport equal to the visual viewport.BadaWebkit: layout viewport as wide as the widest elementBlackberry: 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 != 1pxiPhone 4 has 640 physical pixels, but layout viewport is 320“High DPI” screens“CSS pixels”Zoom levelNot the same as physical pixels on the deviceDecides how many physical pixels a CSS pixel coversRead More: http://www.quirksmode.org/mobile/viewports.htmlhttp://www.flickr.com/photos/korosirego/

25. ?Good to know that:Viewport has impact on presentation

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 viewportZoomable?Initial zoom<meta name="viewport” content="target-densitydpi=device-dpi" />device-dpi: Use the device's native dpi as target dpi.low-dpi: 120dpimedium-dpi: 160dpi, which is also the default as of todayhigh-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 trick640px wide<imgsrc=“image.png” width=“320” alt=“highdpi” />Pysical image size = visual viewport width * pixel ratio

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

31. Media queriesTarget 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 iPadif(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

34. JavaScript libs for mobileSencha Touch (http://www.sencha.com/)

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 jQueryDon’t use iPhone-only libs

52. CacheCacheallcacheable

53. Use a manifest

54. Useinlineimages

55. HTTP headercache

56. LocalstorageApplication cache(Still a bit buggy…)In the markup<!DOCTYPE html> <html manifest="/cache.manifest">…CACHE MANIFEST #V. 1NETWORK: /script.phpCACHE: /style.css/magic.js/logo.jpgFALLBACK:/offline.htmlManipulate with JavaScriptwindow.applicationCache.update();window.applicationCache.swapCache();In the cache.manifest file

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

58. Storagewindow.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 header200 OKConnection: closeDate: Tue, 04 Jan 2011 20:05:52 GMTServer: ApacheContent-Type: text/html; charset=UTF-8Client-Date: Tue, 04 Jan 2011 20:05:52 GMTClient-Peer: 89.221.244.18:80Client-Response-Num: 1Vary: Accept,User-AgentCache-Control: no-transform, max-age=3600Expires: <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 SEO140 bill web searches pr month x 5%on mobile = 6-8 billion mobile searchesMake search engines aware of your site.Submit a mobile site mapHandle mobile crawlersEnable deep linking Meta tags<meta name=“Handheldfriendly” content=“true”/><meta name=“MobileOptimized” content=“240”/><link rel=“alternate” media=“handheld” href=“”/>

61. Redirect mobile user agentsNot bullet proof!Client side or server sideDeep 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åsProduct Director, MobiletechTwitter: @jonarnesEmail: jas@mobiletech.mobi