It’s not mobile, it’s miniature online
Editor's note: Ken Berry is president of Jibunu, a Fitchburg, Mass., research firm.
The proclamation has been made: Mobile is no longer coming ... mobile is here! Worse yet, your boss got this drilled into his noggin at a conference and he’s on his way back expecting a full report on what you plan to do about it. You’re trying to decide if you actually want to tackle the need for mobile-friendly research or change your profession. Fear not! Adjusting your online research to be mobile-friendly is easier than you think.
If you’ve been getting by up until now with your scroll-heavy, pinch-and-zoom survey platform, you might have done yourself a favor by not dealing with mobile early. This is not to say that those of us who have been working on mobile enhancements and solutions along the way did not help our cause by tackling the needs when we did. But we had a much harder time with it than you are going to have.
Mobile programming is no longer much different than regular Web programming. This is because the differences between mobile browsers and browsers on your PC have continuously decreased over the years as phone browsers have become more and more feature-rich and all browsers are doing a better job conforming to the rules laid out by the World Wide Web Consortium (W3C). So what are the major differences? For one, your mobile device is smaller. Secondly, it is not as big. I’m not trying to oversimplify mobile online programming but solving the size constraint gets you most of the way there these days.
When beginning the climb toward mobile royalty, it is very important to see what kind on mountain we’re tackling. There are a few ways to do this but the best is by grabbing a mobile device and testing it. If you are serious about mobile support, it might make sense for you to have a few devices available. I would not recommend the newest models as those will have larger screens and more native support. It is good to have an iPhone 4, some sort of Android device and perhaps a Windows touch device.
Help you analyze your tools
You are not alone when testing your online research instrument. There are some testing resources that will help you analyze your tools and, better yet, many of them are free. Google’s Mobile-Friendly Test will analyze your site on several criteria and make an assessment as to its mobile-friendliness. Keep in mind that this assessment is done by a machine and is by no means the final word. That being said, it is important to get an understanding of where you are currently not hitting the mark based on the standard test. While testing your site or platform, it is important to be able to test all of the variety of pages and question types you might be presenting. If your system does not allow you to skip to a desired page based on the URL, this might be challenging.
While Google’s test lists the areas where your online research tool may fall short of mobile-friendliness and even offers solutions based on some of its assessments, it is lacking in detail. If you’re looking for a more comprehensive and granular list of issues with your system, you might want to look at the W3C mobileOK Checker. This is essentially the magnifying mirror of your solution as it relates to mobile support. Be warned: You see EVERYTHING! While this can be somewhat depressing and some of the items that get listed are not truly a problem, if your goal is full understanding of where you stand, this is a great tool.
Another useful tool, offered by Google inside of its Chrome browser, is a mobile emulator. The F12 key (or Ctrl+Shift+I) opens up the developer tools in Chrome. For the purposes of mobile emulation, ignore all of the items that are displayed except for the mobile icon. This is located in between the magnifying glass and the menu header. Clicking on this icon allows you to emulate an array of mobile devices as well as network speeds. Because you have a keyboard, the open-ended number and text inputs will act as they normally would. The rest of the functionality, however, is true to the device that is being emulated, all the way down to the user agent string (the information about the user’s machine sent to the Web site). The size and speed of the device can be set and even the transition between portrait and landscape can be viewed. QuirkTools (no affiliation with the publisher of this magazine!) also has a screen size emulator called Screenfly that will give you a robust mobile emulator and also allow you to do a quick size-check on your site.
While we have been focusing on free tools to test and validate your mobile-friendliness, there are many products and tools that are available on the market that can help with this task.
Fix the issues
Now that you have a way to test your online data collection tool, how are you supposed to fix the issues that you uncover? As we have alluded to, the most common issue when it comes to mobile-friendliness is size. The size of your Web page, its images, the text and the buttons will all likely need adjustment. As they are all interrelated, you will have to test after each change to ensure that they all still look and perform as you want. But how do you make the adjustments that you need? Generally, there are four options but some are more practical than others. The four options are: 1) creating a dedicated mobile site; 2) a responsive rebuild; 3) programmatic style sheet-swapping; and 4) responsive repackaging.
The least-viable long-term solution of these four would be to create a separate research tool for mobile users. While this removes the burden of having to worry about your current solution’s content and allows you to focus solely of your mobile users, it does require a separate codebase specifically for your mobile users. This could cause increased effort to maintain and update content on the two separate tools. Additionally, the method used to decide which site to serve up is dependent on user information sent to the Web server, which can be unreliable and changes as new devices are introduced.
Coming in third for feasibility but arguably first for usability and future-friendliness is a responsive rebuild with a mobile-first approach. Responsive design is an approach that creates the best visual experience for your respondents by using proportion-based templates that respond to the size of the device and browser being used to view the data collection tool. The goal is to create easy readability and reduce scrolling regardless of the device being used. Having a mobile-first approach ensures the best experience overall, as ensuring that your content displays well on a smaller device inherently means that it will display as the size of the device increases. The concern with this approach is ensuring that as the browser gets larger, the content looks at home on the screen and utilizes the added real estate.
There are options
When it comes to updating your online data collection tools, the previous options may not be practical or even possible for you. Each of these options requires access to the code base, which rarely exists for anyone who uses packaged third-party software. For those who have a proprietary solution or a solution that does give you access to the code, it is still probably impractical to overhaul the code to solve this issue. Fortunately, there are options that can be utilized that require less of a “build or rebuild” approach.
Programmatic style sheet-swapping ranks second on our list. While it requires zero changes to the underlying code base, it does require multiple style sheets that need to all be updated as styles are added. If there are styles that persist across all devices, they can be added to a common style sheet that is in place for all browsers and devices. This will greatly reduce the amount of content needed to be included and therefore maintained in your style sheets. The style sheets dictate the size of all of the content on the screen from images, to text, to grids. While it lacks the smooth and gradual transitions of a responsive design, if you have limited access to the code base but are able to add style sheets and JavaScript calls, this may be the best option for you.
However, creating responsive packaging for your current tool’s content may be the best option as it gives you a responsively smooth design while still utilizing the existing code base. This option, as well as the style sheet-swapping and the mobile-first design, all have great maintenance and changes frameworks as the content is driven from the same source. This means that content changes and updates only need to be made in one place. Because this option is well-suited for simpler Web sites, it lends itself well to online data collection tools.
Whichever trail you wish to use to climb the mobile mountain, they will all require extensive testing along the way on multiple devices. All but the dedicated mobile tool approach require that you retest your tool on your desktop as well to ensure that there are not any unintended negative effects from the changes that have been made.
Move it to the next level
We’ve tackled the adjustment of your formatting to meet the dimensions of multiple devices, and for many of you that may be all that you need to do. There are, however, some things that require additional libraries to support your touch-enabled device. While this is an article in itself, don’t be afraid to search for free libraries that will take your visually-enhanced tool and move it to the next level with additional touch support.
While there are many of you that may be feeling ready to tackle this task, and while, with a dedicated team and a well-planned approach, there is a good chance for success, there is one additional way to bring your data collection to the mobile user. You could always outsource it to a firm that has already solved the problem. This may be a viable option for your long-term needs as most of these specialized firms monitor changes for you, so you can focus on the business at hand. No matter which approach you choose, best of luck to you!