Useful responsive design test aids

I've been recently returning to do some responsive design testing.  I wrote previously about it here.

I get a decent variety of challenges at my work, so I'm almost amazed to be revisiting this after an absence (I've been looking at NFRs) to see there are some really useful tools out there.

Developer tools ... mobile mode

This one just blew me away!  What happened next ... okay I'll tone down the clickbait.

But newer versions of browser, if you go into dev tools (F12 on Chrome) have a responsive design option, which allows you to simulate screen sizes, even flipping your screen from landscape to portairt and back.

Mind ... blown ....

You're looking for the following button,

Here,

I can rotate with this ...

 You can select from a list of settings for different popular devices ...

This is a really great tool for helping initial testing.  But as with my previous article, be aware that you're not using the proper device browser, and items like drop downs and pop-ups are handled radically different on mobile devices.


Vysor

This is a Google Chrome app.

Because I'm doing more with mobiles, I need to be able to demo more on mobiles.  Our work has a lot of projects with VGA, and when I asked if it was possible to get a new state-of-the-art projector to run our demos on from the phone, I'm afraid I kind of got this look from my managers ...

This only works for Android phones, for which you need to also download the Vysor app from the Play Store.  You'll also have to put your phone into developer mode - you'll have to Google how to do that for your device - usually you hit an option 7 times in the settings, which unlocks developer settings like an Easter egg bonus.

More than just showing the contents of your mobile device, you can also manipulate it using the mouse and keyboard.  I like this because when I'm doing a lot of repetitive tasks, it's all a bit easier, plus I can screenshot to my heart's delight.  Good times!