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.

Final page here: https://worldbicyclerelief.org/forward

I broke the build down into three phases:

• Design
• Develop
• 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.

Initial wireframe.

With a PSD in place, I took it to production. There are a few frameworks and libraries that proved very helpful during the build.

Vide.js: http://vodkabears.github.io/vide/

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.

FitText.js: http://fittextjs.com/

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.

Remodal: http://vodkabears.github.io/remodal/

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.

Froogaloop.js: https://developer.vimeo.com/player

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.

German version of the page: https://worldbicyclerelief.org/de/mein-weg/

WPML: https://wpml.org/

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.

English / German version of Wordpress editor

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!