Home / Content Marketing / What’s the Optimal Web Page Width?

What’s the Optimal Web Page Width?

Designing a web site and setting the web page width to an optimal width is a conversation worth having. Many of you noticed that I recently changed the width of my blog’s design. I pushed the page width out to 1048 pixels. Some of you may disagree with the move – but I wanted to share some stats and reasons on why I pushed the theme width so wide.

1048 pixels was not a random number, though.

There were two key influences in expanding my page width:

  • Change YouTube WidthYouTube offers larger embed sizes now. If you click the small gear on the sidebar of the YouTube video page, you’re offered options for larger sizes as well as the theme. Since higher definition videos are becoming common place on YouTube, I wanted to incorporate those videos into my blog and display them with as much detail as I could (without consuming the entire page width).
  • Typical advertising comes in widths of 125, 250 and 300 pixel widths. 300 pixels seem to be popping up more and more on ad revenue sites and I wanted to incorporate them neatly into my sidebar.

And of course, there’s some padding to the left and right of the page, the content, and the sidebar… so the magic number was 1048 pixels for my theme:

Optimal Web Site Width

Did I check my reader statistics?

Yes, of course! If a majority of my visitors were running lower resolution screens, I would definitely have had second thoughts about expanding my page. Width and PercentageAfter outputting the screen resolutions from my Analytics package (In Google it’s Visitors > Browser Capabilities > Screen Resolutions), I built an Excel spreadsheet of the results and parsed out the width from the resolution field.

Google provides resolution as 1600×1200, so you need to take everything from the left of the “x”, multiply it by 1 to make it a numeric result so you can sort descending on it, then do a SUMIF and see how many visits are greater than or less than the design width you are looking at.
=LEFT(A2,FIND("x",A2,1)-1)*1

Did I abandon the 22% of readers who are running a smaller resolution? Of course not! The nice thing about a layout with your content left and your sidebar right is that you can ensure that your content is still within the width of the majority of browsers. In this case, 99% of my readers are running greater than 640 pixels wide, so I’m good! I don’t want them to totally miss the sidebar, but that’s secondary to the content.

About Douglas Karr

Douglas Karr is the founder of The Marketing Technology Blog. Doug is the CMO of CircuPress and CEO of DK New Media, an agency specializing in assisting marketing technology companies with their inbound marketing - leveraging social media, blogging, search engine optimization, pay per click and public relations. Their clients include Angie's List, GoDaddy, Mindjet and many more. Douglas is also the author of Corporate Blogging for Dummies.

Check Also

online-marketing-terms

The Basic Definitions of Online Marketing Terms

Sometimes we forget how deep we are in the business and forget to just give ...

9 comments

  1. I suggest a hybrid layout and a CSS container width of 100%. As long as you’ve got a fixed width for the sidebar, the header, footer, and main content areas will adjust to fit the remaining width of the screen. Fills 100% of everyone’s browser window, regardless of the user’s monitor resolution. Then you don’t have to count pixels any more or keep track of user statistics regarding monitor resolutions.

    • I really like hybrid layouts, Bob – but unfortunately they don’t play well sometimes with the actual content. Maybe I’m lazy, but it’s easier for me to know that max and min are 640px in my site. Stretching is difficult to conceive when I’m writing the posts.

      Just a personal preference I guess!

  2. Essentially, I agree with your conclusion, but if I’m using a fixed width set-up, I limit the width to 960 pixels.

    One has to account for vertical scroll bars and other browser shortcut bars that take up additional width. By staying within 960 pixels, one is assured that there is no left-to-right scrolling on a 1024 pixel-width screen resolution.

    Andy Ebon

  3. Thanks for this post Doug. I’m working on a new (wider) layout for the Indiana Insider blog and this post is exactly what I needed!

    – Jeremy

  4. very odd. In Firefox, your site has a horiz scrollbar at 1048, and does not have a clean look until you get out to 1090.

    Thanks for the great stats though from Google resolutions

  5. Since you've got your <div id="page"> set to 1048px, your site causes horizontal scroll bars on a 1024 screen. I think it would have been better to skim a 100px off the width (and padding) of your sidebar and content area so it fits on a 728×1024. That's what is best practice today.

    The only case against this would be if the analytics numbers support it… but since you didn't provide that data in your article, I'd say that you're page design is flawed.

  6. I'm now with a 15' monitor with 1024×768 resolution, I see horizontal bar, and I hate it.

  7. Silly man
    Not everyone uses every window at full screen – in fact, I’d wager that few do. 

    I have your blog in an 80% windo … and there it is, a horizontal scroll bar

    And what’s off the screen … lets see … nothing.

    So your scroll bar is pointless.

    One easy way to lose readers!!

    • The content is centered within the page @heenan73:disqus , providing the reader with exactly what they need. If I’m losing readers because they can both see the content AND see a horizontal scrollbar… not sure they were the readers I’m looking for. There’s definitely something unique within our content that pushes it out to 1217px so I am going to track that down and fix it.  This post was actually written about a previous theme.  Thanks for bringing it to my attention!

Leave a Reply