The Quick and Dirty Guide to Testing Mobile Websites

The year is 2014, and according to a study done by emarketer.com this past January, 1.75 billion people worldwide will be using a smartphone by the end of the year – upping global Smartphone penetration among mobile phone users to nearly 50%.

What does this mean, exactly? Well, to start with, it means that more and more users are going to be experiencing the digital space partly – and more often than not, exclusively! – on mobile devices, versus traditional laptops or desktop computers. Websites designed solely for desktop/laptop browsers and screen resolutions are quickly going to become obsolete, as users become more and more frustrated with those websites’ rendering and performance on their exciting and convenient Smartphones.

With this in mind, many companies have started embracing responsive design as either the gateway to re-designing current websites for mobile optimization or as the foundation for creating entirely new dedicated mobile website projects. Digital agencies and software development companies have had to adapt to this kind of work, and produce websites that look great and function well on a variety of devices. That’s where we, the quality analysts, come in: we’ve had to adapt too. Cross-browser testing is no longer our sole concern; we now have to focus even more of our efforts on cross-device testing, as well.

What? And I Thought Testing in IE8 was Annoying…

IE 8 is still annoying, that much hasn’t changed (especially in this day and age when sleek, modern browsers like Google Chrome are more popular than ever). Mobile testing, however, should cause far fewer headaches. In fact, by paying attention to the following key testing tips, it can be fairly painless to figure out whether or not a website has been optimized fully for mobile performance. Let’s get started!

5 Key Tips for Testing Mobile Websites

1. Readability

It’s important to remember that mobile websites shouldn’t just be “smaller” versions of laptop/desktop websites: in fact, when that is the case, the content becomes nearly illegible within the mobile screen resolution.

What Counts as a Success: A mobile optimized website will have content that is large and sparse, text that is legible, and images that appear clearly. Pay special attention to the homepage; it’s the gateway to the rest of the site, and the first page a user will see. Can you read everything on the homepage? Can you tell what the images depict? Keep in mind that the design should not look exactly like the laptop/desktop version; in fact, a successful mobile site should look like a minimalist or “toned-down” version.

Our very own Delphic Digital mobile homepage is a great example of successful mobile readability. The navigation is simple and accessible, the text and icons are large and easy to identify, and the text is big, distinct, and clear.

What Counts as a Failure: Tiny text? Not sure what that image could possibly be? Is the website nearly identical to the laptop/desktop version? Clearly you’re not looking at responsive design! A website that appears exactly how it would on a laptop or desktop computer, with the exact same amount of content (jam-packed with wording and images), isn’t optimized for mobile screen resolution.

2. Navigability

Related to readability, navigability refers to how easy it is to get around a website. Mobile websites have even less space to work with than their laptop or desktop counterparts, therefore, if not optimized correctly, pathways can get confusing fast. While testing readability, you can also test navigability. Where is the main navigation located? Does the design have too much white space? Does the alignment seem a little too perfect: can you tell if you should keep scrolling in order to see more content on each page?

What Counts as a Success: Successful mobile websites will make sure that the main navigation is easy to find, easily clickable/touchable, and not jam-packed with tons of links. They’ll also minimize the amount of visually appealing graphics that appear above the mobile page fold, and will always make sure to align at least some elements so that they are only partly visible within the viewport on the most popular mobile devices, so that users know to keep scrolling in order to get to the true end of each page.

What Counts as a Failure: Can’t find the navigation at all, or you find that the navigation icon or section is so small you have to attempt to click/touch several times before it opens/works? Are there so many links in the navigation that you find yourself unsure of where to click first? Are you confused as to why a given page seems so short (i.e. you don’t know upon first glance whether or not you should keep scrolling)? These are all signs of unsuccessful mobile navigability.

Gap mobile homepage Image, a great example originally called out in the 2013 article Exploring Ten Fundamental Aspects of M-Commerce Usability

3. Speed

Mobile devices are all about, as the name implies, mobility. Lugging a laptop around, especially an older, heavier model, can seem like a chore, but a Smartphone doesn’t weigh down a pocket and yet maintains the capability to provide you with all of your online fixes. Because we use these device to access the world wide web “on the go,” mobile websites need to be able to provide users with quick and easy access to key information and graphics. If you need to double-check that you’re on the right train route moments before stepping onto the train itself, you better hope that page loads quickly!

What Counts as a Success: Testing mobile website loading speed couldn’t be easier – simply click through the website to make sure the pages are loading within a decent timeframe (Google recommends keeping mobile website rendering within one second!). Lengthy loading delays can interrupt a user’s thought process, which inherently lowers interest level, which ultimately creates a poor experience overall. Are pages loading within one second or less? Are you still interested in exploring the website as a whole? Success!

What Counts as a Failure: We’ve all experienced the frustration of not getting what we want when we want it. If pages are taking a few seconds to a minute to load – or, god-forbid, not loading at all! – and you start itching to chuck that phone against the wall rather than wait all day…well, I think it’s fairly clear why that’s not a good sign!

4.  Click to Call

Here’s the funny thing about Smartphones: their purpose, first and foremost, underneath all the bells and whistles, is to function as, you guessed it, a phone. Phone numbers appear all over websites, especially websites that focus heavily on lead generation (“Contact us!” “Talk to a representative!” “Get started today!”), and Smartphones
are able to not only render these phone numbers on the screen like any laptop or desktop, but call them too!

What Counts as a Success: A website optimized for mobile will take full advantage of the “click to call” technology. Phone numbers should be clickable/touchable on the website, and an option should appear to add the phone number to the phone’s contacts and/or call the phone number right then and there.

What Counts as a Failure: No matter how many times you click on a phone number, the phone just doesn’t want to call it or recognize it. Yep, that’s a big fail.

5.  Linking to Apps

Perhaps the most beloved features of Smartphones are the hundreds of “apps” on the market. Whether you like spending hours playing Angry Birds or browsing the selfies of Instagram, there seems to be an app for everyone, and for every activity. Mobile websites have the ability to link to these apps, which can do wonders for social media marketing, as well as make helpful functionalities like maps and directions that much more dynamic and user-friendly. Links that would normally open full websites in new tabs or windows on laptops/desktops, now have the ability to open fully-functioning mobile apps.

What Counts as a Success: Does the mobile website you’re testing have social media links? Do those links open the corresponding apps, like Facebook or Twitter? Does a “get directions” link open the Google Maps app? Does clicking on a hyperlinked email address open your phone’s default email app? If yes to all of these questions, then you’ve got a fully optimized mobile website on your hands!

What Counts as a Failure: Sometimes a mobile website will open “app links” within the mobile browser instead of accessing the app versions themselves. While this isn’t necessarily a true failure (you’re still being directed to the right places, after all), it’s much more compelling for a mobile website to take advantage of the phone’s apps rather than treat those links as typical “browser links.” The desktop/laptop versions of Facebook and Twitter, while still able to be viewed within a mobile screen resolution, are probably not going to be as mobile optimized as their corresponding app versions. Why make mobile-specific apps in the first place, ya’know? Apps are, in a sense, the ideally mobile-condensed version of websites. In the end, the best dedicated mobile sites will recognize when a link has a mobile app counterpart, and will open that instead of a new window within the browser (and hey, maybe someday every website will have an app! Think about that…!)

Those Testing Tips are Fine and Good, but..What if I Don’t Have a Smartphone to Test on?

Are you kidding me? After all that, and you still haven’t realized how cool Smartphones are??

Jokes aside, however, I really can’t stress enough that, when it comes to quality testing, nothing beats the real thing…that being said, most QA departments don’t have the budget or the scope to have a physical example of every single type of Smartphone currently on the market anyway; these devices are constantly updating, and new versions seem to come out every few months. It’s often impossible to keep up!

If you don’t have the right mobile device for testing at any given time (or don’t happen to have access to a Smartphone at all), you can test any mobile website on a laptop or desktop computer by using the browser of your choice’s mobile emulators, located within the browser’s development tools. The emulation won’t be exact, but it will be pretty darn close. Especially for high-level or smoke testing, this can work really effectively.

Conclusion

As more and more companies start to recognize the importance and relevance of responsive design, QA teams are going to need to focus more and more on mobile device testing. Even though this might seem tedious, paying attention to key mobile website requirements such as readability, navigability, increased speed, click-to-call functionality, and linking to mobile apps can make testing a breeze. And if there’s one thing I wanted you to take away from this article, it’s that Smartphones are super fun, and testing on them should be fun too!

TAGS:
« Prev Article
Next Article »