World Bicycle Relief’s Year End Appeal Landing Page Build
December of each year, World Bicycle Relief puts together a year end campaign to collect the final funds to set up bicycling infrastructure in rural Africa.
After we shot a series of videos and photos on the spot and edited them down, I was tasked with building the landing page.
I broke the build down into three phases:
- Test / Optimize
For the design phase, we worked with an agency The Charles in NYC to get a series of PSDs drafted to build the design from. They did a stellar job.
With a PSD in place, I took it to production. There are a few frameworks and libraries that proved very helpful during the build.
The landing page uses ambient video in the hero, and Vide.js makes that simple. It gradually degrades and will pull a jpg, mp4, ogv, or webm based on browser type.
This is a JQuery plugin for responsive typography. It’s incredible. Instead of depending on CSS to resize the headings, FitText resizes the headings pixel by pixel. This works well for heading fonts, but I wouldn’t recommend it for body fonts.
The landing page had popups, and after using plenty of different popup configurations in the past, Remodal worked well. Super lightweight, and there is a nice fade in that eases the modal into view.
We used Vimeo videos for the project because of the high video quality. This worked well minus one difficulty: getting the Vimeo videos to pause when exiting the modal, and to play when opening the modal. After some tweaking with this library, it ended up working well.
Skeleton CSS: http://getskeleton.com/
This is a bare bones grid. Much lighter than Bootstrap and easy to customize. I’d recommend the grid for anything that can be built with a twelve column layout.
The page and videos were translated into German, so we needed a good way to translate the page. Our site website is built Wordpress, and WPML is the go-to option there for translations. With that in place, depending on your browser language, you will be served either an English or a German page.
Advanced Custom Fields: https://www.advancedcustomfields.com/
To make the page editable for the team, I build the page into a Wordpress template using Advanced Custom Fields. With a combo of Advanced Custom Fields and WPML, we were able to translate the page easily and make updates as needed.
The total build lasted approximately a week, and we were able to launch the page to the public in mid-November. Post-launch I am monitoring the page through Google Analytics, and I’m running a Hotjar Heatmap to dial in the user experience. So far the page is performing well, so we’re happy all-around.
I plan on writing a brief recap of lessons learned in mid-January and will link to it here.
Thanks for reading!