Eco Coatings

We had the pleasure of working again with Angus from Front Design on another website project, who asked us to develop a concrete5 site from a website design he had developed for Eco Coatings. We developed for Angus and his client a highly mobile responsive site, that is retina ready and easy to maintain.

Associating pages with one another

The design Angus developed is clean and highly navigable, but actually involves several different types of pages and interrelations. A visitor, for example, can quickly navigate from a project to the products that were used within it.

We recognised that we needed to develop the site in a way that would allow Eco Coatings to easily add new products, projects, applications, application types, industry and service types. Eco Coatings needed to be able to relate projects with products, products with projects, products with services, projects with industry types, etc.

To achieve this, we created these different page types, using custom page attributes for their associated pieces of data and enabled these for use within concrete5's composer. This provides a simple form for each different kind of page, removing the need to consider formatting or where a page needs to be placed in the sitemap.

In the cases where we needed to 'tag' a page with categories for filtering purposes (where there would be no actual page for the category), we used 'select' type attributes, providing a simple list of checkboxes to select. New category types can be easily added in the future via the dashboard.

However, we identified some cases where we wanted to associate a page with one or more pages. There is already a handy custom attribute type for concrete5 available that can select an individual page - this is great for 1:1 relationships, but we needed to create one to many relationships.

So for this project we decided to build a custom attribute that could do this. It's a custom page attribute that can either be used in the composer or a page's custom page attribute tab to pick one or more pages. The attribute itself simply returns a list of pages or page links, ensuring that any updates to page names are reflected.

Our new 'Multi Page Selector Attribute' in action on a Composer form.

We're planning to release this custom attribute type either to the concrete5 marketplace or github in the near future.

Other features of note

An expanding/contracting fixed header

As you scroll the site, the header at the top remains fixed in place, but we adjusted its appearance using a little Javascript to animate a change in height and opacity. Try scrolling any page on the site to see this in action.

Animated filtering of products and projects

The grids of products and projects can be filtered by their applications and industries respectively. For example, try changing the drop down on the projects list on this page (or alternatively clicking on the list of industries in the footer which achieves the same effect).

Retina Ready graphics

The logos and icons used throughout the site were created as SVGs and a custom icon font. This means that on devices with high density screens ('retina' screens), the graphics will always appear sharp and clear.

Popup Youtube videos with placeholder images

Each project on the site can have a video associated with it, along with a series of images in a slideshow scroller. We wanted to have control over the image used as the youtube placeholder image, so we adjusted the page to open the videos in a lightbox (using the amazing magnific-popup jQuery plugin) instead of embedding the video into the slideshow directly. We also customised the appearance of the youtube video to better fit the site's colourscheme. Have a look at the scroller on this project page and try clicking on the first slide to trigger the video.

The contact form with some example validation errors

A validating contact form, with in-field labels.

Using Javascript and a basic override of the form block, we added some validation to the contact form's fields, with some clear feedback. On the fields we also implemented 'in field labels', giving the form a clean feel. Finally, we tweaked the colours on the Captcha to match the rest of the design!

A slider of featured projects

On the home page we implemented a rotating 'carousel' of projects that are marked as 'featured'. We took advantage of the ability of concrete5's page list block to filter a list of pages by the 'is_featured' attribute, providing a very simple way to mark projects as featured via the composer.

Our 'Edit in composer' button

As this site is heavily composer driven, we found it incredibly handy to install our previously discussed 'Edit in Composer' button to the toolbar. This provides a very direct way for Eco Coatings to jump to editing a page via the composer.

Visit Eco Coatings to see the completed site.