Hello Designers ..
Today I was practicing front-end development, so that I thought that it would be a good idea to share some of what I ...
For further actions, you may consider blocking this person and/or reporting abuse
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%).
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.
Yeah thatโs a good point too ๐๐ป
Mobile version of a website is a stripped down version. I fail to wrap my brain around the fact that a 'desktop website' would be a mobile site with added content.
To me you design both versions. I really think mobile first ideology was born out of ppl disregarding the importance of mobile users, nowadays you are literally retarded if you discard mobile users.
I think mobile first was created to force people to think about whats important on the website and whats not. Whats important is content and it has to be everywhere - mobile, desktop, whatever. If something is not important enough to be on mobile, its safe to skip everywhere.
Thats how i always explained mobile first to myself - stripping bloat. But im extremist when it comes to removing bloat so maybe im too biased.
Exactly .. that's what I tried to say about choosing the important features , but you can see the use of the desktop screen size in many websites .. maybe the unimportant features would be a photo gallery, more ads on the right and left sides. Even in google right now there is a game in the logo that you can play by click the logo, but in the mobile site, clicking the logo will redirect you to another page to play there, so you can see how google made use of the desktop screen
Well , this is an interesting opinion my friend .. however, the other reason I mentioned was about making the work a mobile oriented, which means the mobile version is our first and most important goal because people are more likely to use their mobiles .. and it doesn't really mean that the mobile version is a stripped down version ..but I myself in my beginnings made a website for a contracting company starting from the desktop website .. but when I started working on the mobile site I started deciding which feature should I sacrifice to fit the screen and that was painful because loosing 80% of the screen width is not easy
I am on the mobile first side but sometimes it's hard to decide which html structure you use when elements are wrapping below. E.g. on mobile everything is linear downwards because of space starvation. Meaning you create two independent elements below each other. But on desktop you recognise these belong into one container but can be wrapped when the size is too small.
This can be solved by having mockups for both versions in the first place.
One reason why mobile-first is better because you can preload background images.
web.dev/optimize-css-background-im...
Tailwind ๐ is ๐ missing๐
Tailwind is the boss โจ I am going to add it now