You are on page 1of 21

How to be a mobile web

Giovanni Puntil
mobile web developer @asos

Who Am I?

A web developer
Focused on mobile web first
Freelancer - Usablenet - Asos

What exactly is a mobile web developer? • A mobile websites addicted • Someone who cares about WebKit as much as he cares about IE compatibility • Someone who spend a lot of time doing tests on a wide range of devices .

First approach to mobile • Write some html <html> <head> <title>Mobile Fashion</title> </head> <body> <h1>Brace yourself winter is coming!</h1> <img src="model.jpg" alt="" style="width: 100%"/> </body> </html> • • • • Open chrome Open chrome inspector Enable mobile emulation Load your page .


Don’t forget the viewport! ((╬ಠಠ ಠ ﹏ ಠಠ ಠ )) .

jpg" alt="" style="width: 100%"/> </body> </html> • Re-Load your page .width=device-width"> <title>Mobile Fashion</title> </head> <body> <h1>Brace yourself winter is coming!</h1> <img src="model.What’s missing? • Re-Write some html <html> <head> <meta name="viewport" content="initial-scale=1.


That’s better! ٩(^ᴗ^)۶ .

tablets or TV • There are two kind of pixels: .Device pixels: physical on the device screen.Why? • Mobile screens are smaller than desktop. of which there are a fixed amount on any device .Virtual pixels: an abstraction layer created specifically to be used in CSS (and javascript) • Essential to design with flexibility • You should allow zooming depending on the content • …and IE? .

width: device-width.• On IE the viewport properties are defined within CSS using the @viewport rule Eg.0.          @viewport{ zoom: 1. } • Uh yeah don’t forget the prefix @-msviewport • The metatag is far more elegant .

You can use as many queries as you like comma separated . media type queries: what kind of device is this? • There are three categories of media queries: 1. viewport-related media queries 3. (cssmediaqueries. device-orientation or display density. feature-related media queries •.Media queries • They allows you to target CSS rules based on – for instance – screen size.

speech and print Eg. screen. @media all { css rules } @media screen { css rules } .Media types • Originally intended to distinguish different type of devices • The only working media types are all.

    } } . @media screen and (max-width: 300px) {     body {        background-color: blue. min-width specify the minimum or maximum width of the display area Eg.Viewport related • Most used media query is width • Width and height media queries give the width and height of the current layout viewport • Orientation specifies whether the display is in landscape mode or portrait mode • max-width.

96px in css) as it’s supported by all browsers . it’s just an integer • The best use of resolution is with DPI (dot per inch.Resolution • The resolution media queries are useless for determining anything about physical size of the device • They can be used to determine high screen resolution (Retina like) • Web-Kit based browsers need –webkit-device-pixelratio while all other browsers need resolution • –webkit-device-pixel-ratio doesn’t expect a unit.

• The most used resolution media query in this case is: @media all and ((-webkit-min-device-pixel-ratio: 1.(min-resolution: 144dpi)) { // styles } According to Peter-Paul Koch in his book “The mobile web handbook” .5).

Touch events • With the first iPhone back in 2007 Apple introduced javascript touch events • There are three main touch events: touchstart. touchend • This events are widely supported . touchmove.

2. 4. 3.Touch events firing order As soon as the user touches the device screen the following events are fired: 1. touchstart touchmove touchend click .

Your personal device lab • • • • • Test on widely used devices Analyse your audience Don’t focus on your favourite device Emulate throttling Same device different browser different results ( Safari 6-8. Android Stock browser and Chrome) .

com/web/funda mentals/ • Smashing Magazine book “The Mobile Web Handbook” by Peter-Paul Knoch • Mozilla Developer Network https://developer.mozilla.Further reading • Google web fundamentals .

Congratulations you are now a mobile web developer! (‫̵˃˃ و‬ᴗ˂˃̵)‫و‬ .