Breakpoints define a certain threshold where the layout should change.

But how do we decide exactly what that certain threshold should be?

Your first instinct might be to make breakpoints based on

different popular devices.

For example, if we know that a popular mobile phone has a width of 320

pixels in portrait mode, then maybe we can create a breakpoint there.

However, this is actually bad practice and not a sustainable approach.

Responsive web design was created to help address

new devices being introduced all the time.

So, if we create breakpoints based on specific devices,

then we're just recreating the same problem for ourselves.

Instead, we should create breakpoints based on our content.

Whenever our one column layout starts to look bad,

we should create a breakpoint and make the appropriate adjustments.

That said, going from a one column layout to a multi-column layout

is a pretty dramatic change, and not every breakpoint demands it.

Instead, we should also make major and minor breakpoints.

Maybe just one element just needs to be slightly resized,

or some padding needs to be changed on a list.

If that's the case, then we can also set up minor breakpoints.

So, let's take a look at an example.

So here we have the same site that we have been looking at.

And if I resize the browser here, let's start out on our mobile look, here.

And you'll notice that we have these buttons here, and

that makes sense for this mobile layout.

This would be on a fairly small screen, a mobile phone screen.

And you'd want these large tap areas for people to click on.

You wouldn't want small, tiny links.

And then we also have a one column layout that really lends itself

to scrolling up and down.

Now, if we size up a little bit here,

we get to something that's maybe more suited for a tablet.

And again, we have these large tap areas that work really well for touch.

But still,

in portrait mode on a tablet, we would want something that looks like this.

Now, we also have a media query that adjusts based on orientation.

So if the tablet or maybe a phone is in landscape,

we have a layout that looks something like this, and

this will also work on smaller laptop screens.

I, for example, am on a 15 inch screen, but if you're on a smaller

laptop than that, a lot of users might get a layout that looks like this.

Now, this works pretty well, but we have a minor breakpoint here.

So you'll notice, up at the top, the size of the header changes very slightly.

And this is mostly an aesthetic thing, but really, it's also slightly functional.

You want to have a larger header here,

because it makes better use of the available space.

Whereas if you go down to a smaller width here,

you can also assume that there's probably less vertical space as well.

So you want the header to take up less space there.

These breakpoints don't have any kind of performance cost, but

each breakpoint does slightly increase the complexity of your design and code.

It can be tempting to add lots of breakpoints to make a design look

absolutely perfect at any possible resolution, but

be careful to use breakpoints only when a change really needs to occur.

For more tips about breakpoints,

be sure to check out the notes associated with this video.