Welcome, Guest
Username: Password: Remember me

TOPIC: Mobile vs. PC detect and redirect

Mobile vs. PC detect and redirect 2 years 2 months ago #84291

  • rvenkat
  • rvenkat's Avatar
  • OFFLINE
  • Senior Lime
  • Posts: 42
  • Thank you received: 1
  • Karma: 2
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
The administrator has disabled public write access.

Re: Mobile vs. PC detect and redirect 2 years 2 months ago #84292

  • c_schmitz
  • c_schmitz's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 810
  • Thank you received: 115
  • Karma: 93
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
Support us, too. Donate to the LimeSurvey project and help keep us going!
The administrator has disabled public write access.

Re: Mobile vs. PC detect and redirect 2 years 2 months ago #84331

  • rvenkat
  • rvenkat's Avatar
  • OFFLINE
  • Senior Lime
  • Posts: 42
  • Thank you received: 1
  • Karma: 2
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.
The administrator has disabled public write access.

Re: Mobile vs. PC detect and redirect 1 year 10 months ago #90139

  • rpjaiswal
  • rpjaiswal's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 1
  • Karma: 0
Thanx for help
The administrator has disabled public write access.

Re: Mobile vs. PC detect and redirect 1 year 10 months ago #90177

  • DenisChenu
  • DenisChenu's Avatar
  • OFFLINE
  • Moderator Lime
  • Posts: 6451
  • Thank you received: 844
  • Karma: 249
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"
Last Edit: 1 year 10 months ago by DenisChenu.
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.180 seconds
Donation Image