The ePly system will automatically adjust registration forms to fit the screens of mobile devices on forms created after December 18, 2013 or on forms manually converted for you by ePly.
While the system takes care of most of the responsive rendering, there are still a few things that you can do to ensure the best mobile experience for your registrants.
- If you use an html table in the header or in another area of your form, make sure any widths are expressed as a percentage rather than a fixed number of pixels. Percentages will allow the table to adjust based on the screen it's being view on.
- Use a stacked design in the form header - if you can put a logo at the very top with text below it will look better on a mobile device than if you put a logo on the left and text directly across from it on the right. When an image is on it's own row it has move room to re-size when small screens are used.
- Avoid putting text in images - Images will automatically re-size to fit smaller screens, so if you text is in the image it may become unreadable and require users to zoom in to see it.
- If you are using a group section on a form, the vertical layout works best. If you use a horizontal layout, users may need to scroll sideways on their mobile devices to see all of the fields in this section.
Always test your forms on your mobile device to ensure you are happy with the layout. If you need help please contact us.