The Clear Group is a company which specialises in a range of different insurances. Their main method of growth is acquiring other insurance companies and adding them under the Clear umbrella.
The Clear Group had recently added some new companies/departments and were in desperate need for a new website. The layout was dated, the structure was confusing, and there was a lot of content.
The front page uses CSS animation to get the effects you see. The slider uses an unordered list and the panels beneath uses layered divs for the hover-over effect, as does the menu.
The menu was not the easiest to do, as it required positioning certain elements in certain ways; but as you can see, the end result it does work.
Clear specified that not every page would have content, but instead, some were to act as landing pages. These landing pages would essentially act as an introduction to the main content pages, to help visitors find the information they need, rather than getting lost in the web.
The panels here use the same techniques as the panels on the front page.
As you view the site, you may notice that each page uses a different image from the last. These are page specific images relating to the content/product you are viewing; this was achieved using CSS and gradient effects.
This is also the first instance of using a sidebar. The sidebars have content-specific modules for each of the pages; some are used on multiple pages and some are unique to one page only.
The content pages are the ultimate destination for a visitor. These pages are where Clear want to guide the visitors to for all the information/product they may be looking for.
The content uses accordions, specialised lists, and custom shortcodes, to suit the look and style of the site; these aren't your regular plugins.
At the bottom of the page, there are the client testimonials, as well as "specialist" information.
The sidebar modules here also display the "specialist" information, this time as a module. These modules display an individual's information as they are the specialist for that product.
Also included is the "call me back" function, which essentially sends the visitor to a form to complete and someone will call them back.
Underneath the specialist is a section for two different modules. One is for "related products" which essentially displays a styled box to a related product to the one they were viewing (nb: the related products feature has since been removed). The other is for case studies, which, when clicked, opens up a popup module to display a case study relating to the product. This keeps the page length short, but also provides additional information to support the product.
I'd like to make a special note of the "Our People" page. This was not an easy task.
The Clear Group have a lot of employees, and every single one of them needed to be listed. On the old site, this meant clicking through a lot of pages.
For this page, created a script which pulled all the employee details from their previous pages, and compiled them into separate files depending on their department. The information was literally their name, role, phone number, and some text.
The script then used that information to create the layout you see being used, saving them as a separate file, but with all the formatting. The script also had to create their emails using their names, as well as assign the correct image for them using their initials. It wasn't fully automated, some manual changes were needed for the odd apostrophe and separate email, but it did a lot of the leg-work.
Using the newly create and freshly formatted files, I was then able to copy the content straight into the article as the accordions were included in the formatting.
Every person had a professional photo taken of them to use on this page. Luckily these were sent over to me.
However, these images needed to be cropped and optimised for the site. You can imagine that this wouldn't be a simple and short task, so I created a batch job, which cropped, resized, and saved all the raw images ready for web-use. These were uploaded to the site, and are automatically displayed using the method described above; people without a photo use a default image, which is saved under their name, and any updates simply need to overwrite the one in place.
The Clear Group wanted a blog feature on their site for news articles and updates. Joomla by default does not come with these features, so I had to source and install a third party plugin to get the features in place. This wasn't an easy task as none of the plugins worked as advertised immediately (some not at all). Working with a colleague of mine, we managed to source a plugin which did most of the heavy lifting and modified it to a) work, and b) have the features and styling which our client needed.
