- Hey guys, Sam here from keycommerce.com.
And today I'm going to show you a really cool trick
you can use with Google Chrome developer tools,
to see what your website looks like on different devices.
For example, mobile phones.
Okay, so I've just got a website here.
I've got it opened up in Google Chrome.
So make sure you have Google Chrome installed.
It does work on Firefox, but it's not as good in my opinion.
And this allows us to really look at the code of the site
as well as see what it looks like on different devices.
Super easy, I'll walk you through it, right now.
So I'm on this website, just right-click, go inspect.
That's all we're gonna do.
There is a shortcut that I like to use on my Mac
which is your shift command C,
and that pulls it up,
but that's really good
if you're doing web development stuff
'cause you can pull it up really quickly.
Or you gonna do, right-click inspect.
It's then going to open up this window here
that shows you, let me get my big fat head outta the way.
So it shows you all the HTML code here,
as well as the actual classes.
Don't worry about that too much right now, okay.
That would, we'll come to that later.
All you need to worry about just right now
on your own E-commerce store is doing this thing,
right-click, inspect,
and then going here to toggle as toolbar.
What this does, it pulls up this view here, this toolbar,
where you can then select here
and see what your website looks like on different devices.
Really, really cool.
See how it changes like that.
It's because we've designed it in a certain way,
so it looks different on different devices
'cause we wanna make sure, it looks good
when you're on your mobile phone.
Okay, and so this is really important to do on your website,
go through your pages,
your product page, your homepage, even the contact page.
Make sure that you can actually see everything
and it looks good.
It's usable on mobile devices, okay?
Because even if someone can't click a button
that's gonna be really, really bad, okay guys?
So that's what you do.
And you can see, even if you're on a laptop right now
and you wanna see what it looks like on a really big screen,
you can adjust this to 3000,
it's probably gonna look,
now, it doesn't look too bad actually online.
Yeah, it's good 'cause it's boxed on the,
in the middle like that, but yeah.
So that's what I can do to check how does it look
'cause maybe someone's on a huge monitor or a projector,
rare case, but who knows? Depends on your niche.
Okay guys, so that's what you can do to check how it looks
on different devices.
The next thing like Google Chrome developer tools
has so many awesome little things here.
Like I can see all the HTML here
and I use this for many different things.
But say, if you wanna test out say, how a button looks.
Say if I wanna try out how this button looks,
I can select it over here.
I've gotta find it in the code
and then I'll be able to see all the code here.
If you don't know CSS or how to code, don't worry about it
but you can just see, okay, that's a color, that's red.
So let me just change that to say black.
Yeah, look, I just changed it on the sides to black.
And so I can say,
"Hmm, yeah, I think that does look good on my website,"
before actually talking to a developer
or a designer to get it changed.
So it's something that I'll do sometimes to see,
"Okay, does this heading fit?
"Does this actually, can I change this on my website?"
You can, even if you're pretty handy
you could swap out the image.
So here it's actually has the image here.
You can swap out that URL with an image somewhere
hosted somewhere else, like on your actual website.
I pretty sure you can do it for a locally hosted one too.
This is getting more into the technical side of things
but you can even do stuff like that.
Like it won't show up on the actual live site of course
because you're just editing
what it looks like on your browser.
So it's not like you're hacking the site,
some people say that it's pretty funny.
No, that's not what happens.
You're just editing how it looks for yourself.
There's a bunch of other stuff that you can do.
Like there's a console
where you can test out different commands and stuff.
You can see all the different files on the site.
See how the, like all the files are there as well.
You can see how it performs when you load it
and see what files load anyway, yeah.
There's lots of stuff to get into there for the moment.
Use it to see how your website looks on different devices.
Really important because you'll find
that a lot of people will go to your website on mobile,
and you're, you may never have even thought
about how your website looks on mobile
'cause you've built it for desktop.
And then maybe your theme just arranges it for mobile.
Or some of the stores I've worked with,
they've actually been very intentional
with their mobile design will then see,
"Wow! Our mobile visitors actually convert better
and at a higher volume," because they're in a certain niche
or because they just started doing some good stuff
for their website, and they would then go
and get their designer or themselves,
to build out a custom layout just for mobile.
So it means if someone comes in the browser detects
or the website detects, "Hey, they're coming from mobile,"
let's show them a different design,
that's much more easier to use.
Maybe the frequently asked questions just is much easy
to click and open up.
Maybe it's easy to scroll through the photos of the product.
You know, you're gonna have to think about this
for your own product, your own website,
but trust me, like this is a way that you could really tweak
and it gets a massive gains on your website
and on your store just by using mobile device,
device adjustments to your site,
depending on what you wanna show for those different people.
Anyway guys, that's it for this little quick video
I want to show you guys.
If it was helpful, hit the like button.
Let me know if you have any questions below
and please subscribe if you wanna learn more.
Anyway guys, thanks for watching,
and I'll see you, in the next video.
Bye for now.
(upbeat music)