About The Author

Indrek is an ex-graphic designer, who half-way through his career turned to code and hasn’t looked back since. The past eight years have shaped his passion for … More about Indrek

Meet XRespond Testing Tool: Let’s Make Building Responsive Websites Simpler

Quick Summary

The way people consume information is constantly evolving. As web designers and developers, we keep up with all of the different screen shapes and sizes, learning to create beautiful, flexible software. Yet most of the available tools still don’t reflect the nature and diversity of the platform we’re building for: the browser.

When I was making my first responsive website in 2012, I quickly realized how inefficient and time-consuming the constant browser window resizing was. I had just moved from Estonia to Australia, and with a newborn, time was very much a precious resource.

Table of Contents

The way people consume information is constantly evolving. As web designers and developers, we keep up with all of the different screen shapes and sizes, learning to create beautiful, flexible software. Yet most of the available tools still don’t reflect the nature and diversity of the platform we’re building for: the browser.

When I was making my first responsive website in 2012, I quickly realized how inefficient and time-consuming the constant browser window resizing was. I had just moved from Estonia to Australia, and with a newborn, time was very much a precious resource.

I began looking for better ways to see the effects of my media queries.

I came across Matt Kersley’s Responsive Web Design Testing Tool and was blown away. It cut my development time in half. Even though the app was quite basic, it quickly became indispensable, and I continued to use it for several years.

Matt Kersley’s Responsive Web Design Testing Tool
Matt Kersley’s Responsive Web Design Testing Tool. (View large version)

It was very much to my surprise that I never saw this brilliant concept taken any further. This, combined with the lack of features, set me on a journey to create the open-source virtual device lab XRespond.

The new Smashing Magazine website previewed in XRespond
The new Smashing Magazine website previewed in XRespond (View large version)

Understanding The Problem

When it comes to developing responsive websites, the problem lies in having to constantly resize the browser window. Although this unavoidable action feels second nature to most, it also masks aspects of design we don’t often appreciate — most notably, inconsistency and time management.

With designs usually appearing in some combination of mobile, tablet and desktop context, anything in between is left in a somewhat uncertain state. And filling these gaps requires a lot of time and effort.

The problem lies in the difficulty of looking at one screen size at a time, as opposed to getting an all-in-one overview of different screen sizes. When we’re building for a variety of screen types, it doesn’t make sense to view only a single instance of a design at any given time — we’d be unable to gain the context of how the styles of elements change across breakpoints.

Current practices just don’t cater to these modern ways of developing. Fortunately, it’s not all bad news.

Simple Solution

XRespond is a virtual device lab for designing, developing and testing responsive websites. The idea is simple: It enables you to make website comparisons side by side, as if you had different devices on the wall in front of you.

You don’t have to leave your desk, laptop or even favorite browser. And with zero setup, you can start comparing websites right away.

(View large version)

XRespond can help if you’re building a pattern library or a style guide, because you can focus on a single component at different screen sizes simultaneously. As you’d expect from a development tool, it works well with local servers.

Just bear in mind that, as with any emulation, XRespond can’t compete with testing on real devices, but it will get you 90% of the way there — and in a fraction of the time.

How To Use It?

Enter a website address, click the button, and XRespond will automatically display the website on different virtual devices — which you can choose and customize as you see fit.

XRespond works well with other development tools, notably one of my favorites: Browsersync. Browsersync enables you to set up live reloads and synchronized scrolling — all simultaneously across virtual (and real) devices. This makes spotting problems simpler, because issues become more apparent.

Synchronized scrolling across devices with Browsersync
Synchronized scrolling across devices with Browsersync (View large version)

What To Do If Your Website Won’t Load?

Occasionally, you might run into a problem of your website failing to load. This most likely has to do with your website preventing itself from being loaded in an iframe. If you own the website, you can temporarily disable X-Frame-Options or the Content Security Policy, depending on your setup.

Conclusion

I love XRespond — and not just because I love making it, but because it simplifies my life. I can spend less time and effort working, and use the spare time for something else. It’s given me an opportunity to improve the quality of my work. I hope you’ll find XRespond just as useful and will start enjoying the time it saves you.

Feel free to share, and follow me on Twitter for updates. Cheers!

Smashing Editorial (da, il, al)

More Articles on

Read more

A Guide To Virtual Reality For Web Developers

by Ada Rose Edwards

Recently, there has been a proliferation of virtual reality (VR) web browsers and VR capabilities added to traditional browsers. In this article, we’ll look at the state of browsers in VR and the state of VR on the web via the WebVR APIs.

The web …

Read more
Read more