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. In this article we discuss Web Design For a Multi-Device Audience
It likely includes traditional devices like a desktop and/or laptop computer along with devices that have come into prominence over the past few years, including smartphones, tablets, wearables (smartwatch, Google Glass), gaming systems, and more.
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 combine these different devices into one web-browsing experience.
Table of Contents
Advantages of CSS Media Queries
You may be thinking that this isn’t really that different from using a resolution detection script to pass on the correct style sheet. But there are some definite advantages to using media queries for responsive design:
- You are not relying on JavaScript support. While most browsers out there do allow JavaScript, it is possible for users to turn it off, and once they do your efforts at responsive design are gone.
- CSS media queries go well beyond just testing the resolution. There are, in fact, 13 different features you can evaluate against to get very specific with your designs. Plus media queries let you combine multiple queries to get, for example, only devices that are 600x800px in landscape orientation and not HD.
- You can implement CSS media queries against just one or two rules in an existing style sheet by using the @media rule.
- You can also import media specific style sheets with the @import rule and media queries.
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.
Throughout 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.
The 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 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!
Join The Logo Community
We hope this article about Web Design For a Multi-Device Audience has been helpful.
If you would like more personal tips, advice, insights, and access to our community threads and other goodies join me in our community. You can comment directly on posts and have a discussion.
Author Bio
Hannah Butler works as a web developer and designer. Besides, she likes sharing her experience. In this case, she has her own section on dissertation writing help website. In the future she is going to start writing a blog in order to describe her working methods to others.