When I tweeted this and then followed up with this, I got comments like this. That comment has a perfectly valid point.
We often talk about screen resolution, which is not the relevant statistic when thinking about what space our website's visitors have available. The relevant statistic is browser window size. So why do we talk about screen resolution so much? Well probably because in the most popular analytics software in the world, Google Analytics, it's the only data you get.
And so, what are we to do? Well, start measuring browser size, for one.
What if we figured out all kinds of data about our visitors browser sizes. What is to be done with this data once we have it? If @beep has taught us anything, it's that we can and should accomodate to browsers of any shape and size.
But still, having information is never a bad thing. Smarter men and women than me may see things I do not and think of reasonable actions to take based on this data.
That's what I did on CSS-Tricks for one day. If you'd like, here's the complete data I collected as SQL.
Remember: ALL of this data was collected from css-tricks.com. So it's a bunch of designer nerds, probably. It's only relevant to this site and sites with very similar audiences.
First, the borin' ol screen resolution data. I got this by querying 500 random samples of data and laying div's of that size on top of each other with as light of gray as I could make. Incidently, its rgba(0,0,0,0.004), because rgba(0,0,0,0.003) is pure white (weird).
Much more blurry. Also makes sense. Even as I write this my browser is at some very arbitrary sizing, probably about 80% of my screen resolution. Click those images above to see them bigger. You'll notice that whatever visible hard edges there are in the browser size version, they are exactly 20px narrower than the screen size counterpart. Interesting.
So very few people browse full screen, but the majority of people browse pretty close to full screen. As speculation, it's likely the Windows folks are the ones browsing full screen, as that's much more natural behavior on that operating system. But now "full screen" is a big deal in OS X Lion, maybe that will start effecting this stuff.
So where is mobile in all this? Despite reports of massive growth in mobile browsing, which I do not doubt, CSS Tricks has very little mobile traffic.
The most popular screen resolution is 1680 x 1050 with almost 13% of visits having a monitor of that size.
Predictably, there is no one browser window size that is far above all others, but leading the pack is 1349 x 667 at 0.75% of visits.
The most popular screen resolution ratio is 16:10 with 46% of visits having that. Maybe because a lot of video is 16:9 and monitor makers wanted people to watch that but still have room for some OS chrome? 16:9 is next with 29%, 5:4 with 12%, and 4:3 with 8%.
All of those ratios are wider than tall. Turns out only 2% of visitors have screens that are taller than wide (or at least that report that way).
Actual browser windows also tend to be wider than tall, with only 3% of visits having dimensions that are taller than wide.
To Jamie Bicknell of Rentedsmile Web Design for helping me wrassle together the MYSQL queries and PHP needed to do anything useful with the data.
Thanks for the tip; was looking for something like this. One question: Does this measure the actual browser size or the available real estate one has to render within the browser? For example, does the height attribute also include any menu bars that a user may have enabled, the File menu, etc.? Is there a way to determine the actual real estate available within the browser rendering space vs. the full window if the answer is yes, it include those menus?
If the measurement had been done for pages that don’t have a scroll bar (because everything is “above the fold”), then the maximized viewport width would be exactly the same as the screen width.
Cuz I don’t know how to do that. But that does sound easier/better. If you wanna adapt this and blog about it, that’d be rad.
Gathering Analytics data isn’t the most easy thing in the world and since Chris asked for a specific set of data, this isn’t all that bad, considering. I for one know the struggles as a developer, using the Analytics data and believe me, it’s much easier to disregard it if you’re not using it on a large scale like I do with my CMS.
is this maybe a good use of google analytics custom variables to tie it all together?
Aren’t you forgetting browser chrome in your results? The toolbars and stuff can take up 100px or more from the height. I looked at your data and over 68% had a browser width within 50px of their screen width.
Even that is surprising to me, since I thought that 90% of people browsed with a maximised window.
I’ve been tracking these numbers for a couple of years now, and the 68% is fairly consistent with what I’ve seen: http://mentalized.net/journal/2009/02/19/size_still_matters/.
Sure, 90% might have their browser maximized but a good deal of them enable sidebars or other browser chrome leaving you with significantly reduced viewport width.
You might be able to use the “user defined variables” in google analytics to track this as well. It would allow you to at least log the data within google analtyics.
This is interesting. But, it leads on to the question of why users set their browser window to be smaller than the screen size.
Perhaps the cause is that the website is narrow(ish), so people don’t need their browser window any wider? Of course most websites are designed to be narrow relative to a large monitor, so users with large screens have probably learnt to browse with a non-maximized browser.
It would be interesting to see what the differences would be on a site that was designed to make use of whatever window size was available. Would more users maximise their browsers?
It would also be interesting to test screen sizes entering and on leaving the site. Do users re-size their browsers to fit the site?
Very true. I have run into many websites when browsing on my 1080P TV where the content is so narrow. Zooming helps most of the time, but on a screen that big i have noticed that mouse-wheel scrolling gets oddly buggy.
these are in addition to the standard sizing of the page.
This is great because CSS-Tricks has no need to run something like WPTouch or some other mobile version of their site, since the main site can simply “trim the fat” to fit into a more slender screen/window.
This is super interesting. Very chicken and egg. It’s easy to think that web designers design sites with the maximum amount of width we think we can get away with (in general), and that has been in the 800-1200 range for so long now that that’s just kind of the default for the majority of websites. And since that’s so common, even as we get bigger monitors, we just don’t need to make our browser windows bigger because sites work fine leaving it smaller. Yet, if all websites were designed to adapt to giant screens, would our behavior persist? Or would we adapt and start maximizing browser windows?
That’s super interesting too. Maybe run some reports on a timer. Immediately, 8 seconds in, and then if they click an external link.
Also consider how OS X handles browser windows vs how Windows handles them.
In OS X, clicking the “maximize” button only resizes the window to the necessary width and the entire OS discourages maximization. Whereas Windows clearly favors and encourages maximized windows.
I can tell you as a user of OS X by day but a Windows user by night, I treat my windows differently depending on what OS I’m using.
I also know that I almost never keep my windows sized the exact same size in OS X. I am constantly fiddling with the width and I doubt I’m alone.
Because of all of those variables, I have to say screen resolution is actually still a fairly useful metric.
Those are definitely interesting questions. Like Chris mentioned, most sites are designed to be compatible within the 900 – 1200px width range, so it’s very easy to get away with using a smaller browser window.
For work, I use Windows computer with a screen width of about 1280px, but I always keep my browsers at about 1080px width (give or take a few pixels, of course) and maybe 80% height. This makes it easy to quickly switch back and forth between my browser, Outlook, and Excel (for example), by having their edges always visible.
I for one have a 27″ monitor, and viewing websites at max size is often either wasteful or just too annoying! If a website layout is fixed and centred, you end up with loads of white space left and right. If the website is not fixed, yet has lots of text, then reading from one side of the screen to the other is just annoying. So I tend to limit each browser to a third of the screen width so I can view more apps without having to switch.
I’m in the same boat as Kev – on a 27″ screen (resolution 2560 x 1440), having the browser window maximised just looks ridiculous, and is a huge waste of screen space. I generally have my browser sized to around a third of the width of the screen, but stretched vertically to make use of the full height.
I think it’d be very hard to design something that worked well over such a large range of widths, especially once you get to the really wide sizes. CSS3 columns may help in this respect, because you can’t just keep on making your text lines longer else they become really hard to read.
@Chris Lee; it seems like I’m the exact opposite of you. I’m a Windows user by day, and Mac user by night. On Windows, I hardly ever have my windows maximized. I have lots of different applications open at the same time, and want to be able to keep track on all of them. I think it’s much easier to resize under Windows where one can drag any corner or side, as opposed to Mac where you can only use the bottom-right corner. So on the Mac my windows are normally maximized, while they’re being resized under Windows.
@Klavdij; good point, however there are some limitations. Having for example Outlook only partially covered by my webbrowser, I can still keep an eye on any new mails that arrive, without having to bring it to the foreground. Also, clicking a partially covered window is much quicker than pressing Alt-Tab/Win since I know where to click, and with Alt-Tab I have to scan the list of applications to know which one to activate.
I don’t know how do you browse the web with your browser. But I get too many tabs on FX and I really need to maximize the browser to get them all once.
I have a 27″ screen and most of the time i don’t maximise my windows because on almost all the responsive designs (except the good ones), enlarging the viewport -only- means longer lines of text, and for me a line shouldn’t exceed 90-100 characters. it’s easier to focus on short lines of text even if the paragraph gets longer.
A large viewport should be used to display additional blocks like a side menu (position fixed), related articles … not to have endless lines of text.
This is awesome. Great analysis of your website.
How clever damn. I believe things like this are the ones that are going to make web experience better day by day.
This is a good article, however, I was mistakenly thinking most developers already knew this. Screen resolution is less important today than it was because now even smaller screens have high resolution. Not that long ago the relationship between screen size (in inches) and screen resolution was tighter and thus a good statistic to look at. For one thing the same size in pixels looks different on different resolutions : if your screen is 600px wide then 80px takes up a greater percentage, and each pixel is actually larger, than if your screen is 1200 pixels wide ( screen size by resolution not inches across) . It’s a great idea to develop the means to measure both.
Cool! That is some hot data.
This is a very helpful writeup. thank you.
It would be interesting to see how these numbers compare with the numbers for other websites. The visitors here, being mostly programmers and designers, are more likely to have very large monitors and wouldn’t use maximized mode as many sites look pretty bad if your window is over 1600px wide.
I use maximized windows on my laptop (1366x738px) but have to resize the browser to about 60-70% of the screen width on my desktop which has 1920x1080px resolution. Effectively, I’m using almost the same browser width, no matter what screen I’m browsing on.
http://liquidfold.net/stats has a bunch of “global” stats available at http://liquidfold.net/stats and make it easy to setup and track your own stats.
And you are correct. There is a strong correlation between larger screen resolutions and not having the browser maximized. Which also probably means the screen resolution is going to be less and less relevant as sreen resolutions tends to climb.
These are our numbers on viewport width, rounded off to the nearest 100. Our site is for a government branch which supports social housing especially for minorities, in Norway. We have lots of visitors with little computer knowledge.
Our site in not (yet) optimized for mobile, so most mobile browsers report a viewport width of around 800px.
> You’ll notice that whatever visible hard edges there are in the browser size version, they are exactly 20px narrower than the screen size counterpart. Interesting.
if I understood that correctly, could this 20px difference be due to browser window borders+scroll bar taking up 20 pixels?
Only the scroll bar. The window borders are gone when the window is maximized.
does show how inane this whole ‘responsive’ design is, particularly with the concepts banded of removing artifacts, or in some cases even content based on the size of the window.
So what, if I use Safari with its annoying non-full screen default I get penalised?
It’s flawed, I got a 1080p TV, but if I stick my mac into it via VGA it doesn’t suddenly become 1080p does it? Nope.
Screen resolutions are totally irrelevant almost as much as ‘the fold’ they’re the two things I wish some jerk didn’t write about on a terrible site like eConsultancy 10yrs because we’ve had to put up with the nonsense for the last decade.
This is from the top of my head, so I may be totally wrong.
One other option that is a bit more efficient as it wouldn’t require an entire library or an Ajax request is to just dynamically prepend a 0x0 image that has a src pointing to your php file that includes the dimensions of the browser window as part of the query string.
These are some great points. But what we’re not taking into account is how people work with a website. Lets say from all of this you take that most people browse at a real, browser resolution of 1201px – 1400px.
Does that then therefore mean we should design websites for this resolution? Absolutely not.
Why? Because of how people work with your site when they load it up in non-fullscreen mode. If the website is too big, your natural reaction is to then increase your browser window size. Or vice versa. From my own observations, people like to adjust their browser window so the website is “full width”.
No amount of analytical data will actually tell us what people are doing to their browser when they load up a website. Non-fullscreen windows are completely user expandable, they’re fluid, they can be any shape or size you want.
As long as a website doesn’t completely screw up when re-sized, there isn’t an issue, surely? People will resize their browser, almost automatically, to suit the website they’re browsing. So this whole debacle is a bit of a sisyphean task.
It is tough to take into account whether or not people are resizing once they arrive at a site. My completely non-scientific guess is that most people don’t do this. Even folks who browse non-maximized tend to keep their window at an “optimized” size for the browsing they do, and don’t resize if they can help it.
I suspect Norm is right. I usually load Chrome up in the morning, windowed, and pretty much just leave it at the same size all day. The only time I change it is if a site for some reason doesn’t fit within the width I have the browser at, although this is pretty rare.
Also, may I add to my point that people will resize the browser to suit your website. Unless I’m much mistaken, that makes your data potentially completely irrelevant, as I assume it measures the browser size then the user loads the website. However, it would surely be AFTER they load the site, that they will then resize their window to suit your website. Which you won’t have measured, so your data could possibly be not a true reflection of the actual browser window sizes people are using. Even taking into account them keeping the resized state and browsing a further number of pages.
I really don’t think this makes the data irrelevant.
It is possible that people resize their browser after arriving at the site. However, if they are doing so, it’s most likely because the original browser size was not suited for the site. Having to resize the window is most likely an annoyance for that person. They would have preferred to keep browsing at the size they had when they arrived.
Surely then, the ORIGINAL browser size is the more important statistic. Chris already knows the dimensions his site is optimized for. The information he’s seeking is what people would PREFER the site be optimized for.
Never realized full hd users might not view sites full screen (unlike me). We’ve got a discussion going on to rebuild the entire lay out liquid or not. This measurement script might give the right answer! Thanx a lot!
Nice post on something a lot of people misinterpret (including me).
This is a super novice question, but how did Chris export his SQL data like that?
Nice article. Are the statistics measured upon the first load of the page or do you look at their whole session?
I can image visitors with small browsers adjusting their screensize AFTER they already passed their data loading the first page.
Awesome Man! I liked thsi comment page design.
And about screen resolutions, its best..
Also keep in mind that in the Windows world, there is a difference between “maximized” and “fullscreen”. Maximized is what you’re probably referring to here, at least with Windows users.
Interesting idea, but at what point do we get too much data to be able to act on it? We can’t take into account every possible scenario or we would never get anything done. I suppose finding common patterns in browser size could be useful though.
hey, i liked the part about the gray rgb…but i think you might be wrong about the ‘white’ one step down. i’ve got both of them up right now and can see the difference.
you other guys glazed me over.
I’ve recently been developing the UI for a browser-based application. It is for internal use only, so my user group is set to the company employees that use it.
I wanted to gather some usage statistics on the most common screen resolution used in our company. Well, there was nothing in the app as far as analytics goes, so I had no data to retrieve.
Instead, I just did some soft-science and watched what people were doing, and walked around the office noting the screen resolution of a sample of users, and how they interacted with this browser based app.
Come to find out, I could go wider than the “safe” 960px and still be safe with my user base. But what I also found out was that if someone didn’t have their browser maximized and the right side of the app was cut off, they simply just maximize their browser or drag the corner until the app fits.
Many websites are abandoning the “above the fold” doctrine. People have been scrolling vertically online for almost 2 decades now, it’s as ubiquitous as 7 digit phone numbers (as opposed to 50 years ago when they were 5 or less).
The point being: every browser comes with a maximize button, and people know how to use it. Trying to determine the viewport size for every case, and edge-case, is an academic endeavor. If you have time to optimize your site for every possible viewport and resolution, you clearly don’t have enough paying work to keep you busy.
Again – it’s great to study edge-cases and try to incorporate them, but for day to day application, I’d say to make the cutoff at 2 standard deviations, maybe even 1.5.
I’d love to know the mean and modal viewport sizes, but that’s not going to hold up development if I don’t. For now, it’s a little bit of data and a bunch of common sense.
Thank you… i was wonder for some time how to do that! Thank you for sharing with us!
I had been searching around for the same and din get hold of the exact difference between the two. Even posted a question : http://stackoverflow.com/questions/19724215/are-browser-width-and-screen-resolution-the-same . Awesome work man. Just saved me lot of head-ache trying to figure out the same.