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.