Responsive website can be any site which has the ability to run properly on different devices adapting their screen resolutions particularly smart phones, tablets, desktops and laptops. A responsive website design is one of the big factors which could bring success to your blog by expanding your blog reach to mobile users.
If you don’t know if your website or blog is responsive or not then this article is for you.
You have an awesome website but if your website is not using a responsive design then it will render incorrectly on mobile devices.
You can see from the image above (just for demonstration), the website on the left side is not responsive. The user will have to pinch and zoom the text to read the full web page which is a bad user experience. However the website on the right side is fully responsive offering good user experience.
Responsive design can also help you bring lots of traffic from mobile devices and a good SEO practice.Woopoo's Tip
Use the following online and offline responsive website checking tools to test whether your website is responsive or not. Let’s start with the first one.
1. Google Mobile Friendly Test
Google Mobile-Friendly Test Tool is a part of Google Search Console. Using the tool, Google will initiate a responsive test on your website and let you know the answer after completing it and how your visitors will see your website on a mobile device. See our separate guide on how to use Google Search Console
- To check your responsive website with Google, visit the url above and simply type in your website or blog and press Run Test.
- Once your website responsive test will be completed by Google, it will show you the results either a success message or a list of problems it found related to mobile usability.
2. Using Quirktools Screenfly
Screenfly from Quiktools is another worth checking tool to test responsive website. Just feed in your website and press Go. This utility has a really simple interface, just a drop-down menu at the top to select and test your website on different devices with different resolutions.
Your website, if responsive, will adapt to those screen resolutions at run-time.
3. Am I Responsive
Although not a testing tool but can be used to quickly check responsiveness of your website. The tool shows you a combined preview of all the devices stacked together. You can even browse your website within the previews.
As they say, the tool is more suitable to create responsive website mockup screen.
4. Responsive website test in Chrome
To check responsive website in Chrome browser, Chrome Developer Tools is a fantastic resource. Moreover these tools come free with Chrome browser and very easy to use. Chrome DevTools also include Mobile Emulator Tool which can be used to test the website on different mobile devices. Let’s use it to test our website.
- Open your website in a new tab.
- Right click anywhere on your website and from the menu, click Inspect or press Ctrl+Shift+I on your keyboard.
- This opens the Chrome Developer Tools interface. You will see a lot of code but don’t worry we don’t have to do anything with it.
- On the menu at the top, click the second icon from the left, it says Toggle device toolbar when you hover your mouse on the icon or simply press Ctrl+Shift+M.
- Your browser turns into a mobile emulator running your website inside. If your website is responsive, it will re-arrange its elements according to the new resolution. You can change emulation device from the menu at the top. You can even rotate the device view by pressing the Rotate button from the top menu.
5. How to check responsive website in Firefox
Responsive Design Mode in Firefox lets you test your website responsiveness on a number of mobile devices. You can launch it from Tools > Web Developer > Responsive Design Mode or simply press Ctrl + Shift + M.
The firefox browser becomes a responsive test simulator and instantly switched to mobile view of your website. The contents of your web page will be adjusted according to the screen size for the device you have selected from the menu at the top.
6. How to check responsive website in Safari
To test your website mobile view in Safari browser, from the browser main menu click Develop > Enter Responsive Design Mode.
If you don’t see Develop option in the main menu, go to Safari Preferences > Advanced and enable checkbox Show Develop menu in menu bar.Woopoo's Caution
Safari Responsive design mode will let you do responsive design testing across all devices from Apple. From the top menu, click any of the device icons to mimic the website preview for that device resolution.
We have discussed six ways how to test responsive website. If your website is responsive then you are good to go and if your website design is not responsive then you should consider it.