Web Design For a Multi-Device Audience

How responsive web design will improve the user experience for all visitors

Take a moment and think about all the devices that you own that can be used to view websites. If you are like most people, this list has grown over the past few years. It likely includes traditional devices like a desktop and/or laptop computer along with devices that have come into prominence over those past few years, including smartphones, tablets, wearables, gaming systems, and more. You may even have appliances in your home or a screen in your car that allows you to connect to the Internet!

The bottom line is that the device landscape is getting larger and more diverse all the time, which means that to thrive on the Web today (and in the future), websites must be built with a responsive approach and CSS media queries and must consider how people will likely combine these different devices into one web-browsing experience.

Enter the Multi-Device User

One truth that we have seen play out is that if people are given multiple ways to access the Web, they will use them. Not only are people using lots of different devices to access website content, but the same person is visiting the same site using those varied devices. This is where the concept of the “multi-device” user comes from.

A Typical Multi-Device Scenario

Consider a common web interaction that many people experience each day – browsing real estate websites in a search for a new home. This experience may begin on a desktop computer where someone enters the criteria of what they are looking for and reviews different property listings that match that query.

Through the day, this person may look at specific properties again on their mobile device, or they may receive alerts to their email (which they will check on their mobile device) for new listings that match their search parameters. They could even get those alerts to a wearable device, like a smartwatch, and review basic information on that tiny screen.

This process could continue through the day with more visits to the site on a different desktop computer, perhaps from their office at work. That evening, they may use a tablet device to show any listings that are particularly interesting to their family to get their feedback on those properties.

In this scenario, our website customer may have used four or five different devices, each with very different screen sizes, to visit the same site and look at the same content. This is a multi-device user, and if the website they are visiting does not accommodate them on all these different screens, they will simply leave and find one that does.

Other Scenarios

Searching for real estate is only one example where users will jump from device to device during their overall experience with a site. Other examples include:

  • Searching for an automobile to purchase
  • Planning a vacation
  • Reading news articles
  • Researching home improvement ideas
  • Looking for local contractors/services
  • Planning a wedding or other big event
  • Following a sports team or sporting event

In each of these cases, the web experience is likely to stretch to more than one session, which means there is a chance that a user will use different devices based on which one is convenient for them at any given time.

Best Practices to Follow

If the websites of today need to cater to an increasingly multi-device using audience, then there are some basic principles and best practices that should be followed to ensure those sites are ready to properly handle these visitors and that they rank well in search engines.

  • Responsive Website – a responsive layout that can adapt and change for different screen sizes is critical to support the variety of web-connected devices available today.
     
  • All Content Should Be Available – if someone can access certain content or features when they visit the site on one device, they expect those to also be available when they return on other devices. The content should be presented in a way that is suitable for each device, but no content should be “hidden” or “turned off” for certain devices.
     
  • Readability is Key – no matter what kind of devices or what size screen is being used to visit a website, the ease of reading that site is important. This means that the typography is an important design element to focus on. If someone has a hard time reading a site’s content, they are likely to leave the site altogether.
     
  • Consistency Amidst Diversity – while the layout presented for each different screen size will be different, there should be consistency from one device to another. The overall experience should be connected so that users do not have to relearn the site every time they visit it on a new screen.
     
  • Make Performance a Priority – websites should load quickly and work well on all devices, including mobile devices with less than perfect download speeds. Overall website performance should be a priority in all aspects of a site’s design and development – after all, no one will ever say that a website loaded too fast or worked too well!

Edited by Jeremy Girard on 1/26/17