Ideas, musings and inspirations.

Recently, we launched a landing page for Bryant University. This site asked the question “Why Bryant University?” and was completed in a tight two week turn around. Seemed like a walk in the park.

bryant

It was anything but that.

Thanks to our amazing design team and our thoughtful and motivated clients, Why Bryant sparks your imagination with its amazing colors, brilliant visual effects and playful interactivity.  What started out as a simple website was transformed into a story that can only be experienced firsthand.

What we’ve learned

As a front end developer at Elliance, it’s my job it take the ideas and visions of the design team and the client, and give life to a static mock-up. This project presented several new challenges for me, some solved more easily than others.

1. What to do with all these scripts

When building this site, we wanted to create an interactive experience that keeps the user engaged from start to finish. The problem is that with great interactivity, comes strained page loads.

Taking into account a mobile-first strategy, we had to build a loading concept that would allow mobile users to only load the scripts they needed. My partner in crime on this site, Nik, created a great system to do this.

Capture

As you can see, the separate JavaScript files are sorted into folders. The “pageload” folder loads specific scripts when you open the site, while the “deferred” folder loads scripts that are needed later in the page once you have begun browsing. The “deferred-nonmobile” only loads on desktop, thus eliminating the scripts that you won’t be able to see on mobile devices (such as parallax scrolling, which doesn’t translate well on touch devices).

2. Dynamic content and responsive design

In an attempt to keep the page load down, we also decided to dynamically load content based on your page position as well as your interaction with our many cycle carousels.

We also had to keep the page intact while these elements were loading. This involved several a/b scenarios where we would test what the page would look like if the elements didn’t load, how the page speed was effected by each carousel and its contents until we obtained an acceptable balance.

3. When you’re on a size budget, images are expensive

Since we were trying to squeeze every bit of performance out of this site, we had to make a serious effort to cut the high-resolution images down to size. I spent many hours with my designers and fellow developers going back and forth, testing page loads and resizing images until we got to an acceptable page load.

At the end of the day, Why Bryant turned out to be a beautiful landing page, but for me, the real beauty is behind the scenes in the work that the developers and designers put in to bring this site to you in the most economical way possible.

Posted in:

Comments

No comments yet. Why not leave one below?

Leave a Comment