Responsive Web Design
motive
~60%
last month in the uk...
OF THE USERS WHO OWN A LAPTOP
ALSO OWN A MOBILE DEVICE
~45%
last month in the uk...
OF THE USERS only OWN A LAPTOP
~15%
last month in the uk...
OF THE USERS only OWN
A mobile device
The web is not fixed width
keep your layout fluid
responsive web design mantra
target/context = %
fixed-width
fluid
.span-1 {
width: 90px;
}.span-1 {
width: ?? %;
}300px wide grid
fixed-width
fluid
.span-1 {
width: 90px;
}.span-1 {
width: 30%;
}target / context
90 / 300 = 0.3
So, is it recommended to use percentages?
other fluid units
em - relative to the element font-size
rem - relative to the root element font-size
vh - Viewport height (out of 100)
vw - Viewport width (out of 100)
vmin - Viewport's smallest resolution (out of 100)
vmax - Viewport's largest resolution (out of 100)
The all-famous grid system
The easy way - bootstrap
is bootstrap responsive?
well kind of
just make your own custom grid system
@column-width: 60;
@gutter-width: 20;
@columns: 12;
@total-width: 100%;
header { .column(12); }
article { .column(12); }
aside { .column(12); }
@media (min-width: 38em) {
article { .column(9); }
aside { .column(3); }
}Semantic Grid System
flexible content
flexible images?
flexible videos?
media queries
<link media="(min-width: 30em)" ... >
<link media="screen and (min-width: 30em)" ... >
@media (min-width: 30em) { ... }
@media screen and (min-width: 30em) { ... }how to
media types
most used ones:
- all, screen, print
but there are more:
- braille, embossed, speech handheld, projection, tv, tty
media features
most used ones:
- width(min/max), height, orientation
but there are more:
- device-width, device-height, aspect-ratio, color, color-index, monochrome, resolution, scan, grid
how to approach?
additive
/* Additive, also know as small resolution first */
/* Smallest resolution styles get in here, outside the @media tags */
@media (min-width: 28em) {
/* styles for 28 em or higher in here (around the width of a large smartphone/tablet) */
}
@media (min-width: 48em) {
/* styles for 48 em or higher in here (around the width of a laptop (768px equivalent) */
}subtractive
/* Subtractive, also known as large resolution first */
/* Largest resolution styles get in here, outside the @media tags */
@media (max-width: 48em) {
/* styles for 48 em or lower in here (around the width of a laptop (768px equivalent) */
}
@media (max-width: 28em) {
/* styles for 28 em or lower in here (around the width of a large smartphone/tablet) */
}pros and cons?
large resolution first
small resolution first
easy support for old IE
small devices load all assets
more logical (build up vs tear down)
old ie is tricky
other considerations
touch target area
other considerations
hover states
contrast
readability
applying rwd styles
applying rwd styles
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/base.css">
<link rel="stylesheet" media="not print" href="styles/mq.css">
</head>