Canvas gives you the flexibility to create event registration sites that are beautiful on all screen sizes, from mobile phones to large monitors. Website design that is flexible enough to look great on all devices is called Responsive Design.
All of the templates available in Canvas are responsive out of the box. This means that they resize appropriately based on the size of the browser window. In some cases, you will see noticeable design changes when you change from a desktop to a mobile view of any given template.
Here is the Serene template, as an example. While the desktop and tablet previews are very similar, the layout of the mobile view lays out content differently, in order to optimize for mobile.
On your sitepage, you can switch among desktop, tablet, and mobile previews using the Responsive Preview icons in the upper left corner.
Best Practice #1: For a responsive design, start large, then fine-tune.
Our responsive designs use breakpoints to determine which version of your design to show. Breakpoints tell the browser that, if the screen is less than a certain size, override the larger design with the smaller one. This means that style changes to the desktop design will affect desktop, tablet, and mobile, while changes to the mobile design will only affect mobile. For this reason, you should do the majority of your design editing on the desktop design. From there, you can refine the tablet and, finally, mobile design if need-be, to get your desired result.
Where will my changes appear?**
|
If you change styles on... |
Your changes will affect... |
|
Desktop |
Desktop, tablet, and mobile |
|
Tablet |
Tablet and mobile |
|
Mobile |
Mobile only |
** This matrix applies to style changes only, defined as anything changing how the elements on your page appear, including color, size, borders, backgrounds, fonts, and more. If you make changes to the content of the page, such as adding a new element or deleting an element, this will affect your design for all breakpoints, regardless of which breakpoint you are viewing when you make the change.
Once you are happy with your desktop layout, popular changes to tablet and mobile include:
- Adjust the font size to be smaller
- Replace a wide background image with a tall one
- Adjust width or height of elements
Best Practice #2: Use proportional sizing to keep elements at their best
Imagine you are designing an outfit for every member of a family to wear for a family photo. The family has a 6’ tall parent and a 5’1 parent, a teenager, and a first-grader. Even though you know you want all of the outfits to match, the same design won’t look good on all of those different sized bodies. While the lettering on Dad’s shirt might be 4” tall and just right, 4” tall lettering for the first-grader will be too big to fit all of the text on the smaller garment.
This is where proportional sizing, as opposed to absolute sizing, comes into play.
Proportional Sizing: Set the size of an element based on its relationship to a containing element or a related element, such as a percentage or “auto”
Absolute Sizing: Set the size of an element based on a concrete value, such as a number of pixels
Let’s take a look at the template Legacy. In this template, the agenda has a width of 80%. This means that the agenda will be 80% as wide as the box it is inside of.
Remember, width is set in the Dimension settings.
A percentage-based width means that the agenda fits comfortably on the screen on all screen sizes. These examples simulate a large desktop, a laptop, a tablet, and a mobile screen.
Setting a proportional width allows your element to adjust itself to the size of the screen, and will prevent your guests from having to zoom in or out to see the data on your registration site.
Best Practice #3: Break it Up
Large static elements, such as background images containing text, logos, and other elements, do not make for the best mobile-responsive designs because as they scale, they do not adapt well to screens of different dimensions without distortion. Rather than filling your page with a static element, think about breaking it into layers by type of content (e.g. separate backgrounds from text). Using text elements instead of including your text in the image will not only respond better to changes to the browser size, it will also allow you to take better advantage of Dynamic Elements, which pre-fill information about your event to make sure that your event page is always up-to-date.
Best Practice #4: Think in two dimensions
While the majority of desktop and tablet visitors to your registration page will be using browsers that are wider than they are tall (landscape), most mobile visitors will be viewing your site in a portrait orientation. To take advantage of your available browser space most effectively, here are some tips:
- Turn rows into columns
- For elements that are wide and not tall, select the containing element in the mobile view, and change the Direction setting in the Alignment menu from a row to a column. This will cause your data to display top to bottom instead of left to right when a mobile user views it. See this example in the Vibrant template.
- Enable wrap
Another way to make sure that your content displays well is to set it to wrap, also within the Alignment menu. The wrap setting takes elements that do not fit horizontally on the screen and moves them to a new row, just like text. It is handy when you want to fit more than one element in a row, but know that they can’t all fit. You can set wrap at the desktop level, and it will come into effect only when the screen is small enough to need it.
In this example, the social media icons wrap on a mobile device because only 4 can fit on one line. Like with row and column, you set wrap at the containing element level. In this case, that is the box around the social media icons, rather than one of the icons itself.
- Leverage min and max
In the Dimension menu, you can specify the height and width of an element. However, sometimes even a proportional height or width doesn’t give you the flexibility you need. For this case, you can use min-height and max-width for more control.
Min Height dictates that an element must be at least the specified height. Max Width dictates that an element cannot be greater than the specified width. Both Min Height and Max Width override the height or width set if they are in conflict.
For example, in the Bold template, each presenter box has a width of 500px, but a max width of 90%. This ensures that, if the screen is not wide enough to accommodate a 500px box, the max width overrides the width and makes the box small enough to fit.
Generally, if your width/height is in pixels, your min/max should be a percentage, and vice versa.
Keep in mind, if you are using pre-made templates, many of these tips are followed by default so you won’t have to do anything.
Best Practice #5: Prioritize what is important
Due to the smaller real estate on a mobile screen, your page will look its best if it is optimized around the most crucial information for attendees to access, rather than focuses on making the mobile layout contain every element on the desktop layout.
Want to hide an element completely? As discussed above, deleting an element from your page will impact all screen sizes, regardless of which view you are on when you do the delete action. However, some elements do not work well on mobile, such as navigation bars, large images, and animations. You can hide any element by navigating to the screen size you want to affect, clicking on the element, then using the Advanced menu to change Display to None. The Retro template gives an example of this for the navigation bar.
NOTE: To un-hide an element you have hidden, use the Layers Manager to find the element and select it, then change Display to Block.
You can hide elements of all sizes from full sections to individual images or text. For example, these modifications to the Bold template show how you could hide just the speakers’ images for mobile view, or hide their bios, to give mobile variations that take up less space.
---
Event Farm’s Canvas templates already incorporate these best practices in the pre-made content, but customizing even further on mobile is up to you. By following these tips and making sure to use the responsive previews to simulate your registration page on different sized screens, you’re destined for a beautiful, custom registration experience that’s well-tailored to visitors on all types of devices.