Self-testing a website for mobile compatibility can be both simple and challenging.
Let’s dive into how you can efficiently test your website on your own. Firstly, note that to ensure a website is correctly optimized for mobile devices, a decision must be made whether the site will be adaptive or if it will require a separate mobile version. The methods listed below work well for adaptive websites; however, if your website has a distinct mobile version, you must test that version specifically. Separate requirements apply to ensure the website is functioning well on mobile devices, including formatting and loading speed.
Website testing on mobile
Take your own phone, open the browser, and go to your website. Check:
- Is it convenient to find the main contact information?
- Is it clear what your company does?
- Can you easily access the services pages?
- Is it easy to read?
- Can you view images properly?
- What happens when you click on buttons or contextual links?
Click on all the buttons you see, read the pages, open the photos, watch the videos, share the pages on social media – your task is to test your website as much as possible. If you find something you don’t like or find inconvenient, take a screenshot, add a link to the page, describe the problem, and send it to your website developer.
I won’t hide it – sometimes your view of the problem won’t be correct because the main visitors to your website may see it differently.
Testing a responsive website on a computer
Open the site in the browser and call the developer console.
Chrome browser
- To view the code, use the right mouse button to open the menu and select “View Code”.
- Alternatively, use the keyboard shortcut Ctrl+Shift+I to open the developer console.
- If you are using MacOS, use the keyboard shortcut F12 or Cmd+Opt+J.
FireFox, Edge and other browsers
- To open the code of a webpage, there are different ways depending on the device. For those using a mouse, right-click and select “View code”.
- For those using a keyboard, press Ctrl+Shift+K to open the developer console.
- For MacOS users, press either F12 or Cmd+Opt+K.
Safari
To begin, you need to enable the developer console:
- Go to Preferences and select the “Advanced” panel. At the bottom, you will find the checkbox “Show Develop menu in menu bar” – check it. To open the console, use Cmd+Opt+C.
- Click on the mobile phone icon and you will see how the website is displayed on phones. In the console, you can select popular phone/tablet brands and test the website on them.
Commentary on test results
“The console imitates the operation of a mobile phone website, so actual errors are still best viewed on a live phone. By using this method, you will get a general idea of the website’s functionality, but you will not be able to identify errors in its operation.”
Google Mobile Testing
To get an idea of whether search engines see your mobile version of the site correctly, use test services:
- from Google – https://search.google.com/test/mobile-friendly
- from Bing – https://www.bing.com/webmaster/tools/mobile-friendliness
Other ways to test
There are other ways to test on emulators, various website analyzers, both paid and free. However, these services are mostly designed for professionals and comprehension of the testing results can be difficult. For your own website testing, the methods listed above should be more than enough, and you can leave the rest to your website developer.