You are on page 1of 21

How to be a mobile web

developer
Giovanni Puntil
mobile web developer @asos

Who Am I?

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

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

Dont forget the


viewport!
((

))

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

Re-Load your page

Thats better!
(^^)

Why?
Mobile screens are smaller than desktop, tablets or
TV
There are two kind of pixels:
- Device pixels: physical on the device screen, 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?

On IE the viewport properties are defined


within CSS using the @viewport rule
Eg.

@viewport{
zoom: 1.0;
width: device-width;
}

Uh yeah dont forget the prefix @-msviewport

The metatag is far more elegant

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

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

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, min-width specify the minimum or maximum width of the
display area
Eg. @media screen and (max-width: 300px){
body{

background-color:blue;
}
}

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 doesnt expect a unit;
its just an integer
The best use of resolution is with DPI (dot per inch,
96px in css) as its supported by all browsers

The most used resolution media


query in this case is:
@media all and ((-webkit-min-device-pixel-ratio:
1.5),(min-resolution: 144dpi)) {
// styles
}
According to Peter-Paul Koch in his book The mobile web
handbook

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

Touch events firing order


As soon as the user touches the device
screen the following events are fired:
1.
2.
3.
4.

touchstart
touchmove
touchend
click

Your personal device lab

Test on widely used devices


Analyse your audience
Dont focus on your favourite device
Emulate throttling
Same device different browser
different results ( Safari 6-8, Android
Stock browser and Chrome)

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

Congratulations you are


now a mobile web
developer!
( )

You might also like