Hate UML?

Draw sequence diagrams in seconds.
http://www.websequencediagrams.com

How wide should you make your web page?
Posted on: 2009-03-22 15:58:15
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.

Want more programming tech talk?
Add to Circles on Google Plus
Subscribe to posts

Post comment

Real Name:
Your Email (Not displayed):

Text only. No HTML. If you write "http:" your message will be ignored.
Choose an edit password if you want to be able to edit or delete your comment later.
Editing Password (Optional):

tot2ivn

2009-07-18 21:09:57
Nice :D

goodArticle

2009-10-21 18:53:11
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.

Beatrice Didgelock

2010-01-03 22:57:23
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!

Jer

2011-01-15 02:10:43
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.

P Smith

2012-02-05 20:46:38
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).

.

P Smith

2012-02-06 19:10:17
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).

.

Steve Hanov

2012-02-08 03:07:29
If the column is too wide for you, you are free to adjust the width of the browser window to your liking.
Email
steve.hanov@gmail.com

Other posts by Steve

Yes, You Absolutely Might Possibly Need an EIN to Sell Software to the US How Asana Breaks the Rules About Per-Seat Pricing 5 Ways PowToon Made Me Want to Buy Their Software How I run my business selling software to Americans 0, 1, Many, a Zillion Give your Commodore 64 new life with an SD card reader 20 lines of code that will beat A/B testing every time [comic] Appreciation of xkcd comics vs. technical ability VP trees: A data structure for finding stuff fast Why you should go to the Business of Software Conference Next Year Four ways of handling asynchronous operations in node.js Type-checked CoffeeScript with jzbuild Zero load time file formats Finding the top K items in a list efficiently An instant rhyming dictionary for any web site Succinct Data Structures: Cramming 80,000 words into a Javascript file. Throw away the keys: Easy, Minimal Perfect Hashing Why don't web browsers do this? Fun with Colour Difference Compressing dictionaries with a DAWG Fast and Easy Levenshtein distance using a Trie The Curious Complexity of Being Turned On Cross-domain communication the HTML5 way Five essential steps to prepare for your next programming interview Minimal usable Ubuntu with one command Finding awesome developers in programming interviews Compress your JSON with automatic type extraction JZBUILD - An Easy Javascript Build System Pssst! Want to stream your videos to your iPod? "This is stupid. Your program doesn't work," my wife told me The simple and obvious way to walk through a graph Asking users for steps to reproduce bugs, and other dumb ideas Creating portable binaries on Linux Bending over: How to sell your software to large companies Regular Expression Matching can be Ugly and Slow C++: A language for next generation web apps qb.js: An implementation of QBASIC in Javascript Zwibbler: A simple drawing program using Javascript and Canvas You don't need a project/solution to use the VC++ debugger Boring Date (comic) barcamp (comic) How IE <canvas> tag emulation works I didn't know you could mix and match (comic) Sign here (comic) It's a dirty job... (comic) The PenIsland Problem: Text-to-speech for domain names Pitching to VCs #2 (comic) Building a better rhyming dictionary Does Android team with eccentric geeks? (comic) Comment spam defeated at last Pitching to VCs (comic) How QBASIC almost got me killed Blame the extensions (comic) How to run a linux based home web server Microsoft's generosity knows no end for a year (comic) Using the Acer Aspire One as a web server When programmers design web sites (comic) Finding great ideas for your startup Game Theory, Salary Negotiation, and Programmers Coding tips they don't teach you in school When a reporter mangles your elevator pitch Test Driven Development without Tears Drawing Graphs with Physics Free up disk space in Ubuntu Keeping Abreast of Pornographic Research in Computer Science Exploiting perceptual colour difference for edge detection Experiment: Deleting a post from the Internet Is 2009 the year of Linux malware? Email Etiquette How a programmer reads your resume (comic) How wide should you make your web page? Usability Nightmare: Xfce Settings Manager cairo blur image surface Automatically remove wordiness from your writing Why Perforce is more scalable than Git Optimizing Ubuntu to run from a USB key or SD card UMA Questions Answered Make Windows XP look like Ubuntu, with Spinning Cube Effect See sound without drugs Standby Preventer Stock Picking using Python Spoke.com scam Stackoverflow.com Copy a cairo surface to the windows clipboard Simulating freehand drawing with Cairo Free, Raw Stock Data Installing Ubuntu on the Via Artigo Why are all my lines fuzzy in cairo? A simple command line calculator Tool for Creating UML Sequence Diagrams Exploring sound with Wavelets UMA and free long distance UMA's dirty secrets Installing the Latest Debian on an Ancient Laptop Dissecting Adsense HTML/ Javascript/ CSS Pretty Printer Web Comic Aggregator Experiments in making money online How much cash do celebrities make? Draw waveforms and hear them Cell Phones on Airplanes Detecting C++ memory leaks What does your phone number spell? A Rhyming Engine Rules for Effective C++ Cell Phone Secrets