Avoiding issues with the fold
It's often argued that the fold doesn't exist but the reality is that clients still ask for content to be pushed up the page so it appears without scrolling down to it.
In this article I suggest ways to stop this from ever becoming an issue. I also question whether these "issues" are mainly down to static mockups.
The Problem
You: “Here’s the mockup for your beautiful new website”
Client: “We love it.”
You: “Great!”
Client: “…But we have a few tweaks. We’re concerned that our main hero image pushes everything else down, could you make it smaller? Actually, could you change the spacing, pushing everything up so we don’t have to scroll so much?”
Does this situation sound familiar?
What can we do to avoid this?
Don’t expect your clients to know the research
You’re a savvy web designer. You read Luke Wroblewski’s blog, A List Apart and you’ve definitely read my previous article about “The Fold” ! ;-) . From reading that you know that research proves people scroll, often without waiting for the site to fully load.
Just because you know this, you can’t expect your client to read this research.
Help clients understand
Use deliverables such as wireframes and prototypes as an opportunity to let clients know about the research. This is the time to explain that cramping everything up will soon make your website look like it was designed in 2001.
Beware the stare
Designs are often shown on a projector or computer where only one person has control over the scroll. It’s only natural that the screen is left alone and any discussion revolves around what can be seen on the screen at that moment. This is not what happens in the real world. Users interact, they don’t stare.
To avoid this we need to present our designs in person or over screen-sharing software so that we can talk about this before it becomes an issue. Liquid Light are currently developing a service that will help with this - follow our mailing list for updates
There is a hard, cold truth that many web designers don’t want to think about. Mockups designed on large screens often loose their visual impact when viewed on smaller screens.
It might be that when your client says “move everything up” or “reduce the spacing” they feel that the design feels too big on the monitor they are viewing it on.
The spacing around the website, gaps between elements, image dimensions, and font sizes might all look appropriate on a large monitor, but may feel clunky on a smaller laptop. This is where responsive design plays a vital part but this article is specifically about presenting static mockups.
A balanced view
If you check your design on a different monitor/computer as you progress you may find that reducing a little bit of spacing here and there creates a more harmonious design across a wider range of monitors. It’s worth keeping in mind that the physical size of objects on screen (in real world millimetres) changes depending on pixel density.
Conclusion
To summarise, there are a few ways that should help to stop “The Fold” from even becoming an issue.
- Educate clients about the research.
- Use screen sharing software to present designs.
- Explain why reducing space and size of the elements my harm the design.
- Get a balanced feel for your website by checking on multiple monitors.
The elephant in the room: Static mockups
There may be some cross over, and this isn’t true of every web agency but often a static design mockup is given to a client so that they can sign something off before moving into production. This made more sense when there was less of a variety of devices and screen sizes.
The problem with a static mockup is that it doesn’t adapt to screen size. If it did, we could adapt design decisions such as spacing, font-sizes, image dimensions (etc) to suit the device.
It’s becoming increasingly obvious that static mockups aren’t fit for purpose in a responsive world. This is one reason why design and prototyping tools such as such as Macaw, Adobe Reflow and Webflow are gaining popularity. This is a whole other article though!
How do you avoid issues with “The Fold”? Do you present static mockups? What other deliverables do you use?
Update February 2016
I've written an article that touches on the idea that advances in CSS not only help with the fold, but could provide a way of embracing it to create a harmonious composition across different devices.
-
Matt Keogh
Matt is focused on strategic vision and ensuring this is followed through to exquisite execution. Having been an award winning designer since 2001, he knows how to put the user first while building stakeholder alignment in order to deliver key objectives. It’s this passion for understanding people that enables him to design the best experiences for them. @matsaukeo
