Mobile-first design refers to the act of building a website for mobiles first, and then using CSS media queries to control how your website should look on bigger screen sizes, from tablet to desktop. In other words, you use media queries to make your website responsive (adaptive to different screen sizes).
When we use media queries, we refer to them as breakpoints. So if you decide that your website’s layout should switch from being a mobile layout to a tablet layout at a screen width of 800px, then you create a media query like this:
@media screen and (min-width: 800px) {
/* Add Tablet styles here */
}And now 800px is your first breakpoint.
Let’s say that we decide that our desktop breakpoint should be 1200px, like this:
@media screen and (min-width: 1200px) {
/* Add Desktop styles here */
}That’s your 2nd breakpoint, now you have a total of two breakpoints.
Here’s a quick demo of a layout using the breakpoint model shown above:
https://codepen.io/StrengthandFreedom/pen/abzywPd
As you can see, we now have three different screen size ranges to work between, mobile: 0-800px, tablet: 800-1200px, desktop: 1200-and-up, which required us to create a total of two breakpoints with CSS Media Queries.
The example above is a simple one, but it should get the point across. You can adjust everything between breakpoints, from font sizes to layout width.
What if you need more than two breakpoints?
Some situations call for a more fine-grained approach, where you go above using a couple of breakpoints. I’ve seen some websites using as many as 10, using a breakpoint every 100 to 200px or so.
That’s probably overdoing it, for most use cases.
What is the ideal number of breakpoints for a website?
There is none. You should let context guide your decisions. The more complex your website is, the more breakpoints are usually required to make your website presentable on all the important devices/screen sizes that your target audience uses.
As a rule of thumb, the average website needs 2 to 4 breakpoints to cover most bases, in my experience. I tend to go with 4.
You already saw an example of using 2 breakpoints, now let’s see another example where we’re using 4.
A responsive layout with 4 breakpoints
Taking the same article layout from above, let’s add a couple of extra breakpoints to give us some more control. I think the jump from 0 to 800px on mobile is a bit too big. You’ll notice that especially in landscape mode on handheld devices, this won’t always work that well.
The reason being that although the font sizes we use work well in big handheld devices, the h1 (headline) is a bit overpowering. At the same time, the content width is a bit too wide once we get above the 500px width point, which makes our measure (line-length)too long, and not reader-friendly, with too many characters per line. Ideally, for optimal reading, we want our line-length to be around 40 to 80 characters per line.
To overcome this problem, let’s add our first breakpoint at 480px, and then instead of using 1200px as our desktop and-up breakpoint, let’s add another one at 1900px (for really big screens).
Check out the 4 breakpoint demo here:
https://codepen.io/StrengthandFreedom/pen/mdyMMeL
If you resize the browser window you’ll see that compared to the 2-breakpoint example, our typography scales up and down (adapts) more gracefully with the 4-breakpoint layout. That’s because the additional breakpoint between mobile and tablet has allowed us to more precisely control content-width, spacing (padding/margins) and font sizes.
The 1900px breakpoint will be useful if you design for really big screens, like external monitors — which more and more people use nowadays, and thus they shouldn’t be overlooked.
Can you get away with using only one breakpoint on a website?
I like to keep things simple. The fewer moving parts in a system, the easier it is to maintain. However, there’s a limit to how simple you can make your layout.
Some designers and developers only use one breakpoint for their entire website. One breakpoint means that they use:
- A Mobile layout
- A Desktop layout
The one breakpoint would then typically be defined around the 600-960px screen width range.
Now that’s a bit optimistic for modern times, where we need to design for a myriad of different screen sizes and device types.
If you care about giving a broad range of users (with different devices/screen sizes) a good user experience, then you usually need more than one breakpoint.
To repeat what I said earlier: let context guide your design decisions.
