In a world where everything from your phone to your TV is getting bigger, websites must also be adapted to any display. Responsive testing aims to ensure that the same website looks great on any screen size so its usability is consistent across all device types.
This blog post will explore what responsive design is, why you should care about responsive testing, and how you can use it in your projects. We'll share some tips and examples of successful responsive sites so you can start testing your website responsiveness immediately.
Let's get started!
Table of Contents:
What is responsive design, and why should you test it?
Three factors define whether or not a website is responsive. If all of these are met, you've got yourself a stellar responsive design:
Factor 1: Fluidity
The site should be fluid, meaning the columns and widths of elements should dynamically change depending on the screen size. This ensures everything fits well regardless of the device used to view the site.
Factor 2: Change the Styling
Media queries are used to change the styling of elements when the screen gets smaller than a specified width, allowing for an optimal viewing experience across multiple devices.
For example, if you're reading this on your phone in portrait mode, chances are you'll want more lines of text and things to be spaced out, so they don't seem cramped. On the other hand, if you're on a desktop and change the browser window to landscape mode, you'll want to see more images or larger text instead. Media queries allow you to do that by using different CSS rules for specific screen widths (i.e., mobile vs. laptop).
Factor 3: Progressive Enhancement
It's progressive enhancement, meaning the site works well for all users whether they are using a fast device with modern browser software or an older, slow device running outdated browsers.
All these three factors should be tested because they make or break a site's responsive design. And, you don't want your visitors to have a bad experience because they are using the wrong device. But, of course, it's impossible to test your site across every single device ever created (and who even knows what new devices will be available in the future), so it's best to test your site on various mobile and desktop screens.
How to test the responsiveness of your designs on different devices?
There are many options to do responsive testing, depending on how much you want to spend and what devices you have access to.
Option 1: Use mobile simulators to simulate your website on mobile devices from a desktop
This is great for testing responsive sites because the layout will adjust based on different screen sizes, and you can also test performance to see how quickly it loads.
The downside is that you cannot test touch-based gestures such as pinching and zooming (because you are not holding a phone).
Option 2: Using real devices
The apparent advantage of using real devices is testing how the site performs on mobile touch screens.
However, you will need more than just one device to get a good sampling of different screen sizes and form factors. Furthermore, keep in mind that mobile devices and web browsers can vary wildly in performance and rendering capabilities.
Option 3: Using an automated testing tool like UIlicious
We think this is the best option for testing responsive designs because it's quick and easy, and you can test on real devices without having to buy or physically hold them. UIlicious also allows you to take screenshots of your site on different screen sizes so you can compare the results side-by-side.
Want to see how it works? Try UIlicious for free today.
Sign up for UI-licious now
The benefits of responsive design
In today's mobile-first world, having your site correctly optimized for mobile devices is extremely important if you want to reach as many users as possible. According to a recent study by Google, people spend 80% of their mobile media time using apps. And two-thirds of global web traffic comes from mobile, so it's safe to say that you should be catering your site toward these users.
Some additional benefits of responsive design are:
Decreases bounce rate because people stay on the website longer when they are given an optimal viewing experience across all devices.
Increases conversions because people are more likely to buy products when they are presented in the best way possible, regardless of screen size or device.
Decreases load time because responsive sites require less code and assets than separate mobile sites, allowing faster loading.
Tips for creating responsive websites
Make sure your site is optimized for mobile devices from the start by using responsive design. Even if you are still testing and working on a separate mobile site, make sure to use media queries in CSS so that the layout adjusts dynamically based on screen size.
Ensure text can be enlarged on mobile devices to allow easier reading, especially if your site uses a background image. Also, consider adjusting font sizes to make it easier for mobile users to read and interact with your content (e.g., use 16px rather than 20px).
Give buttons enough padding to make it easy to press on touch screens.
Be mindful of the amount of content on each page, especially when using mobile media queries. Less is more, especially on smaller screens where users do less reading and more scrolling.
Avoid auto-playing videos or animated gifs that might take too long to load on mobile devices.
If you are building your site, consider minifying CSS and JavaScript to ensure the fastest loading possible (this is where a CDN can help).
If you're using an off-the-shelf theme, it may not be fully responsive, and you might need to customize certain features, such as the header or main content area. If so, don't forget to test your customizations across different devices!
Case studies of successful responsive websites
Hereafter, we will go over some case studies of responsive websites that have seen success.
Etsy
Etsy is an online marketplace for handmade and vintage items. The site has been around since 2005 and now boasts 60 million active buyers and 2.1 million active sellers. In 2012, they underwent a complete redesign of their website with a focus on responsiveness. The new design was a success, resulting in a 20% increase in traffic from mobile devices and a 5% overall increase in traffic.
Boston Globe
The Boston Globe is one of the largest and most popular newspapers in the United States. In 2011, they launched their responsive site just in time for the 2012 presidential election. The results were impressive, with a 400% increase in traffic from mobile devices and a 10% overall increase in traffic.
Mozilla
Mozilla is the non-profit behind the Firefox web browser. In 2013, they launched a responsive version of their homepage. The results were impressive, with a 50% increase in traffic from mobile devices and a 5% overall increase in traffic.
Gilt.com
Gilt.com is an e-commerce site offering luxury brands at steep discounts. Since its inception, it has undergone significant changes to its layout and design strategy, including the incorporation of responsive design in 2011.
Because 60% of Gilt's traffic comes from mobile devices, their decision was fairly easy to make after seeing how bad the experience was for users who were not on desktop computers. Gilt's responsive design has helped them keep up with customer trends and the increasing number of mobile shoppers.
Target.com
Target.com is a major retailer that decided to break away from big box retail standards by launching its own branded site in 2011, about five years after it started its online marketing campaign. In 2013, they launched a responsive site that not only consolidated all of Target's web properties into a single website that was easier to navigate and more user-friendly but also improved the online shopping experience by making product lists easier to read on mobile devices. The combination of careful site design and responsiveness has helped Target maintain its position as a leader in online retail.
As you can see, creating a responsive site not only ensures that your visitors have the best possible experience regardless of screen size or device but also provides many other benefits to future-proof your website and meet current customer needs. And, hopefully, this blog post has given you some tips on how to get started.
Thank you for reading. I hope this article was helpful! Have any questions about responsive testing or any other kind of web testing? Send us a message!
