Why Horizontal Scrolling is Bad

I know it's been said a million times but some people still don't seem to get it. Horizontal Scroll bars are bad! They're bad for your site and they're bad for your users. The worst are sites and designs that are just a few pixels too wide, as shown in the screenshot on the right. For some reason, this is very common on Blogger templates because of how some browsers (Internet Explorer) handle the doctype Blogger uses (XHTML 1.0 Transitional).

The likely reason is that many web designers have high resolution monitors as well as widescreen monitors. They just don't browse their sites the way the majority of their visitors do.

If you're designing websites or templates, you should really take the time to verify your designs will look good the way most of your visitors will view it. Not taking the few seconds to do that is just plain lazy.

What's so bad about Horizontal Scrolling?

People aren't idiots. They know that if there's a scroll bar on the bottom of the browser, it means there's more stuff on the right. So you might be wondering why people recommend you don't let your site have a horizontal scroll bar. Here are a few reasons to keep your template width narrow enough to not scroll horizontally.

• Horizontal scrolling is unusual - most sites don't have horizontal scrollbars so it's not natural for a visitor to scroll sideways. Also, even though there are mouses that can easily do side scrolling, most people have mice that can only do up down scrolling.
• Horizontal scroll bars take up valuable space - In 1024x768 resolution (currently the most common) a horizontal scrollbar takes up about 1000x17 pixels. That's about the same amount of screen real estate as a half banner. It's also about the height of an AdSense Link Unit. With tabbed browsing and toolbars, web browsers are already showing less of the page. The little bit of extra space can help get important content and ads above the fold.
• You need to capture your users attention fast - Your site visitor needs to make a decision about your site pretty quickly. Many times they don't even scroll down to see if there's anything interesting, expecting them to have to scroll down and sideways is too much for a site they don't have an opinion of yet. You want to make viewing your site as easy as possible.
• It just looks stupid - Especially if the only reason you need to scroll is because of only a few pixels and there isn't anything of value hidden.
• It can hide advertising - Many people are putting their advertising on the right side of their pages. That would mean that some or all of an ad could be hidden. Advertisers that are paying for impressions or for defined periods of time on your site won't be happy to know that the ad they spent time and money designing and are paying to show to your visitors isn't being seen.
• People with high resolution monitors don't browse at full screen - I have a widescreen, high resolution monitor and I didn't get it because I like reading 20" long lines of text. I have a lot of programs going when I'm working and I have my browser set up to be 1024x768 in size. Sometimes narrower.

When can you use horizontal scrolling?

Sometimes horizontal scrolling works. It's not the best solution but it's not horrible. The only times I've seen where it was OK is when the site was designed to only scroll horizontally and not vertically. I still don't think it's the best decision but its better to only have one option for scrolling on your site.

Another time it's OK to have horizontal scrolling is when your visitors are using a smaller resolution than is popular. For instance, on one of my sites, the vast majority of visitors have their resolutions set at 1024x768 or larger. Only a small portion, less than 5% view at smaller resolutions. The site will have a horizontal scroll bar. For 5% of the visitors, it's just not worth the effort to redesign some sites to handle it. I do make sure the site is usable at that resolution though.

How do I know my visotors' monitor resolution?

The most important thing you should do for your site is determine what resolution your visitors are using. Most web statistics programs will show you this, except for the ones that only work off the webserver logs. You'll need something that runs some JavaScript to detect monitor resolution. I use Google Analytics because it offers a lot of other options as well as being integrated with AdSense and AdWords.

How to set browser to a specific resolution?

If you're like most web designers and web developers, you have a larger resolution monitor than most of your visitors, but you'll want to keep your browser size set to a specific resolution to preview as you work without needing to go into your display settings to change it, which also screws up your workspace.

This can be accomplished using JavaScript. Click on the links below and it will resize your browser to the specified resolution. Works on IE, Firefox and Safari, but not on Google Chrome.

• Resize to 1024x768
• Resize to 800x600
• Resize to 640x480

Here's the HTML you can use to save on your local computer:

1:<html> 2:<head> 3:</head> 4:<body> 5: <ul> 6: <li><a href="javascript: resizeTo(800,600);window.moveTo((screen.availWidth/2 - 400),(screen.availHeight/2 - 300));">Resize to 800x600</a></li> 7: <li><a href="javascript: resizeTo(1024,768);window.moveTo((screen.availWidth/2 - 512),(screen.availHeight/2 - 384));">Resize to 1024x768</a></li> 8: <li><a href="javascript: resizeTo(640,480);window.moveTo((screen.availWidth/2 - 320),(screen.availHeight/2 - 240));">Resize to 640x480</a></li> 9: </ul> 10:</body> 11:</html>

How to remove Horizontal Scroll Bar

The best thing to do is to make sure none of the HTML elements are wider than the browser can accept without needing a horizontal scroll bar. This includes margins, paddings and borders.

If you're using FireFox I recommend you get the FireBug plug-in. The Inspect tool will help you determine what elements might be too wide.

Google Chrome also has a similar tool that you can use. Simply right click on an element and select Inspect element from the context menu and it will bring up the screen you see on the right.

How to remove horizontal scrollbar on Blogger Templates

Because Blogger.com templates use the XHTML 1.0 Transitional DOCTYPE, you have to add some CSS code to handle the margin/padding some browsers add to it. Instead of using just the BODY as the root display element, some browsers identify the HTML tag as the root display element. It is the ROOT element in the XML. So just add the following code to your CSS for your Blogger Templates if you're having any problems. The overflow attributes are optional and you should only use them if you are still having problems removing the horizontal scrollbar.

1:html { 2: margin: 0px; padding: 0px; 3: overflow-x: hidden; overflow-y: auto; /* only use if stuck */ 4:}

Hope that helps!