In the past month, approximately 22.72% of visitors to Cardinal Web Solutions were browsing our site on a mobile device such as a tablet or smartphone. That’s nearly one fourth of all traffic to our site. So, unless you want approximately one out of every four visitors to your site to be frustrated by poor user experience, you need to be sure that your site is ready for mobile users.
We achieve this for our clients through responsive web design, in which elements of the website adjust fluidly based on screen width to ensure an easy-to-use layout for any device. After the initial development is complete, the next step is to test the site to be sure that it is displaying and functioning properly for all screen sizes and devices.
Appearance
There are three main ways you can test the appearance of your responsive website. I use all three of these methods at various points in the design process. Here they are, ranging from lowest to highest accuracy regarding how the site will display on most consumers’ mobile devices:
- Dragging the edges of the browser to recreate a smaller screen-size on your desktop
- A tool which simulates the website’s appearance on mobile devices, such as Screenfly
- Viewing the site on an actual mobile device
Method 1: Desktop Browser
The first method is to drag the edges of the browser to reduce its width. Although less accurate than the real deal, this is still a very good approximation of how the site will look, and is definitely the fastest and easiest method of testing. Besides, not everyone keeps their browser maximized all the time, so it is good to know how your site will look on a desktop at various sizes. Another benefit of this method is that you can use your browser’s “Inspect Element” tool to help you diagnose any problems that you notice. I primarily use this method during the initial development stage, to make sure that we are on the right track.
During this stage, I do most of my testing on Chrome. Android devices use Chrome as their primary browser while iOS devices default to Safari; however, they are both webkit browsers and actually render sites very similarly. For testing how your site will display on Windows devices, which do not yet have the market share of iOS or Android, Internet Explorer 11 (yes, we’re on 11 now) would be your best bet.
Method 2: Screenfly
The next method, using a tool such as Screenfly, is more accurate in terms of how the site will display on various mobile devices. However, it does not take into account the quirks of each device’s operating system and browser. I generally use this tool most when we are getting close to finalizing development and also for devices that I do not have physical access to.
Method 3: Actual Devices
Finally, for accuracy, nothing beats viewing your website on an actual mobile device. However, one device does not fit all in this scenario. There are occasionally some differences between how a site will display on Android versus iOS devices*, although not as many as you may expect, assuming both devices are up-to-date. You are far more likely to run into discrepancies between different phones running Android.
If you test one iOS device, you’ve pretty much tested them all, at least for that screen size, which makes these devices very easy to develop for. However, because Android is available for many different types of phones, and because updates are not always compatible with every phone running Android, you end up with lots of variation among browser versions on Android devices. For this reason, I recommend that you test your site on an iPhone, iPad, relatively new Samsung tablet, relatively new Samsung phone, and an older Android phone. If you do not have access to a newer device, you can always go into a phone store and check your site on the display models!
* I am specifically referring to the default browsers for these operating systems, Chrome and Safari, respectively. However, it is possible that the user may have downloaded an additional browser for their device, such as Opera, Firefox, or Chrome for iOS. The market share is considerably lower for these non-default browsers, however.
What should you be looking for?
If you or the person developing your site is experienced with responsive web design, you shouldn’t see too many problems by the time you’re testing actual devices. Here are a couple of issues that are fairly common, however:
- Some elements may be not be resizing properly, resulting in some parts of your site aligning perfectly with the width your mobile device while others extend far to the side.
- Some devices automatically detect phone numbers and addresses and turn these into links. Depending on how links are defined in your stylesheet, the results can either blend in nicely with the rest of your site or look very strange.
Fortunately, both of these issues are very easy to fix. If you encounter either of these problems or anything else that just doesn’t look right, take a screenshot or describe the problem as specifically as possible (preferably both) and send this information to your developer. Make sure to test several pages on your website, not just the homepage.
Functionality
Even if your site looks good, it won’t be very useful to you or your visitors if it does not function properly. For this level of testing, it is absolutely essential that you use real devices rather than a simulation on your desktop.
Mobile functionality checklist:
- Hover effects – Sometimes you may have an image map or button that changes appearance to indicate when you are hovering over it with the mouse. On a mobile device, there is no mouse, so the first click will display the hover effect, while the second click will activate the link (assuming there is a link). If you do not need the hover effect on mobile devices and dislike the extra step, let your developer know to disable this effect for mobile devices.
- Navigation – Your site menu almost always needs to be restructured for mobile. Test several links to make sure that it looks good, works, and is easy to understand and use. The hover effect described above can also impact your site navigation. For example, if you have a link in your menu that you can hover over to see additional sub-menu items, the first click will reveal the sub-menu, while the second click will follow the link. Some people choose to add “Overview” to the sub-menu on mobile devices to make this page more obvious to users who may not know to click twice.
- Flash – iOS devices will not display any Flash elements. You should not be relying on Flash for your web design anyway, as it’s out-dated and Google cannot read it, but if you are, make sure there is not a big gaping hole in your site on iOS devices where the Flash element was. Have your developer hide Flash elements on mobile and replace it with something different for these devices, if necessary.
- Contact forms – I recommend testing these not because I see a lot of problems with them (I don’t), but simply because they are too important not to test.
- Phone numbers – iOS devices are usually able to detect phone numbers automatically and change them into a link, but this is not always the case with Android devices. If you want users to be able to click-to-call when viewing your website on their phone, the developer will need to include the link in the code, rather than relying on the browser to detect it.
If your site has any special features, be sure to test these as well.
Performance
Testing isn’t finished when the site goes live. You will want to evaluate how your site performs with visitors over time by monitoring your user statistics in Google Analytics, especially your bounce rate and goal conversion rate. You can see a breakdown by going to Audience → Mobile → Overview in Google Analytics.
Your bounce rate measures what percentage of your visitors left your site without clicking on any other pages. When evaluating bounce rate, a lower number is better. It is normal for your bounce rate to be higher on mobile devices than on the desktop, but you want to try to narrow the gap as much as possible. For most responsive websites, I have noticed that the mobile bounce rate tends to be 15-20% higher than the bounce rate for desktop.
Your goal conversion rate measures what percentage of your visits resulted in the completion of one of the goals you have defined in the “Conversions” section of Google Analytics. You may find that different types of goals are more useful on desktop than on mobile, and vice versa. For example, if you have a contact form on your website, you may want to track form submissions as a goal. However, your site visitors may not be interested in filling out a form on their smartphone, and may prefer to call. In that case, defining another goal for clicks on a “Click to call” button may be more useful for tracking your website’s mobile conversions.
If you are seeing a significant discrepancy in performance between your site’s mobile and desktop presence, this could indicate that there is a problem with the user experience. It could be a functionality issue that you missed during your testing, or something about the mobile layout that the user finds unintuitive or simply not compelling. If you want improve your site’s performance across any device, as well as increase conversions, don’t just leave your website site unchanged after the launch. Invest in user experience (UX) testing and split testing, and use that data to inform continued improvements.
In a 2012 study, Google reported that 52% of users said that “bad mobile experience made them less likely to engage with a company.” Mobile browsing is nearly ubiquitous, and users now expect businesses to offer a great experience on any device. Unless you want to lose their business to your more mobile-friendly competitors, you must deliver. This is now an essential part of online marketing.
How do you react when you come across a site that does not display well on your mobile device? Do you try again later on the desktop or just move on to the next search result?
