Join Carrie Dils for an in-depth discussion in this video What is mobile-first, part of Introduction to CSS.
- [Narrator] We've talked a little about responsive design and what is means to create layouts that adjust to fit the size of a device. That's a huge part of creating mobile-friendly sites. Now it used to be that we'd first write styles for a desktop layout and then as an after-thought add styles to make it responsive, but there's a newer and better trend, and it's called mobile first. A mobile first approach to styling means that styles are applied first to the devices with small view ports. Then advanced styles and other overrides are added for successively larger screens.
The idea is that you send the smallest amount of data needed for the website to devices that are lower bandwidth, like phones on a cellular network. Page speed and site performance are always important, even for a desktop, but it's even more critical when users have a limited amount of bandwidth. Now, a mobile first implementation in CSS is done using media queries, specifically, the min-width media query. Let me show you an example. So here I've got an example of some traditional or desktop first CSS.
So you'll see that for larger screens I'm saying I want my h1 to be a font-size of 60. Then I'm using a media query to say anything that's smaller than 640 pixels, then let's give it a font size of 30 pixels. So, in other words, we're overriding that font-size at the smaller device. Now, a mobile first approach to this would say first, we're gonna set the font-size for the smaller screen. Then we're gonna use a min-width media query to say, hey, anytime the minimum width of the view port is 640 pixels, then we're gonna use that larger font-size.
For developers who've worked with CSS a long time, writing mobile first styles is a bit of a mind shift, but if you're just getting started with CSS, this is the way to go.
- What is CSS?
- Understanding how CSS works with HTML
- Applying fonts
- Understanding the classic box model
- Setting margins and padding
- Positioning elements
- Basic CSS layout concepts
- Media types and media queries
- Working with CSS frameworks and CSS grids
- Creating responsive layouts
- Tools that help you write and maintain CSS