It’s Not Mobile, It’s Miniature Online: Simplifying Your Mobile Solution

It’s Not Mobile, It’s Miniature Online: Simplifying Your Mobile Solution

By Ken BerryPresident of Jibunu and NEMRA memberKenneth Berry July 29, 2015 Mobile is no longer coming — it’s here. Worse yet, your boss got this drilled into his noggin at his 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. You take a long look at the American Idol webpage and just as you’re about to submit your entry, you remember. You can’t sing a lick! So what are you to do? 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 that 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. 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. (See what I did there?) I’m not trying to over simplify 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 at your exposure. 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 older Android device and a Windows touch device. Help WantedYou 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 its 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, as it is with a magnifying mirror, 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 website). The size and speed of the device can be set and even the transition between portrait and landscape can be viewed. QuirkTools also has a screen size emulator called Screenfly that will not give you a robust a mobile emulator but will 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. Now that you have a way to test your online data collection tool, how are you supposed to fix the issues that you uncover? Size Does MatterAs we have alluded to, the most common issue when it comes to mobile friendliness is size. Size of your web page, size of its images, size of the text, and size of the buttons are all areas that will most likely need adjustment. As they are all interrelated, you will have to test after each change to ensure that all still looks and act as you would like it to. 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 creating a dedicated mobile site, a responsive rebuild, programmatic style sheet swapping, and 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 solutions 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 webserver 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. Let’s Get PracticalWhen 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 has a packaged third party software. For those that 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 re-build 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 a 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 websites it lends itself well to online data collection tools.It is important to remember, whichever trail you wish to use to climb the mobile mountain, they will all require extensive testing along the way on as many devices as you can get your hands on. 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. A Few ExtrasWe’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 need additional libraries to work and many libraries that help you do the things that you are looking to support on 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 take 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. There are firms whose staff is dedicated to ensuring that all of your valuable respondents are seeing the content of your research in the best way possible. This may be a viable option for your long term needs as most of these specialized firms continue to keep up with the changes as they come so that you do not have to. Also, this option is immediate. Contact Ken Berry at KBerry@Jibunu.com

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

    • Your information will never be shared or sold.
    • NEMRA would like at least one phone number: work, cell or home. We won't call without good reason.
    • Work or home, whichever you prefer. NEMRA uses this to plan regional events.