Managing your content in responsive templates

20141125_eventsforce_marcelo_zuniga_17625-1By Marcello Zuniga, Technical Support Specialist

We’re really pleased that so many of our clients are using our responsive templates to great effect. If you haven’t used these templates before, they ensure that website content will automatically change layout when it detects the device it is being displayed on. This means that you can be confident that no matter which type of mobile device or computer screen size being used, the content will always do the right thing and maintain a good layout.

We recently had a client ask us for some top-tips on getting the best looking websites using the Eventsforce Responsive Standard Design template or a responsive custom template. We were happy to help by outlining four key areas for them to consider, and wanted to share these with you as well.

TOP TIP 1 – Tables:

Responsive templates do not like fixed width tables as these prevent the table from resizing on narrower devices. As an alternative, we recommend you use percentages. For example, you could make a table with four columns and enter a width value of 100% in the Table Properties, and a width value of 25% in Cell Properties for each of the four cells. Doing this will mean that when the table is viewed on a narrow device, the columns will maintain the same width relative to the size of the overall table.

TOP TIP 2 – Images:

By default, images will dynamically resize based on the screen size of the device and the size of the image, so we recommend that you upload images in PNG or JPEG format as these will be resized correctly. You can use GIF or TIFF images but we don’t recommend this as they may not be resized correctly by some browsers. We commonly get asked by clients how to make an image fill the full width of the page. The answer is really simple – just add: “width: 100%” to the image styles in the advanced section of the Insert/edit image setting. If you’ve already uploaded an image you can still do this by editing this image.

One point though, adding width:100% is not recommended for small or low resolution images as stretching them can cause them to look blurred or pixelated.

TOP TIP 3 – iframes

Did you know that if you are working with an iframe and the host website is responsive you can use the Eventsforce Embedded (iframe) template for the registration process? It works really well with the iframe resizing as the host website resizes. Make sure you don’t use fixed widths though as this will cause issues with the iframe being able to resize.

TOP TIP 4 – Testing

Testing is an important part of any software project or implementation, and working in Eventsforce should be no different. We always advise that you test your events before they go live. Similarly when using responsive templates we recommend you test your events on devices of different sizes. Alternatively you can use the “developer” tools in Chrome to simulate different device sizes.

If you have any questions about this or want to discuss any of this further, please contact our Technical Support team on +44 (0)845 680 6826 or email support@eventsforce.com