< >

How wide should you make your web page?

Posted 15 years ago

Based on 22500 unique IP addresses over the past week, reddit users have these browser widths:

The numbers on the bottom are browser widths (minus 40), and the numbers on the side are the counts of unique visitors with that width.

Data collection

At the time this blog posting was made, my blog had hand-drawn borders in the page title. They were generated by a CGI program on the fly. For each visitor, a number about 40 pixels below your browser width is recorded in my server logs. I wrote a perl script to create a histogram for unique visitors, and pasted the result into gnumeric to create the chart.

Results

The peaks seem to correspond to 1024, 1280, 1400, 1600, 1920 screen widths, with 1280 being the greatest peak. This indicates that most people have their browser window maximized.

There is also a section of uniformity between 1000 and 1280. This seems to be a sweet spot among those who do not maximize their browsers.

Surprisingly, there are still a few people running at 800x600 resolutions. And one at over 2500 pixels across.

Steve Hanov makes a living working on Rhymebrain.com, PriceMonkey.ca, www.websequencediagrams.com, and Zwibbler.com. He lives in Waterloo, Canada.

Post comment

edit

Steve Hanov

twelve years ago

If the column is too wide for you, you are free to adjust the width of the browser window to your liking.

edit

P Smith

twelve years ago

Pixel size doesn't matter. The size of the human head does.

The main text on the screen should be no wider than the width of a human head, 50-60% of the screen width. This eliminates head movement and keeps the text within the peripheral vision of most people, reducing eye movement.

Ask yourself this: Do newspapers, magazine, dictionaries, encyclopedias and other print media have text across the full width of pages? Or are they printed in columns?

If it's any wider, it forces the reader to move his head or eyes and becomes annoying to read. If a site designer wants people to read the site and come back, he should make it comfortable to visit. For example, the main text on this blog looks fine on my netbook (1024x600) but is too wide to read comfortably on my 15" laptop screen (1366x768).

edit

P Smith

twelve years ago

Pixel size doesn't matter. The size of the human head does.

Ask yourself this: Do newspapers, magazine, dictionaries, encyclopedias and other print media have text across the full width of pages? Or are they printed in columns?

edit

Jer

13 years ago

These numbers are misleading though -- just because people have large monitors doesn't mean they browse with the window maximised.

The best thing about a widescreen monitor is having two apps open side by side (like two columns) -- It's always *really* annoying when a site forces horizontal scrolling (or maximise).

Text line lengths can get waaay too long on a maximised, large screen (making it harder to read), so I actively avoid maximised browser windows.

edit

Beatrice Didgelock

14 years ago

Your page should be just as wide as the client area of the browser. No wider, no narrower. Seriously, it isn't that hard - get coding!

edit

goodArticle

14 years ago

NIce. 1280 is definitely dominating, but what this chart doesnt show is how high that category used to be and at what rate it is decreasing. 1600 has really picked up steam. Maybe its best to make 1600 and add horizonal scrollbar. 1600 is growing fast.

edit

tot2ivn

15 years ago

Nice :D

VP trees: A data structure for finding stuff fast

Let's say you have millions of pictures of faces tagged with names. Given a new photo, how do you find the name of person that the photo most resembles?

In the cases I mentioned, each record has hundreds or thousands of elements: the pixels in a photo, or patterns in a sound snippet, or web usage data. These records can be regarded as points in high dimensional space. When you look at a points in space, they tend to form clusters, and you can infer a lot by looking at ones nearby.

Spoke.com scam

Rant: Why do companies think they can make money by posting false information about you on the Internet?

Rules for Effective C++

The rules for safe C++ code are surprisingly controversial.

You can cheat so your web site seems faster than it is

You can make your web site seem faster without actually being faster.

Why Perforce is more scalable than Git

Branching on Perforce is kind of like performing open heart surgery. But here's why git can't hope to compete with it.

How a programmer reads your resume (comic)

People thought it was a comic, so I never corrected them.

Five essential steps to prepare for your next programming interview

They put you in a room, give you a problem, and stare at you while you fumble around with markers on a whiteboard for 45 minutes. With a little preparation, you'll look like a pro.

Microsoft's generosity knows no end for a year (comic)

Finding Bieber: On removing duplicates from a set of documents

Using a locality sensitive hash, you can mark duplicates in millions of items in no time.

Exploring sound with Wavelets

Here's a program to create scalograms of sound files.