The Temple of Whollyness

Building a Single-Page Scroller

I was recently tasked with building a single-page scroller for our client, Home with Heroes. The goals for the site were to implement the new branding we designed and tell the Home with Heroes story in a compelling manner. They're a non-profit dedicated to reconnecting vets with the outdoors, a purpose we at Parliament all believe in.

For me personally, I know how difficult it is for small non-profit's Executive Directors to execute the vision while simultaneously managing the minutae of running a 501(c)(3). I've also seen the effects of PTSD on our vets, so being able to help craft what many people's first experience with the org will be is quite important. I wanted to do everything I could from a css and js perspective to make the site worthy of its visitors.

We decided to roll out a version 0.1 - an overhaul of the brand - and get it out there before tackling some of the functional issues like volunteer signup and buying tickets for events, which will be happening in stages over the coming months.

Sidenote, we shot the photography for the site while visiting the client at their event grounds. It's an amazing property!

Stylish shotgun

Grunt and the Build Process

My Grunt stack received a few powerups, mainly related to serving more appropriate imagery from Amazon S3. I combined newer with responsive-images to generate 5 sizes of images anytime an image is dropped into a watched directory, and aws_s3 uploads the files to an amazon s3 instance. I then make use of a scss mixin I wrote to generate the appropriate css for each background image, or I'll use picture-fill when background-images aren't appropriate.

Tying it altogether, my workflow is quick and error-free:
output the image from sketch to a folder
1. the system derives the various sizes
2. I use a mixin to generate the background-image css or picture markup
3. live-reload refreshes the page
4. Voila! the new image ready to go

I've rolled most of the features into our (upcoming) static site generator. Its grunt file can be downloaded here.

Pretty ranch sure is pretty.

CSS Techniques

Parallax

The best way I've seen for handling parallax comes from @keithclarkcouk's pure-css solution. I only modified his numbers to make the maths easier. By using

-webkit-perspective: 1000px;
perspective: 1000px;

the numbers to scale with are divisible by ten, and the relationship between scale and translateZ becomes more straightforward.

 .parallax-layer-back {
  -webkit-transform: translateZ(-500px) scale(1.5);
  transform: translateZ(-500px) scale(1.5);
  z-index: 5;
}
.parallax-layer-deep {
  -webkit-transform: translateZ(-750px) scale(1.75);
  transform: translateZ(-750px) scale(1.75);
  z-index: 4;
}

It's much easier for me to calculate the ratios for keeping further-away images scaled up to the proper amount.

min and max heights

Also worth pointing out is the use of min and max-heights to control the layout. I often see parallax sites with height: 100vh; min-height: 500px;, which often truncates content on my laptop, specifically when the content is taller than 100vh. Oops.

vw and vh units

I did develop a certain fondness for vh and vw units while developing this site. Specifically creating divs that are one quarter the browser's width and perfectly square is easily achieved with:

width: 25vw;
height: 25vw; //note I'm using 25% of the browser's width to set the height

Neat!

Nature!

Javascript Techniques

JS stack

The js stack consists of a few libraries:
jquery, tweenmax, and form-validation are the important ones. I really can't say enough good things about form-validation and tweenmax. They are super reliable and save me a lot of headaches.

Custom js

I did roll my own media-query-display class, inspired by this one which uses event listeners on the media query change event to display the current media query. I keep all my media queries inline with bootstrap's, so this makes it easy to roll out device stops.

Optimizing for Devices

I can't get over how much faster RAF is for listening to events that should be throttled such as scroll events. Read Paul Irish's article or grab the polyfill here to minimize screen jank on older devices. It's become very important for me not just to develop responsive sites 100% of the time, but also to make sure they don't feel sluggish on mobile. I think this is often overlooked, especially in marketing sites. 'Does it work?' is not the same as 'does it work well?'

In Summary and Next Steps

The site meets the objectives of telling Home with Heroes' story in a compelling manner. Unfortunately the previous site didn't have analytics set up, so we can't definitively validate our work, but we can say that we're seeing an average session duration of 3:41(!) and ticket sales have improved since the launch. Gut-check-wise it feels pretty good, but we still have a lot of work to do in terms of content-creation and functionality.

For myself, I'm continuing to focus on improving the site's perceived performance: #perfmatters. It ranks 87 on yslow, but I think I can get in to the 90s by implementing a grunt critical css task and migrating the render-blocking typography out of the head.

All in all, we're really happy with the outcome, and look forward to working with Home with Heroes in the future.

Visit the site!