How to make your Qualtrics survey responsive to any screen size

Qualtrics is one of the best and most popular survey platforms out there, with robust question options and a ton of analytical tools. But despite the availability of a variety of design templates, it's always been tricky to maintain a consistent look and feel across multiple devices. 

This is increasingly problematic for one obvious reason -- your survey takers aren't always on their laptops or desktops. You want to offer your respondents an easy path to contributing to your survey, even if they're on a smartphone or tablet.  

The mobile-compatible survey templates offered by Qualtrics are functional, but I find the design too restrictive. A better option is to use the custom CSS options in Qualtrics to make your survey responsive, so it will maintain a consistent look and feel across any device. Here the steps I followed to create a responsive survey using Qualtrics. 

 [Full disclosure: I am not a designer by trade, so I imagine this process could be improved by someone who really knows what he or she is doing. But, hey, it worked for me.]

Preview: Here's the front page of the survey I created using this technique

The survey project at desktop, tablet, and mobile sizes. 

The survey project at desktop, tablet, and mobile sizes. 

Steps: 

 1. Create your new survey and populate it with some questions. Not all question types are compatible with touch-screen mobile devices, so stick with multiple choice, simple matrixes, and text entry questions as much as possible. 

2. Go to "Look & Feel" and select the "Blank" template. This template has the fewest CSS selectors we'll need to override in the custom CSS editor.  

3. Set the background image. For our example, I chose a very large raw image file from one of our web design conferences (Future of Web Design New York). I blurred the image in Pixelmator (you could use Photoshop or SUMO Paint or anything else you'd like), then cropped the image first to a square 2000 pixels tall and 2000 wide. I then created smaller versions that will display on smaller screen sizes (one 1024 pixel square and one 767 pixel square). 

There are a few reasons for doing things this way. Mobile users typically have less bandwidth, so you don't want to force them to load a giant image file. Also, scaling down your background image will help maintain a consistent look and feel with the placement of the image. 

In the Look & Feel editor, go to "Advanced" and select "+ Add Custom CSS." You should see a blank CSS editor. Here's where the magic happens. Place the following code in the window:

#SurveyEngineBody {
background: url(images/background_small.jpg) no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}

Replace the "images/background_small.jpg" with a link to the smallest of the three background images you created. This tells the site to load the mobile version unless otherwise instructed, so you're only loading whatever is absolutely necessary for the user. 

The "background-size: cover"  property is especially important to this part of the project. This basically tells the browser to make sure the image covers the entire background of the page, no matter what size it is. You'll need to use the "-moz" and "-webkit" prefixes to make it work on most modern browsers. 

Next we'll write a few basic media queries (the backbone of responsive web design) to load the larger images on larger screen sizes. I'll be adding two extra sizes to account for our two larger images, both based on iPad sizing (though remember that there are a billion tablets now, so this may not be a perfect solution for you). 

First, I add the following for our medium-sized browser window.  

@media only screen and (min-width: 767px) {
#SurveyEngineBody {
background-image: url(images/background_medium.jpg);
}
}

Then I add the big background image for screens wider than 1024 pixels: 

@media only screen and (min-width: 1024px) {
#SurveyEngineBody {
background-image: url(images/background_large.jpg);
}
}

Now, if you open the survey in a new browser, you should be able to manually resize the window and notice a slight "jump" as the browser loads different versions of the background image. Your background should also cover the entire screen behind your survey text.  

Speaking of text... 

4. Get your text looking right on every device. 

First you'll need to override a built-in feature of some mobile browsers (definitely iOS) that automatically resizes pixels based on what it thinks will render properly. Since you're defining what sizes go with what viewports, you want full control of this. So, go to "Look & Feel" > "Advanced" > "Header" and add the following code to the top of the box: 

 

<meta name="viewport" content="width=device-width">

This tells the site to render pixels based on the actual size of the screen, not what it thinks is most appropriate. Once this is done, your text should look the same whether the user's screen is 2000 pixels wide or 320 pixels wide — but only if you take advantage of the natural scalability of text on the web by setting your original text size in percentages, not pixels. For our sample project, I completely ignored the "Fonts" portion of the Look and Feel editor in favor of controlling this via CSS. 

I start by adding the font-family and font-size selectors to the main #SurveyEngineBody selector in the CSS editor, under our background image components: 

#SurveyEngineBody {
background: url(images/background_small.jpg) no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
font-size: 100%;
font-family: Arial;
}

This sets the base font and size for the site. I believe Qualtrics uses 12px as a base size.  

But we don't want all the fonts to be the same size throughout the survey. My sample project uses three sizes: One huge one for the big blue welcome message, another for the question text, and a third for the answer choices. 

The big blue welcome message is achieved by simply defining an h3 style in my CSS: 

#SurveyEngineBody h3 {
color: #02aedc;
font-size: 200%;
}

You'll have to apply the h3 tag to your welcome message in the survey editor. Just click on the text inside the question box and select the "Rich Text Editor" box. Then select "Source" and wrap anything you want big and blue inside the tag like this: 

<h3>Giant blue welcome message goes here</h3>

Now let's set the font sizes for the question text and question body. First, the question text: 

.Skin #SkinContent .QuestionText {
margin-top: 20px;
font-size: 120%;
}

You'll notice I also set a top margin to give each question some breathing room. 

Now we'll set up the question choices: 

.Skin #SkinContent .QuestionBody {
font-size: 120%;
}

You'll need to play with these to find the right size combination that works for you, but what you should see when you shrink your screen (or view the survey on a mobile device) is text that is equally readable on any screen. Which brings us to...

5. Using the box model for layout. 

You'll notice that the "Blank" template in Qualtrics leaves little room between the text and the edges of the browser. Fortunately squeezing the text toward the center is easy, and making it scale appropriately for mobile devices is as simple as adding some selectors to our already-existing media queries. 

First we'll use the box-sizing: border-box property on the main #SurveyEngineBody selector. This will enable us to add padding to the left and right sides of the screen to squeeze all that text toward the middle. Since we don't care what size screen people are using, we're going to set this property using percentages, not pixels.  

#SurveyEngineBody {
background: url(images/background_small.jpg) no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 5%;
font-size: 100%;
font-family: Arial;
}

Remember that this main selector is aimed at mobile devices (mobile-first web design being our goal), so the 2% padding on the left and right might not seem like much. And it isn't enough padding once the screen is widened to accomodate larger browsers. So we'll need to change that percentage in our media queries, giving us this: 

@media only screen and (min-width: 767px) {
#SurveyEngineBody {
background-image: url(images/background_medium.jpg);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-left: 10%;
padding-right: 10%;
}
}

@media only screen and (min-width: 1024px) {
#SurveyEngineBody {
background-image: url(images/background_large.jpg);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-left: 10%;
padding-right: 10%;
}
}

Now when you adjust your screen back and forth, you should always have some comfortable space around your text. 

6. Style your stuff. 

The default "Next" and "Back" buttons are pretty ugly, and they're too small for a good mobile experience. So now let's add some custom CSS to make them larger and more attractive.  

I'll start by adding some styles to the "Next" button: 

input#NextButton {
background-color: #02aedc;
color: #ffffff;
cursor: pointer;
border: none;
width: 80px;
height: 36px;
font-size: 120%;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

Most of the above is pretty self-explanatory, just some colors and font sizes, plus the border-radius property (with vendor prefixes) to curve the edges of the button slightly. You may choose to add gradients or shadows to get a more 3D appearance if that's what you're into. 

But wait, there's a problem. 

When viewed on Chrome or Firefox or Safari on a desktop, this is what the button looks like: 

Screen Shot 2013-03-18 at 4.55.09 PM.png

But on my iPad it looks like this:

tabletbutton.PNG

That's because iOS adds its own styling to input buttons, because yeah. To counteract this annoyance, you'll have to add "-webkit-appearance: none;" to the input#NextButton selector. 

I purposely made the Next button 80px wide to be a nice big target for tablets and desktops, but for smaller devices it's a good idea to make your touch targets even bigger. So I added one more media query that will target any device up to 480px wide and make the Next button stretch all the way across the screen.  

@media only screen and (max-width: 480px) {
input#NextButton {
width: 100%;
}
}

This gives us the following effect on an iPhone or similarly-sized device:

iPhoneNextButton.png

7. Target the small stuff.

Since we're not creating a site from scratch, but rather brutally hacking away at a template, there are bound to be one-off things that you'll want to fix when making your survey responsive. For example, the first question in our sample survey is a drop-down menu of country names.  

On the desktop, the drop-down selector looks fine: 

Screen Shot 2013-03-18 at 5.23.58 PM.png

But on my iPhone 5 it looks like this:

iphonemenu1.PNG

It's a little too wide, no? 

The solution was to target the drop-down box using "Inspect Element" in Chrome, and adding some styles to the CSS.  

select.ChoiceStructure.Selection {
width: 250px;
color: #000000;
}

 (The color property was necessary because while Chrome and iOS rendered the drop-down choices as black text on a white background, Firefox used the light-gray style we selected for our Question body. This is why testing is important.)

The result of this last tweak is that our drop-down menu looks like this on my iPhone: 

iphonemenu2.PNG

Much improved, no? You'll probably find some other things you'll want to tweak depending your question types, but the good news is most of them seem pretty fixable with a basic understanding of CSS. 

Conclusion

There are probably a hundred ways I'll add on to this technique as I create more surveys in Qualtrics. The really important thing is to give your users the ability to respond to your surveys whether they're in airport, in line at Starbucks, or at their desks, with a seamless experience across devices. 

Resources

Here's a few things that helped me figure some of this stuff out. Hopefully they can help you, too: