If you depend on your website for your business in any capacity, it's important to be sure that it loads correctly on all devices and in browsers used on those devices. It's also essential to make sure all the features work as well, like buttons, links, video, and any other interactive interfaces.
These days more than 60% of the traffic coming to any website is from a smartphone or tablet, mostly smartphones. Then after that, it's laptops with an average screen size ranging from 13 to 18 inches. The rest, a shrinking amount year by year will have a large monitor connected to a PC, and quite often a laptop.
This means your website has to be responsive and display correctly on any size screen, in addition to all clickable & tappable interface objects working so users can interact with your website with ease.
Sometimes when a site loads on a smartphone, invisible elements can cover a button or link that you don't see. This will cause the button or link not to work. There can be other issues as well making it hard to use your website on a smartphone. Excessive popups and alerts (or interstitials as Google likes to refer to them) can sometimes make a mobile site practically unusable.
Fortunately, this is relatively easy to check. You can do it yourself, even if you're not a web developer and don't know a lot about this kind of stuff.
What you're going to need is an emulator tool to test with. Emulators aren't perfect, but they cover a whole lot of ground and will show you most problems that most users will encounter from your website. Several browsers have emulators in them, or in the case of Safari, the ability to connect a mobile device for testing.
- Google Chrome: You can use the "Device Mode" feature in Google Chrome's Developer Tools to emulate different devices and screen sizes. To access this feature, open Developer Tools (by pressing F12 or right-clicking and selecting "Inspect"), then click on the "Toggle device toolbar" button (it looks like a phone and tablet) at the top of the Developer Tools window.
- Mozilla Firefox: Firefox has a built-in responsive design mode that can be used to emulate different devices and screen sizes. To access this feature, open the Developer Tools (by pressing F12), then click on the "Responsive Design Mode" button (it looks like a phone and tablet) at the top of the Developer Tools window.
- Safari: Safari does not have a built-in emulator, but you can use the Remote Debugging feature in the Safari Develop menu to debug a website on a real iOS device connected to your computer via USB. To access this feature, enable the "Develop" menu in Safari's preferences, then connect your iOS device to your computer and select it from the "Develop" menu.
- Microsoft Edge: Microsoft Edge has a built-in emulator that you can use to test your website on different devices and screen sizes. To access this feature, open the Developer Tools (by pressing F12 or right-clicking and selecting "Inspect Element"), then click on the "Emulation" tab and select a device from the "Device" drop-down menu.
Once you get the developer tools open in your browser and into responsive mode, it should look something like this...
If you're using a Mac, to access developer tooks you need to press Option + Command + I. If you have a magic keyboard, you can type fn + F12.
The emulators will let you select a responsive mode or even a specific device to test with. I suggest you inspect your website with this tool using all the devices that your users access your website with.
At this point you might be thinking: That's a lot of testing, how do I know which devices users are accessing my site with so I can just test for those right now?
While it's a good idea to test for every device in every browser, that's a lot of work and may not be practical for you. The best thing to do is use Google Analytics to determine what devices and browsers visitors are using to access your site. Then simply test with those devices and browsers. Be sure to keep track of which ones you've tested for so if any new ones come up you will know to then test for those as well. This will save you the effort of not having to test with devices or browsers that maybe your audience just doesn't use.
Once you load the emulator, what you do is simply grab right hand side handle, and very slowly start dragging it towards the center of the page. If your website is responsive, as you do this you will observe the page changing to accommodate the smaller size as the width gets smaller so the site still works correctly.
The handle can be seen below:
If nothing changes as you drag the handles, your site is not responsive and will not work on mobile devices. At this point you should invest in a redesign to keep your site modern and relevant.
If your site is responsive (it really should be), you will observe it reacting to the shrinking screen width. The elements should move around and the images should adjust to continually fit within the screen view. What you're looking for at this point are potential breakpoint failures. A breakpoint failure is when you hit a certain size, and something goes wrong with the layout causing the page to not display correctly. The page will “break” and will not look right.
If you see a breakpoint failure, drag the handle back and forth slowly to recreate it a few times. While doing this, note the dimensions in the width and height boxes as you do this. Try to get to the exact point where the page breaks and make a note of the width and height. This is your bad breakpoint.
The webpage viewport dimensions can bee seen below:
If this happens, once you make the note, keep on testing! If you have a bad breakpoint, you could have more than one. Often as you keep testing, you will hit a new breakpoint and the site will display correctly again. Just make sure you note every time something goes wrong so you can have it fixed. A solid web developer can edit your style sheet with the broken elements and fix it for you.
As you keep moving the handles, you will at some point hit the smallest size you can go. At this size, you can't test any further. However, some of the emulated devices can go smaller than the responsive emulation. Usually older phones or newer ones that are smaller than most. A good example of a small newer phone is the Galaxy Fold. Testing with that device in the emulator will usually flush out most small screen problems for you.
When you test a website, you should test all the pages as well. Don't forget to scroll down below the fold and view the entire page so you can see if any part breaks at all.
It's also really good to test on any mobile device you have access to. Since it's likely you only have one phone you can only test on, you will be limited obviously. However, it's better to test live on any device you have available than none at all.
Even if your website is responsive and displays correctly in every test you run, there still could be problems you need to fix. There are some paid services out there that can scan your website and give you a lot of details, but I would only recommend that for websites that have huge amounts of traffic for businesses with massive budgets. If this is you, then you might benefit from services like BrowserStack or CrossBrowserTesting.
If you don't have the budget for that, then you will want to make sure you have all modern browsers installed on your devices your testing from and test in each browser on each device. This will make sure your site isn't just responsive, but actually works in all browsers as well. Most browsers also now have the capability to emulate other browsers similar to the device emulation. It would be a good idea to take advantage of that as well.
One more thing you can do to ensure your website will work correctly on smart phones and other devices is to use the Google Mobile Friendly Test tool. Here's the URL to that:
https://search.google.com/test/mobile-friendly
Just go to this page, and enter your website url to get the free report. If you see any issues, make sure to get those fixed so your site works great for all users. Some of the issues might be complex, and a good web developer can get those fixed for you. If you run a Wordpress website, often you can get plugins to do that for you. Usually just installing a good caching plugin will eliminate most of the problems you would see.
SUMMARY
It's really important to check up on your website periodically because browsers release updates all the time. Same for iOS and Android operating systems. This can effect how your website loads in any given device & browser stack.
Testing your device on all your browsers on all your devices once in a while will help you flush out any issues so you can keep your site consistent for all your visitors.
Make sure you use device and browser emulators for any version or device you might not have to make sure it works on all of them. Also, don't be afraid to check your Google analytics first to see the actual devices and browsers that are used to visit your website so you don't have to waste your time doing too much work. Of course, if you take this method you will want to keep track of any new devices or browsers that access your site so you can add those to your testing list.
As long as you check periodically and fix any issues that come up quickly, your website should continue to perform as expected for all your users and be the valuable asset you come to expect it to be.