Since the start of the web, the main form of browsing has been on computers. In recent years however, mobile phones have evolved from having basic features; such as making calls and messaging, to smartphones with the ability to take photos, access the web, download apps, and much more.
The Rise of Small Screens
In 2019, only 47% of households owned a computer (statista, 2021), while over 70% of the worlds population owned a smartphone (statista, 2022). Since then, the number of people who own a smartphone has risen significantly. With data from statista indicating that over 80% of the population does. This is most likely due to the mobility and ease of use that comes from mobile phones. As well as the fact that they can now do most of what personal computers can do.
Browsing on Mobile
Mobile device usage surpassed Desktop usage in 2016. Since then, there has been a steady increase in phones being used over desktops to browse the internet. With the above graphic from Perficient indicating that in 2020 globally, 68% of website visits were by mobile devices.
There are many benefits for users browsing on their smartphones, including portability, ease of access, and an ergonomic experience. However, when browsing websites from a phone, occasionally you will find text too small to read, or images in weird places. This comes from a lack of responsive design.
What is Responsive design?
If you’ve worked on websites at all, you have probably come across responsive design at some point. But if you haven’t, or need a refresher; Responsive design is an approach to web design that uses HTML and CSS to dynamically resize web pages for different screens. It ensures page elements such as images and text can be viewed no matter what size screen you have. Meaning users will not need to zoom, or do extra work to view the page content.
With the increasing demand for websites to be accessible from mobile devices, the need for responsive design is more important than ever.
Mobile First Development
These days websites are visited primarily on mobile devices. Which means webpages are usually viewed on screens widths of less than 640px. As the screen is so small, designers need focus on the core features needed for the website when designing for mobile. It can be difficult to transfer a design meant for a large screen to a smaller one while keeping the design consistent and not losing the user experience. That’s where mobile-first development comes in.
Designing for the smaller screen first ensures that the majority of users - i.e. the ones on mobile phones, have an enjoyable experience on your website. On top of this, designing for mobile first ensures you don’t take away important features already designed for a desktop experience. Moreover, you don’t have to worry as much about slow loading speeds when taking desktop features to mobile.
Mobile-first development results in an all round better designed experience for users on their phones. So will you start better catering for the majority?