Justin Luster posted the following on June 21, 2012 in the SSI Web Product Blog at http://www.sawtoothsoftware.com/product-blog/category/ssi-web.
----------
In SSI Web v8 we will soon be adding some improvements to the way mobile devices display surveys. In the meantime here are some things that you can do to improve the look and feel of your surveys on mobile devices.
Go to Global Setting under the HTML Head Tag area. Add the following:
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<!–[if !IE]> –>
<link rel=”stylesheet” type=”text/css” href=”[%GraphicsPath()%]your_mobile.css” media=”only screen and (max-device-width: 600px)”>
<!– <![endif]–>
The first line automatically zooms the screen in so that respondents can better see it on a mobile device.
The next part includes a custom style-sheet “your_mobile.css”. If the device accessing the survey has a screen size 600px or less this style will be used.
Create a mobile style sheet and upload it to your graphics folder. In this custom style sheet you can overwrite some of the base style rules to optimize the display for mobile.
Test on the devices that you think your respondents will be using (iPhone, Android, etc.).
Below is an example of what could be placed in your custom mobile style sheet. This was built for v8 but v7 should be very similar. A few more tweaks will need to be made for v6.
body
{
background-color: #FFFFFF; /* Background color */
color: #222; /* Foreground color used for text */
font-family: Helvetica;
font-size: 14px;
margin: 0; /* Amount of negative space around the outside of the body */
padding: 0; /* Amount of negative space around the inside of the body */
}
.question
{
margin-left: 0px;
margin-right: 0px;
width: 97%;
padding: 3px;
}
.page
{
width: 100%;
}
#invisible_submit
{
display: none;
}
.graphical_next_button, .graphical_previous_button
{
width: 100px;
height: 70px;
background-color: #666666;
-moz-border-radius: 15px 15px 15px 15px;
border-radius: 15px 15px 15px 15px;
}
.button_highlight
{
background-color: #e2e2e2;
}
.page_header
{
margin: 0;
padding: 0;
background-color: #ccc;
border-bottom: 1px solid #666;
color: #222;
display: block;
font-size: 20px;
font-weight: bold;
padding: 10px 0;
text-align: center;
text-decoration: none;
}
.openend textarea
{
width: 100%;
}
.options textarea
{
width: 100%px;
}
.grid textarea
{
width: 100%;
}
.text_box
{
width: 100%px;
}
.grid .text_box
{
width: 100%;
}
.indent
{
margin-left: 0px;
}
/*For text boxes and combo boxes*/
input, select
{
font-size: 20px;
}
.progress_bar
{
width: 90%;
}
