Mobile friendly contest

More and more people are using mobile devices to browse internet, to check emails, go on Facebook. These are places where your contest is promoted by you or by users themselves. Imagine what if the mobile user can enter your contest and it provides excellent user experience, so the user can fully participate in the contest: browse, vote or enter the contest? Or in other scenario sign up on desktop and then with mobile device submit entries or vote when it’s more convenient?
Such experience could be quite easily provided  by responsive design.

But what is responsive design?

Responsive design distinguish user’s screen size and other features of the device and optimizes usage to its opportunities and limitations. In Competizer it’s realized by CSS media queries. They are implemented in all built-in templates. If you use them the contest website would be displayed well on desktop screens and on mobile devices.

What does it mean, that the website displays well?

  • it has to be readable at glance
  • provide  quick access to most important content
  • the layout that helps to view the content, get to related elements or interact with the page
  • use mobile friendly technologies.

How to deliver responsive design?

The significant part of the job is to think what is most important for contest users? How many items is going to be in main menu? How are you going to arrange side part of the website? Knowing this you can choose one of built-in templates. Each of them provides different layouts for smaller screens. If any of the predefined layout doesn’t meet all your requirements you can adjust them or create your own template using media queries for responsiveness.

Remember about responsiveness also while editing custom pages: avoid using tables to create layout, remove image width and height to allow fit the image to screen size.

How to test responsive design?

There are few online tools that let you quickly check your contest website for a different screen sizes. You can also just change the size of your browser window to achieve the same effect.  This way you can check how the layout and particular elements fits the screen. For more  for accurate testing always test on the real devices. There you can check user’s experience with navigation using touch screens and without mouse.

 

Related help

Related stats

Comments

comments

Comments are closed.