Working on Rosmarins Day Camp web site with the team at Volum8 was a lot of fun. We took a very small site and expanded it to a beautiful responsive design. This was more than just a redesign though, we took steps integrating some of the latest technologies to create a solid experience, while also modernizing the company brand.
In the design phase we made choices early on to integrate morphing Scalable Vector Graphics (SVG), Ajax navigation, Background video and Parallax imagery.
As you will see, the company logo is an SVG, broken down into a few pieces to allow interactivity. When a user navigates to a page, the content is called with jQuery Ajax, and then populated into the page when ready. The logo opens revealing a submenu also delivered via Ajax. Since this was a camp site, we thought that showing a brief spinning compass animation while the Ajax request was a subtle way to show the visitor we were fetching data. And while getting this data via Ajax, we overcame many development challenges working with WordPress and loading page content dynamically.
Since we are fans of site maps (at least useful ones) we integrated a collapsible version in the footer, with a simple link structure. You may also notice the spinning compass link to show and hide the element. A nice little easter egg for the footer. We used SASS to write our custom styling. Then with jQuery and Animate.css we added sprinkles of interactivity through the site.
As a responsive design, we ensured to deliver a consistent and strong mobile and tablet experience for all users, tested thoroughly on all devices.
http://www.rosmarinsdaycamp.com/