Tweet
Tweet

Slide 1

Slide 1 text

Sunit Singh | @surdattack Building Cleartrip Mobile Sunday, April 22, 12

Slide 2

Slide 2 text

Plan Sunday, April 22, 12

Slide 3

Slide 3 text

Evolution Sunday, April 22, 12

Slide 4

Slide 4 text

Medium Sunday, April 22, 12

Slide 5

Slide 5 text

Design Sunday, April 22, 12

Slide 6

Slide 6 text

Landscape Sunday, April 22, 12

Slide 7

Slide 7 text

Nuts & bolts Sunday, April 22, 12

Slide 8

Slide 8 text

Q & A Sunday, April 22, 12

Slide 9

Slide 9 text

Evolution Sunday, April 22, 12

Slide 10

Slide 10 text

Jun 2010 Sunday, April 22, 12

Slide 11

Slide 11 text

Jul 2010 Sunday, April 22, 12

Slide 12

Slide 12 text

Sep 2010 Sunday, April 22, 12

Slide 13

Slide 13 text

Today Sunday, April 22, 12

Slide 14

Slide 14 text

Medium Sunday, April 22, 12

Slide 15

Slide 15 text

Screen size Sunday, April 22, 12

Slide 16

Slide 16 text

Connection speed Sunday, April 22, 12

Slide 17

Slide 17 text

Device interface Sunday, April 22, 12

Slide 18

Slide 18 text

Processing power Sunday, April 22, 12

Slide 19

Slide 19 text

Design Sunday, April 22, 12

Slide 20

Slide 20 text

Focus Sunday, April 22, 12

Slide 21

Slide 21 text

Ruthless Sunday, April 22, 12

Slide 22

Slide 22 text

Sunday, April 22, 12

Slide 23

Slide 23 text

Sunday, April 22, 12

Slide 24

Slide 24 text

Obsess Sunday, April 22, 12

Slide 25

Slide 25 text

Details Sunday, April 22, 12

Slide 26

Slide 26 text

Sunday, April 22, 12

Slide 27

Slide 27 text

Requests & Weights Sunday, April 22, 12

Slide 28

Slide 28 text

Before Mobile homepage load time Sunday, April 22, 12

Slide 29

Slide 29 text

After Mobile homepage load time Sunday, April 22, 12

Slide 30

Slide 30 text

Caching with manifest Sunday, April 22, 12

Slide 31

Slide 31 text

Landscape Sunday, April 22, 12

Slide 32

Slide 32 text

Image source: Droid Tech News Sunday, April 22, 12

Slide 33

Slide 33 text

Touch vs cursor Sunday, April 22, 12

Slide 34

Slide 34 text

Browser capabilities Sunday, April 22, 12

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Resolution Sunday, April 22, 12

Slide 37

Slide 37 text

Orientation Sunday, April 22, 12

Slide 38

Slide 38 text

Pixel Density Sunday, April 22, 12

Slide 39

Slide 39 text

Good news! Sunday, April 22, 12

Slide 40

Slide 40 text

Powered by Webkit Sunday, April 22, 12

Slide 41

Slide 41 text

Browsers catching up Sunday, April 22, 12

Slide 42

Slide 42 text

CSS3 support Sunday, April 22, 12

Slide 43

Slide 43 text

Nuts & bolts Sunday, April 22, 12

Slide 44

Slide 44 text

HTML Sunday, April 22, 12

Slide 45

Slide 45 text

Configuring the viewport Sunday, April 22, 12

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Initiating calls Sunday, April 22, 12

Slide 49

Slide 49 text

Initiating calls Disable automatic telephone number linking 08042554200 Initiate phone calls Sunday, April 22, 12

Slide 50

Slide 50 text

Easier text input Sunday, April 22, 12

Slide 51

Slide 51 text

Easier text input spoiler alert iOS 5 adds commas Turn off autocorrect, autocomplete, and autocapitalize Sunday, April 22, 12

Slide 52

Slide 52 text

window.scrollTo(0,0); Hiding the address bar Sunday, April 22, 12

Slide 53

Slide 53 text

iOS specific Sunday, April 22, 12

Slide 54

Slide 54 text

Flat icon - iOS adds glass / sheen Custom icon Adding your web app to the Homescreen Source: Safari developer library Sunday, April 22, 12

Slide 55

Slide 55 text

Full-screen mode Enable full-screen mode (only when launched from home screen) Control the appearance of the status bar in full-screen mode spoiler alert No browser back/ forward buttons Sunday, April 22, 12

Slide 56

Slide 56 text

CSS Sunday, April 22, 12

Slide 57

Slide 57 text

Media Queries Sunday, April 22, 12

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Supporting retina/ higher densities 31 x 200 47 x 300 62 x 400 1x 1.5x 2x .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

Slide 60

Slide 60 text

Handy tweaks Sunday, April 22, 12

Slide 61

Slide 61 text

html {-webkit-text-size-adjust:none} Turning off text-adjustment Sunday, April 22, 12

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

Sunday, April 22, 12

Slide 64

Slide 64 text

Questions Sunday, April 22, 12