Mobile vs. PC detect and redirect

More
5 years 3 months ago #84291 by rvenkat
rvenkat created the topic: Mobile vs. PC detect and redirect
Survey respondents are increasingly using mobile devices (smartphones and tablets) to respond to surveys. Using a Limesurvey template designed for PC will not provide a good user experience on smaller screens. Radio buttons and checkboxes will be cumbersome on small screens if you use templates designed for larger PC/laptop screens using CSS.

How to provide the best possible user experience to both PC and mobile users?
Here is a solution that works for me.

First get a template that is designed for smartphone/tablets (see limesurvey-templates.com).

Steps:
1. Create survey using your favorite Limesurvey template (PC survey)
2. Copy the survey (give it a different name) and use the smartphone/tablet survey. (hint: only 1-2 questions per group, to ensure easy navigation on small screens).
3. Save the following PHP script in any folder. I would recommend creating a folder for each survey or client and naming the script file as index.php (but this is not mandatory).
For example create a folder called survey1 ( www.mysite.com/survey1 ) and place the index.php file in that folder. Change the last two lines of the script to point to your mobile survey and PC survey URLs respectively. In your survey invite, you only need to provide the short URL " www.mysite.com/survey1 ". The script will detect the device/browser type and redirect the user to the PC or mobile version of the survey.
4. You will have two survey databases to deal with. You can manually append the data from one CSV or SPSS file into the other (this is easy if you survey runs only for a specific time period). In my case, I have a script that runs automatically at defined intervals and combines the data.

The script is courtesy of mobiforge.com/developing/story/lightweight-device-detection-php .

PLEASE NOTE: The script is based on 90 or so "well-known mobile browser User-Agent string snippets." I have so far tested it on iPhone, Blackberry and PC. The survey loads very quickly. Please test it before using it. I am not responsible for errors or failures.


<?php
 
$mobile_browser = '0';
 
if(preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone)/i',
    strtolower($_SERVER['HTTP_USER_AGENT']))){
    $mobile_browser++;
    }
 
if((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml')>0) or 
    ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))){
    $mobile_browser++;
    }
 
$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'],0,4));
$mobile_agents = array(
    'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
    'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
    'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
    'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
    'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
    'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
    'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
    'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
    'wapr','webc','winw','winw','xda','xda-');
 
if(in_array($mobile_ua,$mobile_agents)){
    $mobile_browser++;
    }
if (strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini')>0) {
    $mobile_browser++;
    }
if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows')>0) {
    $mobile_browser=0;
    }
 
 
if($mobile_browser>0){
   header('Location: http://www.mysite.com/mobilesurvey');
   } else {
   header('Location: http://www.mysite.com/pcsurvey');
   }
 
?>
 

If Limesurvey has a built-in browser detection feature, that would be really helpful. If a single survey can be displayed using two different templates based on device type, then the back-end integration of data from two different databases can be avoided.

But in the meanwhile, the solution I have might be helpful to others.


rvenkat

Please Log in to join the conversation.

More
5 years 3 months ago #84292 by c_schmitz
c_schmitz replied the topic: Mobile vs. PC detect and redirect
Thank you for posting this. While it is a decent solution it seems to me kind of an overkill.
IMHO the only difference between a mobile device and a PC at home is the resolution.

And you can use CSS to check for the resolution. Simple example:

www.warriorforum.com/website-design/1003...ion.html#post5457411

Best regards

Carsten Schmitz
LimeSurvey project leader

Please Log in to join the conversation.

More
5 years 3 months ago #84331 by rvenkat
rvenkat replied the topic: Mobile vs. PC detect and redirect
What my survey respondents struggle with is the arrays and multiple choice question types with many choices. Answering these questions using iPhone or any small screen device is cumbersome.

We use 7-point scales or sometimes 10 or 11-point scales (e.g., 0-10 NPS scale) in research studies. Selecting a response is challenging for many people when this is presented in an array (radio buttons). Same is true when there are lot of multiple choice options (checkbox).

You can zoom in or enlarge the screen content which makes the radio buttons and checkboxes appear bigger. This makes selection easier, but it involves lot of scrolling horizontally and vertically.

You can alleviate the problem by using drop-downs instead of arrays (Presenting a 7-point or 10-point scale in an array vs. drop-down may not yield equivalent results. I will not address this methodological issue here).

In a template that is optimized for the small screen, you can use custom-designed images radio buttons and checkboxes with larger dimensions, making it easy to select even for those with stubby fingers. ;-) No need to zooom in. There is no horizontal scrolling needed even if there are several items/questions in an array. In limited testing done so far, the user experience is better.

If you are saying that the same result can be achieved through CSS, then that's fine. I haven't found that to be the case in the free and paid templates I've used so far.

Please Log in to join the conversation.

More
4 years 11 months ago #90139 by rpjaiswal
rpjaiswal replied the topic: Mobile vs. PC detect and redirect
Thanx for help

Please Log in to join the conversation.

More
4 years 11 months ago - 4 years 11 months ago #90177 by DenisChenu
DenisChenu replied the topic: Mobile vs. PC detect and redirect

In a template that is optimized for the small screen, you can use custom-designed images radio buttons and checkboxes with larger dimensions, making it easy to select even for those with stubby fingers.

No need big bitton, but big label ...

And leave the checkbox/radio like the navigator want to show, because the navigator are adapted at the screen.

CSS3 media query for some specific question type. The only problem is array, we can put directly a display:block to each celle because there are no real label for each answer.

You can have a look to gitorious.org/skeletonquest/skeletonquest , for 1.92 LS. No time (or money) to be adapted for 2.0. Have already worked on a skelecton with "bigButton" : demonstration.sondages.pro/36357/lang-en no time (or money) to ending this project (actually only big button for radio)(restared from scratch).

Use js to select a template is a "Bad html dev" solution.

Denis

PS: css bootstrap ( twitter.github.com/bootstrap/base-css.html#forms ) used by some big web site don't use "big button"

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .
Last Edit: 4 years 11 months ago by DenisChenu.

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!