Avoiding issues with the fold

Written by Matt Keogh on 3rd August 2015

(Last updated 17th May 2016)

No comments
Avoiding issues with the fold

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

Check your designs on different monitors as you go

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?

This article was posted in Design by Matt Keogh

  • Matt Keogh

    Matt Keogh

    Matt is our Senior Designer who is perfect at pixel placement. At the weekend he likes to kick back, watch a film or two and spend time with his family (or so he tells us!). @matsaukeo

Comments

No comments have yet been posted, be the first to comment by using the form below:

Post a comment

*
*

Sign up to the Liquid Light newsletter

Subscribe to our Newsletter and stay up to date with all things web related. It's crammed full of useful articles, tips and knowledge, invaluable if you have a website or are starting a new web project.