What is mobile-first web design? CSS
Mobile-first web design is a process of responsive web design in which the mobile user interface of a website is designed first and then more complexity is added to the layout only for larger devices.
This means that in mobile-first web design the first styles in your stylesheet should apply to mobile devices (such as displaying elements in 1 column) or apply to both mobile and desktop (such as font-family and other styles common to all viewport sizes).
Once you've written your mobile styles, you can then use min-width CSS @media queries to check if the user's window width is larger than specific widths of your choice. You can then write the CSS rules for larger devices inside your min-width CSS @media queries so that these styles only apply to devices larger than your chosen min-width for that media query. Mobile-first web design uses min-width media queries and avoids max-width media queries because max-width approaches it from the opposite direction (desktop-first).
The widths you check against in your @media queries are called breakpoints and it is best to choose these values based on your own website content rather than based on device widths to ensure that your site behaves as expected at any viewport width. For example, if your mobile site starts to look like there's too much space around your elements at a certain width or becomes lop-sided and looks off, you might want to add a media query before you get to that width to make sure you are happy with how it looks as you get to larger viewports.
For example, if you have an element set to flex-direction: column; on mobile, you might change it to flex-direction: row; on larger devices.
.class {
display: flex;
flex-direction: column;
}
/* styles for slightly larger devices */
@media (min-width: 600px) {
.class {
flex-direction: row;
}
}
You can have as many @media queries as you want, but keep in mind that the more you have, the more difficult it can be to maintain.
Why use mobile-first web design?
The benefit of mobile-first web design is that mobile devices don't needlessly load desktop styles that they aren't using and these styles are only loaded by the larger devices that do use them.
By not making mobile users load desktop styles that they aren't using, you can help to speed up your website on mobile devices as it is only loading what it needs to. This also means that users will be using less of their mobile data allowance if they're not on WiFi.
Thanks for reading.
Ryan
Published on 12 Jul 2022