Our Favorite Way to Test Responsive Design on a Desktop

Video Translation

Hi! Welcome everybody. This is Elyssa Helfman, your art director here at PaperStreet, and today I’ll be showing you a quick tutorial on how to add a Google Chrome extension to your browser. And you can start testing out websites to see if they’re optimized for responsiveness. This is a really great tool to see how a site looks on an iPad, or a mobile phone, or any other device that comes with this extension.

So let’s go ahead and get started. Go ahead, open up a Google search page and type in “Chrome extensions”. You can see right here, it comes up right at the top. Click on “extensions” and in the Chrome webstore the extension is actually called “Responsive Web Design Tester”. So type that in and you’ll see a few different options here with apps and extensions, but this one right here is the extension that we’re talking about. You can see how well it’s been rated. I’ve already added it, so it’s giving me that indication, but you would go ahead and click on this, and go trough all the prompts to add this to your browser. And then once you’ve added it, you’ll see a little icon that looks just like this, that will pop up in your browser window, and it will be at the top, so it’s always accessible to you to use on any website. I’ll go ahead and show you an example, one of our websites here at PaperStreet, that’s definitely been optimized for responsiveness, and that’s Bloom Legal.

So Bloom Legal is loading, you can see that there’s a background video, there’s some really cool portal buttons, and what we’re viewing right now is the desktop version of this site. If I go ahead and use this icon up here, you can see that it’s asking me to select a device. There’s many options here: Android phones, Android tablet versions. There’s some more miscellaneous options like the Blackberry or the Kindle Fire. There’s an iPad selection, so you can use the landscape view or the portrait view. Even iPad mini. Then there’s a couple of different options for iPhone: iPhone 4 and iPhone 5. they haven’t updated it yet to include the iPhone 6, but I’m sure hey will do that soon.

So let’s start with the iPad portrait. I tend to think that most people view their iPad in the portrait version. It’s easier to hold, and easier to read. Now, what you can see with this site is that it actually has been designed specifically for an iPad portrait view. The design does change from the desktop version, as you see back here. We’ve now removed the video. Sometimes video just doesn’t load as well, it slows down the site when you’re viewing it in a smaller device like an iPad or a mobile phone. The menu’s been condensed down. Just to bring you back over here to the desktop version, you can see the menu is laid out. Well, on smaller devices, sometimes you don’t have the space for that. So the menu here is a little drop down menu, You can select what you like. And we’ve now condensed the portals to these. They’re not the same kind of cover state that you see with the other ones, but that’s because you can’t have a hover state on mobile versions. You can just click on something and touch it, that’s all touch based devices.

So you can see that this device has been optimized for tablet view. So click off of here. Let’s take a look at the iPhone version. I’m going to select iPhone 5, since that’s the most recent one they offer. And you can see, similar to the iPad version, this has been optimized for mobile. It has the consultation at the very top, a phone number here which with you on your phone you can just click this directly with your finger and it would actually call the number. There’s a menu button here. Does the same thing I showed you earlier on the iPad version. And the four portal buttons. Actually, there’s a fourth one that’s been added, because it really creates the balance on a phone, and it has again consultation. So, you can see that this has been really optimized for a mobile phone as well. That’s what you’re looking for when you have a responsive site. That it works on all of these different devices. And this extension is a great way to test that out. You might want to test your own site, for example, if you’re a PaperStreet client, you can use your beta testing link that we give you before your site launches, install this extension and see how it looks in all these different devices. Or, maybe you want to test out a competitor; is their site responsive? You can use the extension and take a look.

So thank you again for tuning in and if you have any questions about responsiveness, you can ask me, Elyssa Helfman, your art director here at PaperStreet, and I’m happy to answer any of your questions. Thanks!

Related Articles in Web Site Design,

PaperStreet: Our Services & Portfolio


Leave a Reply

Your email address will not be published. Required fields are marked *

*