The best way to test your website and its responsiveness to screen size on different devices is to use the actual devices. This allows you to not only test the actual sized screen, but how the internet browser itself that comes installed on the device, displays the page. This is important as not all internet browsers render the page in the same way. The major browsers like Apple’s Safari, Microsoft Edge, Google Chrome, and Mozilla’s Firefox are all coded differently which can result in pages looking slightly different. This can also happen between the different versions of the same browser.
Unfortunately having a room full of different devices for testing is not feasible for most people.
So, is there a way to simulate how a website looks on different sized screens? Yes, there is!
Free Responsive Website Checkers
If you do a search online, you will find a list of free responsive website testing websites and extensions for your browsers. While some of these work okay, most seem to have issues (like missing graphics, lots of ads, rendering problems, etc.) and a lot of them only support older devices. You can add new devices, but then you need to know the information about the device, like the screen size and user agent it uses.
These free tools also only simulate screen sizes. They do not show if there are rendering differences between browsers.
Out of all the ones we tested (and we looked at a lot) the best one we found is called Responsive Web Design Checker.
Paid Responsive Website Checkers
There are also online paid testing services like BrowserStack and LambdaTest which can test thousands of different combinations of real browsers and devices, and then display the results in your browser as screenshots. This is ideal for large digital agencies who need to run many different tests a day for their current and on-going projects but makes little sense for others to signup for and pay a subscription fee (which start at around $30 USD a month).
Your Internet Browser on a Desktop
Besides testing on your own desktop, laptop, tablet, and mobile phone, you can use the built in developer tools found in all modern computer internet browsers for Windows and macOS like Firefox, Chrome, and Microsoft Edge.
The developer mode found in these browsers are quite complex and scare most people away. Don’t worry, once you know what to do, it is easy to test your website and its responsiveness to screen size.
Since Google Chrome is the most popular browser, we will use it to show how this all works. The other browsers work in a similar way, and we will include notes on them as well if needed.
How to Simulate Different Devices on Google Chrome
To simulate mobile devices on Chrome you need to enable Device Mode. To do this, open your browser and navigate to the website and page you want to test. Once it is loaded you then need to launch the browser developer tools by pressing the F12 key on the keyboard. This will then open a panel in your browser (it will either be positioned horizontal or vertical). At the top of the panel will be a toolbar with options across it. By default, it opens with the Elements (or Inspector in Firefox) tab which shows the actual source of the webpage.
To enable device mode, you then need to find the double screen icon and click on it. In Chrome and Edge, you will find this on the left hand side of the toolbar, and in Firefox on the right side. The image below has all the icons and buttons highlighted in red that we will be using.
From here it will switch the screen size within the browser to the default device mode. To change devices, all you need to do is click on the device dropdown list in the top tool bar of the window with the website in it. The list of devices includes all common phones and tablets.
Clicking on the 3-dot icon found on the same toolbar will bring up a menu which allows you to add even more devices to your list including those for common TV and laptop screen sizes. Within the toolbar you can also zoom the screen in or out if you wish (as it may be larger than your current screen) and change the screen size to any pixel resolution (on Chrome you need to select “Responsive” in the device list first to do this).
If needed, you can also make the developer panel larger or smaller by dragging the edge with your mouse cursor. If you wish you can even change the orientation of the panel from vertical to horizontal. To close the developer panel, you just tap the F12 key.
What Devices Should You Check?
Most mobile devices accessing your website are less than 5 years old. So ideally you want to check Android and iPhone devices that are only a few years old along with a tablet like the iPad.
When you do change the device mode, it is recommend that you then reload the webpage (as you normally would by hitting the swirl icon by the back button) as this will ensure the website detects what type of device is being simulated. This is because in some cases websites, when sending a webpage to a browser, will only send certain information depending on the type of device it detects. So, if you had the page loaded on your laptop normally and then enable device mode, the current webpage being displayed was meant for the laptop and the website may have loaded something different if it had detected a phone.
Once you have the device mode you want, you then can use the website as you normally would. You can scroll up and down the page, switch the device from portrait to landscape mode, and click on the links and buttons with your mouse.
Things to Consider – Page Caching
One other thing we need to consider when testing websites on any browser is caching of the page and assets like images and other files used by the page. If someone has made a change on the website and you cannot see it when you visit the page (even after refreshing it), this most likely means you are seeing a cached version of the page.
This cached page can happen at several different levels, including by the server, by the website software itself, by some sort of proxy, and by your own browser.
Caching is a good thing as it speeds up the website, but it can create some difficulties if caches have not been cleared at all levels and you want to see most recent versions of the page. This is a separate topic that we plan to write about in the future, but we did want to make you aware of it here in case you run into the problem (which some may since you may be testing a website that is currently being developed).
Clearing the Browser Cache
From a use’rs point of view if you want to make sure you are viewing the most recent page available on the internet you will want to clear the cached browser data (and at least the cached images and files). This can be usually found under the settings of your browser (the location of the setting depends on the browser you are using).
Using Incognito/Private mode instead of Clearing the Browser Cache
An easier way to view the most recent page served in the browser is to open the browser in Incognito mode (on Chrome), Private Mode (on Firefox), or InPrivate (on Edge). This can be done by right clicking on the browser shortcut icon and selecting the appropriate menu item.
When loading in this mode no previously available cached files will be used on your computer. If you are still not seeing the changes on the website you should, you then need to contact your website developer to get them to clear any other levels of caching that may be in use on the server, web software, or proxy.
In Conclusion
For most websites designed for small businesses and organizations testing on a few real devices and then using device mode in the browsers is more than enough to determine how your website behaves when the screen is resized. Sure, simulating a device is not as good as the real thing as their can be very slight differences, but in most cases no one would notice.
