Designing for “Show scroll bars”

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.

In macOS, users have the ability to set when they want to see scrollbars in windows. This affects all windows in the operating system, including in web browsers. They have three choices:

Automatically based on mouse or trackpad
When scrolling

Which means you are either in a state where you see them all the time, or a state where you only see them once scrolling has been started through some other means.

The Always option is pretty straightforward. If the window needs scrolling, the scroll bar will be there. If not, it won’t be. If the scrollbar is there, it squishes the page inward to make room for it. Here’s an example where a page goes from needing scrolling to not needing it with the Always setting on:

The scrollbar appears and pushes the page narrower to fit.

This is different than the When scrolling option, in which the scrollbar overlaps the content. Here’s an example of that:

A mousewheel scroll triggers the scroll bar to appear. Mousing over the bar expands the width.

These screenshots are the reason I was thinking about this at all. We had a user write in at CodePen because they couldn’t click that notifications icon. Before I added some extra space to prevent that overlapping, some coverage was possible:

Exacerbated by the fact that this user would zoom out, making the target even smaller, to the point it would be totally consumed:

This is only really a consideration with clickable things hugging the right side of the page. If it’s ever a problem for you, adding some padding over there is likely good enough. Or make the clickable area not confined to that narrow of a target. Here in the WordPress admin, some overlap is possible, but the clickable area is big enough that it doesn’t matter:

Designing for “Show scroll bars” is a post from CSS-Tricks
Source: CssTricks

Posted on December 30, 2016 in Austin Web Designer, css, drupal design,, Drupal Developer, drupal developer austin, Drupal Development, Drupal Development Austin, Drupal Support, Expert Drupal Development, The, user, web, Web Design Services, Wordpress

Share the Story

Back to Top