HTML and CSS Reference
In-Depth Information
MOBILE FIRST
Let's now turn the media query example on its head by looking at the Mobile First
technique invented by Luke Wroblewski. This technique reverses what you did in
the preceding section. You create the mobile layout first as the default layout, and
then apply wider layouts as the browser width increases.
The Media Blitz example is recreated using Mobile First in the file media-blitz-
4-mobile-first.html. I won't show all of the code here, but be sure to dig through
the file so you can appreciate the differences between media-blitz-3 and media-
blitz-4. The former starts with the wide-screen layout and layers on styles suitable
for narrower screens. The latter starts with the narrow-screen layout and layers
on styles suitable for wider screens. As a brief example, the
<h1>
is initially set to
its smallest size:
h1 {
font-family: 'Monoton', cursive;
}
and then is increased in size by subsequent media queries:
@media all and (min-width: 350px) {
1 {
: ;
}
}
This reverse method has many advantages: One of which is that it is often easier
to start by designing a simple, narrow (mobile) layout and then add on complexity
to work up to a richer wide-screen (desktop) layout than it is to design a complex,
all-singing wide-screen layout and then try to factor that down to an effective
(uncluttered) narrow layout.
