ResponsiveLime – Making LimeSurvey responsive with Foundation

LimeSurvey is a powerful tool that helps us to deliver questionnaires for User Experience evaluations or the survey for our annual akquinet Technology Radar. However, we were unhappy with the structure and styling of the survey, especially with the missing responsiveness for different screen sizes. LimeSurvey’s default templates build on a table layout and jQuery UI. Recently, we used the CSS framework Foundation and liked its fluid grid and the easy customization compared to Bootstrap. That is why, we chose Foundation to transform the template’s table structure into a responsive grid. For a detailed comparison of Bootstrap and Foundation that can help to make a choice based on the project’s requirements, see Gagan Naidu’s comparison of Bootstrap 3 vs Foundation 5. Here you can see a preview of ResponsiveLime for desktop and mobile screens in comparison to the default template: ResponsiveLime desktop preview Figure 1. Preview of ResponsiveLime (left) and LimeSurvey’s default template (right) for a screen width of 1100px. ResponsiveLime smartphone preview Figure 2. Preview of ResponsiveLime (left) and LimeSurvey’s default template (right) for a screen width of 320px (e.g., iPhone 5S).

Our template is still in its childhood, but we want to share our effort with you and invite you to contribute: https://github.com/akquinet/ResponsiveLime

If you have any questions or remarks, drop us a line: Nicole Charlier (nicole.charlier [at] akquinet.de)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s