It’s no secret that mobile traffic is a force to be reckoned with. In recent years, the number of mobile Internet users has surpassed that of desktop users. By now, more than one-third of Internet consumption happens via phones, tablets, and other mobile devices.
Source
In some cases, these numbers are even higher. In the USA, for example, mobile devices account for more than half of all digital media consumption.
Source
It is, therefore, no wonder that mobile capabilities of websites have become a ranking factor in Google as evidenced by the “mobile-friendly” tag in the SERPs.
The conclusion: As a WordPress developer or owner of a WordPress website, you will not get around optimizing your site for mobile devices. And that usually involves a lot of testing.
With the sheer number of phones and tablets on the market, it is tough to make sure your website looks stellar on all of them or even most of them.
Wait, now we have to keep up with the arms race of mobile device development and invest in a new one every couple of months? Who has that kind of money? Nobody, that’s who! As if adhering to browser compatibility wasn’t hard enough.
Lucky for us, a number of mobile testing tools out there have made it their mission to make our lives easier (and keep our wallets full). So before you invest your hard-earned cash in the entire Apple and Android product line, let’s see what these can do for you.
Browser Developer Tools For Mobile Testing
If you think desktop browsers are the wrong place to start when it comes to optimizing for mobile, think again. Two of the major browsers, Chrome and Firefox, both come with their own line of developer tools that include tools for mobile testing.
Not only can you use them to inspect your site’s HTML and CSS, but also get a live impression of what it will look like on different mobile devices.
In Chrome, the tool in question is called Device Mode, its equivalent in Firefox Responsive Design View. We will go over Chrome first because it is a bit more sophisticated.
Chrome Device Mode
To get to the Device Mode, you first need to activate the developer tools. You can get there via Menu > More Tools > Developer Tools. Alternatively just press Ctrl+Shift+I.
Any of these will open the developer console on the lower part of the screen. If you direct your eyes to the upper left part, you will find a little icon that looks like a mobile device.
Upon click this activates Device Mode.
That means, the website you are currently on is shown in a smaller frame which reflects the confines of a mobile device (you can pull down the developer tools to have a little more space).
Shrink and expand the frame to make the screen fit your personal needs or use the numbers in the upper left corner to type in a custom screen size.
Be aware that you might have to reload the site when you do so, in order for the content to fit properly
Yet, the best thing about the Device Mode are the device presets found at the top.
Here you can choose some of the most common mobile devices: Different models of the iPhone and Samsung’s Galaxy as well as less common ones like the Amazon Kindle Fire.
When you choose something from the list, an additional button appears that lets you change between portrait and landscape view.
The cool thing is that this is not an emulation but just a different view of your browser window. That means you can still surf to any website you want and view it, including local development sites.
Chrome’s Device Mode also simulates browsing by finger instead of via mouse. Consequently, there are no highlights or color changes when you hover the cursor over anything. You get the real mobile experience.
An even more sophisticated feature is the network throttling simulation. To understand this, you need to keep in mind that mobile visitors will often have slower network connections when they are not connected to WiFi.
Chrome’s mobile testing tool can simulate this. In another drop-down menu at the top next to Network, you can select any network speed from GPRS over 2G/3G/4G all the way to a WiFi connection.
That way you can further understand the user experience of mobile visitors, whose speed might be hindered by large images or other elements that are slow to load on less powerful connections.
What’s even better is that these presets are only valid for your active tab. You can still browse normally in the rest of Chrome.
Overall the Chrome Device Mode is a pretty amazing tool for mobile testing, especially when you keep in mind that it is a built-in feature of a free browser.
For a more detailed introduction and additional features, you can also watch this video:
Alright, on to the next one!
Firefox Responsive Design View
Firefox offers a similar tool to Chrome. While it has not as many functions as its competitor, it’s still quite useful for testing the mobile capabilities of your WordPress website.
You can activate it either by clicking on the menu and then via Developer > Responsive Design View or by through the respective icon in the developer toolbar when it is toggled on.
Alternatively use Ctrl-Shift+M.
The interface of the Responsive Design View is quite basic. Just like in Chrome, you have a drop-down menu for common preset dimensions, however, in Firefox they come without device names attached to them.
If the available options don’t fit your needs, you can also set custom dimensions and save them as your own presets. Besides that, it is also possible to manually shrink and expand the viewing frame.
As before, the Responsive Design View is part of your browser, which means you can surf to any web address you want. It can also emulate tap control instead of browsing by the mouse. On the other hand, the more sophisticated stuff like network throttling simulation is missing.
Yet, what Firefox has got going for itself is that you can close the developer toolbar at the bottom and still use the mobile testing tool, something that vexed me with Chrome.
Also, you are able to switch between landscape and portrait regardless of size and take screenshots of the current view that automatically get saved in your download folder.
Chrome’s Device Mode and the Responsive Design Mode of Firefox are two powerful tools to check your site’s mobile capability and should suffice for most cases. However, they are far from the only ones.
Mobile Device Emulation: XCode And Android SDK
While imitating different mobile devices sizes in your browser window can work well enough for testing, it is not the real thing.
Yet, we already settled that the idea of purchasing 10 different mobile devices just to look at our website is less than appealing.
A method that is somewhere in the middle between the two is emulation, meaning creating virtual mobile devices to use for testing purposes. These devices act as if they are actual phones and tablets while actually running on your computer.
Thankfully, the makers of the most widely adopted operating systems — iOS and Android — have also created two of the most powerful emulators for their products and made them freely available
Emulate iOS Devices With XCode
The best way to check websites for compatibility with Apple devices is the company’s very own iOS simulator. It is part of XCode, Apple’s development environment.
The upside is that it is free of charge. All you need is a developer ID. The downside, however, is that it only works on Apple devices. Windows and Linux users have to find other ways to fake having an iPhone or iPad.
If you do own a Mac and have set up an ID for yourself, you can get XCode here. Just search for its name and download the appropriate version.
The iOS simulator is a standalone piece of software and can be used as such. After the installation of XCode is finished, you can find it here:
Browse to Applications, right-click on XCode and choose Show Package Contents.
Then go to Contents > Developer > Platforms > iPhoneSimulator.platform > Developer > Applications.
The iOS Simulator should appear in the list. You can create a shortcut in the dock for quick access.
Once opened, you can change devices via Hardware in the main menu. Switching between landscape and portrait mode happens in the same place.
To test your site, open the browser on your virtual device and enter any web address. Be aware that this works in local development environments too, the simulated device can access any site that your Mac can access.
That’s it. Congrats, you now have all Apple devices virtually on your machine. Not too useful in terms of bragging rights, but quite handy as a mobile testing tool for your WordPress site.
Quick note for Windows users: There are ways to run XCode on Windows, however, they are quite convoluted and not the most practical. If you are looking for a more comfortable solution to check your site, either buy a Mac or use some other way as suggested in this article.
Check Your Site On Any Android Device With Android SDK
First the good news: Android SDK (Google’s equivalent to XCode) works for both Windows and MacOS X as well as other platforms. It is also free to use and you can download it here as part of Android Studio.
The slightly bad news is that it is a bit more complicated to set up. Plus, it’s pretty big in size. The download for the installer alone is more than 1GB, the standard install about 4GB and there is more to come.
Once the download has finished, you need to run the installer. Mac users have to unzip.
After that, start Android studio. Click on Configure and then SDK Manager. From here, you can install the latest Android version by scrolling down the list and making a tick mark in the check box next to it.
Click Install Packages to start the installation process. Now wait, this might take a while.
After everything is done, it’s time to set up some virtual devices. To do so, click on Tools > Manage AVDs in the menu of the SDK Manager.
You have the choice to create a custom device or select a preset under Device Definitions. When you are done, choose Create, configure the Android version and virtual processor and confirm. The device should now be part of your list of Android Virtual Devices (AVD).
Highlight one and click on Start. Decide whether to scale the display to real size (which will likely be very small) and then click Launch. It can take a while for the simulator to get going as it first has to start up Android.
Next up, find the browser on your AVD and go to whichever site you want to check. You can switch to landscape and portrait mode via Fn+Ctrl+F11/F12 (Mac) or Ctrl+F11/F12 (Windows).
Easy, wasn’t it?
Online Emulators
Source
If you don’t think any of the above tools are the right fit for you, there are also a number of emulators available online where you can perform tests for a number of different mobile devices.
Due to the nature of XCode, these might be especially interesting for those barred from using it. While some of these mobile testing tools connect you to emulators of their own, others link up to actual devices.
Browserstack
Browserstack is a web-based platform for testing websites in different environments, operating systems, browsers, and devices. It is a paid solution with access to more than 50 mobile devices on different operating systems including Windows Phone.
Mobile-Friendly Test by Google
With Google’s newfound emphasis on mobile-friendliness, it only makes sense that they provide a tool to analyze how well your site is performing. After typing in a URL, the mobile testing tool will check your site not only for responsiveness but other mobile-friendly markers such as page loading time.
MobileTest.me
This service lets you test your site across six different popular devices, among them the HTC One, Google Nexus 7 and the Apple iPad Mini. All you need to do is click on one, type in a web address and you are good to go. It’s also free, which is nice.
Responsinator
Next one in line is Responsinator. It offers testing for several different Android and iOS devices, from the iPhone 5 over “crappy Android device” (sic!) to the Nexus 4. As usual, type in any address and the corresponding website will show up on the screen of the chosen device. It doesn’t have a flip option, but you can choose landscape views for each device as well.
Screenfly by QuickTools
Screenfly offers a pretty nice range of devices including TVs and desktop computers. However, there are also plenty of tablets and phones in the list. It’s free to use and the interface is very intuitive. Highly recommended to do some quick checks!
Keynote Mobile Testing
This service is by far the most expensive in the bunch but also the most sophisticated. Instead of emulating different devices, it connects users to actual tablets and phones hooked up to their servers. The screenshot at the beginning of the section is actually theirs.
Yet, while they have an impressive setup, in my opinion this kind of service only makes sense for people with really big commercial projects that have to be 100% perfect across a large number of devices.
Mobile Testing Tools Are Available For All Needs
Traffic from users on mobile devices has become incredibly important for anyone running a website and will only continue to grow in significance.
People dealing with websites professionally are therefore hard pressed to make sure they know how to make them look good and function properly on their visitors’ phones and tablets.
A number of mobile testing tools are available to check the capabilities of WordPress websites. From browser tools over iOS and Android emulators to third-party web solutions, developers and users don’t lack choices.
Each tool comes with its own strengths and weaknesses. Yet, what most of them have in common is that they are definitely cheaper than investing in real-life devices.
The above solutions should suffice to test for most use cases. Which one you choose is up to your own needs and preferences. In the end, all that counts is the result. Your mobile visitors will thank you.
How do you test your site for mobile capabilities? Any tools you can recommend? We would love to hear your input.
Nick Schäferhoff
Nick Schäferhoff is an entrepreneur, online marketer, and professional blogger from Germany. He found WordPress when he needed a website for his first business and instantly fell in love. When not building websites, creating content or helping his clients improve their online business, he can most often be found at the gym, the dojo or traveling the world with his wife. If you want to get in touch with him, you can do so via Twitter or through his website.
The post 10 Mobile Testing Tools For Your WordPress Website appeared first on Torque.