How are you testing responsive design?


#1

Do you have some advices or tools you know to test your responsive design template ? Or are you just resizing your browser window ? Maybeyou want to see everything in action on a real device ?

Personnaly, I resize my screen, but I found a cool website to see every main screen devices here Snizzy. But some stuff/bugs can’t be emulated yet.

And you, how do you deal with that ?


#2

Google Developer Tools in Google Chrome have a built in tool for that, which I use.


#3
  • Resized browser windows
  • Chrome dev tools
  • device emulators/simulators
  • real devices

#4

If your using browsersync, you can look at the same site, on many devices and browsers and control them all simultaneously at once.

Resizing your screen isn’t quite good enough, because it doesn’t take into the phones interface.

If your on a mac, theres an iphone/ipad simulator as part of xcode (you dont need a developer account to use it), but you will need a public url for your site, localhost wont work. (hint: you can use ngrok) This will allow you to test as closely as possible on various versions of iOS without needing the real devices.

Microsoft provide a bunch of virtual machines for testing various versions of IE and Edge.

On a side note, and this is not really for responsive design, but more for testing the functions of a website automatically, a great tool for this is Nightmare. You can program it to browse a site, click buttons, fill in forms etc and report back any errors. It could in theory be used to test a mobile only menu shows up and can be used on small screens.

You can also use Sitespeed which can be configured to act like various devices and different internet connection speeds so you can get an idea of how your site will perform.


#5

On my Mac, localhost does work.


#6

That’s interesting, i tried this in the device lab i built at work and localhost refused to work. I had to keep deploying to our staging server. Maybe the corporate network was interfering (a proxy was in use).

I couldnt get Ghostlab to work either.


#7

Other testing options include paid services like BrowserStack or CrossBrowserTesting. Both services offer cheaper limited plans for freelancers, which you can also book on a monthly basis if you don’t need it regularly. For Open Source projects, both services are free.