How can I test my responsive mobile app - Part 1
The manual testing series #
In this series I’ll be uncovering the various techniques and tools that can help you get started to manually test a mobile web or hybrid app. Manual testing is a great way for verifying layouts and basic functionality. Automated tests afford us more verification but require a different set of tools and deeper understanding that’s not part of this series.
Part 1, starts with examining responsive design and the simplest tests that can help us ensure all is well. Specifically,
- Testing online using viewport resizing sites.
- Testing with viewport resizing browser plug-ins.
How responsive? #
Media queries afford us the capability to adapt our layout using a variety of parameters. The most commonly used parameter is width, specifically playing around with width ranges. You see this in the wild a lot especially as implemented by a multitude of css frameworks like Skeleton, Foundation and Frameless. These are grid frameworks that can react to the different width ranges presented by browser viewports - a viewport is the viewable part of the screen configurable by setting the ‘viewport’ meta tag. Browsers can be running on anything from a desktop screen to the excitingly and drastically differently sized mobile screens!
Iterating with visual tests #
So, the challenge becomes to create an efficient simple design that showcases and hides features that are relevant or irrelevant depending on how a user views a mobile app. This can be mitigated by how we approach features and layouts. That’s a great first step but the true panacea is to constantly test and re-iterate.
Testing can be varied, it depends on what it is that we’re building. Specifically, if our mobile app will always be run from the web ala Forecast.io or if it will be embedded in a hybrid mobile app with native extensions. In this series of articles, I’ll be showcasing some of the approaches I tend to use including online/plugin, emulator and device based testing explaining the nuances and the why of each.
To make it easy for you to follow along, I’ll be using the home screen of (1) Up App which is a simple but functional page.
FYI Up App uses the Skeleton responsive grid.
So, let’s dive in by utilising both a testing site and a browser plugin. This works best for apps running on the web.
Testing online #
There are a variety of online sites and tools that use iFrames to mimic different viewports. All you have to do is enter a url and start testing. The Responsinator is such a tool. I like to start by picking a browser such as Safari as it represents a substantial number of potential mobile users. However, this just a basic approximation as I’m running on a MacBook so the versions will be different.
- Go to http://www.responsinator.com/
- Enter the url for your app, I’m entering http://aishy.github.io/UpApp/
After the screen loads you’ll see how your mobile app renders on different viewports ranging from the iPhone to the Kindle.
For Up App, our initial test reveals that both the text and the animated sun illustration render well, but the illustration looks slightly blown up out of proportion on Landscape view ports.
I generally tend to find that Android device layouts are usually unpredictable. Here Up App is completely broken on the portrait viewport but works well on landscape.
Skeleton, our grid, doesn’t support widths lower than 300px for portrait viewports very well out of the box. This could be the root cause.
Using a plug-in #
Similarly, there are plugins that allow you to navigate to the app on most browsers. Once the page renders, you can then start testing by manipulating the viewport.
Viewport Resizer fits that bill. Its a plugin that works cross browser by default. Just bookmark a link to the site on the browser of your choice and start testing. The results should be comparable to what we saw with our online tests.
Test Results #
After testing, I make a note of the issues and usually re-iterate on the design and functionality.
For Up App it looks like I might need to,
- Add custom media queries to resize the sun illustration specifically for landscape & tablet portrait viewports.
- Augment the grid with media queries to support viewports smaller than 300 px.
You can keep using the aforementioned tools to refine and retest.
Part 2, discusses more thorough testing techniques by using device emulators both on the cloud and your own machine.
Links
(1) Up App is developed by Aisha Yusaf aka Pakora Butty and was used by her permission.