Actual Browser Sizes (final)
For years we have seen statistics telling us the size of people's screens. We know that 1024x768 is the dominant screen size, and that large resolution screens are coming strong.
But, this is useless information. We do not want to know the size of a person's screen. We want to know the size of the browser's content area. A person might not use the browser maximized, and other elements - taskbar, toolbars and extensions - takes up valuable screen space.
This report aims to look at the size of the browser window, and illustrate people's browsing behavior.
The report finds, among other things, that the majority of people browse maximized or very close to it. That Mac user have bigger screens, but their browser are the same size as on any other platform. And, in order to support 95% of your visitors, you need to design for a maximum size of 776x424px.
Report Sections
- Where did the data come from?
- Display usage
- Browser usage
- 800x600/1024x768/1280x??? Specifically
- What size do I need to support?
See Also
- Actual Browser Sizes - The Movie
- Actual Browser Sizes - Preview
- How to design for browser sizes, February 2007
Related
- Design for Browser Size - Not Screen Size, Justaddwater.dk (August, 2006)
- Screen Resolution and Page Layout, Jakob Nielsen's Alertbox (July, 2006)
- Size does matter - Actual numbers, mentalized (October, 2006)
- Adaptez la taille de vos sites aux fenêtres de navigateur de vos utilisateurs (French), Gwix (July, 2006)
- Optimierung für Bildschirmauflösungen (German), SelfHTML (April, 2006)
Comments
smithee - Oct. 28, 2006
Excellent research and article. Thanks for sharing the hard work.
Anonymous - Oct. 31, 2006
Many thanks!
Dare I say, it would be great if one could see stats per country.
Gamermk - Oct. 31, 2006
Very excellent work!
I think this is going to be a bit of a downer for the 1024x768 parade though.
Thomas Baekdal - Oct. 31, 2006
Stats per country is unfortunately not possible. The browser size data was collected seperately, without any link to the stats collected trough Google Analytics.
Håkan Reis - Oct. 31, 2006
Yep, got similar results from my, highly un-scientific, research. It landed close to 800-900 witdth but around 900 height.
One question though, is the width from the fact that most sites are best viewed at 800 with or is it that it works out best at that resolution?
Maybe with better flowing column layouts that adapt to wider viewing this would change.
Thomas Baekdal - Nov. 1, 2006
Håkan, That is a very good question. I cannot tell from the data if 800px is better because of the resolution or simply because that is what most websites use.
Another good questions is. If a side is too big, but still below the "maximized" size, will they simply resize the window to make the browser fit. In my experience some will, but in terms of usability it is a not a good idea.
Anonymous - Nov. 1, 2006
In 2006 people still author=ing web content for minimum resolutions/window sizes? First make it work on the tiniest mobile phone even in text-only mode, then add decorations if needed. That way you should be serving more than just 95% of your visitors.
But you knew that already, right? And this article was a joke, like "hey, remember how it was in 1996 when we used guesstimates about visitors´screens on the basis of our design"? I hope so :)
Russ - Nov. 3, 2006
Why is this relevant in this day and age? Surely we design for all screen sizes? 'Jello' and or fully fluid web sites?
The best amongst us offer differing views to their web sitea, like a standard view, light, zoom, contrast and stuff for PDA and phones? All with CSS?
Russ
P.S. I hope it is a joke...
thomas Baekdal - Nov. 3, 2006
Russ, This report is not for people who make fixed layout websites - it is for any types of websites.
In my report I have found that if you want to support 95% of your visitors you need to design for "776x424" for fixed layout sites - or between "720x400 to 1408x912" for fluid designs. So this is just as relevant to "the best of us" as anyone else.
Not to mention that the report finds that if you are making a fluid layout, the difference in "view" are a staggering 688px wide and 512px in height. I believe that such a huge difference cannot merely be solved by adjusting the width of the elements in CSS (and this is without considering mobile devices).
The purpose of this report is to eliminate guesswork and instead look at the facts. For you that means that you can see what "fluid layout" really means. That your design should be able to handle a difference of 688px - e.g. without making the text less usable because of the lenght of each line.
Stephan - Nov. 5, 2006
A joke?
Fluid design only goes so far. I work with xga, svga (1280×1024) and wuxga (1920×1200) monitors and I have yet to see a fluid design that works on all three.
At high resolutions fixed width layouts actually work very well and fluid designs often break down.
Fluid visual layouts work within a limited range of resolutions, when stretched beyond this range usability deteriorates.
Good visual layouts are not (just) about esthetics but about how humans can process visual information in an effective manner.
Think I'm kidding? Check out how much difference the placement of a form field label can make (concerning 10s of pixels not 100s):
Anonymous - Nov. 6, 2006
your site scrolls horizontally at 800x600. have you not read your own article?
Thomas Baekdal - Nov. 6, 2006
Give me a break :o)
The layout for this website was made in April 2006 - and back then it was very difficult to see that I in the future (now today) would investigage browser size usages.
Come to think of it, I still cannot see into the future...
Mark - Nov. 7, 2006
As Stephan stated this is why it is important that browsers support the CSS properties min-width, max-width, min-height, max-height etc.. It is difficult to create a 100% effective solution but it also helps to know whats out there. mac users for example tend not to use full screen browser windows while on Windows it is very common for the browser to "rape" the screen real estate. Then add in tool bars etc as stated in the article and you have a even smaller area to work with.
Firefox etc can do this as well depending on if people use the drawers er.. sidebar or not etc etc.. Its atricky game.
Ryan - Nov. 8, 2006
I run an xps series laptop, 1920 x 1200 resolution on the native LCD, and an additional 1600x1200 on an external 20" LCD in extended desktop mode (dual monitor set up)
on average, my browser window, using firefox 2.0 is roughly 1400 x 900 pixels which is roughly the maximized size on my previous laptop - 1400x1050 I think?
maximized browsers annoy me when I'm running significantly larger resolutions. e.g. at home I run 1600x1200 or higher on my 21" CRT. My wife almost always maximzes the browser window, even if a site's design forces the content into a path that's only 600 pixels wide.
pete - Nov. 12, 2006
It seems, that quite many developers think that people would maximize their browsers. IMO, Web developers should make zero expectations on how the end users are going to use the site.
I personally never maximize browser windows. I can't read stuff on the screen when the browser is maximized. The text paragraphs simply get far too wide on fluid or flexible web-sites.
This site is comfortable for me. It works fine whether or not it's maximized. This article and comment paragraph is just the right width for my eyes :)
Thomas Baekdal - Nov. 12, 2006
Uhm...
Mark, I do not think the CSS min/max width/height has anything to do with this. The reason is that all them puts a limit on the size of the elements, but the report found that such limits is actual a problem - Instead we want unlimited restrictions.
I do agree that it is a tricky game.
Ryan, This report is not about individual preferences, but common browsing behavior. I appreciate your comment, but you belong to a very small minority - an edge case (less than 0.002% to be exact).
Pete, Again personal preferences does not really help me. One example is that I got a 1680x1050px screen, and I often browse maximized. But, I started to design this site to my preferences it would be very bad to any else (except Ryan coincidently).
I do not agree that either that "Web developers should make zero expectations on how the end users are going to use the site", because trying to make a layout that woks for everyone is a very quick way to fail.
I do not know the key to success, but the key to failure is to try to please everyone- Bill Cosby
Now, I do not pretend to know the answer to how we should design our sites. I do not think fixed layout is the solution, nor do I think fluid layout would do the trick. I am personally learning towards resolution depended layout - but they need to get a lot smarter than what we have seen so far.
The big problem with this is that we cannot measure the physical size of people's screens. There is a huge difference in sizes of 1024x768 on a 15" display vs. a 19" display.
Huygens - Nov. 20, 2006
I think good example of web sites that scale well on various resolution, various platform and various browser are Google ones: GoogleMail and GoogleCalendar.
They scale well from 771x400 at least until 1280x836 which would be the size of my viewport when my browser is maximized.
I wish my personal web site would be that friendly to user... :-)
Huygens
Thomas Baekdal - Nov. 23, 2006
Huygens,
One thing to keep in mind is that Google Calendar is a web application - not a website. They do not have all the problems we have with presenting text and images in a flexible way.
But I agree, as a web application that works quite well (that is unless you go below e.g. 771px)
Jeffery To - Nov. 24, 2006
Interesting article. Thanks for the work.
I have a few questions about the data. I assume the sites you used have fairly high traffic levels, but are the five sites enough to represent general web surfing behaviour (even with a 3 month tracking period)? How many data points (browsers, computers, etc.) were recorded?
About the sites themselves, do the other four sites use fixed or fluid layouts? This relates to browser size vs. display size, where the conclusion is that the magical width is about 1350px. Could this be because the sampled sites were unusable beyond that width (in the case of fluid layouts), or perhaps because there was no benefit from viewing them with a wider window (in the case of fixed layouts)?
(It makes sense that most people would use as much screen height as they can, because most web pages are designed to scroll downwards.)
I guess my main question is, are the sample sizes (number of sites, size of audience) large enough to be representative? Could the sampled sites have skewed the results?
Thomas Baekdal - Nov. 24, 2006
Jeff,
No, 5 sites are far from enough to represent general web behavior - and even if you get 100,000 sites it would still not be enough. You actually got 3 problems with data gathering.
- Not enough data, and it does not represent the general population (as in this case)
- Too much data, and the general picture no longer represent you as an individual.
- Somewhere in the middle and you got both problems
What I can say is that my collection base represents a very wide audience. The 5 fashion sites represent almost all ages (except kids and seniors). The people on this site is mainly technology minded (and probably male for the most parts), so that is a bit skewed. There is also a bigger focus on Europeans, than other continents.
The other problem is how the data was collected. There are generally many ways to collect the data. The most common is:
- once for every page view
- once for every visit
- once for every
- once for every absolute visit, unless the view sizes is changed (the one I used)
Each method can be seen as both good and bad - depending on what you want with the data.
The actual amount of data was about 650,000 data points.
An important thing to keep in mind is that my study looks a lot like similar studies done by other people (see links above). Too me this means that there must be some truth to this. But, if you want accurate data I recommend you setup your own stats :o)
Thomas Baekdal - Nov. 24, 2006
BTW: All the sites was made using fixed layout - but none of them had the same fixed width (from 670px to 980px)
Chris - Dec. 16, 2006
This site documents a very good job. Thanks for the work. There are some people anywhere who actually realized that we do not all have big monitors and big browser windows. And - that's a christmas gift - here some people talk about the visible aerea in the browser window.
I'm coming home while entering the site. Thanks a lot. C
webnician - Jan. 3, 2007
Thanks for the research and effort you put into this data. Most other resources are either out of date or cover everything but what I wanted to know.
dried_squid - Jan. 5, 2007
Thank you Thomas Baekdal.
Skimmed the comments, and I always wonder why no one seems to consider the intention of the content provider.
When I do a page for my own content, the first thing I consider is how I hope it will be used. Specifically, is text wrap useful to my intent? For my own use, allowing a floating div with reflowing text often is most useful.
Have a good year.
Blaise - Jan. 11, 2007
Thanks you very much!
Do you think that the fact that browsers with javascript disabled, or with bad or no support of javascript, could have some influence on these statistics?
Filip Hracek - Feb. 21, 2007
to Thomas: Thank you very much! This is an extremely helpful article. Thumbs up!
to all the fluid layout nazis out there: No, you are a joke. Have you ever designed a website that's used by more people than your and your girlfriend? Because in the real world, you have to make compromises. See newsvine.com, nytimes.com, bbc.co.uk, emusic.com, flickr.com... and I'm just clicking on the icons of my bookmarks folder, one after another.
When designers and editors are serious about the layout, and when they're looking for something that just works, they end up with fixed layout pretty much every time. I'm not saying fluid is useless, but it doesn't provide the certainty of a fixed layout.
And yes, I am writing this in the year 2007. Go write about this on slashdot!
Re: maximized browsers: All people I observed so far will maximize their browser when they see the page won't fit. That means I'm going for 980px for my next project.
Ed - Feb. 22, 2007
websites needs to be build % scale then fixed size pixels then you solve problem for all users..
some good examples :
if you go http://www.design.ru you can find even more good examples in portfolio section.
sorry for bad English... :)
Deian - Feb. 22, 2007
Interesting article, I'm currently wondering what size to make a template for my blog, i think aiming for screen sizes of 800x600 is quite acceptable for two columns, and 1024x768 for three columns.
Lets not forget that we are looking at the view port 'width' here, not overall size. I'm using an XPS laptop too, running at 1920x1200, and alt=hough fluid sites are good for resolutions of 640x480 to maybe 1200x800, anything over 1200 wide becomes annoying IF the main content of the site is centred and the browser is full screened. You lose space on the sides, if I decide to run two applications, browser on one side, and maybe iTunes on the other side it would be OK, but I'm still stuck to old habits of a 15inch monitor. For this reason alone I will design from the left for 465px wide.
Another issue with fluid sites for the larger resolutions is how wide the text lines become, sometimes they get so long as to make the eye work hard to track the lines, not good usability really.
The only time to design fluidly is when SVG is fully supported by browsers, then text and vector images will be resized with the layout, for this reason alone a site minus fancy background graphics can work quite well... or you can go the Flash route. That also has it's pro's and con's.
I assume many of you use the Webdeveloper plug-in for Firefox? It's a godsend for web designers!
Kusiss - Jun. 4, 2007
I still use base as 800.. Though I only have two or three link directories that min is 1024.
I think maybe in 2-3 years time base might go upto 1024.
Hasan
Thank You for voicing such a practical perspective! - Jun. 13, 2007
Hopefully with more people like you voicing this concern, it will be enough to stop the trend of moving into this wide/maximum resolution size design that is based on an inaccurate assumption that is cropping up all too quickly.
I think a combination of a base + fluid design is best. A base of 760-800 pixel wide will support a majority of your users and the rest should remain fluid whenever possible and makes good design sense to do so.
Rachel
Serguei Hovsepian - Sep. 19, 2007
I think this story is similar to browser compatibility issue. Even today you can find websites supporting Netscape 4 browser.
I am sure that even 100 years from now there would be someone using 800x600 resolution!
KAVodov - Oct. 16, 2007
stast of different display resolutions (its actual for russians users):
1024x768 45.4%
1280x1024 28.7%
1280x800 8.4%
800x600 5.0%
1152x864 3.9%
1440x900 2.1%
other 1.8%
1680x1050 1.4%
1400x1050 0.9%
240x320 0.7%
1600x1200 0.7%
1920x1200 0.3%
640x480 0.1%
Seo - Jun. 24, 2008
Since many new monitors are 16:9 or similar format, it is still not a good idea to use wide designs.. I will still use 1024 for some more time..
Norbert - Jul. 1, 2008
I've always loved you man.
Animated Fireworks - Jul. 15, 2008
Great Report. I love seeing data on this because it's always a guessing game as to how wide you 'think' the user's viewable area will be. I've always designed for Full 1024x768 minus the scrollbar area, and just assumed that anyone viewing the site in a smaller window is used to scrolling like crazy already.
Jim - Jul. 16, 2008
I think it's safe to say that anyone running 800x600 is going to be browsing full-screen.
Antony - Jul. 31, 2008
Hi There.
I use 1024x768 at home and at work ... I'm in my late 40's and still don't need glasses which is great. When I'm not designing websites I work in a social project with an internet cafe in it for the poorer people in town to come along and surf, etc. The most successful group that come regularly are the pensioners (people over 45?!?). If I were to increase the resolution, they would complain and complain - when you are learning computer, internet, etc. you need things to plain and simple - similarly, using a mouse or a keyboard.
Love the video!
Antony (Germany)
Pali - Aug. 11, 2008
These days (2008) it is better to use 1024 width as that is the width that lot of users use when defining the width of their screens.
Boxcar Studio - Aug. 21, 2008
Excellent work researching this incredibly important information. Given the relative ease with which you collected this data it's very unfortunate that browser configurations aren't tracked in widely-used statisics and analysis software, e.g. Google Analytics. So long as that's the case it seem very beneficial to the web development community at large to revisit your report on a regular (yearly?) basis - especially considering the number of large flat panel displays flooding the market these days. Nicely done!
Joel - Nov. 12, 2008
This may have been true 2 years ago... but in my opinion, NOT ANYMORE.
Lets be honest guy... popular sites like microsoft.com, ibm.com, amazon.com, ebay.com and even apple.com... their websites are designed for a MINIMUM browser's content area of 980px.
Nowadays monitors are huge (usually widescreen)... and so are their resolutions.
At work, my resolution is 1280x800.
At home, my resolution is 1680x1050.
With these resolutions, I have to admit that I rarely use the fullscreen option... but 776x424 will be ridiculous for me.
Published: Oct. 24, 2006 in reports
FaceBook
Twitter
LinkedIn
YouTube
Flickr
Philip - Oct. 27, 2006
This is a goo article. I appreciate the thoughts on this. I haven't even thought about the fact that some people browse without maximizing.