Responsive One Pager for ‘Raven&Co’ – a service that takes care of a lot of the administrative side of things we don’t enjoy. Nice touch with the flying Raven’s in the background. Think this might be the first One Pager we’ve reviewed with the new Instagram logo! Cheers for the very detailed build notes, we all appreciate it and I had no idea FontSquirrel had more Montserrat weights than Google Fonts.
"Simplicity + something super-cool" was the general design direction. We did keep things feeling very simple for Raven&Co, but used a few javascript enhancements to make the site feel polished, elegant, and discoverable.
It's a fairly low-contrast design in a lot of places, but we've taken care to make the responsive design adjust contrast and font-weight where needed to keep things readable and to keep it feeling right at all screen sizes.
The ravens flying across the top of the site are brought in via HTML5 video which autoplays once, then is retriggered with a setInterval every 20 seconds. Vide made integrating responsive background video a quick job, and made it straightforward to entirely skip loading the video on devices where it wouldn't autoplay anyway (such as iOS devices).
We used Tabby to handle the vertical tabs section without drama. Slick powers the testimonials slider.
The preloader smooths out the loading experience, but also has a 1-second kill timer, so that someone on a suuuuuper-slow connection can get on with reading the site before everything has loaded completely, and won't be stuck on the preloader indefinitely. The icon you see in the preloader is a single-path SVG with a two-stage animated fill.
Speaking of icons, every icon (including the logo) is being served up as a custom icon font. We used SVG icons from the wonderful Entypo set, and uploaded them to a new set in the IcoMoon App. From there it was one click to download the icon font and CSS file for the custom font. IcoMoon doesn't yet provide WOFF2 in their font packages, so we used Everything Font's converter to generate that. In keeping with the latest @font-face recommendations, we're only serving WOFF and WOFF2 files.
Montserrat is used throughout for the type. Psssst: FontSquirrel has several extra weights for free that you won't find on Google Fonts.
Finally, the action buttons in each tab section were a great chance to implement one of the coolest Codrops experiments, Morphing Buttons - with a few small tweaks to get around some limitations with pointer-events:none, it works cross-browser down to IE10, and we provide a graceful workaround for the important content past that point.
This was our first time using FastShell to hit the ground running with Gulp, Sass, Uglify, and JSHint, and it did the job. We also incorporated some features from Google's Web Starter Kit where they made sense.
Concept-to-launch came in at just under one week for this VIP client.
