What does it mean to be mobile-friendly?

The internet has restructured our lives in ways that mean it’s difficult to imagine life without it. As the fibre-optic cables of broadband continue to reach around the world, smartphones also offer what is essentially a pocket-sized computer that allows us to access apps and the internet from the palms of our hands. 

As an example of mobile’s popularity, according to a Quartz article published in 2017, mobile internet accounted for 98% of all internet usage in Zimbabwe. Despite the high cost of smartphones – especially in developing parts of the world where import duty taxes may be added by governments – people’s everyday habits of accessing the internet have definitely progressed to being predominantly by mobile devices. For this reason, mobile usability is a priority in website design.

Why is mobile friendliness important?

Mobile-first, or mobile-friendly is an approach taken both by web developers and marketers to ensure that users of mobile devices get to see what they need to see on their screens when they land on a page. If users spend too long scrolling down the page or having to zoom in so they can read the copy, they can get impatient and abandon the entire site completely. Designing mobile-friendly wireframes and structuring content accordingly (e.g. limiting navigation drop-downs) makes website pages easier to navigate on a smartphone or tablet and results in a more intuitive user experience.

Webpages that are designed primarily with mobile-friendliness in mind are more likely to keep mobile users on the page or exploring the whole site rather than ones which aren’t. First impressions matter and a design that displays clarity has an immediate and positive effect on users. Retail sales from mobiles (m-commerce) are on track to surpass the £100billion mark by 2024 according to Statista, due to the number of individuals using mobile devices (both phones and tablets) increasing in general. The habits of shoppers seem to show that mobiles are more likely to be used for pre-purchase browsing and price comparison with desktop traffic resulting in higher conversion rates. Nevertheless, according to Google’s Mobile Search Moments Report with Nielsen, 77% of mobile searches occur at home or at work when desktop computers are likely present.

What is the mobile-friendly test tool?

Google’s mobile-friendly test makes it easier than ever to instantly check if a page is mobile-friendly. The test can be accessed via the Google Search Console, which is free and helps you to monitor and maintain any site’s presence in Google search results. Simply type a website URL into the search bar on the test tool page and the test results will return a screenshot of how the page looks to Google on a mobile device as well as a mobile usability report detailing any problems that it finds.

Some of the issues which can affect a user visiting a page on a mobile device include small font sizes (which are even harder to read on a small screen) and the use of Flash (which isn’t supported by most mobile devices). 

The test can identify the following errors:

• Use of incompatible plugins

This is when a web page includes plugins, such as Flash, which aren’t supported by the majority of mobile browsers. For a mobile-friendly website, use modern, widely supported web technologies, such as HTML5 or JavaScript, especially when considering animations and interactivity.

• Viewport not set

This occurs when a page doesn’t define a viewport property, which is what tells browsers how to adjust a page’s dimension and scaling to suit the screen size. Because visitors to any site will be using different devices with different screen sizes, pages need to specify a viewport using the meta viewport tag.

• Viewport not set to “device-width”

This means that the page defines a fixed-width viewport property, therefore it cannot adjust for different screen sizes. The fix for this error is to adopt a responsive design for your site’s pages and set the viewport to match the device’s width and scale accordingly.

• Content wider than screen

This will force the user to scroll so that they can see words and images on the page. The error happens when pages use absolute values in CSS declarations or use images that have been designed to look their best at a specific browser width (e.g. 980px). To resolve the issue, be sure that pages use relative width and position values for CSS elements, and that images can scale as well.

• Text too small to read

If the font size for the page is too small, it will be illegible on a mobile device. After specifying a viewport for your web pages, set your font sizes to scale properly within the viewport. A base font of 16 pixels is usually the default size. Text sizes for headers can then be defined relative to the base font.

• Clickable elements too close together

When elements such as buttons and navigational links are too close to one another, mobile visitors to the site may experience issues. Because of the close proximity of elements, it can be difficult to tap on one without accidentally tapping on a neighbouring element. Make sure to correctly size and space buttons and navigational links for improved mobile usability.

It’s important to note that there is no separate mobile-first index. Google doesn’t use the desktop version but the mobile version of all webpages for ranking and consequently all indexing is mobile-first indexing.

What is the difference between mobile-friendliness and responsive design?

The terms mobile-friendliness and responsive design are sometimes used interchangeably but have slightly different meanings. Mobile-friendliness in its pure form means designing from scratch with a mobile-first approach. This can sometimes be limiting because what looks and works best on a mobile phone may not look and work best across laptops or monitors. It may also be detrimental to the customer journey in its perceived simplicity. For example, fewer options available in a drop-down menu may not do the job that they need to do in sign-posting the user or answering their queries sufficiently.

Responsive design still follows the basics of good UX design but it results in a website that changes based on the screen size of the device it is viewed on. It has dynamic content that alters its layout, optimised images that won’t appear warped, and correct spacing based on device. A simple way of understanding it is that in responsive design, a three-column layout switches to a single one that fits your device’s screen perfectly. You can check if a website is responsive by shrinking the window on your desktop and seeing whether the content reorganises itself to match the window size.

When it comes to search engine optimisation (SEO), Google’s algorithms previously ranked desktop sites as the primary version of any domain. This was at a time when people would often create a separate website hosted on a mobile subdomain, specifically optimised for mobile devices to which mobile users would be redirected. The mobile version of your site is now the one which will determine whether your site ranks, but if you use responsive design, the content will be the same across all versions.

If you use a content management system (CMS) such as WordPress, Wix, or Squarespace, they all have dedicated guides to help you make your website mobile-friendly.

Enhance your web design knowledge with an MSc Computer Science

The proliferation of smartphones and tablets used throughout the world means that the mobile experience is driving innovation in web design and ecommerce. Get up-to-date with the latest technologies influencing design and the ranking factors that search engines look for when evaluating mobile pages with an online MSc Computer Science from the University of Wolverhampton.