Building Cleartrip Mobile

Presented at Meta Refresh organized by HasGeek, this presentation aims to give the audience a peek into the design process and evolution of Cleartrip Mobile. While sharing my experience building our mobile site I've also touched upon:
- our first encounter with HTML5 & CSS3
- how following web standards help in delivering a good experience
- challenges supporting different mobile browsers, screen sizes & density
- small screen - constrain or opportunity?
- performance considerations

Transcript

1. Sunit Singh | @surdattack Building Cleartrip Mobile Sunday, April 22, 12
2. Plan Sunday, April 22, 12
3. Evolution Sunday, April 22, 12
4. Medium Sunday, April 22, 12
5. Design Sunday, April 22, 12
6. Landscape Sunday, April 22, 12
7. Nuts & bolts Sunday, April 22, 12
8. Q & A Sunday, April 22, 12
9. Evolution Sunday, April 22, 12
10. Jun 2010 Sunday, April 22, 12
11. Jul 2010 Sunday, April 22, 12
12. Sep 2010 Sunday, April 22, 12
13. Today Sunday, April 22, 12
14. Medium Sunday, April 22, 12
15. Screen size Sunday, April 22, 12
16. Connection speed Sunday, April 22, 12
17. Device interface Sunday, April 22, 12
18. Processing power Sunday, April 22, 12
19. Design Sunday, April 22, 12
20. Focus Sunday, April 22, 12
21. Ruthless Sunday, April 22, 12
22. Sunday, April 22, 12
23. Sunday, April 22, 12
24. Obsess Sunday, April 22, 12
25. Details Sunday, April 22, 12
26. Sunday, April 22, 12
27. Requests & Weights Sunday, April 22, 12
28. Before Mobile homepage load time Sunday, April 22, 12
29. After Mobile homepage load time Sunday, April 22, 12
30. Caching with manifest Sunday, April 22, 12
31. Landscape Sunday, April 22, 12
32. Image source: Droid Tech News Sunday, April 22, 12
33. Touch vs cursor Sunday, April 22, 12
34. Browser capabilities Sunday, April 22, 12
35. Mobile Browsers Opera Mini Safari Android Symbian Blackberry The rest Opera Mobile Internet Explorer Dolphin (Bada, iOS) Chrome (Android) Firefox (Android) Veterans Sunday, April 22, 12
36. Resolution Sunday, April 22, 12
37. Orientation Sunday, April 22, 12
38. Pixel Density Sunday, April 22, 12
39. Good news! Sunday, April 22, 12
40. Powered by Webkit Sunday, April 22, 12
41. Browsers catching up Sunday, April 22, 12
42. CSS3 support Sunday, April 22, 12
43. Nuts & bolts Sunday, April 22, 12
44. HTML Sunday, April 22, 12
45. Configuring the viewport Sunday, April 22, 12
46. Browsers set the size and scale of the viewport to reasonable defaults that work well for most webpages Why configure the viewport? e.g. The default width on Mobile Safari is 980 pixels 320 x 356 pixel image Image source: Safari developer reference library Sunday, April 22, 12
47. <meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> To set the viewport width to the width of the device To set the initial scale to actual size To set the initial scale and to turn off user scaling <meta name="viewport" content="width=device-width, user-scalable=no"> Using the Viewport meta tag minimum-scale (0 to 10.0) maximum-scale (0 to 10.0) To control user scaling Image source: Safari developer reference library Sunday, April 22, 12
48. Initiating calls Sunday, April 22, 12
49. <meta name="format-detection" content="telephone=no"> Initiating calls Disable automatic telephone number linking <a href="tel:08042554200">08042554200</a> Initiate phone calls Sunday, April 22, 12
50. Easier text input Sunday, April 22, 12
51. Easier text input <input type="email"/> <input type="tel"/> <input type="number"/> <input type="text" pattern="[0-9]*"> spoiler alert iOS 5 adds commas <input type="email" autocorrect="off" autocomplete="off" autocapitalize="off"/> Turn off autocorrect, autocomplete, and autocapitalize Sunday, April 22, 12
52. window.scrollTo(0,0); Hiding the address bar Sunday, April 22, 12
53. iOS specific Sunday, April 22, 12
54. <link rel="apple-touch-icon" href="icon.png"/> <link rel="apple-touch-icon-precomposed" href="icon.png"/> Flat icon - iOS adds glass / sheen Custom icon Adding your web app to the Homescreen Source: Safari developer library Sunday, April 22, 12
55. Full-screen mode <meta name="apple-mobile-web-app-capable" content="yes" /> Enable full-screen mode (only when launched from home screen) <meta name="apple-mobile-web-app-status-bar-style" content="black" /> Control the appearance of the status bar in full-screen mode spoiler alert No browser back/ forward buttons Sunday, April 22, 12
56. CSS Sunday, April 22, 12
57. Media Queries Sunday, April 22, 12
58. Screen-sizes Orientation Pixel Densities Targeting with Media Queries @media only screen and (-webkit-min-device-pixel-ratio: 2) Retina / XHDPI HDPI @media only screen and (-webkit-min-device-pixel-ratio: 1.5) @media screen and (orientation:portrait) @media only screen and (max-width : 319px) @media screen and (orientation:landscape) Sunday, April 22, 12
59. Supporting retina/ higher densities 31 x 200 47 x 300 62 x 400 1x 1.5x 2x <span class="cardtype visa"></span> .cardtype { width: 31px; height: 27px; background-image: url(/images/cardType.png); background-repeat: no-repeat } .visa { background-position: 0 0 } @media only screen and (-webkit-min-device-pixel-ratio: 2){ .cardType { -webkit-background-size: 31px 200px; background-size: 31px 200px; } } Sunday, April 22, 12
60. Handy tweaks Sunday, April 22, 12
61. html {-webkit-text-size-adjust:none} Turning off text-adjustment Sunday, April 22, 12
62. Others CSS Tweaks Override default semi-transparent highlight when user clicks on an element a {-webkit-tap-highlight-color:rgba(0,0,0,0);} Prevent users from selecting text html {-webkit-user-select:none;} Prevent the callout toolbar html {-webkit-touch-callout: none;} Sunday, April 22, 12
63. Sunday, April 22, 12
64. Questions Sunday, April 22, 12