Jeremy Bise

The Making of Motto

We recently had the great pleasure of being contacted by Sunny and Ashleigh at Motto for some ExpressionEngine work.  In working together on a few client projects, they asked us to help build them a new website as well.  I thought I'd go over some of the successes and challenges in the building of the site.

Overview

As we've done a few times in the past, this site was just a build for us.  Motto did an excellent job designing the site as a static Photoshop comp and it was our job to slice it up and turn it into a website.  We enjoy this kind of project just as much as we do designing and building.  Sunny and Ashleigh are excellent at what they do as you can see from their Portfolio.This is without a doubt one of the most intricate builds we've done.  There are many components which are interactive, such as the pop-up footer, scrolling between sections, team bio interactivity, as well as interactivity in overlaying the projects and navigating through them.  This is also the first single-page website we've built, which was interesting and lead to its own set of challenges.

Page Load Time

Since this is a single page site, that means that all images and assets are loaded at one time.  The Portfolio section consisted of a ton of images, which was dragging down the load time dramatically.  In order to remedy this, we worked with Motto to optimize those images fully, and we created CSS sprites out of all the main design assets.  That helped, but it was not enough.  In the end, we opted to use a jQuery Lazy Loading plugin which causes Portfolio images not to load until you scroll down to them.  Between ExpressionEngine's template caching and the lazy loading of Portfolio images, we were able to cut down the page load time down from about 10 seconds to right at 3 seconds.  Big win!

The Image Scrolling Effect

If you scroll down the page, you'll notice that there are "photo bars" where the image stays static while the page scrolls, producing a pretty nice looking effect.  This was just a matter of some simple CSS attachment and using CSS3's background-size property:

.photo-bar {
	background-attachment: scroll;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
}

We specify the background-image inline so that ExpressionEngine can dynamically populate it from the backend, enabling Motto to change the images out as they so desire. Questions or comments?  We'd love to hear it! Check it out the project on our work page. Visit the new wearemotto.com.


comments powered by Disqus

Share This

Facebook
Twitter
Google+

← Prev Project Next Project →