3 ways to fix your massive homepage banner

Isaac Scerri
Oct 6, 2016 · 2 min read

Around 15 years ago, cutting edge websites all began with the notorious animated Flash introduction. At the time, it seemed like a great way to provoke an emotion in the viewer, enforce branding, and just add some cool visuals. The downsides were that they were often slow to download, took a long time to sit through, and kept people from viewing the actual content they were looking for. Design matured and Flash was outcast.

Enter the current design trend of the large lead in photo (or photos, or video) with sometimes a simple tag line overlaid. They can look really nice, provoke an emotional response in the viewer, enforce branding — wait, that sounds familiar. The downsides are that the large image can be slow to load, and video more so, and the dimensions push content off screen, keeping people from the content they were looking for — similar to the flash intro problems?

Image for post
Image for post

Three improvements

I’ve had a tinker with a basic example, hacked together with jQuery, bootstrap and placeholder kitten. The following are 3 ways to improve the large banner design’s functionality.

Here’s .

The image download

Deferring the load of the image will help the page render and be usable quickly. To do this, I simply added an extra css class to the element with the kitten image background, telling the page to not load a background. After the page loads, the JavaScript removes the added class, and the image loads.

I’ve also added an animated spinner gif to the background of the banner container so the site doesn’t look broken before the kitten loads. When you are looking for or creating a spinner gif, obviously try to get the file size as low as possible, the example gif is 4KB while others I found were over 100KB.

Getting to the content

I thought about increasing the scroll speed while the image is on screen, speeding up access to the content, but ended up simply switching a css class to animate the height to a smaller size. After the reader scrolls down a number of pixels, a css class is added to the banner, with a smaller height. A CSS3 transition takes care of the animation.

Skip button

Also, similar to the flash intro days, I’ve added a skip button to auto scroll the page.

Although this all seems pretty simple, I haven’t yet seen it anywhere in the wild. Leave a comment if you know of any sites doing this.

Again, the code provided is hacked together, really just a visual prototype. If I get enough requests/likes I’ll refine it and make a jQuery plugin or similar — or feel free to do so and I’ll link you up.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store