Over half of all quiz traffic comes from mobile devices. At this point responsive design is not an option for quizzes, it’s a requirement. At Interact, we designed our quizzes to provide an optimal experience no matter what device you are on, and the result is a fully responsive quiz module that works on everything from iphones to TV screens.
Fortunately, all Interact quizzes automatically respond to varying screen sizes, but there are still things you can do to make sure the quiz scales down nicely as the screen size changes.
First, know when the size changes. Interact quizzes resize in steps based on the size of the window in which they are being displayed. The biggest one is any screen that’s larger than 960px wide, which is almost all laptops and desktops. Then there are two different steps down for varying sizes of tablets, and then a final small size made for iphones and android phones.
Second, make sure your content fits.
Quiz titles: Should be less than 100 characters
Quiz questions: Should also be less than 100 characters
Quiz answers (to the questions): Should each be 80 characters or less
Quiz results: Should be between 200 and 500 characters
Now these are recommendations based on what fits well on the smallest device, which then scales up as the screen gets larger. When dealing with quizzes, which get so much traffic from mobile, it works well to think mobile first.
To make a responsive quiz, head to tryinteract.com