What is mobile first web design?

An investigation

In the web development game, things are constantly in flux. From the most popular framework to the newest rendering method, its important to keep on top of the latest technology so you can have an idea of what is currently happening in the industry. One thing that has been about for a while now is the concept of mobile-first web design. This concept is pretty straight forward. It is the idea of designing web pages on smaller screens first, then concider the bigger screens that your site may be viewed on.

This is quite a sensible way of thinking. In 2022, 86% of users access the internet through a smartphone in the uk, compared to 28% in 2009, and almost all(98%) adults in the uk now have a smart phone. The number of people that use the internet on their smart phone to access your site means that you need to have a great mobile experience as well as a desktop page. I will give you some quick examples of how to make your website appealing on all screen sizes.

The term Responsive Web Design was originally discussed in a blog post by Ethan Marcotte that had a monumental effect on web design. To understand what he suggests its important to know that originally websites were views only on 4:3 monitors, so CSS (the language that styles a webpage) was only used to style the page at one size e.g the size of the monitor. As technology advanced and people began accessing the internet on their phones, web page sizes began to matter more. Designers began designing two versions of their websites, one normal, and one on a subdomain that starts with .m. This allowed users to use sites on their mobile devices, but was time consuming for the designers as they would have to work on two sites all the time.

The beauty of Marcotte's concept lies in its excecution. Where as before you would have to have two separate domains for your website, responsive webdesign allows for some CSS magic so that your site looks good on any screen size. This allows designers to maintain one website with relative ease, and allows users viewing the website on either mobile or a PC screen to have a similar experience.

This concept, coupled with the current use trends in mobile phone use is a good case for websites to be designed with mobile use at the forefront.