One very important additional consideration is that the web is already responsive by default. If you put a div onto a page, it will take up 100% of the available space without you having to write any additional CSS.
When you develop for desktop first, you ignore this, and it means that most of the time, you will write twice the amount of CSS. Once to make sure your div doesn't get too large for the desktop viewport (eg, width: 400px), and then a second time to "revert" that to mobile's default (width: 100%).
Not entirely accurate. If you ought to use a container for larger screens you still have to define a width or better, use a max width value. No matter if you going mobile or desktop first. Un less im missing something
And mobile first:
@media(min-width: 500px) {
.hero-card {
width: 500px;
}
}
It's a contrived example, but with mobile first, you get all of the browser's default styles without writing extra code, and you only override them when you get to a breakpoint where they need adjusting. With desktop first, you write the code to make it work, and then you write it again to override the desktop styles when the screen is smaller.
Thats why I said , not entirely accurate, if we use your contrived example, then you are right.
But if you are ought to use a container for your desktop app, you will end up using something like max-width anyway. So you dont double up on your css. Max width will be much needed in any case.
True, though by using max-width you are already using the default behaviour of the browser. Again, contrived example.
But how about for more complex layouts like a sidebar and main content within that container, or a complex grid layout. I've worked with migrating a codebase from desktop-first to mobile-first, and I can tell you firsthand that you end up with far less CSS, that's all I'm getting at here.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Thanks for sharing.
One very important additional consideration is that the web is already responsive by default. If you put a div onto a page, it will take up 100% of the available space without you having to write any additional CSS.
When you develop for desktop first, you ignore this, and it means that most of the time, you will write twice the amount of CSS. Once to make sure your div doesn't get too large for the desktop viewport (eg, width: 400px), and then a second time to "revert" that to mobile's default (width: 100%).
Yeah that’s a good point too 👍🏻
Not entirely accurate. If you ought to use a container for larger screens you still have to define a width or better, use a max width value. No matter if you going mobile or desktop first. Un less im missing something
It's the difference between (pseudo-code follows)
desktop first:
.hero-card {
width: 500px
}
@media(max-width: 500px) {
.hero-card {
width: 100%;
}
}
And mobile first:
@media(min-width: 500px) {
.hero-card {
width: 500px;
}
}
It's a contrived example, but with mobile first, you get all of the browser's default styles without writing extra code, and you only override them when you get to a breakpoint where they need adjusting. With desktop first, you write the code to make it work, and then you write it again to override the desktop styles when the screen is smaller.
thanks for the reply and the example.
Thats why I said , not entirely accurate, if we use your contrived example, then you are right.
But if you are ought to use a container for your desktop app, you will end up using something like max-width anyway. So you dont double up on your css. Max width will be much needed in any case.
desktop first:
.hero-card {
max-width: 500px
}
@media(max-width: 500px) {
// nothing
}
And mobile first:
@media(min-width: 500px) {
.hero-card {
max-width: 500px;
}
}
in both cases, we need max-width
True, though by using max-width you are already using the default behaviour of the browser. Again, contrived example.
But how about for more complex layouts like a sidebar and main content within that container, or a complex grid layout. I've worked with migrating a codebase from desktop-first to mobile-first, and I can tell you firsthand that you end up with far less CSS, that's all I'm getting at here.