Have you ever wondered what your website looks like on the various devices and browsers? There are many online services out there that offer you the ability to see how your web page will look on the different browsers and devices.
It’s important that your website displays correctly on the various devices and browsers. Why? Because you will get dinged by Google if things don’t appear or work correctly. For instance if your site doesn’t appear correctly for the iPhone 7 Google may not list your site in the search results for iPhone 7 users, even your site has the information for which that user is searching. Your goal is to have your website mobile friendly and compatible with with all browser types and devices.
So this is why we need tools to help us identify responsive issues. It’s true, some of these online tools hassle you for money and make you wait a certain amount of time if you haven’t “Signed up.” Well, there’s a free tool that Google has that allows you to easily see how your website will appear on the different devices.
This tool is Google Chrome developer tools. If you use the Chrome browser you probably have it available to you and didn’t know about it. Or you may have see it listed in a menu option but figured that you weren’t a developer so why would you need it? Well, if you are running a website you are a web developer and you can use this tool. We’ll give a short Google developer tools tutorial, focusing on verifying the responsiveness of your website on various devices.
Suppose you want to see how your website appears on an iPhone 8 Plus. Looking at your Chrome browser in the upper right corner click on the three vertical dots. You’ll see a menu pop out. Scroll down and mouse over “More tools.” Another, smaller menu will become visible. Click on “developer tools.”
The developer panel with lots of other options will appear after a few seconds. You look for the link “responsive.” Mouse over that and a list of different devices will be displayed. I can click on “iPhone 8 Plus” to see how my website appears on that device. I also can rotate the device to see how it appears horizontally or vertically.
Not only can you just see the device. You can click on your site’s links that appear on that device and test to see if they operate correctly.
Don’t see the device you are looking for? Mouse back over that “responsive” drop down. At the bottom of that list you can click on “edit” and add other devices like laptops Blackberries and more.
Unfortunately, Google isn’t providing us previews of how our sites will appear on the different browsers. You’ll still have to find online tools to accomplish that task. If anyone has a suggestion for an free online tool to see how websites appear on other browsers, leave a note below.
In closing, here is a video (below the two screenshot images) that explains a lot of information regarding Google Chrome developer tools and how to find and use them. The host shows the procedures I just described at about the 3 minute mark in the video.
The image above shows the responsive menu in the Google Chrome Developer tools panel.
The image above displays Google Chrome Developer tools ability to test links and menus for different devices.
Be the first to comment