What We Developed: Layered Headers

There’s a concept we live and die by here at Rockhem: never stop innovating, or you may as well pack up and go home. The moment we stop creating new ways to offer a better user experience for our clients and their audience is the day we forget what we’re all about.

Innovation may sound like a daunting word, but you don’t have to reinvent the wheel every day. There are many ways to innovate – from completely fresh concepts to inspiration from tried and tested methods – and today we’d like to show you an example of the latter.

From layered slider to layered header
One of our latest solutions has been something we call a layered header, inspired by the layered sliders you see on many websites. You can see an example of layered slides here, but to explain the concept, elements are layered over each other, using javascript, to create a presentation-like slider. A common result is text layered over different images that fade in and out, as you’ll see in the link above – and they’re incredibly effective for creating visual impact in hero sections on home pages.
That’s not all this concept is good for though – at least this is what our team of designers and developers thought. And they proved themselves right when they prototyped the layered header for Séries Mania. You can see the header in action by visiting their homepage, but to really see the benefits of this header you’ll want to visit their site on desktop, tablet and mobile. If you can’t do that, then simply adjust the width of your browser window to see how the header changes to suit different screen widths.

The benefits of layered headers
Okay, so innovation for no reason isn’t innovation at all and this layered header needs to solve problems to justify its place on any website. Check out the Series Mania website on multiple devices, or adjust your browser.
At a quick glance there’s nothing special going on here; you’re looking at just another responsive header – a basic requirement when Google demands every website is mobile friendly. But this doesn’t tell the whole story and there’s actually a lot more going on here than first meets the eye.
By using layers in this header we are able to create a much more dynamic and functional header across multiple devices. The truth is most responsive headers are very restricted in what they are capable of – we wanted to change this – and developed a solution that offers more creative freedom. And by adapting the layered slider concept we’re now able to create headers where individual elements respond independently.
In the case of Séries Mania this means we can adjust the size of backgrounds without shrinking any text and create individual elements that adjust for more screen sizes than others – essentially, we’re talking about complete responsive freedom for responsive headers.

So why are we telling you about this layered header?
Well, first of all we’re pretty excited about the possibilities this layered header opens up, but it’s also a solution that says a lot about Rockhem as an agency. We’re not happy to simply follow the trends and use the same methods time and time again – we’re always looking to improve results for our clients, old and new – a point we wanted to make very clear today.