Smartphones seem to have taken over desktop computers in terms of usage. The number of smartphone users has increased tremendously in the last few years and by 2016, there will be more than 2 billion smartphone users. In addition, half of the internet’s usage comes from mobile devices.
This development affects also web design for some years. InVision recently stated in one of their blog posts:
“Responsive Design is no longer a luxury, but a necessity.”
Especially when it comes to testing, mobile website testing still is in its child’s shoes and developers face a hard time getting the best result out of their work.
In this blog post we are going to show how to set up the perfect mobile feedback & website testing workflow and how to easily conduct browser tests for mobile.
What does RWD mean?
This means that developers should be creating their websites so a user can access it from any smart device, be it iPhone, smartwatch, Kindle or notebook, without running into problems.
Responsive Design: A perfect all-in-one solution?
The screen size, platform and orientation and even all the elements of a design adjust to make it compatible for viewing on that particular device.
That way, the size of the smart device doesn’t matter. For example, if the user switches from their computer to the iPad, the website automatically switches to accommodate for the change in resolution, image size and scripting abilities. It has become so common and so important that designing with mobile in mind has earned its own name: Responsive Design.
Since responsive web design eliminates the need for a custom design and development for each new gadget that’s released, the concept can save you quite a lot of time.
But, since it’s supposed to support virtually any type of device, the techniques used should be as robust as possible.
Why mobile testing matters.
However, when designing websites, developers still face some hard time in getting the best results out of their work.
Website developers and designers often do not invest a large enough amount of resources in testing the compatibility of their sites on different mobile devices.
Testing for mobile usage is still at a nascent stage but with the help of a proper testing workflow, the methods of testing and the right mobile testing tools, testing your website for responsiveness is going to become a lot easier.
How to get started with mobile website testing?
Since there are so many different devices to view a website on today, there’s a lot to take into account.
They come with different screen sizes and resolutions, operate on different network speeds and have different hardware capabilities.
All these differences make it important that a website is tested thoroughly before it’s made available on different platforms.
According to Guy Podjarny’s research, regardless of the screen size, 72% of responsive websites require the same resources, even on slow mobile network connections regardless of what needs to be displayed.
And since users expect short load times, it won’t be long before they head over to a competitor’s page. When testing sites for mobile devices, there are 4 basic things to look out for. These are:
- Does the site look great on each device
- Is it free of bugs on each device
- Is the interface user-friendly on each device
- Is the site optimized for each device
Now, there are a lot of different devices out there.
The goal of mobile website testing is to deliver a consistent but relevant experience to users across all those different devices, and that can be really hard to manage.
So, where do you even begin? Well, your testing should take place in five areas to cover everything properly.
Validate your HTML and CSS code
You should first try to validate the HTML code of your page. It’s not because the website works for you that it’ll work for everyone. So the most important step is to make sure you’ve covered the basic and the website is on par with all HTML and CSS standards.
W3C mobile OK Checker
W3C is a web based automated validation tool and is one of the best tools to check the compatibility of your site on mobile devices. The tool offers several tests that determine the user-friendliness of the mobile website.
Chrome Developer Tools – the mobile testing allrounder
The Chrome Developer tools which you probably all know are a great place for fixing those HTML and CSS issues. Through the whole testing workflow, the Chrome Developer Tools are your home base. Whether you’re checking the behavior of your website on various screen resolutions or you’re testing the loading times with Network throttling.
The Chrome Dev tools are the place to be.
Test on different browsers and operating systems
You should then test your website on multiple browsers, especially the ones which are most popular in your target audience. This probably means testing in Firefox, Chrome, Safari or Internet Explorer.
In addition to this, also check your site on different operating systems like Mac or Linux. It might happen that a site looks completely fine on one of the browsers but break completely on some other browser, or work on one browser on one OS but not the same browser on a different OS.
Testing on BrowserStack
Browserstack is a web service that allows access to desktop and mobile devices and can be used by professionals to test their sites. It is a paid service. Though a part of the service is available in a free version, the paid version has a lot more features.
Test for different mobile devices
This is where it gets difficult. After testing your site on your desktop, resize the browser window and check the appearance on different preset sizes.
Test on real mobile devices
The best way to test the responsiveness of any site is by simply testing it on different mobile devices. The user experience varies depending on the page loading time, pixel densities and the size of the tap targets.
Since comprehensive testing on each mobile device is often not possible due to cost and time limitations, a mobile device testing suite works best in testing. A suit consists of many popular web browsing devices and helps in physical testing under real conditions.
Testing with Android Emulator and iOS Simulator
Other than testing on the real mobile devices, you can also use an emulator. Emulators are software that are mainly designed for testing apps and default web browsers.
However, because of the slow speed of emulators, they’re not very good for testing mobile sites. They don’t even show all the features of a physical hardware device. But if you don’t have any other testing options, an emulator works pretty ok by ensuring basic testing.
Responsinator
Responsinator is great tool for testing your responsive web design. It’s free of any cost and works great for performing a quick layout check.
Am I Responsive?
Am I responsive is a web based tool that will show you if a certain website has an responsive web design. Though it’s more a tool for a quick and simple check, than for testing and bug tracking purpose.
MobiReady
MobiReady is basically an online testing tool. It performs a number of tests and provides a comprehensive result for the compatibility of your website for the mobile use. It also sends error report so that you know the areas where you can bring improvement.
Connectivity options
Websites rely on network connectivity to provide the required functionality. In a test environment, set up wi-fi network and test the site’s load speed under different conditions.
Although nothing new, responsive web design isn’t about being able to be displayed well in different scenarios, it’s about being usable in different scenarios.
Unfortunately, being responsive usually means an increase in loading time as more assets need to be loaded. Thankfully, RESS is there to help with that.
RESS (=Responsive Web Design + Server Side Components) is basically the addition of server side components that get loaded dynamically, and according to what a specific device requires. There’s no use to load a full resolution image on a small cell phone, but it might be on a desktop.
Mobile testing after deployment
As with all things development related, there’s no guarantee that after deployment, your website will be flawless. In fact, there will be bugs, always.
So, after deployment, you’re going to want to keep an eye on your responsive website. Your users will be bumping into them from time to time as they’re spending way more time on the site then you’ll ever be able to.
So aside from checking and testing for bugs and issues with each new deployment, you should also be catching bugs that still linger in your current deployment.
But, here’s the great news. There are tools for that as well.
Pingdom
We talked about optimizing load time. But how about uptime? We’re not just referring to entire sites being offline. It can just as well be that a single asset is offline as well. That’s where pingdom comes in. This tool monitors how the user experiences the website and where they might find potential hiccups.
Usersnap
Imagine you or one of your users found a bug or some critical issue with your responsive web design. Well, it’s your job to try and get enough information out of that user to go ahead and fix that bug. Usersnap helps you get that information, without bothering your users all too much.
As smart devices become more popular, preparing your site for mobile customers is crucial. Testing is the most important part of being prepared.
Wrapping it up.
This was quite a lot, I know. For getting started with mobile website testing I’ve shown you some basic questions which need to be answered. Besides that, I’ve shown you some tools and workflows you should consider while testing your responsive web design.
Using those tools during your QA process will get you better results for your new website or web app.
The point of this article, however, is for you to understand the cost of neglecting the importance of mobile website testing. Starting with testing early pays off!
PS: Prefer a short summary of mobile testing? Check out this Slideshare presentation:
Resolve issues faster with visual bug reporting.
Simplify and reduce issue & bug reporting efforts with screen recordings, screenshots, and annotations.
And if you’re ready to try out a visual bug tracking and feedback solution, Usersnap offers a free trial. Sign up today or book a demo with our feedback specialists.
