Back

Default CategoryJan 13, 2015

Testing Your Responsive Web Designs

Chris Bobbett

responsive design, it’s your responsibility

If you have been reluctant to fully join the responsive web design movement and embrace it with gusto, I’d encourage you to do so today. It is rare that we as designers can expect the sites and applications we create to be accessed from a single type of device, such as a desktop. There is such a wide range of device resolutions and pixel densities out in the wild these days that a responsive design strategy is the only reasonable approach for your next project. It’s a really exciting time to be learning, growing and creating products that serve and improve the lives of our users. Embrace the (r)evolution!

[Flash forward to your next project, which is being built to fully embrace the responsive web.]

Here are some testing to tips to make your life in the responsive web world easier:

MULTI-DEVICE TESTING 

Like any good front-end developer, you test your local development code in multiple browser clients, resizing the window to see how your responsive designs are working. In addition to window resizing, you probably take advantage of the development tools built into browsers such as Chrome’s device emulation mode. Feeling confident your project is going to work well everywhere, you begin to broaden your testing efforts and validate your work on real devices. 

responsive testing with adobe edge inspect

With phones, phablets and tablets in hand, you come to the first testing hurdle–how do you test the project on your development machine with your devices? Adobe has part of the solution with Edge Inspect. Edge Inspect allows your devices to mimic the activity of your desktop browser. For example, if I visit credera.com in Chrome while Edge Inspect is running, any device connected to Edge Inspect will also request the URL, credera.com. This solution works well if you are testing your site from an externally available domain name. But what if your development project is running on localhost:8080? How does Edge Inspect handle that URL? Short answer, it can’t. In this case, Edge Inspect will direct your devices to localhost:8080 which will return a 404 error. Lucky for us, we have Forward.

responsive testing with forward

A couple months ago I discovered a sweet little app from the folks at 50 East called Forward. This utilitarian app has become a mainstay in my development process and I have been telling everyone I can about it. With Forward, I am able to create a domain name on the fly that points to the project running on my local development machine. Once this domain (or tunnel as they call it) is created, I can share the URL with anyone and they can experience, test, etc., the project directly from my machine. After you make changes, refresh the browser on each device for an updated view of your project. If we use Forward alongside Adobe Edge Inspect, we can make the testing experience even better.

responsive testing with adobe edge inspect and forward

Now that we have a domain name available to the world via the Forward service, we can use Edge Inspect to mimic our desktop browser as usual, only now the connected devices will find the project running on your local development machine instead of returning a 404 error. Every time you refresh your desktop browser, all of the Edge Inspect connected devices will refresh as well, automatically.

responsive testing of internet explorer via virtual machines

And because you care about your craft and the quality of work you produce, you make sure to test in Internet Explorer (IE) too, right? If you are like me, IE testing involves the use of virtual machines running different versions of Internet Explorer. This method of IE testing works best when the project is accessible via a public domain name. Without the public domain name pointing to your local project, the virtual machine browser won’t receive a response. It’s similar to the scenario encountered with Edge Inspect trying to resolve a domain name like localhost:8080. The public domain name is what makes the process of multi-device testing so much easier.

This isn’t the only way to test your local project on numerous devices but has been the simplest and most versatile solution I have discovered. I strongly recommend you sign up for the Forward service and try it for yourself. You won’t be disappointed.

If you have questions about the state of design on the web or best practices for your responsive projects, we’d be happy to share what we have learned.

Have a Question?

Please complete the Captcha