Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building Cleartrip Mobile

surdattack
April 22, 2012

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

surdattack

April 22, 2012
Tweet

More Decks by surdattack

Other Decks in Design

Transcript

  1. 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
  2. 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
  3. <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
  4. <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
  5. 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
  6. <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
  7. 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
  8. 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
  9. 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
  10. 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