Saturday, September 06, 2008

Monitor Resolution and Food Blog Design

I'm working on some design tweaks to my site, and one that I'm considering is increasing the width to 1024 pixels, an increase of about 100 pixels. I plan to add some white space between the content area and the sidebars and allot more space for the sidebars. My stats show that 95% of my visitors have screen resolutions of 960 pixels or higher, and almost 41% have 1280.

I've looked at the current design in, and it shows that the right sidebar gets cut off at 800 pixels. About 4% of my visitors have that resolution.

So I'm trying to decide what to do. I want to keep up with the majority of my visitors in terms of design without making the site unusable for the rest. I'm conflicted. My gut says to stay put so I don't put off visitors still operating at lower resolutions, but I'd love to give the design more white space between the columns because it makes it more readable, without sacrificing content space.

All thoughts are welcome!

This Post was written by Andrea from Andrea's Recipes.


cybele said...

Late last year I went to a wider design as well, after studying my stats and seeing that about 90% were at 1024 or higher.

The only thing to make sure is that the main content (the stuff that 90% of your readers are interested in) is visible in 800. And yours looks good that way, so I think it's the way to go. (After all, we can only scroll so much, it's good to use the width as well.)

Jerry said...

I really think the time has come for larger resolutions to get the focus they deserve. I've been running my site at 1000px wide for some time now and haven't had a single complaint

Almost Vegetarian said...

It's a balancing act, isn't it? Better, more beautiful design elements and, oops, someone is too impatient to wait for the download and too rushed to scroll or too, well, you get the picture.

These days, I still aim for simple over anything else. But one day, the designer in me will breakout and heaven help anyone with a small monitor and slow connection speed.


Lars said...

I must say, I agree with cybele. Keep the main content visible within 800px, but allow sidebars and what not to flow into up to 1024.

Or you could make a design that changes with the width of the browser dynamically, so everyone wins, except the designer that has to be briliant, so make this nice looking aswell.

snekse said...

I agree with Cybele. We redesigned our site a couple of weeks ago because we had less than 5% at 800px or less. At the same time, we made sure our main content is still visible at 800px, they just miss the right side column, which has nothing too important in it.

Andrea said...

Thanks for all the feedback. I found an interesting article discussing the design of some of the big blogs.

It discussions layout and typography.

94% use a centered layout
92% use a fixed layout
56% use 951 - 1000 pixel width (only 9% using 800 or less)
58% use at least half the layout space for main content
90% use CSS layouts
98% use dark text on white background
34% use 85-94 characters per line
34% use Verdana for content
34% use 12 px font size for content
30% use Arial for headlines
24% use 20-22 px for headlines

The follow-on article covers structure, functionality, and advertising.

Andrea said...

Oops, sorry, the tiny urls obviously don't work without a little code. :-)

The original design article:

The follow-on design article: