The project


For Rubicon I focussed mainly on the development side of the project. It came down to a close collaboration between the client (Rubicon), Oscar Keuter (the graphic designer at 100mm), and me. 

The challenge of this project came down to the vast amount of different types of content, and their relations to one another. Each service is related to an event, a case study, and a news message. And all these relations need to be managed between each other.

The approach


A good foundation is vital to a project with a lot of data. We made a flowchart to divide all the types of content and page layouts needed. Then we decided on the best platform to build it on: Craft CMS.

Because of it's ease of use, and the relationship engine built right in the core, we were able to keep complex relationships a breeze to maintain. For the front-end we chose the ever-popular Bootstrap framework, making the layout perfectly responsive for all devices.

Flippin' cards


Less clicks, more interaction


We decided to use flip-cards for the upcoming events on the homepage. Users can find more details of the event without the need to click, or leave the page their on. 

With responsiveness in mind, we added the effect on hover for desktop users, and a button to trigger the flip for touch devices. This makes for a seamless experience, no matter what device you're on.

Flipcards

Responsive drawer menu


The menu is divided in two sections: four main services, right at the top of the site, and the submenu behind the sliding drawer menu. On mobile, we move the two menu's together into one easy to navigate structure.

Will your project be the next case-study?

Contact me!