How to test mobile websites on your desktop with different mobile devices is a question we get quite frequently. There are a lot of devices out there and you should make sure that the sites work well for most of them.
Because Google is placing a great deal of focus on the mobile user experience – its latest algorithm update making it leave almost 50% of the non-mobile friendly URLs lower in the ranking, so it’s are larger than the Update “Panda” – be rest assured that if the mobile site visitors do not load the speed and what they see, they will come out, and that will influence the position of your website.
We have gathered in this post some of the best free or paid tools that you can use to test your mobile site on the desktop on multiple devices without actually going and borrowing or buying the devices.
Keep in mind that whenever possible, it is always best to check validity on the actual devices as well, if you somehow have access to them.
Important note about latency
The size of the screen is not everything that is mobile. Remember to play with the speed of the connection, which can change many of the tools. It makes a big difference in the web page load time; the mobile visitor is using a 3G or 4G network.
The total ‘network overhead’ of 3G mobile pages load is more than 50%! That is spent regardless of your web server or client device performance, but due to the latency of the cellular network.
The total number of round trips required (HTTP reference number) to reach a faster page load. You will not even notice if you just test your DSL speed.
Background preparations – Explaining mobile visitors
There are a lot of devices on the market that you need to focus your efforts such. It is not productive to try to test hundreds of different devices and browsers.
It would be best to start analyzing your target group ie the visitors to your website. What are the main groups of users in the field of demography? What devices can be supposed to use? Cheapest Android or iPhone phones, Phones with Windows? From which countries do most of your traffic?
You can and should measure existing traffic in Google Analytics. Go to reports and select Public> Phones> Devices, and what your current visitors will use. It will likely have a lot of variants of the same device and close cousins, such as Samsung GT-I9295 Galaxy S4 watch active, Samsung GT-I9195L Galaxy S4 Mini, Samsung GT-I9195 Galaxy S4 Mini etc.
Being realistic, you can check your Top 10 devices in more detail, and then combine different variants and 10-20 include more device profiles in less detail will check to cover for example. 80-90% of mobile traffic, obviously, the scope depends on the amount of site traffic.
So identified with your top 10-30 devices, let’s review some of the best ways to test your mobile websites:
Try the actual mobile device
Yes, we promised to cover the various alternative instruments, but let’s get this out of the way first.
Of course it is always best to test your site with real devices, so you can really see what is really happening with your website. This allows you the results (not so) funny might cause any error in the device software (firmware). Additionally, if you use local caching, you may find that it is not the way you want if you do not take into account the space much smaller mobile cache fills works taken quickly.
The user experience includes many factors, such as changing network conditions, pixel density, the relative size of objects and making load times actual pages. In an ideal world would be tested every website on all major mobile devices that can be seen.
Emulators and simulators online:
What is the difference between a simulator and emulator? In many cases, the terms are used interchangeably. Both of you can turn your mobile device software on the desktop or in the browser environment.
Usually emulator that works specifically means duplicating all aspects of the behavior of the original design of the hardware. So try to use the actual device mimic as closely as possible.
A simulator, on the other hand, set an environment similar to the original real device, but does not attempt to simulate actual real hardware. This can have an impact on the results. Practical when we talk about testing mobile websites, this does not necessarily make much difference (but could). Most instruments (most convenient) are available simulators, and emulators usually distributed as downloadable applications, along with possibly more specific IDE for application development.
Important: Recognition User Agent
An important concept is referred to in the mobile world User Agent device. Detecting a mobile device can be executed on the client (browser) and / or the server, and these approaches have certain significant differences.
If you want to see how a site will look to make a particular model of mobile phone without using the actual device, your best choice for accurate results is to mimic the user agent string (UA) device. What happens when you download a web page, your browser sends his UA to the server.
The UA identifies the device and the browser, so it is possible that the Web server to detect and identify the browser, for example, a desktop browser Chrome browser Safari running on the iPhone 6 Plus or native browser on a Samsung Galaxy 5.
Most major websites use mobile detection server side, so they serve different content depending on the device (for example, images optimize remove accessories compatible with mobile devices, etc.). Therefore, if detection UA server instead, just to show the size of the browser window desktop will not necessarily be the same version and content of the website.