Full Screen Video Background Homepage

I recently had a client that wanted a full screen video background on their homepage. One of the websites they offered as inspiration was the Pepsi website. Ambitious, right? I like a challenge so I didn’t try to talk them out of it, even after some of my research showed it may be a bad idea from both UI and SEO perspectives.

Navigation on Desktop vs. Mobile

The most important thing with responsive website design is ‘ease of use’. Navigation should be obvious, clean and quick. With a moving background that grabs attention, layering the navigation on top must be done in a way that minimizes interference but still stands out enough to be obvious. This obviously requires different layouts for desktop vs. mobile. What might not be obvious is that it may need different layouts for for tablet and mobile and within those, portrait vs. landscape. With this in mind, I recommend making a homepage that does not use the theme layout since your navigation may be very limited on this page. It also gives you more freedom with your web page design.

H1 and H2 text before scrolling

You need more than just navigation on the home page that’s visible before scrolling. What is sometimes called “above the fold” (an old newspaper reference) is actually prime real estate for SEO. Leaving it without a layer of text is a critical mistake. It’s one that I made and I’m still paying for as I write this post. My rankings for almost every keyword phrase I target dropped when I went live with my redesign. Adding text to the home page has helped get my rankings closer to where they were before, but there is still a ways to go before my SERP rankings are back to where they need to be. Maybe by the time you read this the video background will be taking up less than 100% of the screen on the home page.

The Dangers of a Full Screen Background Video Homepage

I learned how to do a full screen video background that’s responsive. I also learned a few new CSS animation tricks with the timing of opacity, movement and delays. And of course the most important lesson I learned is not to make a text light homepage above the fold.

Leave a Reply

Your email address will not be published. Required fields are marked *