Performancing Metrics

What’s the Right Blog Template Width?

One of the good (or bad, depending how you look at it) things about being a blogger is that you’re the publisher, editor, writer, and graphic artist rolled in into one. Apart from finding out a good topic to write about, most bloggers look for a good template to use, whether the blog is on WordPress or Blogger.

One of the most common questions that stump in the template decision is  “How wide should my blog’s template be?” And there’s a a couple of good reasons to why this is a bottleneck in the template selection decision.

See, the thing is that screen resolutions are as varied as the topics about blogging. It used to be that the only relevant resolution was 1024 pixels by 768 pixels (1024×768). But now, only roughly 1/3 of screens out there have 1024×768. The majority is now a resolution bigger than that.

The other reason is readability. With the changing resolutions, I won’t be surprised if people also tweaked their screens DPI (dot per inch) setting. This setting can make text and images to be displayed bigger (or the same with a lower resolution screen), even when the physical screen becomes bigger. This makes text more readable even with a ultra-high resolution display. Nonetheless, the upper limit in nice, readable web typography is 75 characters wide, give or take a few characters.

Now, with the variety in user needs, what’s the best width for blog templates? (Length or height is rarely an issue because people are used to vertically scroll).

Assuming you are using a 14 pixel size for the text and default character spacing, you would need at least 520 pixels for the main content area. Plus, if you add two columns 160 pixels wide (Why 160 pixels? This is to accommodate the widest standard skyscraper ad size), you would need an extra 320 pixels. Finally, you’d need approximately 10-15% buffer for margins. The final total? 924 to 966 pixels wide.

Surprisingly, this is very near the favorite 960 pixel-wide designs today. This number also seems optimal for common screens based on W3Counter’s final 2009 stats,  60% of displays out there range from 1024 pixels to 1280 pixels wide.

Categories: Blog Design, Blogging Tips
Tags: , ,

This post was written by . You can visit the for a short bio, more posts, and other information about the author.

Comment with Your Facebook Account


  1. devolute ) says: 1/9/2010

    Of course, the W3C stats don’t take into account who has their browser at full screen, who has it with some sort of toolbar off to the side, or whatever. That said, I think keeping it a page in the 900-980 rang is sensible. With a mobile stylesheet as well, of course!


    • Regnard Raquedan says: 1/15/2010

      Hey! I was really surprised that the numbers were near the rule of thumb. Maybe that’s a case not to move outside the 960px width range.


  2. Steve says: 1/10/2010

    I am of the firm believe that they should all be variable. Fixed width templates just make me annoyed. I agree that you should be able to set the width of a sidebar, but that the center (or primary) column should “float” and adjust.


  3. Ruth Maude ) says: 1/14/2010

    I use 960 px but I like to include a 100% element for interest on larger monitors.


    • Regnard Raquedan says: 1/15/2010

      I’d like to agree with that but with ridiculously wide displays, text just comes out as too wide… maybe we need to tweak the max-width CSS implementation…


      • Franky Branckaute ) says: 1/15/2010

        I love how Duoh has visual details added for ‘ridiculous wide displays’.


  4. kiash ) says: 5/5/2011

    I want to create 100% wide template for my site@


  5. Shil1978 says: 2/4/2012

    The ideal width has had me confused for a while now. I presently use 960 px for my Blogger site. Reading through this assures me a bit that what I am doing right now is the right thing. Thanks for writing this post – has helped me understand this topic a bit better!!


  6. Nisha says: 3/26/2013

    okay, my entire blog is 1260 px, left column 210 px and right column 230 px.
    looks like i’m doing it all wrong! :-/