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: Figure 1. Preview of ResponsiveLime (left) and LimeSurvey’s default template (right) for a screen width of 1100px.Figure 2. Preview of ResponsiveLime (left) and LimeSurvey’s default template (right) for a screen width of 320px (e.g., iPhone 5S).