3 ways to fix your massive homepage banner

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?

Three improvements

Here’s the working prototype.

The image download

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

Skip button

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.

UX design