Just because I thought it was interesting, I shared this on Twitter this morning:
95% of traffic to CSS-Tricks has a screen resolution of larger than 1024×768.
And I got all kinds of responses like: That’s such a skewed statistic!!!
How are my own stats on my own website skewed?
OK, I know what they meant, they meant that that 95% number isn’t indicative of most websites, it’s only CSS-Tricks visitors. So people shouldn’t quote that number out of context or use it to inform design decisions on other websites.
But that highlights an interesting point. Who cares what the global average of internet user screen size is? The only stats that matter are your own. Unless you are starting a new project from scratch and need a baseline, in which case I think you are better off finding a related website and kindly asking for their numbers than using a global average.
That said, I’m not sure that particular statistic will inform my design decisions either. As I tinker with a redesign, I plan to support all screens large and small.
What are the resolutions for common smartphones nowadays?
The 4″ screens on the Galaxy S phones are 800×480 when viewed in landscape orientation. The iPhone 4 is a slightly higher resolution of 960×640. I believe that the 800×480 seems to be a more default scale though.
This is something that is always a point of stress for me when starting the design process. I generally end up settling on some resolution that I used before for my initial GiMP mock-up and then as time goes on, it just sticks that way. 960px wide seems to be a very common layout size right now, but judging whether or not that works well for my design can be a real headache.
This is a great topic to have a conversation about. I’m interested to read what others’ thoughts are as the comments start flowing in.
Thanks!
Applies to browser support as well. Many web dev purists get upset if you don’t support even IE6.
But what is your target audience? Many of my sites have less than 1% IE6 visitations.
There is quite a good discussion going on in a group on LinkedIn on this same exact subject. It still amazes me at how many feel that they still NEED to code for IE6 when it ISN’T needed.
Support for IE6 is almost non-existent these days. The only need I see for supporting IE6 in design is for a corporate web sites that still have a lot of office personnel using IE6 on terminals or old PC’s because they do not want to spend the money on upgrading their network yet.
One site I am deeply engaged with has approximately 4% of its total traffic being viewed by IE6 users from the last 30 days. About the same for the year.
Sorry Michael, I think your wrong about IE6. I’m just as aware as the next guy of how old, crappy, and headache inducing IE6 can be (and have been fighting it for years now). But, the question of support for IE6 should really be handled on a case by case basis. The company I work for gets well over 100k hits a month, of that, roughly 3-4% are IE6 users. That doesn’t sound like much but that equates to 3-4k visitors who can spend money with my company. We thrive on conversions so it’s worth the time to make sure the site properly functions in IE6. I can assure you, credit cards don’t care what browser you’re using. Because of that, it’s stupid to exclude a paying customer just because you don’t feel like supporting an old browser.
Supporting IE6 isn’t as difficult as most make it out to be. If you just keep some of the common bugs in mind, you can write your code to prevent them altogether (without the need for IE-only stylesheets). Just spend more time learning how to prevent the issues instead of trying to sway the masses and you’ll be good. :)
Tommy – I completely agree with you. I don’t think I elaborated more on my point about support for IE6 during development. It SHOULD be handled from site to site depending on visits, demographic, etc, etc… I am merely stating that I don’t think a developer needs to code with IE6 in mind initially as there are a lot out there that still think they need to put every IE bug fix in there code from the beginning.
If you write semantic code, there shouldn’t be a huge problem with trying to get a site to render appropriately in IE6. Basically what you stated, is exactly what I try to practice (and what others should start thinking about practicing). But you stated it much more eloquently than I. :-)
Definitely a fun topic to discuss. I am with you on the fact that you should only be worried about your target audience. Why waste the time to code for the minority when you should spend your time on posting for the majority.
One of the factors to remember when deciding on the width of a website design is that some people switch on side navigation bars reducing the space available for viewing the web page. The other factor is that some people prefer not to use the whole screen to view their browser. I keep my web pages down to 950px. I belive the reading experience on a webpage is enhanced by keeping the left to right reading action at a comfortable width, similar to a printed magazine.
Agree with this.
For certain sites you can go as wide as you like but if there is any significant amount of text and reading to be done then “narrower” websites tend to be best.
Imagine if these comment boxes were 1200 px wide for example…Would be a nightmare to read.
That’s why even though most people have higher resolutions and bigger screens it’s not necessary for many sites to expand into the space. At the same time it is useful to have the space to work with and know it is viewable by the great majority. If you had a page high on images/showcases then it could be useful to take 1200 px or more for the display and have it work nicely for just about all your visitors.
Presently I’m gradually designing my own blog and have the main content/text area at 600px and it feels just about right. With white space (I’m going fairly minimal) it’s about 900px in total.
I’m with Diane and al. These large monitors are like spreads from a giant coffee table book in which you will find large photos and multiple column of text.
Swap out “fool” with “design for” and Abe has a strong opinion on this one = )
“You can fool all the people some of the time, and some of the people all the time, but you cannot fool all the people all the time.” – Abraham Lincoln
You should be happy with the size you have and every one adapts to their own style and uses what they have to their ability. A large screen size is not an extension!
ha, nice topic
The more I read about responsive design, the more I wonder if these sorts of stats and the discussions they spawn are soon to be a thing of the past.
This post brings up a subject I’ve always been intrigued by: at what point do you stop supporting a feature? Only 5% percent of users are using IE6 is a fairly straight forward answer but, what if that percentage was 7%? Is there a good baseline established for what percentage of users to support and what not to?
I think it depends on the site.
If you’re a popular business selling something then it makes sense to support as many browsers and users as possible because they are all potential customers.
If your site is a personal blog about some obscure subject(s) and you see that a small number are using a browser that doesn’t work with your site or some of it’s functionality then it’s not worth your while to expend much effort.
IE6 is the classic case in point. I think it’s pretty close to dying (outside those stubborn corporate environments) so if you’re not pandering to that sort of user then I wouldn’t bother even thinking about it. For anything else…if it was me I’d personally stop worrying once a certain “feature/user type/browser type” falls under 10-15%. If the other 85-90% can look at my creation in comfort then it’s good enough for me.
I tend to make all my sites around 960px wide, unless i know for sure that my target audience requires something smaller, or can view something bigger without scrolling
Noticed similar on a site I run. It’s reasonably new and my data is a low number (still counting in the hundreds of visitors) but only a couple of % use 1024×768 and only a couple of % use smaller (mobile browsing clearly)
In addition I’ve yet to have a single IE6 visitor and don’t bother to code for it at all any more.
I always build for a 960px Grid. The audience if using a smaller resolution will most likely change in coming months/years. This is for most normal sites. Obviously specific sites that have awkward needs will need to be specialized.
I am not sure what site you would be able to ask what their stats are? Seems like a request most would not facilitate.
Most of the web designers use larger screen sizes. Since this website is about web design and mostly visited by designers, then no wonder 95% are using larger resolutions. Well…. I stand in the rest 5% . I love my mini netbook =)
Chris, are your stats capturing the size of the screen or your browser window area?
I prefer to know what area is available to my page. The average page area for a screen resolution would be interesting, e.g. what is the average browser window area for 1024×768 screens?
Nice question, I’ve the same doubt.
I’ve set up a script today to start capturing this information. Google Analytics gives you SCREEN size, not BROWSER WINDOW size, and I definitely agree it’s more interesting to know average browser size. I’ll try to capture the screen size and width too, to compare.
Well, I completely agree with you Chris. My site (which is a newbie yet) stats show me that over 90% of visitors use Firefox and Chrome. This encouraged me to completely drop support for IE <= 7 and also never think about IE at all. If you get there by IE <=7, you'd be redirected to browser-disapproved page. The main pivot for decision-making for any web-site should be the stats of it.
i like to have 960 px width, but since the iphone, i like to keep small screens in mind too. but yeah i see what ur saying. i design for cool people, so if they have rubbish screen sizes, it’s just like ie 6 – they suck :)
Well even though screen resolution does give some insight there’s one more thing you need to keep in mind. Some people do not maximize their browser window. I for one always keep it at around 3/4th of the screen resolution (width).
I admire your ambition and creativity in constant redesigns, but I’d be sad to see this one go.
screen resolution is not a useful indicator for browser window size.
i have a resolution of 1980×1200, but my browser viewpert size is in 95% of the time about 980x800px, and i think that many people with large displays don’t browse at fullscreen…
Yep, same here. I now have an 1920 x 1080 monitor at home and at work and have my Chrome window never maximized. It is at about 3/5 of the available width. There is no website out there, that looks good when at 1920. Looks like many of us have to do some homework to make our website even more “responsive”.
I disagree there are plenty of websites that take advantage of the extra space. You just have to get creative. Check out http://herbalessences.com/en-US/hair-care. Now I’m not saying it’s a great website they just do a good job of managing their space. Also if chrome would maximise to fullscreen easily like fire fox I would view in fullscreen most of the time.
i think that stats really matters and if you watch it carrefully you can create something both beautiful and usefull for most of the users that come to your site go on nice work
There is a major flaw in your logic. If your site doesn’t support a particular browser/configuration, then you will have close to zero users with that browser/configuration. But there may have been many users with that browser/configuration who wanted to use your site, but were prevented by your design.
IOW, your stats might reflect your design choices rather than the chcracteristics of your potential users.
Well, CSS-Tricks is responsive, so Chris isn’t discriminating against ANY window size.
“you are better off finding a related website and kindly asking for their numbers than using a global average.”
Don’t know how far you’d get with asking strangers or potential competitors for their analytics data, although agree that global (or even national) stats are not that helpful.
Think there is a gap in the market here – public stats that can be filtered based on website type. Anyone from gs.statcounter listening???
Re the Nathan B comment, I too looked at your tinkering.
FWIW I prefer both the old design and the tinkered one to the current one but (a) I’m not a designer and (b) as usual it’s the content that keeps drawing me back.
al seems to have standard web-designer brain disease. I see someone else state that most people with big screen don’t browse fullscreen. I can understand that perhaps many don’t because there is very little benefit, it’s usually more infuriating than anything. Forget 1024×768, most sites seem to assume everyone still runs 640×480 based on how prevalent that 600px width limit is. I dare say it was easier to break the 80 column barrier than this damn 600px barrier. My screen is 2560px wide. It’s been that way for 6 years now. Still, most sites insist on using less than 1/4 of that! I didn’t get a big monitor to stare at a narrow strip of text!
al’s comment about it being hard to read if it were 1200px makes no sense. Firstly, these comment boxes look to be about 1200px judging by the fact they actually manage to get halfway across the screen. What makes text hard to read isn’t a wide screen, it’s lack of reflow. If sites would just fit the width of the window, then I wouldn’t have to scroll nearly so much. Less scrolling is less time wasted and it’s easier to find something earlier in the page when I want to look back at it. If someone actually wants newspaper style they can make that happen by narrowing their browser window if the site flows text properly. For the rest of us that learned to read actual books with big pages, we can leave the window big and not read a sane layout.
I lost the screenshot or I’d link it as an example of exactly what is wrong with narrow columns. Some blogs use a comments system which puts a reply inset in a box below the original. A reply to a reply is inset another layer deep. That might look nice to someone testing the layout, but it doesn’t scale to actual real world example. I ran across someone’s blog that looked to be about 400px wide (targeting phones?) with this style of comment system. You don’t have to go that deep into the comments before you find a box that has a tiny strip of text with one word per line. It only takes a half dozen consecutive replies to achieve that fugliness. Does anyone (aside from the idiots responsible for PocketIE) think that it’s easy to read one word per line?
al,
I
think
you
might
like
to
read
this
way.
It
should
be
easier
for
you
because
it’s
narrower.
The
more
narrow
the
better,
right?
Hey,
does
anybody
know
where
the
paragraph
breaks?
No?
Can
you
even
find
where
one
sentence
stops
and
the
next
starts?
I
don’t
know
about
the
rest
of
you
poor
unfortunate
bastards
trying
to
read
this,
but
just
typing
this
is
hard
because
I
can’t
see
the
start
of
the
sentence.
This
is
what
books
would
be
if
they
were
made
by
web
designers.