5 Things to Consider when Designing a Mobile-Friendly Website

Mobile web design

Over the last few years, the number of searches using mobile devices has continued to grow. Up until mid-2019, desktop and mobile searches were almost identical, however, in the second half of 2019, mobile saw an increase and desktop saw a decline in figures.

 

In 2020, Ofcom’s Online Nation report found that in the UK, more than four-fifths of time spent online is using a mobile device.

 

This continuing increase in mobile usage has led Google to switch their search ranking to mobile-first, rewarding sites that perform well on mobile devices with better rankings. Now more than ever, ensuring your website is mobile-friendly should be the priority for any business looking to attract new customers.

Here are our top 5 things to consider when designing a mobile-friendly website:

User Experience

Over the last couple of months, Google has released core algorithm updates that focus on page experience and mobile usability, so this is one of the most important focuses of your website’s design process.

 

Keeping your mobile website simple, easy to use, and making sure everything functions as it should are the foundations of your overall design. For the best results, a scaled down version of your desktop website is ideal. When deciding what to include on your mobile website, you should consider the following:

 

  • Are elements of the page slowing down your page loading time? The Google PageSpeed Insights tool can let you know how your mobile site is performing.
  • Is the content, image, or video essential to communicating your message effectively?
  • Can an alternative, minimised version of any media be created for use on the mobile site?
  • Consider the colour scheme of your mobile website. Bold or dark colours may look attractive on a desktop website, however, on a smaller screen they can become overwhelming and difficult to view.
  • Is the text on the mobile site easy to read? 16-18px is easily readable on most devices.
  • Are links and buttons easy to click? It is recommended that important clickable elements are 44px or larger and that any links are spaced to avoid accidental clicking.

Responsive

Ensuring your website resizes to fit different screen sizes is an important element of building a mobile-friendly website, and one that Google includes in their Search Console reports.

 

The average screen sizes for mobile and desktop users are:

 

  • 360×640 (small mobile)
  • 1366×768 (average laptop)
  • 1920×1080 (large desktop)
  • 375×667 (average mobile)
  • 1440×900 (average desktop)
  • 720×1280 (large mobile)

 

When designing a website, there are a range of tools you can use to view it as it would appear on different devices and screen sizes. Some browsers also include this functionality such as Google Chrome and Firefox.

 

If you are building your website in WordPress, web builders such as Elementor allow you to change the view between mobile, iPad, and desktop so you just adjust each view as required.

Layout

The layout of your mobile website can play a major part in user experience. The condensed version of your website needs to be presented in a way that the information is easy to view, links and interactive information are easy to click, and the site is easy to navigate.

 

Some mobile layout points to consider are:

 

  • Replacing the menu bar with an expanding ‘hamburger’ style menu for easier navigation.
  • Using resizing images so that they are easily viewable on different sized screens.
  • Using single columns so the information is viewable at full-screen width and doesn’t require horizontal scrolling.
  • Remove unnecessary pop ups that cover the website content.
  • Reduce unnecessary web page ‘clutter’ for a cleaner presentation of your information.
  • Use accordion-style content boxes for larger blocks of text to reduce the length of the page.
  • Optimise call to action points for mobile viewing. Ensure telephone and email links are clickable and function correctly. 

Prioritise your sales message

When viewing any website for a product or service, the majority of visitors don’t read the full page content. It is, therefore, essential to prioritise your sales message towards the top of the page on mobile devices.

 

Ways to prioritise your message include:

 

  • Adding videos that explain your company offerings that are visible onscreen when your website loads.
  • Including a call to action at the beginning of the page, these can include a contact form, contact details, links to social media profiles, or banners highlighting special deals or promotions. 
  • Ensure forms are optimised for mobile; reduce the number of fields and make it easy for visitors to enter their details without having to use the tiny onscreen keyboard.

Loading speed

Loading speed, whether mobile or desktop is one of the most important initial factors for retaining website visitors. Most visitors will click back on the browser if the website hasn’t loaded in a matter of seconds.

 

Some ways to improve mobile loading speed are:

 

  • Image optimisation – using mobile-friendly formats and reduced image sizes.
  • Optimising website code for improved performance, this includes prioritising the order the content loads in, removing unused code, minifying and compressing styling, and updating caching policies.
  • Hosting your website on local servers. UK-based cloud servers offer faster loading for sites targeting a UK audience.
  • Update links to point directly to pages, redirected pages take longer to load.

Building and optimising a website for mobile search

If you are ready to begin building a website that focuses on mobile usability and improved mobile search rankings, contact the team at Easy Internet today. We have over 20 years’ experience working with businesses across the UK, building and developing their online presence. Call us on 0333 320 8099 or request a free no obligation quote.

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest