Why Do Developers Choose Mobile First Approach
Tags: design, css, javascript, html
Published: 2021-08-24 17:41:53

#### 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.

![cat](https://i.gifer.com/embedded/download/72Oz.gif)

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.


![Mobile First Approach](https://web3canvas.com/wp-content/uploads/2013/03/mobilefirst.png)

 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%.

![mobile first](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ydjd5ecuvkctfbopjy46.png)


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:

1. Bootstrap &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 2. Tailwind CSS
3. Semantic-UI &nbsp;&nbsp;&nbsp;4. Foundation 
5. Material UI &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;6. Pure
7. Skeleton &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 8. UIKit
9. Milligram &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 10. Susy
11. Materialize &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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 
![Mobile First Approach](https://media3.giphy.com/media/SI8DCsjjGnODwlwqW0/giphy.gif)

### Resources:
- [What does mobile-first design mean for digital designers?](https://www.invisionapp.com/inside-design/mobile-first-design/)
- [getbootstrap](https://getbootstrap.com/docs/3.3/)
- 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](https://bradfrost.com/blog/post/mobile-first-responsive-web-design/)
- [NUMBER OF MOBILE PHONE & SMARTPHONE USERS] (Source: https://www.bankmycell.com/blog/how-many-phones-are-in-the-world)](Source: https://www.bankmycell.com/blog/how-many-phones-are-in-the-world)
- [Number of smartphone users from 2016 to 2021](https://www.statista.com/statistics/330695/number-of-smartphone-users-worldwide/)