Web Design
and Build

A website for a global metal recycler, built on Bootstrap v4 with custom CSS and powered by a bespoke CMS


 
 
 
Project: EMR Group Website
Client: European Metal Recycling Ltd.
When: March - September 2020

In early 2020, just as the coronavirus pandemic began to grip the world, I was asked to design and develop EMR's 'Group' website.

Using EMR's new brand guidelines (developed in 2018 by Upp B2B in Salford Quays), I coded the CSS to accurately reflect the typographic styling and colour schemes, with a keen eye on detail to ensure the brand would be presented correctly across a range of devices.

...
Carousel example 1 (laptop and smartphone not to scale)
...
Carousel example 2 (laptop and smartphone not to scale)
...
Carousel example 3 (laptop and smartphone not to scale)

Harnessing the power of Bootstrap as the base CSS in the stack, I coded a custom stylesheet on top, making use of Bootstrap v4's built-in components including Accordion, Card, Carousel, Jumbotron and others.

A custom Content Management System (CMS) was developed by the very skilled Steve Wood, which handled the back-end and administrative requirements for EMR's Marketing Department, making modifications to copy and the posting of news items simple.

...
Custom navigation for both desktop and mobile screen sizes (laptop and smartphone not to scale)
...
Animated pull quotes divide certain pages to add variety and make the content more digestible (laptop and smartphone not to scale)
...
Considered user input areas and a clear footer, delineated by block and contrasting colour (laptop and smartphone not to scale)

The built-in component Navbar was too basic for what was required, so I developed a custom (and quite complicated) navigation to suit both desktop and mobile devices.

To add variety and movement, Animate.css coupled with the JavaScript library Wow.js was used to reveal pull quotes on certain pages.

Forms were carefully styled to stand out and be clear Calls To Action (CTAs) where necessary, making user input a breeze with feedback by way of a 'Thank You' return page.

...
Carousel examples 1, 2 and 3 (laptop and smartphone not to scale)

Harnessing the power of Bootstrap as the base CSS in the stack, I coded a custom stylesheet on top, making use of Bootstrap v4's built-in components including Accordion, Card, Carousel, Jumbotron and others.

A custom Content Management System (CMS) was developed by the very skilled Steve Wood, which handled the back-end and administrative requirements for EMR's Marketing Department, making modifications to copy and the posting of news items simple.

...
Custom navigation for both desktop and mobile screen sizes | Animated pull quotes divide certain pages to add variety and make the content more digestible | Considered user input areas and a clear footer, delineated by block and contrasting colour (laptop and smartphone not to scale)

The built-in component Navbar was too basic for what was required, so I developed a custom (and quite complicated) navigation to suit both desktop and mobile devices.

To add variety and movement, Animate.css coupled with the JavaScript library Wow.js was used to reveal pull quotes on certain pages.

Forms were carefully styled to stand out and be clear Calls To Action (CTAs) where necessary, making user input a breeze with feedback by way of a 'Thank You' return page.

Get in touch

For more information about Contains Graphic Images (Dan Yuen), hit the button in the top right.

If you would like to get in touch to discuss a project you have in mind, please contact me through LinkedIn or email info@containsgraphicimages.com