FourSeasons-CostaRica-FullScreenFor the past 16 years of web design, I’ve heard countless mentions of this thing called “the fold”. There were studies, and many believe it had magical properties. Anything below the fold would never be seen – doomed forever. So web designers crammed all we could up there and ignored what fell below. It makes you wonder whether users didn’t scroll because nobody put anything good down there. Back when the vast majority of users were at a predictable resolution, we could entertain the discussion. In most design presentations, the inevitable “where is the fold” question would surface and we could point to it with relative certainty. Today, I just pull out my phone or tablet and demonstrate both how the fold is now different on every device, and how swipe scrolling is just so natural.

It’s time to think beyond the fold. We need to think mobile-first in both design, content, and how touch pads/screens are changing the nature of how users interact with web pages. The Four Season’s site is a great example of where we’re going > Longer pages with deeper content that cascade vertically in panels.

Mobile Web Killed the Fold

I love mobile for so many reasons, and this is certainly one of them.

Back in the day, we generally knew where that fold was. It started at around 420 pixels when I started and ended at around 970 the last time I cared. That was desktop thinking. Today we can see where the trend is headed and it won’t be long until the majority of web content will be consumed on a mobile device. With so many devices at so many resolutions, the fold is indefinable and irrelevant – and simple doesn’t exist anymore.

Scroll On!

The finger swipe has overtaken the mouse, and making scrolling even easier (was it ever hard?). Swiping is natural and kinda fun on a touchscreen. Conversely, the process of using a menu and navigating from page to page on a mobile is not all that fun. Slow mobile connections compound the issue. With that in mind, I think we should expect to see longer pages loaded with deeper content that provide the user with an abundance of information with a swipe versus a click.

Content Pyramid

The pyramid structure for content (and design) is still completely relevant today. The tip of the pyramid expresses the key message at the top, and deeper and broader supporting content cascades down below. If content is engaging and relevant, users dig deeper. Users move from “scan & search mode” at the top of a page into “engaged consumption” mode as they dig deeper. It’s in this zone, where users slow down and absorb content and a recent study from Chartbeat found that ad recall improved in this area below the fold where users spent more than 15 seconds – which boosted ad recall up to 70%.

Four Seasons Website Case Study

Luxury Resort Costa Rica | Four Seasons Resort Costa RicaAlthough its not responsive, this is a great site. I welcome you to go to the site and pick a destination - such as Costa Rica. That first destination page is key. Consume it as if you are planning to go there. Move all the way down to the bottom – panel by panel.

First, the tip of the pyramid is nice and simple. It captures the traveler’s interest with great imagery of the destination first (versus the resort). Their customer is a traveler first – eager to discover. By focusing on the destination, they’re aligning themselves with the interests of their audience.

As you scroll, they continue the theme of the destination with weather, maps, and things to do outside the resort. The page is segmented in panels, which are very tablet friendly. The content continues to bate the traveler’s curiosity and craving to discover. Of course they do sell the resort too – and of note, they include (selected) guests’ review with a Trip Advisor widget.

Once you get to the bottom of that page, you have a pretty good overview of both the destination and the resort. The traveler has a much better base to move to the next level and is emotionally primed for conversion.

Conclusions

In my opinion (take it for what its worth) what we – both clients and web designers need to do is design pages that focus on content and mobile first. We need to know our target audience very well and on these key pages – especially the homepage – we need to take them down a path that informs the visitor just enough to pique their interest. The content and design needs to connect the brand with the visitor emotionally. When we do this, then we have primed the visitor for conversion to customer. This simply isn’t possible if we think with a fold mentality.

 Additional Reading

 

 

Comment