Usability and the mobile web

Default avatar.
December 17, 2015
Usability and the mobile web.
For some time now, anyone concerned with search engine optimization made sure a mobile version of their website was available because otherwise they ran the risk of angering the Google algorithm. Yet unlike so many other trends in the SEO world, research shows that mobile web use isn’t slowing down, even though many of the so-called mobile friendly websites are a pain to use. Not only are mobile views growing, they are blowing up. Research from Statista estimates that the amount of web traffic in the year 2019 will be around 24.3 Exabyte, up from 4.2 Exabyte in 2015. Just to make sure you understand the gravity of that, one Exabyte is equal to 1 billion Gigabytes. Despite evidence showing that visitors are using their mobile devices to browse the web, not everyone designs with the mobile user in mind. According to the Nielsen-Norman Group:
…there are more smartphone users worldwide than desktop and laptop users [but] the usability of mobile websites and applications is still well behind the usability of desktop websites.

Of course, not everyone wants a mobile website that is just good enough for Google. They want their visitors to have a positive experience when they land on their website, or one that they designed for a customer. So they adjust their designs accordingly.

Choose your approach

Most people associate mobile web with responsive web design because that has been the buzzword thrown around different blogs and presentations for some time now. However responsive web design isn’t the only strategy, and it isn’t always the best approach. The best choice is based on how you want your visitors to interact with the content on your site.

Responsive web design

Using media queries to change the display of the site based on the screen size, this is a fluid approach to designing for multiple devices. You design once and rely on the CSS to scale the display based on the screen.

Adaptive design

This approach relies on static pages designed for different breakpoints. When the screen size is detected, the appropriate layout is displayed. Here, you need to design different layouts to accommodate various screen sizes. Usually, six layouts are built for the more common widths: 320, 480, 760, 960, 1200, 1600.

Native application

This is when you build an iOS, Android or Windows app designed to serve up your web content to mobile users.

Understand how interactions work

You would be hard pressed to find a website these days that doesn’t offer some sort of user interaction. It could be a business website that collects information from prospective customers, an ecommerce site built for shopping, or a site that allows visitors to check-in to an event or location. In any event, the user is going to have to provide information, make selections and press buttons and you have to get into the mindset that things on a mobile device are different. For starters, focus on important features. This might require some rearranging on your part, or you may have to cut back on some of the elements you wanted to include. Not only will this help reduce clutter, but it will allow for larger buttons and other elements that larger fingers may have a hard time engaging with. When at all possible, reduce the need for users to enter text. They may have an onscreen keyboard to use but we all know that there is a high rate of error when using these and features like autocorrect or text predict can become quite frustrating. Also, understand that there is a good chance that a mobile visitor may be interrupted or lose their connection. The less they have to re-do if they time out, the less frustration they are going to feel.

Help your visitors navigate easily

For SEO purposes, many designers have been trained over the years to incorporate complex navigation menus into their work so that the search engine spiders are able to index everything. Having everything accessible from the navigation menu also makes sure that your visitors are able to find what they are looking for. But for the mobile visitor, these overwhelming menus actually make navigation more difficult, and a properly created sitemap will send the search engine crawlers where you need them to go. Instead of long lists of menu items, keep the choices to no more than six so mobile visitors don’t have to try to scroll down to see everything while trying to keep a menu open. Also, eliminate the submenus. That little + sign that you expect users to click to expand the options is really hard to tap unless they are using a stylus. Apple’s UI Design Basics states that the average finger requires 44 pixels left to right and up and down. Design with that space in mind. The trend of the single page website is something to consider here as well. Designed with mobile visitors in mind, this technique allows the visitor to scroll through your site and find everything they need on one long page. This type of design forgets all about the fold since mobile users are comfortable swiping through content to find what they need.

Don’t sacrifice your purpose

When thinking about your mobile visitors, you are asked to leave out quite a bit. But what you should never sacrifice is the reason you have a website in the first place. Make sure your branding remains consistent, if you need your logo to remain prominent then use the right amount of real estate to display it. If your site is heavy on content, make sure your mobile users have access to all of it. Hiding content from mobile displays essentially punishes visitors for not being on a full-screen. As web designers, we are used to trends in our industry. Every year there are lists that introduce us to the latest fads and methodologies that we should be paying attention to. Designing for the mobile user isn’t one of those. It is the reality of where our industry is going and they just keep adding more screen sizes for us to work with so there really is no one size fits all approach that you can take. You, your organization, your customers and any other stakeholders have to determine what is important and structure your sites around those elements. But think about what is important to your visitors because that is what counts. User experience should never be about what we think is best or what we want to see. We can’t force people into having a great experience when they visit our pages. Instead, we have to look at giving them what they want, in a way that is easy for them to access. So before we look for checklists or guides that tell us what a good user experience is, take the time to think about what we have to say and what our visitors want to hear. Featured image, mobile web image via Shutterstock.

Ayrald Hubert

Ayrald Hubert is a Senior Analyst at Clutch responsible for research and analysis of New York based web design companies. Ayrald's academic background includes a Bachelor's Degree from Georgetown University in Washington D.C., USA.

Read Next

15 Best New Fonts, July 2024

Welcome to our monthly roundup of the best fonts we’ve found online in the last four weeks. This month, there are fewer…

20 Best New Websites, July 2024

Welcome to July’s round up of websites to inspire you. This month’s collection ranges from the most stripped-back…

Top 7 WordPress Plugins for 2024: Enhance Your Site's Performance

WordPress is a hands-down favorite of website designers and developers. Renowned for its flexibility and ease of use,…

Exciting New Tools for Designers, July 2024

Welcome to this July’s collection of tools, gathered from around the web over the past month. We hope you’ll find…

3 Essential Design Trends, July 2024

Add some summer sizzle to your design projects with trendy website elements. Learn what's trending and how to use these…

15 Best New Fonts, June 2024

Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…

20 Best New Websites, June 2024

Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…

Exciting New Tools for Designers, June 2024

In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…

3 Essential Design Trends, June 2024

Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!

15 Best New Fonts, May 2024

In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…

How to Reduce The Carbon Footprint of Your Website

On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…