Widen Your Blog for Goodness Sake
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.
- 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.
- 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.
- 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?
69 Responses to “Widen Your Blog for Goodness Sake”
Would you say that this is not wide enough then? http://blush-response.livejournal.com/
When I first started out, I always thought that thinner was better (blogwise, not people), but I like a good wide blog. I think I’ve accomplished that with the current layout I have. Unfortuantly, my work computer is 1024×768 and it makes my layout look awfully yucky.
Now that I think about it, the wider my blog got, the more notice and interesting it got.
Please don’t make content much wider people!
My blog is under blogger and it looks crooked. I like the theme though. So Im just trying to change the size as you said so that my blog looks pretty neat. Thanks Ryan.
Nicole, the width of your blog is fine.
I do see a huge header though, not sure if it is my browser or what. I see the content itself started after 500 pixels or so. You might want to check this out.
All the blog themes I’ve designed have been a fixed width, but I’m now experimenting with a fluid layout, with the Sandbox theme as the basis. The difficulty with a wide reading area is that it’s harder for the eye to “stay on the tracks” as the line of text is read. That’s why columns are so popular for printed media.
Interesting new things are happening on the small screen, too, so make sure you have a stylesheet for media type=”handheld”, since more and more people may be accessng your content with a mobile device.
I will just add a resounding, “Yes!” To this post. I am so irritated by skinny content columns that I will sometimes click immediately off of those pages when I see them. Sometimes I think mine is still a little skinny – but not as bad as some.
960 px wide seems to be the new “standard” for 1024×768 screens (there is an image floating around somewhere that shows its break down for grid-layouts). Though with all these 3 and 4 column width blog themes it doesn’t seem to be helping the _content_ much.
I have a better suggestion though, take the time to make a “print” media style sheet for website. This is even over looked in the default WordPress theme.
I just widened my blog for the second time (from 700-something to 850, then from 850 to 950). In addition to changing the column widths, I also had to change background, header and footer images themselves. Just a word to the wise.
I browse via everything from dual 27″ LCD monitors (not sure of the pixels) to 1280×800 to the tiny size of my sony ericsson.
Blogs that scale to those sizes get read, those that don’t, don’t.
I love my fluid themes. I would love a screen shot from Kevin here though, that 27 inch one may mess it up. I use a 21 inch and a 800×600 dual screen combo.
Maybe its my personal experience, but most of the designers that I talk to comment that fluid designs are not good.
Also, most established blogs and popular websites seem to be using fixed designs, right?
I would say the resolution decision still really depends on what your niche is and how tech savvy your readers are, and what your goals are for your site. If you still have 20% of your readers still on 800×600 and serve up Adsense on the right side of your blog, you could be losing quite a bit of ad revenue. Even if you’re not concerned about ads, I would still pay close attention to your stats, and let them tell you when the time is to break out of the 800px limit.
Does it really matter?
I’ll throw one out here. I ready very few blogs by actually visiting them. Unless I’m going to make a comment about an entry I’m using an RSS reader. Even with the RSS reader I’d say it’s 40% on a PC (with 1280×1024 resolution) and 60% on a blackberry.
I may be the oddball, but a properly working RSS feed is much more important to me than the actual website design/layout.
60 in 3
I happen to agree with Frank that, for me, an RSS feed is more important than design. However, that may not be true for my readers.
Therefore, I optimize for 1024 by 768. Seems to work for me. Gives me plenty of room for the content as well as a side bar on either side.
Nice tip. But, Daniel, in a theme 960px wide, what is the best option: one large sidebar or two sidebars, like here at Daily Blog Tips?
Guilherme ZÃ¼hlke O’Connor
Well, I really like the idea of the Switchy McLayout proposed at “A List Apart”.
Wow, Guilherme, thanks for the link to the ALA. I haven’t been to that site in ages. Silly me. Switchy McLayout does look very promising!
Guilherme ZÃ¼hlke O’Connor
@Michael Martine – You are welcome, ALA is not something to miss, IMHO 😉
Truly, I think the question of bigger resolutions for bigger screens just forgets that new technologies also come in very small resolutions.
Handhelds and mobiles are still dreaming in get to 800×600, leaving that in the past is not quite like looking to the future.
Truth is that a site that is not prepared to big resolutions as much as for small ones is not actually prepared for the future. Not for the future of mobile web, anyway.
I have written something partially related in the past.
I’ve heard this argument before but I just don’t get it. Why would anything than an uber small width website annoy anyone? Why alienate even 1 of your visitors when it isn’t necessary? People are buying laptops with 14 inch screens, and as mentioned before, there is the browsing on cellphones, so why leave them out in the cold.
I think you’re forgetting at least two things: (1) we have an aging population entering the two-pairs-of-glasses-for-reading-and-distance phase who are going to continue to browse at 800 x 600 for that reason alone; and (2) even people using larger resolutions aren’t always browsing full screen.
Tanya is right. Why alienate any potential visitors?
I design all my blogs in fluid layouts, checking to make sure the site is fully usable for anything from 800×600 on up. I agree with Tanya that it doesn’t make sense to alienate site visitors over a layout issue. Plus, I know from my years as a web designer that many people (my former clients) cling to the 800×600 resolution regardless of what their computers are capable of because they don’t like reading small print.
i just did what you speak about a few weeks ago, to take into account the fact that most people now on the net use 1024*768.
I totally agree with your arguments. I’m using a modified “glossy blue”, and it was very easy to change…
i agree with you, from the first onwards i don’t like having a 800 px wide page since leaving other space empty is like having wasting your space…. so its good to have a 1024 px which helps us to easily categories our content and format it.
my blog theme is a bit thin for my taste and I have been looking for something a bit wider. Probably not widening any of the columns, just adding one
I have noticed that when a blog is wider it gets more attention. I think its the clutter. I think clutter makes readers believe the site is more professional.
What’s white space all about? I hear that everywhere.
Frank, I do think you are the oddball. Not in a bad sense, but you are more technologically savvy than most people.
The vast majority of Internet users do not use RSS, let alone use a blackberry to read a blog :).
Ale, it depends on your objectives.
One sidebar might suit a simple blog that is focusing on content alone. 2 sidebars usually suit blogs with sponsors or more information.
There is no right answer really, you need to think what you will be displaying on your blog and the design around it, not the other way round.
I agree with the argument of not allianating readers. But if you use a 960px theme you will not be banning the 800×640 users, they will just need to view a not optimized site.
On DBT the % of 800×640 users is about 4%, and it has been that for several months, so I guess they are able to read the site nonetheless.
Also you need to consider the other side of the coin, people using huge screens (which nowadays is not rare) will find your 700 pixels theme tiny, and perhaps equally annoying.
Thanks everyone for commenting, discussion is always positive, it makes us reflect and reconsider our assumptions :).
djbaxter, yeah the aging populating factor is an interesting one.
Isn’t it more related to the font size rather than screen size? Ryan in fact was arguing that the increased width should be used to increase the size of the content. You can even pack a larger font if you have more space for the content.
Just a thought, thanks for commenting!
I always stick to 1024 X 768, whichever theme I’m using.
Wow, thanks for all the responses everyone!
@mickerlodeon: I would _hope_ that clutter is not what people want. That would be bad for me, as a designer. I hate clutter. But then again I can see where you’re coming from – people are weird in mass, and it’s interesting where they flock.
@Daniel McLean: Whitespace is any empty space in a design. So off to the left and the right of this blog design, where there isn’t any content or element, that’s whitespace. It’s often intentional, placed in such a way as to give the eye some direction, so that one knows where to look. Hope that helps!
Ahh gotcha thanks for the reply, I unintentionally used white space then 🙂
Guilherme ZÃ¼hlke O’Connor
@djbaxter – On the regard of user lower resolutions for people with less visual capacities, I think that it should be the other way around.
You have to increase the resolution of the screen, but you have to increase the resolution of the font as well.
I mean, if you have a 16px tall font on a 800×600 resolution or if you have a 32px tall font on a 1600×1200 the letters would have the same size, but the number of pixels per letter would be four times bigger, increasing legibility.
This is one of the reasons why reading on books is much more pleasant than reading online, the resolution is (much) higher.
I see the future includes a more deeper use of elastic layouts.
My blog layout has been build entirely with the concern that you can have an obcenely high resolution and you are able to increase the the font size without much damage to it.
Why do people think that just because I have a monitor that does 1024×768 or higher that I use my browser full screen? I hardly ever have my browser full size on my screen even at 1024×768. I have other applications running, I am switching between things. Perhaps people can learn how to make designs that flex and still show the information at the size that people have the web browser set at.
Here is a little fact about this blog for example, I have my browser at 800px wide and I get the content and the menu on the right….but not your sponsors, so I never see your ads.
LGR, I know what you mean (even though I don’t think you ever got pissed by not seeing my sponsors :)).
Still I think the vast majority of people browse with 1024×768 and use the full screen for it (at least statistics say thay).
In fact when I take decisions about design I try to settle for the habits of my readers, and not for my personal ones. Just because I do things on a certain way does not mean the majority of my readers will too.
I have to agree with LGR. My screen resolution is set to 1280×1024, but my browser is set to 800×600. Again, I’m sure I’m the oddball, but I just can’t believe that everyone browses with the browser maximized.
Guilherme ZÃ¼hlke O’Connor
@Daniel – Roger Johansson has found that among the 1070 people who participated on his poll out of his over 20K readers, only 50.4% maximise windows, but of course that may vary depending on the public of a particular site.
Alright let me throw another argument then, virtually 100% of the “popular” and “mainstream” websites on the Internet use a 960px or higher resolution.
Those guys pay hundreds of thousands of dollars to the web designers and web developers to come up with the optimal solution. Could they all be wrong?
By the way I respect everyone else’s opinions, just trying to argument with different perspectives.
I’d say those are absolutely perfect examples. While the designs are wider than 800 px the “main” content is still 100% viewable (is that a word?) within an 800px browser. Just like your layout some of the sidebars are not visible but the content is.
I use the min-width, max-width attributes for my site, so even though it is optimized for 1024×768, it’s still looks good in 800×600 and won’t show a horizontal bar. At work I’m forced to use a 800×600 screen, so gotta think about those of us working in dumps where Windows 98 is still king. 😉
I don’t like fluid because on large screens it gets difficult to read the text, which is why I think a semi-fluid design is the best way to go.
A max and min is a good compromise for fluid design. It can get more complicated when there needs to be a graphic header for a site.
Daniel – Not pissed about missing the sponsors. But it does pose an interesting problem. They help pay for the site, but because the design and my browser settings I have no clue they are there. Kind of defeats the purpose. I am sure I am not the only one, so how many people never see them?
LGR, I know you’re not pissed, but as I mentioned the same thing happens for mainstream websites, most of them have sponsors on the right side. It appears to be the best compromise.
Advertisers track clicks and leads also, so they know how many people you send to them, and this is often times more important then how many people are seeing the ads.
I agree totally about enlarging the size of blogs. I think the only situation were websites should stay 800 x 600 is for government sites but even they are moving to 1024 x 768.
I just recently wrote a post about this actually which can be found hear: The ultimate answer in what screen size to use in web design
Wow! There are some great thoughts in the comment thread on this topic. Certainly has given me a lot to consider; however, I’m with Daniel, 800×600 is dead. I will say that is a qualified “dead.” You really need to take your audience into consideration and draw your own conclusions about what resolution you think they’re using. Google analytics and Feedburner stats can help determine what people are using when they visit your site, but again, it’s no guarantee they are viewing your site with the browser maximized.
I tried your suggestion and widen my boarders. It looks a lot better. Thank you. My blog on blogger had a lot unused white space while my articles were cramped up. It required no tech savvyness on my part. Just go to the template and click on the stetch version.
David Airey :: Creative Design ::
Personally, and speaking as a graphic designer, I greatly prefer fixed width sites over fluid.
There’s more control for the designer, knowing how things appear for all audiences.
On top of that, your text line remains constant so there’s no moving your head back and forth to read a paragraph of text.
@David – in regards to the text line – with coding you can make it stay within certain measurements and a legible reading length.
Personally as a web designer and also usually designing from a graphic designers psd file, I agree that a fixed is usually my preferred choice as well.
David Airey :: Creative Design ::
I guess that most of the fluid websites I’ve come across are designed by people who don’t know how to code the text line (or they’re not concerned about it).
Yeah that would be right, most either spreads all the way, all they center the content/ design which I personally hate.
I do not want to blow my own trumpet but if you look at my website (while not graphically pleasing) it is a fluid but the content has a max-width and also the design is left-justified.
Have a look at the code if your interested 🙂
Why make all this ample room for a background image to show?
background image != content. So don’t emphasize it. You said it yourself, emphasize the content. Wider content area is friendlier to using images inside text.
great info my blog still using 800×600…must change immediately
I can only work with wide blogs. I need room !
which time update google Page Rank
Thanks Daniel, i have wanted to do this for a while but never thought it would be worth while, however after reading your article on increasing the size of your web template it acted as the final shove i needed to do it.
So i have just done it and it looks superb, looks a lot better and i can fit more on 😀
All of you are missing one of the most important points in answering the question of “How Wide Should Your Blog Be?”. The question you should ask is “What width gets you results?”
The only way to answer that is TESTING!
My personal preference (i.e. the layout I most like to read) is a 3 column blog with a fluid design. However, my testing says that will NOT get me the best results! Testing in almost every single niche (and I’ve tested dozens!) proves every time to work best with a fixed width of not more than 850 and a 2 column layout with a right hand sidebar.
In your testing you need to consider things like:
* # of page views per visitor (this changes drastically based on the layout)
* # of subscribers based on the layout (again HUGE changes with different layouts! Going from a 3 column to a 2 column left hand sidebar increased subscribers almost 40% and then switching from a left column to a right increased it another 30%)
* # of sales from links in your posts AND # of sales from ads in your sidebar or blogroll (we’re all in this business to make money, right?)
* how often your visitors social bookmark your posts (the layout makes a difference — you want to get them to social bookmark so that you can get more traffic)
I hadn’t heard about the tool mentioned in the ALA article. I’m anxious to try it. From my past testing experience, I have a feeling it is definitely going to improve conversions across the board!
Remember that those using the new larger, widescreens monitors are still very much in the MINORITY. If your niche happens to be other internet marketers or web designers, then you’ll probably find that optimizing for the wider, bigger monitors increases conversions. But on the other hand, if you’re in a non-techie niche, expect to get the opposite results!
My target market is those new to marketing on the internet. Most have not yet made the switch to wider monitors or bigger monitors. (Heck, many of my students are still working with dinosaur computers when they first start out that have 640×480 monitors!) You’ve got to consider your market in making the decision and TEST, TEST, TEST!
I don’t like wide blogs. I also don’t like white blogs. Makes me feel cold. Sorry
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 for your size tips
Agreed totally, people who do even have 800×600 would highly unlikely be worthy clientelle for commerce websites if you ask me, or maybe thats a bit judgmental.
However I’ve just started my Design Blog, its 90% complete, and I was wondering where I could find a guide or tutorial to widen?
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.
always stick to 1024 X 768, whichever theme Iâ€™m using.
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
Ahh gotcha thanks for the reply, I unintentionally used white space then
Comments are closed.