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 learned about mobile first approach and bootstrap in a small article so you can benefit too.
Let's get started ..
The Idea of Mobile First Approach:
The mobile first approach looks at designing a website for a mobile device first. So consider how you would satisfy the screen constraints of your mobile device. And then as your screen size expands, you would automatically start an app to your website to the larger and larger screen sizes.
Why Mobile First Approach?
The answer for this question is simple: mobile design is more limited. So if you start from a small screen you can focus in the main and important features that could fit a mobile screen, then perhaps you're willing more and more of the content. So as to take advantage of the increasing screen real estate, which means the same website when seeing on a mobile device might have only parts of the information being revealed to the user. But then when rendered on a full fledge desktop it might show a lot more detail version of the website.
In addition, starting your website with mobile first and focusing more in the mobile design will make your website reachs more people because people tend to play more with their phone and we have 3.80 Billion phone users in the world! and the status of the world market share for mobile:55.77% comparing with Desktop:41.5%.
Fortunately we have many web UI frameworks including Bootstrap to work with the design and apply mobile first approach .. here is a list of some popular UI frameworks:
- Bootstrap 2. Tailwind CSS
- Semantic-UI 4. Foundation
- Material UI 6. Pure
- Skeleton 8. UIKit
- Milligram 10. Susy
- Materialize 12. Pure CSS
Bonus Info 🎉: What is Bootstrap?
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web, because Bootstrap makes the web development faster and easier, also, it includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional , in addition to JavaScript plugins.
so we can create responsive designs with mobile first easily
Resources:
- What does mobile-first design mean for digital designers?
- getbootstrap
- Front-End Web UI Frameworks and Tools: Bootstrap 4 Course by The Hong Kong University of Science and Technology - Coursera
- mobile-first responsive web design
- NUMBER OF MOBILE PHONE & SMARTPHONE USERS](Source: https://www.bankmycell.com/blog/how-many-phones-are-in-the-world)
- Number of smartphone users from 2016 to 2021
Top comments (14)
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