Building sites for the multi-device web


Hi, I’m Pete, a developer
advocate at Google. I use a lot of different devices
to browse the web– my desktop, my tablet, my phone. Now some of these
sites look great across all these
different devices. But other sites? Not so much. When a site isn’t
optimized or designed to work across the
multi-device web, it requires panning,
zooming, trying to hit those tiny buttons. It’s just no fun. And those same sites
when viewed on my TV can be just as awkward. The buttons may be
bigger, but touching my TV is just going to
leave a fingerprint. It’s not going to do anything. Building sites that work
well on the multi-device web isn’t hard, but it does
require a shift in the way that we think about it. Small screens aren’t just
zoomed-in big screens. Instead, we need to tailor
our content and styles for the multi-device web. The easiest way
to get started is by designing for a small
screen, and then building up. So let’s give it a shot. I’ve already created a page that
looks great on a small screen. It has all my content, the
styles for the small screen, and it includes the
meta viewport tag. The meta viewport
tag is important because it tells
the browser to adapt the content to the
size of the device. It’s important to set
width=device-width, and initial-scale=1 to establish
a one-to-one relationship between CSS pixels and
device-independent pixels. Without the meta viewport
tag, mobile browsers lie and pretend that they’re
980 pixels wide– desktop width. Our content looks
weird because it’s scaled to fit on a 980
pixel-wide display, resulting in a page
that’s just way too small. With our viewport
properly set, we now have our site
optimized for mobile. So let’s make it look
better on a bigger screen by adding a breakpoint. A breakpoint is used to display
different styles depending on characteristics of
the device, like device width or device pixel density. We can apply different
styles using media queries, giving us a completely
responsive experience. Media queries only
apply their styles if the device matches the query. You can either specify the query
by adding a media attribute to the linked CSS file,
or directly in the CSS. For most designs, you’ll
find the min-width query to be the most helpful. Min-width rules are applied
for any browser width over the value
defined in the query. Defining breakpoints
based on specific devices, products, brand names, operating
systems, anything like that, will always result in a
maintenance nightmare. Instead, use the content to
find the right breakpoint. Let’s expand our
page and see where a breakpoint becomes necessary. 500 pixels looks like a
good place for a breakpoint, so let’s go ahead
and add one there. I’ve added a new style
sheet with a media query that tests the browser width. If the browser is at
least 500 pixels wide, then the styles in
weather-large.CSS are applied. Great. Now our base styles are
applied on smaller screens, but on screens over
500 pixels wide, the media query
kicks in, giving us a great look for wider screens. Now in addition to
choosing major breakpoints, it’s also helpful to
add minor breakpoints. Let’s tweak some little things. For example, I’ve added
a minor breakpoint at 400 pixels that adjusts
the margins and paddings, ups some font sizes, and changes
the layout of a few items to make things fit
more naturally. If you want to learn more
about minor breakpoints, have a look at the
web fundamentals site. Now obviously,
there’s a lot more to say about building
awesome multi-device sites. But if you start small,
add the meta viewport tag, and then resize your browser
until the content tells you that a breakpoint’s necessary,
you’re already well on the way. Thanks for watching. Go build something awesome.

11 Comments

Add a Comment

Your email address will not be published. Required fields are marked *