Death to the Hero Slider

I recently performed a recode of my site and an evaluation on the assets I was loading on each page. At first, I targeted removing social sharing widgets like AddThis, loading my Twitter feed, and removing jQuery everywhere but the homepage. The results were great, and I was pleased with how my site was performing. Then, just last week I wanted to rework the design a bit, and make my site a little more polished. I took a hard look at the homepage slider, and couldn’t come up with a solid way of making it look good responsively. So I removed it, and with that, removed jQuery from the homepage as well. Not only does my homepage load faster without loading jQuery, but overall I think I gain more by dropping the slider. Now when you first visit the site, you get to see my lovely face, and not the thrown together graphics I’m using for my featured blog posts.

Death to the Slider

I’ve been working on a lot of responsive builds recently and I have to say making the homepage slider look good across multiple screen sizes is tough. In addition, loading these huge image assets on the page on top of a JavaScript library like jQuery is pretty bad for performance. For the number one visited page on any particular site, performance should be on the top of our list of things to optimize for.

So I’m proposing, DEATH TO THE HERO SLIDER! It has become a crutch designers use on any given design, and I think it has seen its day. So what can we put in its place? Simple, well designed typography hero layouts. I love typography, and when done right, it drives many great websites. The best thing about typography in designs? Little to no overhead! Typography looks great on all devices, screen sizes, and DPI.

With services like Typekit, Fonts.com, and better yet, free services like IcoMoon and Google Fonts, we can utilize fonts and icon fonts to create some visually stunning websites that load fast and look great. Finally, for more advanced techniques, you can utilize FitText.js and Lettering.js from the guys over at Paravel to get total control over your typography. I recently used both in a quick, personal project that pulled in Google Image Results from a string in the URL and I was very pleased with the results.

Below are some of my personal favorite examples of great typography websites:

So what do you think, no more hero image sliders? Got any good examples of great typography?

posted in: design, Front End Development
tagged: ,

5 Comments
  1. Marty

    Great article Pete, the more I read the more this sounds like a great idea.

  2. WNDRMNT

    Hi Peter,

    We don’t think most would argue against increasing performance but it should be asked: at what cost? You can remove images altogether from your site and have a near instant load time, but it doesn’t exactly work well from a practical standpoint.

    Hero sliders offer more punch for the same real estate space. With image preloaders and the likes, it’s not too difficult to give an optimal experience to the user while showcasing multiple features at the same time.

    Just our $0.02.

    Nice website references, though!

    • Pete Schuster

      My ultimate point was that there are other design patterns you can choose other than a hero slider that have just as much impact without the cost of loading images, JavaScript, etc. If you read this article: http://weedygarden.net/2013/01/carousel-stats/ you will see that hero sliders might not have the effect you think they do. If the first position is the only slide getting any attention anyway whats the point of all the extra weight?

  3. Dave

    I kindly disagree. Loading jQuery itself is only ~44k. That has no discernable effect on load and performance. I’ve seen sites with 3-5 fullscreen slides load in about 3-4 seconds which is well within reason.

    I admit that it’s being way overused. And your suggestion is a good idea but usually a company or brand needs to get across more than one message. Hence a slider is a good way to do that.

    Basically what I’m saying is from a performance standpoint, it’s sort of a non-issue. From a design standpoint, I can see your point.