Scrollbar Implementation for Responsive Web Design

06 May 13, Kelly N. Wilson

Horizontal scrolling can become quite the menace when it comes to web browsing on the mobile phone. Enter responsive web designs and web browsing becomes much more pleasant even on a small screen as browsers adapt to the media queries fired at them.

Scrollbar Implementation for Responsive Web Design

Traditionally, when the viewport size of browser windows is reduced, a horizontal scrollbar appeared with the website – something that really ticked off all of us. RWD, thankfully, understands the issue and creates a more pleasing, fluid and legible web browsing experience on a small screen.

Different Layouts for Smaller Screens

One way is for the layout to change for smaller screens. The display of images can be altered so that they stack upon one another rather than being displayed side to side. The number of columns for the text can also be cut down to avoid the need for horizontal scrolling at all.

Plan out the Resolutions being catered for

It’s very important to identify the resolutions you’ll be working with for your responsive website. Likewise, you’ll develop CSS codes for user-friendly layouts based on media queries for those resolutions. This way, you can create a beautifully fluid website that scales according to the size of the screen.

Viewport vs Page Width

Different browsers understand viewports and page widths differently. You ought to understand that the viewport includes the entire area inside the browser window (including both scroll bars and page width), not just the page width. But some browsers, such as chrome, detect the page width for media queries. Other browsers, such as Firefox, Opera and IE take the viewport as whole, i.e. page width + scroll bar width. Thus for an 800px wide screen that include vertical scroll bars of 20px, Chrome will apply CSS media queries for 800px, while other browsers will include it for 780 px.

This could create some slight problems for a website where another page has more content than the homepage.

Changes in Key Elements of the Website

In order to have a smooth, fluid layout, you’ll have to alter the placement of some critical web elements, such as altering the navigation elements, scaling down the size of the logo in the header, reducing the margins of the content or altering the overall width of the sidebar.

Think out of the Box – No Horizontal or Vertical Scrolling!

A unique way of scrolling could be to not have horizontal or vertical scrolling at all and opt for a fluid website which you can navigate by waggling around the mouse. We really like the website We Love Noise which is an amazing example of circular, fluid web browsing.

One of the best advantages of responsive web designing is claimed to be that you are saved the hassle of horizontal scrolling. So the next time you go about designing a responsive website, remember to check that the web browsing experience is enhanced because of proper scrolling and not otherwise.


One Response to “Scrollbar Implementation for Responsive Web Design”

  1. Amna Noor Elahi says:

    what toolkit i can use for building responsive sites.?
    This article is great :)

Leave a Reply