2

On a Mac, the scroll bars are pretty minimal or invisible. This question talks about that - Is the currently most used scrollbar pattern good for ux?

I usually try to put content that gets cut off on the bottom of the page to let people know there is content below the fold.

However with responsive designs, different browser sizes, that content won't always land on the fold.

So what are good ways to indicate there is more content below the fold?

2

This question has been asked multiple times and in multiple forms. Here is another one and another one.

While fade-out content, arrows, truncation etc. are (im)possible solutions, they are just plasters that can quickly come off. The only thing that really works, which is much harder to get right, is a good content strategy. When done right, users will have the urge to scroll. But you can give this "urge" a push with some good design choices:

  • If you have a footer, don't make it float at the bottom of the screen. Show it at the bottom of the page so it can only be reached by scrolling. If you don't like this, consider a different strategy for its contents and have no footer at all.
  • Use consistent containers for content with enough padding and margin and a background or border with enough contrast to make it easy to distinguish the end of the container. If the content of that container looks complete at the end of the screen (a line of text that fits perfectly on the screen) the container shows that it is not the end.
  • Show a compact table of contents of the page. You can place this at the top of the page and make the items link to that part of the page. This should also be considered for mobile screen sizes but that depends on how much space it takes. In combination with the previous points this might be not necessary or can for example be omitted on mobile devices only.
1

I understand the design is responsive, But there should be atleast 20 percent of the below fold content above the fold which will allow the user to realize that there are more content below the fold. while designing go for standard 16inch of 17 inch screen design.

2
  • The question is how to achieve this with responsive layout. What do you mean go for standard 16/17 inch screen design? The OP is most likely designing for multiple screen widths.
    – Nash
    Mar 10 at 19:16
  • @Nash I am designing for multiple screen widths and sizes. Mar 17 at 14:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.