What is a Mobile-First Approach and Why Should I Do It?

Web design is ever changing. Looking back, designers only had to worry about how a website looked on different browsers while using a computer. As the increase of mobile devices began, web designers would make two versions of a website: one for screen sizes that could fit on a desk and one for devices that could fit in a hand. A significant amount of people were left frustrated during this time as they would visit a website on their mobile device and it would not look the same as on their computer.

Over time responsive design was normalized and slowly became the standard practice. This new practice forced web designers to make one website that could adapt to many different screen sizes. As more people began to access the internet from mobile devices, this quickly became the standard in design because of the vast variety of screen sizes between computers, tablets, phones, and other handheld devices. From this stemmed one of the biggest design issues: design for a big screen and take elements away as the screen size shrinks (graceful degradation), or design for a mobile screen and add extra elements when scaling upwards to larger screen sizes (progressive enhancement).

Graceful Reduction vs. Progressive Enhancement

With graceful reduction, designers would take a website that was designed for larger screens and adjust elements to better "fit" smaller screens. This often required taking some lesser elements away completely. Eventually the end users were left feeling like they got a watered down version of the website as there would be common elements that one size would have and the other would not.

Progressive enhancement is considered much better by quite a few designers and even developers. The design of the website is created with the common elements available for all screen sizes. This allowed mobile users to get all the important information. For larger screens, extra information could be added on top of those common elements. Users felt they were getting an enhancement over an already good experience. This is the concept that the mobile-first approach is based on.

How Mobile-first Design is Achieved

During the concept phase of a new website, the designer goes over the important elements to choose what should always be present. These items are then created to fit both varying desktop and mobile screen sizes in a way that the content is the same no matter what size the website is viewed on. If extra, superfluous information on an item is needed/wanted then adding that in would happen on the desktop as opposed to mobile. Doing so ensures a streamlined experience between all screen sizes.

Why Mobile-First Is Best

Implementing a mobile-first design promotes an experience that is fair to all users. This type of design also ensures that the majority of people with internet can access important information on the website without being forced to seek a desktop computer. An additional benefit is improved website load times for mobile devices as only the important information gets loaded and the “bloat information” is absent. 

Final Thoughts

Web design is continually changing over time, but the concept of less being more will not change. A web design including only what is necessary is a welcoming change from an Internet that is full of excess information that often results in information overload. Making your site get straight to the point allows visitors to see you as open and responsive to their needs. In the end, the mobile-first design allows everyone equal access to information.