Mobile design is increasingly important as more and more people access the internet from their phones. On average, users are accessing the internet on their mobile devices more often than on desktops and are spending more time there, too. In 2015, 35% of internet traffic came from mobile devices. In 2022, this has risen to 58%. The proportion of time that users spend online on mobiles vs. desktops has also increased. In 2015, users accessed the internet from their mobile devices 38.4% of the time, compared to 56.95% in 2022. These statistics show that most internet usage comes from mobile devices, and how websites look on those devices is and will be increasingly important.
Impact on the design process
Starting the design process with mobile screens helps designers prioritise the core functionalities of a product, as mobile screens have the least screen real estate.
What can be an issue with the opposite approach is that designers want to take advantage of the full desktop screen, filling it with features and not considering how that will impact the mobile experience. Then, features and complexities get removed as the screens become smaller. Another option designers have is to hide content in a carousel, dropdown, or a similar mechanism. Often, the content gets hidden just because it doesn’t fit the screen size, and not because it is secondary in importance.
Mobile-optimised websites rank higher in search results
The responsiveness and speed of a website are one of the things that directly impact SEO, especially for mobile searches. Having a website that is not responsive (static desktop page) will make it significantly slower to load, and both of these factors negatively impact the SEO, so in effect, the reach and visibility of a website.
Mobile-first design already places an emphasis on simple design that is to the point, which helps speed up loading times, but developers can also take advantage of Google’s AMP (Accelerated Mobile Pages) project, which helps developers create even faster websites. It is an open-source initiative which reduces web pages down to their essentials, removing scripts that slow them down. That allows pages to load up to four times faster and use up to ten times less data than regular pages.
Mobile-first design principles
Call to actions and components
The key CTA (call to action) should be prominent and easy to tap – both in size and in location. It is recommended that tappable targets are at least 44px on hand-held devices. Show the most important CTA content first so it is in view on mobile devices when the website is first opened (without scrolling).
When thinking about the design of components, it is also important to consider the mobile ones first. This is useful in particularly complicated ones, such s navigation bars, menus and footers. Components should be consistent and use simple and to-the-point language particularly in buttons and form field labels.
Text size and format
Choose a font that is easy to read, and pay special attention to the size of text styles. As a standard, the body copy shouldn’t be smaller than 16pts. Test how different combinations of text styles look on a real mobile device, as that will give you a clearer idea of scale.
Interactions
Remember that mobile devices don’t support hover actions, so set alternatives in place that will optimise the mobile experience such as swipe and tap interactions. For example, while tooltips might appear on a hover on a desktop, make the interaction of tapping to see the tooltip on mobile clear and intuitive.
Responsiveness
Keep in mind that designing for mobile doesn’t mean that all mobile phones will display your design in the same way. The most common mobile device size is 360x800px, but larger sizes such as 414×896 or 412×915 are also common.
Mobile-first design process
When the internet used to be primarily accessed by desktops, and accessing it via mobile was only just becoming popular, developers started modifying websites so that they were more usable on mobile devices. This often included getting rid of functions for the sake of saving space. This approach of designing for desktops first and then scaling websites down is known as Graceful Degradation.
The opposite approach is the Mobile-First Design approach, also known as Progressive Advancement. It encourages designers and developers to begin the whole process of designing and developing by first thinking about how it will work on the smallest devices. This encourages designers to think about how much users really need, and what will bring the most value.
Conclusion
Creating a mobile version of your website is crucial to the usability of your website. It is ideal to start the design process by designing for mobile, as it will help with prioritising the most important features and call-to-actions. But even if you start by designing for a desktop, it is still important to create a mobile page design, as it not only the usability of your website, but also your reach in search engines.
