How to Test if Your Website is Mobile Responsive

2 Easy Ways to Test if your Website is Mobile Responsive and Why You Should Care.

Have you ever been to a website on your tablet or phone and the website looked absolutely horrible?

Would you buy from that website?

But when looking at it on your laptop, it looks great.

Unfortunately, this means it’s not a mobile responsive website and it’s possibly losing business. Check out this video tutorial to test if your own website is responsive for desktop, tablet, and mobile.

I hope this lesson was helpful to you and I have a question for you.

In the last month, how many websites have you come across that are not responsive? You landed on the website and it didn’t look the way it should. Something just didn’t look right.

And if you have a website, have you done a test to see if it’s responsive in various formats, such as portrait, landscape and on different devices?

If you don’t have a website, what’s something that you might keep in mind now when designing your website to make sure that it is responsive? Do you know what your ideal customer is using to browse your website? Let me know in the comments below.

Until next time, stay inspired.

Gisèle Grenier

Gisele Grenier sitting at her desk

I help female solopreneurs like you by teaching (in a non-geeky way) how to confidently build, grow, and market your website so you can showcase your products and services to the right people.

Transcript – Two Easy Ways to Test if your Website is Mobile Responsive and Why You Should Care.

Transcript without Timestamps

Hi, Gisèle Grenier here. In this video tutorial, we’re going to cover website, Lingo 101, and the term we’re going to be talking about is responsive.

When I first got into the website world, I didn’t have a clue what that was.

Basically it’s how a website reacts when it’s viewed on a desktop, tablet, mobile devices. It’s how your website adjusts itself.

So have you ever been to a website when you’re looking at it and you’re looking at it on a desktop, it looks one way? Then you go over onto your tablet and it looks one way or you go onto your phone and you flip your phone from portrait to horizontal and it looks completely different? That’s responsive.

And we’re going to cover off in this video how you can check to see if your website is responsive, how it work if you only have a laptop or a desktop and if you have a phone and we can actually show you what my phone display is to show you the differences. So let’s go down to the screen. And I’ve got a landing page that I created here and on a laptop, it looks great. It looks the same way on a desktop.

That’s not a problem. So if you don’t have a tablet or phone or the devices that you can check it, what you can do. I’m using Chrome.

I can use the Restore icon, which shrinks it down, and then you can resize it to different sizes, see how the website’s adjusting? This is called responsive. It’s responding to an action.

OK, so a tablet, if you figure like a tablet, could be, you know, depending on what tablet using it, but the size and then this is what the website could look like in a tablet. Now, there are so many devices, you’re unfortunately not going to be able to optimize your Web page for every single device on this planet. It’s just not possible. The other thing that’s being thrown into the mix now is to make sure that your website is not only responsive, but that it conforms to accessibility guidelines.

That’s a whole other monster we’re going to cover off in another lesson.

But for now, just use your browser and just resize it to see how things appear. So this big, these icons show up across. But if I make it a little bit smaller.

Now the icons are one above the other and where this image was on the left before, where’d she go?

Now it’s underneath, so this is responsive. I love how this looks and then we can make it even smaller, which is typically what a phone looks like. So this is one way to check to see if your website is responsive using just a laptop or a desktop. So I’m going to show you now.

Well, oops, I’ve got the same website now on my phone and we’re going to go on to the display and hopefully this works. Alrighty, so I’ve got my phone set up and you can see it on the screen. So as I start scrolling here, this is what the website looks like on my actual phone. And it looks fine. Very similar to what it looked like on the actual display. So we’ll keep scrolling. And then I go back to the top.

OK, so that’s the top. Now, if I turn it sideways, it should adjust.

Let me just get my face out of the way there. Here we go. So that’s what it looks like. And then we can. Oh, there’s a light. There we go. And I can just scroll. So that’s what it looks like when the phone is turned. So if at all possible, if you can test your website on an actual device, that’s where it really makes the biggest sense. But if you don’t, you can use your browser.

All right, let me turn it back this way. Here we go. All right, so that takes care of that.

So I loaded on the laptop a website that’s an example of a non-responsive page. So you could look here and this is what it looked like on a laptop.

OK, now we shrink it down. It’s not doing anything, it’s not adjusting itself, but the real test is the phone. So let me just bring up the phone.

And I’ve got it. Portrait and I can use my fingers to pinch, I can do this to pinch, to make it bigger or smaller, but this is a non-responsive website.

The person looking at the website is the one that has to manipulate the page in order to view it. This is bad. This is bad. If I turn it this way, so horizontal, then I can see a little bit more because the website is wider than it is taller.

All right. So that’s that. So let’s close this and let’s get back to here.

All right. So it’s really important that you test out your website while you’re doing the designing, whether it’s a single page, whether it’s a landing page, a thank you page, whatever it is that you’re creating, make sure you check it to make sure it is responsive. So you’re going to check to make sure that you can resize the browser window. So use Chrome, use Firefox, use Safari, whatever it is you’re using, manipulate the website, have your device this way, have your device this way, use your browser.

So again, Chrome, Firefox, Safari, try those things straight down the page, make them bigger, use a phone use. You know, if you have friends that have phones, have them check your website to see what it looks like on a phone.

I know it sounds like a lot of work, but can you imagine the person that’s about to buy your product or buy your service or pay for your course, gets to your website and they’re looking at the page and they can’t even find the button or your Opt-in or whatever, because your Opt-in is three pages long, because your website technologies are squishes everything down.

But does it resize everything to fit nicely on the screen? Technology has changed quite a bit. A lot of the website builders out there, they will allow you to create certain looks depending if you’re on a desktop, tablet or mobile devices being tablet or phone.

They give you different options to do all that stuff. Some work better, some don’t.

And the one thing that you just need to check is that never assume that only people on a laptop or a desktop are visiting your website. The common practices now you design from mobile first and desktop second, because most people are using these stupid little things to browse the Internet. Not me.

I use a computer, but that’s where it helps with, you know, knowing who your ideal customer is and a really good way to find out exactly who is going to your website. This is assuming you have a website is Google Analytics, which is free.

You put a little bit of code on your Web page and that will tell you after a while when it gathers statistics, it’ll tell you who is on your web not identifying the people, but, you know, people that are on your website, what devices are using, how long they’re on your Web page, the path that you’re taking, all that stuff. It’s kind of scary, you know, with Big Brother watching us.

But it gives a lot of good anonymous information about the devices that people are using. Now, if you don’t have a website yet, that’s perfect for planning because you now already know that when you start sketching out your website, you’re going to know that fine. You’ve got the layout.

But when you start building it and I’ve got the training and you can fine YouTube videos and all that stuff, depending on what you want to use for Builder, but build the website and then do the checking within the builder or within the program that using to build the website to make sure that it is responsive and that you can do actual checking and testing during the building process to make sure that it’s doing what it should be doing. So I hope this lesson was helpful to you and I would love to know in the comments below, let’s say in the last month, how many websites have you come across that are not responsive where you got to the website and it didn’t look the way it should.

Something just didn’t look right.

I’d love to know how many of those you came across. And if you have a website, have you done a test to see if it’s responsive portrait, landscape, different devices and all that stuff? And if you don’t have a website, what’s something that you might keep in mind now when designing your website to make sure that it is responsive? Do you know what your ideal customer is using to browse your website? So let me know in the comments below.

And if you have any questions, fire them off, you know, put them in the comments below or head to itsjustg.com, click the contact link. I answer every single email that I get. Alrighty, so hope this was helpful. And until I see you next time, stay inspired.

Transcript with Timestamps

[00:00:03.740]
Hi, Gisèle Grenier here. In this video tutorial, we’re going to cover website, Lingo 101, and the term we’re going to be talking about is responsive.

[00:00:12.500]
When I first got into the website world, I didn’t have a clue what that was.

[00:00:18.110]
Basically it’s how a website reacts when it’s viewed on a desktop, tablet, mobile devices. It’s how your website adjusts itself.

[00:00:28.730]
So have you ever been to a website when you’re looking at it and you’re looking at it on a desktop, it looks one way? Then you go over onto your tablet and it looks one way or you go onto your phone and you flip your phone from portrait to horizontal and it looks completely different? That’s responsive.

[00:00:47.150]
And we’re going to cover off in this video how you can check to see if your website is responsive, how it work if you only have a laptop or a desktop and if you have a phone and we can actually show you what my phone display is to show you the differences. So let’s go down to the screen. And I’ve got a landing page that I created here and on a laptop, it looks great. It looks the same way on a desktop.

[00:01:11.390]
That’s not a problem. So if you don’t have a tablet or phone or the devices that you can check it, what you can do. I’m using Chrome.

[00:01:20.030]
I can use the Restore icon, which shrinks it down, and then you can resize it to different sizes, see how the website’s adjusting? This is called responsive. It’s responding to an action.

[00:01:35.270]
OK, so a tablet, if you figure like a tablet, could be, you know, depending on what tablet using it, but the size and then this is what the website could look like in a tablet. Now, there are so many devices, you’re unfortunately not going to be able to optimize your Web page for every single device on this planet. It’s just not possible. The other thing that’s being thrown into the mix now is to make sure that your website is not only responsive, but that it conforms to accessibility guidelines.

[00:02:10.140]
That’s a whole other monster we’re going to cover off in another lesson.

[00:02:14.060]
But for now, just use your browser and just resize it to see how things appear. So this big, these icons show up across. But if I make it a little bit smaller.

[00:02:30.210]
Now the icons are one above the other and where this image was on the left before, where’d she go?

[00:02:42.500]
Now it’s underneath, so this is responsive. I love how this looks and then we can make it even smaller, which is typically what a phone looks like. So this is one way to check to see if your website is responsive using just a laptop or a desktop. So I’m going to show you now.

[00:03:06.700]
Well, oops, I’ve got the same website now on my phone and we’re going to go on to the display and hopefully this works. Alrighty, so I’ve got my phone set up and you can see it on the screen. So as I start scrolling here, this is what the website looks like on my actual phone. And it looks fine. Very similar to what it looked like on the actual display. So we’ll keep scrolling. And then I go back to the top.

[00:03:41.560]
OK, so that’s the top. Now, if I turn it sideways, it should adjust.

[00:03:45.310]
Let me just get my face out of the way there. Here we go. So that’s what it looks like. And then we can. Oh, there’s a light. There we go. And I can just scroll. So that’s what it looks like when the phone is turned. So if at all possible, if you can test your website on an actual device, that’s where it really makes the biggest sense. But if you don’t, you can use your browser.

[00:04:14.080]
All right, let me turn it back this way. Here we go. All right, so that takes care of that.

[00:04:21.910]
So I loaded on the laptop a website that’s an example of a non-responsive page. So you could look here and this is what it looked like on a laptop.

[00:04:32.980]
OK, now we shrink it down. It’s not doing anything, it’s not adjusting itself, but the real test is the phone. So let me just bring up the phone.

[00:04:48.780]
And I’ve got it. Portrait and I can use my fingers to pinch, I can do this to pinch, to make it bigger or smaller, but this is a non-responsive website.

[00:05:02.810]
The person looking at the website is the one that has to manipulate the page in order to view it. This is bad. This is bad. If I turn it this way, so horizontal, then I can see a little bit more because the website is wider than it is taller.

[00:05:23.690]
All right. So that’s that. So let’s close this and let’s get back to here.

[00:05:31.530]
All right. So it’s really important that you test out your website while you’re doing the designing, whether it’s a single page, whether it’s a landing page, a thank you page, whatever it is that you’re creating, make sure you check it to make sure it is responsive. So you’re going to check to make sure that you can resize the browser window. So use Chrome, use Firefox, use Safari, whatever it is you’re using, manipulate the website, have your device this way, have your device this way, use your browser.

[00:06:01.340]
So again, Chrome, Firefox, Safari, try those things straight down the page, make them bigger, use a phone use. You know, if you have friends that have phones, have them check your website to see what it looks like on a phone.

[00:06:13.130]
I know it sounds like a lot of work, but can you imagine the person that’s about to buy your product or buy your service or pay for your course, gets to your website and they’re looking at the page and they can’t even find the button or your Opt-in or whatever, because your Opt-in is three pages long, because your website technologies are squishes everything down.

[00:06:37.970]
But does it resize everything to fit nicely on the screen? Technology has changed quite a bit. A lot of the website builders out there, they will allow you to create certain looks depending if you’re on a desktop, tablet or mobile devices being tablet or phone.

[00:06:56.000]
They give you different options to do all that stuff. Some work better, some don’t.

[00:07:01.130]
And the one thing that you just need to check is that never assume that only people on a laptop or a desktop are visiting your website. The common practices now you design from mobile first and desktop second, because most people are using these stupid little things to browse the Internet. Not me.

[00:07:20.900]
I use a computer, but that’s where it helps with, you know, knowing who your ideal customer is and a really good way to find out exactly who is going to your website. This is assuming you have a website is Google Analytics, which is free.

[00:07:37.580]
You put a little bit of code on your Web page and that will tell you after a while when it gathers statistics, it’ll tell you who is on your web not identifying the people, but, you know, people that are on your website, what devices are using, how long they’re on your Web page, the path that you’re taking, all that stuff. It’s kind of scary, you know, with Big Brother watching us.

[00:07:57.410]
But it gives a lot of good anonymous information about the devices that people are using. Now, if you don’t have a website yet, that’s perfect for planning because you now already know that when you start sketching out your website, you’re going to know that fine. You’ve got the layout.

[00:08:15.800]
But when you start building it and I’ve got the training and you can fine YouTube videos and all that stuff, depending on what you want to use for Builder, but build the website and then do the checking within the builder or within the program that using to build the website to make sure that it is responsive and that you can do actual checking and testing during the building process to make sure that it’s doing what it should be doing. So I hope this lesson was helpful to you and I would love to know in the comments below, let’s say in the last month, how many websites have you come across that are not responsive where you got to the website and it didn’t look the way it should.

[00:08:52.560]
Something just didn’t look right.

[00:08:54.440]
I’d love to know how many of those you came across. And if you have a website, have you done a test to see if it’s a responsive portrait, landscape, different devices and all that stuff? And if you don’t have a website, what’s something that you might keep in mind now when designing your website to make sure that it is responsive? Do you know what your ideal customer is using to browse your website? So let me know in the comments below.

[00:09:21.140]
And if you have any questions, fire them off, you know, put them in the comments below or head to itsjustg.com, click the contact link. I answer every single email that I get. Alrighty, so hope this was helpful. And until I see you next time, stay inspired.

Similar Posts

Leave a Reply

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