Mobile-first responsive design in CSS

What is mobile-first design?

mobile-first design is an approach in which web designers start product design for mobile devices first. In this, we start by writing CSS for smaller devices first and then use media queries for bigger screens.

Why mobile-first?

There are 2 main reasons to practice mobile-first design: 

1. Increase in mobile phone users

Globally about 68% of website surfing in 2020 was done through mobile phones and it is only increasing. There is a rapid increase in web surfing done through mobile phones. So it is only logical to prefer designing your apps and websites for mobile phones first and then scale them to desktops. 

2. It helps focus us on what's important: 

In mobile design, we strip the components to their core essentials to make everything fit. This helps us understand the important aspects of the site or app you are creating. 

Suppose if a designer is making a website for desktop he is like to use all the screen space available, all the fancy animations he can do on hover which only a cursor can. He can add many components at once on the screen. But when designing an app or website for mobile phones we have limited bandwidth and small screen size. So designers are forced to only focus on the really important parts of the app/website.

How to practice mobile-first design

As always, it is recommended to create a wireframe or prototype to structure your designs. Here are some of the steps to follow during mobile-first design:

1. Content List:

Make a list of all the features and components you want on your website. Now rank them from the most important feature to the least important. This will help you to focus on the important part of the site.

2. Design for phones first then scale up: 

Once you have figured out the list of the important components, start designing the prototype site for mobile phones. At this point only focus on the most important things on the site. Then go to bigger breakpoints and add additional components. Ensure that you are not overcrowding many components in a small space since we use fingers to interact with the site.

Don't use hover states: Although it is very tempting to use animations that use hovering effects, it is not possible to put them on mobile phones.

3. Avoid large elements: 

Large texts, big images, and complex graphics look stunning on desktops but they don't look good on mobile phones. Use text that is readable to devices that do not have big screens.  

4. Testing: 

Using different software, fancy emulators are fine, but the best way to test is to do it on an actual device. Remember to test your designs on actual mobile phones. See if everything looks clean and readable and check if everything loads fast.

This is a very basic outline but you get the idea by now. Always remember that your designs don't have to look pretty they have to help users complete their tasks. 

~Arvind Suthar