Vontobel went through a glorious rebrand in late 2017 which gave us the opportunity to build them a new set of templates which would adhere closely to these new guidelines.

Based on one of our most common templates the first iteration of the event template was set up to match the company’s existing branding, that was fairly outdated and not very digitally orientated.

After signing off and being very happy with the product, the company went through a large rebrand, bringing along with it a beautiful set of new brand guidelines for a better user experience.

Home page

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem vero ipsa nulla iure odio aperiam similique placeat veniam quo nihil vitae quia voluptatem sequi illo eos magnam, reiciendis, temporibus corporis?

Agenda page

The agenda page pulls information directly from the system cms and shows up as a set of tables and nested cells so we loop through this and replace each one to be a list item inside an unordered list for our styling.

Venue page

The venue page has a standard set of html content across the top, using a left and right column layout with an image in the right for the location.

The map was heavily customised from google maps and one of the more extensive customizations of google maps I’ve done.

Based on the event venue location we convert the address to long and lat using the google geolocation api and then style it using the standard google map json theming.

Speaker page

The speaker page lists out all the individual speakers at the event and this information is returned directly from the system cms.

For this template it appears that there is a single page for each speaker This is something that the system does not normally allow.

This was done through a customisation that allowed querystrings to be passed to a single page and then the relvent information is requested for that single speaker based on the id in the querystring making it appear as though every speaker has their own page.

We also heavily styled the registration form to be on brand, something that we usually try to avoid due to the heavy markup and limited access to generated elements.

The checkboxes and radio buttons were primary targets here as the default elements usually take on the browser defaults so we used a few different methods, some very basic such as a combination of input[type=“radio”]:checked + label:after css styles, and some javascript to move elements around to the correct markup structure to make the css work.

There was also an effort made to maintain accessibility which was something the brand guidelines themselves did not specify, and indeed the clients new branded website did not account for.

While this may seem a small enhancement for this who don’t require them, for those that do may mean the difference between filling in the form and aborting any registration process.