Widen Your Blog for Goodness Sake

By Nick Stamoulis

The current number of websites that still cater to the 800×600 crowd is staggering. I will be the last person to condemn those who maintain that size (I’ve been one for a long time!) since at its heart the idea is to serve as many visitors as possible. It’s not the worst problem one could create.

But it’s about time to consider other alternatives, and here’s why.

  1. 800×600 is dying. It is. More and more statistics are showing numbers for 1024×768 as becoming the new standard for browser sizes. Thank God. So take a look at some of the numbers, and see if that convinces you to change.
  2. Breathing room. White space is your friend. Widening your blog can give you much more room to work with, as well as more white space to show off for your visitors.
  3. Emphasize your content. If you widen your theme you will also widen your content. I wouldn’t suggest widening your sidebar as much, odds are it is as big as it needs to be. Give the extra width to your content. Since the feature presentation of your blog is your written word, it should have the most emphasis anyway.

How big should it be? If you were operating at an 800×600 page size before, I would guess you were at about 760px wide. I would up that number to 960px wide. This still gives ample room for your background to show on the margins as well as give some breathing room between the scroll bars and your page.

If you have a decent WordPress theme, it shouldn’t be a problem to up your size. Literally, it should be as easy as changing two or three numbers. If your theme doesn’t let you do that, you should contact your theme designer and have it adjusted.

What has your experience been with your blog widths? Have you tried different options and had different results?



Share

69 Responses to “Widen Your Blog for Goodness Sake”

  • Metin Kılıç

    Ahh gotcha thanks for the reply, I unintentionally used white space then

  • Kepenk

    I agree with you completely, I can’t stand narrow blogs! In fact it took me forever to find a blog format I liked because of that issue. Once I added everything I wanted the narrow width made my blog feel crowded. Great post! Thanks

  • evleri

    always stick to 1024 X 768, whichever theme I’m using.

  • Steven Servis

    Hi,

    I use a WordPress for my blog, and I’ve been trying to figure how to widen it. I use the “default” template, and my blog has the most recent upgrade (2.9). I spent weeks trying to figure it out, messing with the stylesheet.css php file. I finally figured it out. If you follow these directions–you can change the length of your blog and change the heading image to match the rest of your site. Again, a blog looks kind of dumb if it is 600×800 and the rest of your site is in high definition.

    To do this you are going to need to use Photoshop (any version), and you will need to edit a few numbers in the stylesheet.css file. You also need to have an ftp connection.

    1) open up your ftp file/wordpress/wp-content/themes/default/images. In this folder you will find a list of jpegs. Copy the images to your desktop. Open them in photoshop. Click “image” in the tool bar and scroll down to “image size” which will bring up a window that allows you to adjust the size. Change the width to the same size as the rest of your website. Repeat this method with all the image files in the image folder that you copied to your desktop. Don’t mess with the header-img.php file though. That’s not an image.

    2) save all the adjusted images by going to “file” and “save”. Copy all of the files back into the ftp file/wordpress/wp-content/themes/default/images folder and overwrite the old ones.

    3) Log in to your wordpress blog and go to Appearance/editor which will take you to a page that has a list of php files. At the bottom of the list you will find one that says “stylesheet (style.css)”. Click that one (hint: use the internet explorer browser).
    Scroll down through the code in the textbox until you see “header” “footer” and “page”. Under these titles will be some specifications. One will say “width: 760” Change all instances of width under the forementioned titles to the width (or slightly smaller) of the rest of your website.

    If you get all the numbers right your site will be considerably wider. You may want to adjust some of the other numbers in the style sheet for better viewability.

    It’s pretty easy to tell when you miss a number, because that portion of the site will be off. For instance, if you missed the “heading” it would be smaller than the rest of the page.

    Hint: Everytime you view the page click the refresh button on your browser. I personally use Opera–which is specifically designed for web developement. However, Opera and the WordPress stylesheet window don’t work so well together, so just use Opera to view the page to make sure it looks okay.

    Another Hint: If you want to change the header of your blog to match the header of the rest of your site, simply rename the header to the krubrickheader.jpg and place it in your “images” folder from step 1. Make sure its size is consistent with the rest of the page, however. That may take some tweaking in photoshop.

    Oh yeah, and to get the old text off your header go to Appearance/custom header. Select the “advanced” button and click select default colors. Click the “update header” button. Then go to Appearance/editor. Click the stylesheet like you did before. Find the text that says under “heading” that says “font color;white” and change “white” to “transparent.”

    So that’s it. It’s really not that hard, but If you are like me, you probably thought that you could simply adjust the numbers in your stylesheet. However, that won’t work if you have a fixed page size like in the “default” template. You have to adjust the images as well, otherwise you will just get a bunch of pink around the edges. P.S. pink is ugly.

Comments are closed.