Professional Documents
Culture Documents
developer
Giovanni Puntil
mobile web developer @asos
Who Am I?
A web developer
Focused on mobile web first
25
Freelancer - Usablenet - Asos
Italian
Open chrome
Open chrome inspector
Enable mobile emulation
Load your page
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>
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)
@viewport{
zoom: 1.0;
width: device-width;
}
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
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
touchstart
touchmove
touchend
click
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