How to test your website on mobile
Do you want to know how to test the mobile version of your site efficiently? And what are the best tools for mobile site testing? So, this article is for you.
Why should you take care of your mobile site optimization
At the end of 2016 there were more than 3.2 billion people had access to the Internet, and about 2 billion of them used mobile devices for it. According to the analytical forecasts, a number of people, who use only mobile devices for Internet activities, will annual increases of 25 percent in the next 5 years.
Therefore, it is vitally important to verify if your website is mobile-friendly.
Before starting the testing of the mobile version of your site, just try to answer some common questions:
- How fast does the site load?
- Is the content attractive?
- Does the site attract attention to the main points of your business?
- Does the site offer a good experience?
- Is the site easy and understandable to navigate?
- Does the landing page arouse interest to other pages of your site?
The main factors of mobile performance optimization
Even, if the answer is “Yes” for all of them, you should pay attention to the next factors of mobile performance optimization:
Download speed is always combined with network latency, memory, CPU, and cache size. All of them are much smaller in comparison to the desktop’s ones, so it takes more time to load.
Restrictive loading. You have to ensure the users do not download anything that will affect the speed of the site.
Responsive Framework helps to make faster prototyping of mobile functionalities and layouts.
Fast loading time gives you’re a serious competitive advantage. The following actions affect the loading time:
- Reduce dependencies
- Reduce Client Side Processing
- Reduce image dimension
- Reduce the content
- Avoid m-dot redirection
- Pick up the right hosting solution
- Limit the HTTP requests
- Enable compression
Let’s consider other steps you need to do to verify the normal functioning of your mobile site.
Testing the connection between desktop and mobile version of the site
- Mobile visitors should be redirected to the mobile version of the site
- Desktop visitors should be redirected to the desktop version of the site
- Redirects give visitors an access to the specific page they need, not the homepage
- Mobile visitors should have an easy to find an option to view the desktop version of the site too.
Vary-HTTP header checking. If your sites are dynamically served, you should set up a Vary-HTTP header to tell Google and browsers that you vary the HTML by the user agent.
rel=alternate/canonical tags checking. If your sites have separate URL, desktop pages should be set up with a rel="alternate" tag pointing to the mobile version of that page. Mobile pages should be set up with a rel="canonical" tag pointing to the desktop version of that page.
Technical issues testing
Mobile XML sitemap
- All mobile pages should be submitted to Google via an XML sitemap in Google Webmaster Tools
- Mobile pages should be separated from desktop pages
Site speed for mobile devices. Mobile users, in particular, are likely to have limited time to spend on your app so it needs to deliver quickly. Google page speed tool, WebPagetest are useful tools for measuring site speed.
Storage and data:
- Verify that program code is not easily accessible
- The user doesn’t clear the cache, so ensure that nothing will break down.
User Experience (UX) testing
Website view on:
Smartphones: iPhone (iOS), Samsung Galaxy (Android), Nexus (another Android), and Windows Phone (Windows).
Tablets: iPad (iOS), Samsung Galaxy Tab in multiple sizes (Android), Kindle Fire (Amazon), and Asus Transformer Book (Windows).
You should use tools like Google Analytics to identify devices, which are often used by your visitors.
Links size. The margin between links should be at least 28x28 pixels. So, all of them should be easy to click with the finger.
Flash. Most mobile browsers can’t render Flash content. Therefore, if you want your site to be mobile friendly, don’t use Flash.
Viewport lets mobile browsers to resize pages so they fit devices perfectly. That is why you need to set up it.
Pop-ups. There are two reasons not to use pop-ups in the mobile version of your site:
- Pop-ups slow down the loading time of the page
- Pop-ups are too easy to accidentally click. So, they take the visitors away from the page they want to be on.
Elements end up. The most important elements must be at the top. The other elements placement should have a sense.
Navigation. Ensure all pages of the mobile site can be reached by visitors.
- There should be an equivalent mobile page for every desktop page
- The number of mobile pages could be more than desktop pages because it's often easier to navigate mobile sites.
- Verify there are no lexical, neither grammar mistakes in your site content.
- If your website is not only for local visitors, you should provide localization testing, in other words, to check appropriate linguistic and cultural aspects for a particular locale.
- Unnecessary images should be removed.
- Verify the videos are loaded and run properly
- Use an HTML5 video player, because it is easy for phones to render and lightweight.
- Make your videos responsive
Search engine results page, SERP:
Verify your mobile URL is user-friendly and keyword rich
Google cuts off mobile meta descriptions at approximately 120 characters, so yours should not exceed this limit.
Though Google gives you approximately 70 characters (512 pixels) in your page title, the width of the screen forces the page title into two lines. That is why you should verify that each page title looks good on two lines.
Too many plug-ins spoilt the whole experience of your mobile site. So, you should review the plug-ins you’re using, and delete the ones you really don’t need.
10 tips to optimize the mobile version of you site
Summarize, here are 10 bits of advice to help you verify the mobile version of your site is accessible for the visitors:
- Ensure the compatibility with feature smartphones and tablets
- Verify the normal loading time
- Make the site navigation as simple as possible
- Make sure buttons are large enough for people with big finger
- No large blocks of text. Use bullet points and short sentences.
- Don’t use Flash.
- Don’t use pop-ups.
- Ensure the images have the optimal size.
- Verify your phone number is one click away from being dialed
- Ensure website can access your location through GPS
So, now, when we know what exactly should be tested, let’s consider some tools and ways how to test it.
Testing on the real devices
In a perfect world, every website should be tested on every popular mobile device that it might be viewed on. Of course, testing on the real devices has lots of advantages:
- Testing is provided in a real environment with very real conditions
- Testing is provided on the real OS, with the manufacturer’s tweaks
- Real device performance of a is easier compared to other virtual options
- Testing interoperability is easier
- Easy bugs replication
- Screen resolution and brightness can be easily tested in a series of different scenarios
- Functions like push notification, geolocation, and orientation, Wi-Fi connectivity are allowed to be tested
- Functioning in conditions of incoming interrupts, like SMS and calls could be tested
- Functioning in conditions of battery drainage could be tested
Unfortunately, the world, we live in, is not perfect. Here are some demerits of the testing on the real devices:
- There is a plenty of mobile devices
- Testing on the real devices is an expensive and time-consuming
- Even if you have a wide range of mobile devices in your company, employees, located in other offices or working remotely, will not have access to all devices
- The maintenance of the device is also cost consuming
Online Mobile Testing on the real devices
So, we need to find out any other way to test mobile site. There are special tools, which actually make use of the remote connection to real devices. Some of such tools are introduced below.
Keynote Mobile Testing cloud-based solution, that has the comprehensive library of real mobile devices.
Of course, it is much more than just a mobile page testing tool. But if we consider Keynote Mobile Testing as such kind tool, the next merits should be mentioned:
- Real mobile carrier networks and Wi-Fi
- Day one support for new devices as they are released
- It generates a list of devices automatically based on coverage criteria: memory, CPU, manufacturers, OS version, carrier, etc.
- Detailed database of features by device and operating system
- Easy-to-use Wizard to help you quickly determine which devices to prioritize for development and testing
Some demerits of Keynote Mobile Testing:
- Keynote Mobile Testing does not examine device vitals
- There is no device reservation support
BrowserStack is a cross-browser testing tool, that gives you access to the huge variety real mobile devices.
Here are some features of the BrowserStack:
- Vast iOS and Android spectrum: iOS versions right from iOS 3 to iOS 10, Android - from Donut (1.6) to Nougat (7.1)
- Rapid checks with Screenshots
- Web analytics for your website
- Debug your mobile websites easily with Chrome developer tools on iOS and Android.
- Access to the additional devices by geographical parameters
- Natural gestures and interactions
- Security testing option
Some weak points of the BrowserStack:
- Server performance seems to degrade over time when many users are testing
- BrowserStack tends to be rather expensive and the free option is very limited.
- A way to simulate 2-finger pinch in and out on phones and tablets
Perfecto Mobile Continuous Quality Lab is another cloud-based platform, which has not only mobile page testing option. In the context of testing mobile version of your site, the following advantages should be determined:
- Real-time testing on more than 500 different devices
- Not only Android and iOS but also WinPhone, Symbian and Blackberry platforms are available for testing
- Device sharing
- Simultaneous automation testing on several devices
- Screenshot support
Some of Perfecto Mobile Continuous Quality drawbacks are:
- Indistinct (often unreadable) image
- Long response time
- The free trial version using is limited to 60 minutes.
Testing with mobile emulators
Another possible way to solve the problem of real devices lack is to use special tools, which emulates or simulates its functionality.
Using this kind of tools gives you an ability to pinpoint problems and issues with the website and allows you to take corrective measures to make the website visually appealing and functional on mobile devices.
People often confuse the “emulator” and “simulator”. Although both of them sound almost the same, still there is a difference between them.
An emulator works as a replacement for the original device. It can run the same software and applications of the original device without modifying them and it can’t even point out the difference in the duplicate system.
On the other hand, a simulator can set up the similar environment as the original device’s OS but doesn’t endeavor to replicate its hardware.
So, the emulators are preferable for mobile site testing, while simulators are better for mobile apps testing.
Let’s consider some often used emulators
MobileMoxie Emulator is an integral part of MobileMoxie Marketing Toolset, that helps you to deliver great mobile experiences to your customers. It is easy to use. Just enter you website URL in the appropriate field.
Windows Phone Emulator is the special mobile environment where you can test, view, and debug Windows Phone apps and use the browser to check websites.
Some merits of Windows Phone Emulator:
- Full-blown SDK with device emulator
- Multiple screen resolutions
- Screenshot tool
- Accelerometer simulation
Limitations of Windows Phone Emulator:
- It works on only Windows.
- The brightness level of the emulator is always “High”
- Camera and video are used with limitations
Android Studio emulator enables you to create a virtual mobile device for running Android applications and test mobile websites. The emulator is located inside the Android SDK package.
Android Studio emulator advantages:
- It works on Windows, Mac OS X, Linux
- Android Studio emulator can transfer information faster than using a connected hardware device
- Unified environment where all Android devices can be used
Some drawbacks of the Android Studio emulator:
- If you just need the browser to test mobile websites, you should download lots of unnecessary stuff
- Some technical limitations: 8 GB RAM is recommended; 4 GB of available disk space is recommended.
Opera Mobile Emulator is a live demo of Opera’s mobile phone browser that functions as it would when installing on a handset. Some extra debugging tools are also available, such as keyboard shortcuts, the profile selector, and various command-line flags.
The main merits of the Opera Mobile Emulator:
- It is simple to install and easy to use. You don’t need to install any complex SDKs or something like that.
- There are three input modes available: touch, keypad, and tablet.
- It comes pre-configured with a series of phone and tablet device profiles
- All modes can be activated and controlled by links and controls
- Remote debugging with real devices
Some weak points of the Opera Mobile Emulator:
- You can verify how pages look only in Opera mobile browser.
- Less of the media support
Mobile-friendly and validation tools
It is well known, that Google indexes mobile-friendly and non-mobile friendly websites. That is why you should use special tools to verify if your website meets the generally accepted criteria.
As a rule, all of these tools are easy to use. All you should do just enter your page URL to the appropriate form.
Google's Mobile-Friendly Test
Google's Mobile-Friendly Test is the tool that shows you if Google considers your page mobile friendly or not. If your website passes the test, you will see a green message that says “Awesome! This page is mobile-friendly”. If it does not pass, the message will be red and say “Not mobile-friendly”.
In this case, the page will be pushed down in the mobile search results in favor of similar pages from other sites that are mobile friendly.
The mobiReady allows evaluating mobile-readiness of your website using industry best practices and standards. The free report provides both a score (from 1 to 5) and in-depth analysis of pages to determine how well your site performs on a mobile device.
The main merits of mobiReady are:
- Detailed error reports
- Site wide testing
- A visualization tool to see how your site looks on a cell phone screen
- W3C mobileOK tests
- It advises improving mobile-readiness of your website
W3C mobileOK checker is a free service by W3C ( the worldwide consortium for web standards) that helps to check the level of mobile-friendliness of Web documents, and in particular, assert whether a Web document is “mobile OK.”
The tests are defined in the mobileOK Basic Tests 1.0 specification. Only if web age passes all the tests, it will get “mobileOK “ status.
The other options, which could be validated:
Varvy is a collection of free tools to test SEO, speed, and mobile functionality of a website.
Varvy’s main features:
- Google guidelines accordance test
- Page speed optimization
- A wide range of tips and guidelines for optimizing web page performance
Test Website Speed Tools
As it was mentioned above, download and operational speed of your website have a direct impact on the number of its visitors.
There are both simple and advanced tools to test page speed, search engine optimization, and mobile browser performance. You should measure not only your website speed but also your competitor’s. Follow actionable recommendations to improve your results.
Here are some tools, which can help you to do it.
Google’s Page Speed Online is a comprehensive tool, which not only enables you to check the performance but also gives you a lot of information. Along with that, it also comes packed with a report regarding the best practices you can possible use for mobile devices, in order to optimize their performance.
Pingdom lets you identify what’s fast, slow, too big, and the best practices you’re not following. All tests are done with real web browsers, so results match the end-user experience. Tests are saved so you can track your performance over time.
GTmetrix allows you to provide testing from multiple regions and analyze your performance on mobile. Get your site’s load speed along with actionable recommendations to deal with your bottlenecks.
Load Impact enables to run large-scale load tests with up to 1.2 million concurrent users. It generates load from up to 10 different locations simultaneously, and even add more locations upon request. Load Impact simulates traffic exactly how it would happen in real life.
Dotcom-Monitor’s speed test enables a user to select which browser they’d like to test from — Chrome, Firefox, Internet Explorer, and mobile browsers, including iPhone, iPad, and more. You have an ability to test your website from 20 locations worldwide. Once a test is complete, users can drill down into performance reports and a waterfall chart analysis.
Hope, the information, and tools mentioned in this article will be really useful for increasing the mobile readiness of your site. We would like to know about your experience of its practical usage. Maybe you can recommend some other tools. Let us know in the comments.