Eventsforce Masterclass – Responsive Design

Oso_for_WordpressBy Osoble Osman, Technical Support Specialist

Browsing habits have changed. Today people move freely between mobile and desktop devices and this makes responsive web design (RWD) vital to your business. There’s no doubt that being responsive will give your event website an edge over those that aren’t but what exactly is responsive web design?

Putting it simply, responsive website templates ensure that your 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.

So what are the benefits?

The benefits of responsive website design go much further than just making a page look nicer, and include improved SEO, higher conversion rates, only needing to publish content once, consolidated analytics and consistent branding.

See for yourself

Standard web page

Standard web page

 Web page on a mobile device

Responsive web page

Top tips

When you are creating content for your responsive template there are a few guidelines you should follow.

Tables

We recommend that you avoid using fixed widths in your tables. Fixed widths will prevent the table from resizing on narrower devices. An alternative is to use percentages. Example:

1 – Create a table with four columns

2 – Go to Table > Table Properties > Width and enter a value of 100%

3 – Go to Table > Cell Properties > Width and enter a values to 25%

When the table is viewed on a narrow device, the columns will maintain the same width relative to the size of the overall table

Images

By default, images will dynamically resize based on the screen size of the device and the size of the image. We recommend that you upload images in PNG or JPEG format as these will be resized correctly. GIF or TIFF images may not be resized correctly by some browsers. If you want an image to fill the full width of a page, add: “width: 100%” to the image styles:

1 – Insert and upload an image in the content editor

2 – Click the Advanced tab in the Insert/edit image dialog box

3 – In the Style field add “width: 100%”

4 – Click OK

If you have already uploaded an image, select the image first, click the Insert/edit image menu item and follow steps 2 to 4 above. Adding width:100% is not recommended for small or low resolution images as stretching them can cause them to look blurred or pixelated.

iframes

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. The iframe will resize as the host website resizes. To ensure the content within the iframe resizes, fixed widths should be avoided.

Testing

We always advise that you test your events before launching them. When using responsive templates always test your events on devices of different sizes. Alternatively you can use the “developer” tools in Chrome to simulate different device sizes:

https://developers.google.com/web/tools/chrome-devtools/iterate/device-mode/?hl=en.

For more information on selecting a responsive template you can read our article: “Creating a responsive template“. If you would like to discuss any of this further please contact our Technical Support team on 0845 680 6826 or email support@eventsforce.com.