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

Redirects testing:

  • 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 toolWebPagetest 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.

Content

  • 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.

Video

  • 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:

  1. Ensure the compatibility with feature smartphones and tablets
  2. Verify the normal loading time
  3. Make the site navigation as simple as possible
  4. Make sure buttons are large enough for people with big finger
  5. No large blocks of text. Use bullet points and short sentences.
  6. Don’t use Flash.
  7. Don’t use pop-ups.
  8. Ensure the images have the optimal size.
  9. Verify your phone number is one click away from being dialed
  10. 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 (former Keynote DeviceAnywhere)

keynote logo

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

browser stack logo

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

Perfecto logo

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

mobile moxie logo

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.

mobile moxie

Windows Phone Emulator

windows phone logo

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

android studio logo

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 

opera logo

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 developers logo

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.

mobiReady

mobiReady logo

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 service

w3c logo

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

varvy logo

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

google page speeed test logo

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

pingdom logo

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

GTmetrix logo

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

load impact logo

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

dotcom-monitor logo

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.