PDA

View Full Version : Browser Size



rezzy
12-16-2009, 11:29 PM
I found a useful tool today, its call Browser Size, it measures how your site will be seen in different screen sizes.

Browser Size (http://browsersize.googlelabs.com/)It shows the percentage of people who can actually view your webpage.

vangogh
12-17-2009, 03:30 AM
Interesting tool.

I'm not sure how accurate those percentages are or where the stats come from. I think above all you have to look at your own stats. According to the chart only 50% of people use a browser that's 1200 px wide. Looking at my own stats about 85% of my audience uses a browser that's at least 1200 px wide. Admittedly my audience is going to be on the tech savvy side and isn't representative of the population at large. It's just that you shouldn't take the % in the tool as the gospel. Let your own stats be your guide.

Also the tool only shows your site as it would appear in a larger resolution and then overlays the cutoffs for different resolutions. You could for example code your site so that the layout changes based on the browser size. I don't think the tool will capture that.

Still it's a pretty cool tool. I have several tools that will resize my browser, but it's really interesting to see the overlay on your full layout.

Thanks for finding it and linking to it. It's been bookmarked for future use.

billbenson
12-17-2009, 03:52 AM
What are you using to get resolutions of site visitors? I know awstats doesn't provide that.

nealrm
12-17-2009, 08:21 AM
Below are screen resolution numbers for the general public. The numbers do include visits from around the country by are heavily weighted towards the Missouri area. The numbers should be very accurate. The sample size was very large.

1024x768 30.94%
1280x800 18.74%
1280x1024 10.62%
1440x900 9.74%
1366x768 3.93%
1680x1050 3.71%
800x600 3.36%
1152x864 2.75%
320x396 2.39%
1280x768 1.75%

The tool overlay is a handy rough guild, but not terrible accurate. The firebug plug-in for firefox will allow you to set your browser to a specific pixel size. You can then see directly what the page looks like at different sizes.

Spider
12-17-2009, 11:21 AM
I use Statcounter.com and my system stats include

39.48% 1280x1024
28.35% 1024x768
23.30% Unknown
3.92% 1152x864
3.20% 1600x1200
1.75% 800x600

That's a pretty large 'unknown' component, but removing that, a measurable resolution of over 1200 is used by 56% of my visitors.

vangogh
12-17-2009, 11:37 AM
Bill I use Google Analytics, which shows the browser stats. I thought AwStats did show screen resolution, but it's been awhile since I've used it. Don't worry though, you have Analytics now capturing data for your site. I just have to set it up so you can see too.


The tool overlay is a handy rough guild, but not terrible accurate. The firebug plug-in for firefox will allow you to set your browser to a specific pixel size. You can then see directly what the page looks like at different sizes.

I use different tools for the same thing and they are better when designing for a specific size or wanting to see how the page looks at different resolutions one at a time. Where the Google tool is nice is that it lets you see all those different resolutions at the same time. There's something to be said for seeing them all at once instead of having to change your browser.

rezzy
12-17-2009, 11:23 PM
Even though the percentages are rough, I was thinking that might be somewhat representational of the general population. I see that it does have it pitfalls though, for instance, on sites where pages are centered, eventually the lines dont match up to the site.

But, its still a useful tool to generate conversation and get people thinking about "the fold". I came across a site today: Please Scroll (http://www.thereisnopagefold.com/).

The "page fold" talks about "most" visitors donot realize that a page can scroll, making the visible content on the page (before scrolling) the most important. I know this seems weird to us, but studies show this is true.

nealrm
12-18-2009, 12:02 AM
Here is an interesting article about what people look at on a page. Link (http://www.cxpartners.co.uk/thoughts/what_people_see_before_they_buy_design_guidelines_ for_ecommerce_product_pages_with_eyetracking_data. htm) The page fold is important, but there are ways to encourage browsing past the fold.

vangogh
12-18-2009, 01:07 AM
Interesting link Bryan. I remember years ago when I was first learning to design websites there was a lot of talk about making sure your important content was above the fold. I think we've reached the point where most people are aware that web pages scroll. You might not want to make your pages scroll on forever, but it's reasonably to expect that people know enough to scroll.

Neal that's a great post and one everyone should read. I'd seen it before. I think someone here (maybe even you) linked to it and I'm pretty sure we have a thread around here some place based on that article. I've had it bookmarked for awhile now. It's a great article so I went ahead and read it again.

One of the interesting things that caught my attention this time was how they talked about not making people scroll too much. They mentioned the lengthy pages at Amazon. I can see where they're coming from, but I was also thinking about myself using Amazon. I love those long pages. There's a ton of information that I find helpful in deciding whether or not to buy a book. I don't read everything on each page, but having become familiar with the site over the years I know where the information is that I want. Some of it is toward the bottom of the page and I scroll right to it.

I wonder if the advice about page length depends on whether the visitor is a first time or repeat visitor.

billbenson
12-18-2009, 01:17 AM
Whats interesting is how much higher the resolutions being used are. I'm 1600 x 1200 but I have a 28" monitor as well. It seems that a lot more people are migrating to the bigger monitors and using higher resolutions. Most people have been designing for 1024x768 for at least several years now. Looks like we might be designing for larger resolutions in the near future. Not yet though IMO.

vangogh
12-18-2009, 01:40 AM
I started noticing it about a year ago. Until then 800 x 600 was still showing anywhere from 5% - 10% in my stats. Then it went away.

I'm not sure designing for larger resolutions is the way to go though. Mobile devices are only going to increase in popularity which drops us back as low as 320 x 240 again. The future is really going to be making sure your design is flexible enough to work across a variety of resolutions and devices.

Business Attorney
12-21-2009, 08:58 PM
Whats interesting is how much higher the resolutions being used are. I'm 1600 x 1200 but I have a 28" monitor as well. It seems that a lot more people are migrating to the bigger monitors and using higher resolutions. Most people have been designing for 1024x768 for at least several years now. Looks like we might be designing for larger resolutions in the near future. Not yet though IMO.

I checked my stats and in the last 30 days I had almost twice as many visitors with a very high screen resolution of 1920x1200 (680 visitors) than 800x600 (369 visitors). Although 1024x768 was the most common resolution (26.44%) about 70% of the visitors had a higher screen resolution than that, with several as high as 2560x1600!

rezzy
12-22-2009, 09:56 PM
This has created a somewhat interesting dynamic, supporting bigger and bigger screens while still allowing super tiny screens!

vangogh
12-23-2009, 12:18 AM
For awhile we were spoiled when designing since we could basically build a page at 1024x768 and make sure it still looked good at 800x600 and we were doing pretty good.

Now it's back to a variety of resolutions from small to big.

It's going to be about building fluid sites that can look good across many resolutions. I see that as a challenge and something that will ultimately make me a better designer and developer. It'll be a pain at times, but it will also be fun.

billbenson
12-23-2009, 07:13 PM
For awhile we were spoiled when designing since we could basically build a page at 1024x768 and make sure it still looked good at 800x600 and we were doing pretty good.

Now it's back to a variety of resolutions from small to big.

It's going to be about building fluid sites that can look good across many resolutions. I see that as a challenge and something that will ultimately make me a better designer and developer. It'll be a pain at times, but it will also be fun.

Ya, and how is G going to deal with it if you present different information to different screen sizes / visitors. After they don't like cloaking at least where its related to Search Engines.

Spider
12-23-2009, 09:47 PM
...Mobile devices are only going to increase in popularity which drops us back as low as 320 x 240 again. The future is really going to be making sure your design is flexible enough to work across a variety of resolutions and devices.Is 320 x 240 the resoltion we should design for if we want to be seen on mobile devices?

vangogh
12-24-2009, 12:12 AM
Different devices have different resolutions and they'll likely be increasing in the coming years. I wouldn't specifically design for the small size because then you're site won't look as well as it can in a browser.

What some do is develop a different design for mobile devices. It's not just the resolution on a mobile device, but also that people browse the web differently on them. I'm using a plugin in WordPress that delivers a different theme when viewed on a mobile device. There are a few out there. In time I'll probably tweak that plugin or create one for myself.

Another option is to have your design be more fluid. Even without the plugin my site worked well enough in mobile devices. I designed it so the at the smaller resolution the content would remain at the top and the sidebar content would drop below.

billbenson
12-24-2009, 01:48 PM
You ever see any comparisons on what people search for in mobil devices vs pc's?

vangogh
12-24-2009, 02:46 PM
I'm not sure how well I'm tracking that. I should see if Analytics has that by default or if I can set it up easily. Mobile traffic is still somewhat low for my site, though it has been increasing.

TulsaWeb
12-27-2009, 12:10 PM
Hello Forum,

My two cents...

Don't forget that phones and other handheld devices may not have the processing power or bandwidth for a regular website design. Your site may need to include special styles just for mobiles. This may mean no images and definitely no flash (iPhone doesn't do flash).

While current stats can reflect current usage, there's no way to predict the future. It was just last year when 70% of visitors were using 1024x768, now it's 30%. Design for the most commonly used, but cover as many sizes as practicable.

vangogh
12-28-2009, 11:02 AM
Good points. Yeah, heavy images and Flash probably aren't going to do as well over a mobile device. Another thing to considers would be Javascript. Not all mobile devices will be able to display that content. Mobile devices really are different. The smaller resolution is just one aspect.

It's amazing how fast the most common resolution is changing. I think it's another example why web design needs to be flexible and not so pixel perfect. You really can't know exactly how someone will be visiting your site.

Spider
12-28-2009, 11:57 AM
Never could, actually - which is why I have always been so against fixed font sizes and fixed page widths.

vangogh
12-28-2009, 01:49 PM
Very true. I don't think fixed width sites are automatically bad though. It's nearly impossible to create such a fluid layout that works equally well under all browser/operating system combinations. Part of developing a site is understanding it's not going to be perfect for everyone and making choices about who you're going to support.

If you want me to I can guarantee your site will look great in IE 5.5, but how many people will realistically visit the site using it? Is it worth the added expense to you to make sure the site works for those people?

By choosing to create a fixed width site for a resolution of say 1024 x768 you can make sure the site looks as you want for the overwhelming majority of your visitors and you can still have the site work well enough for many of those other visitors.

barry100
01-06-2010, 04:52 AM
I found a useful tool today, its call Browser Size, it measures how your site will be seen in different screen sizes.

Browser Size (http://browsersize.googlelabs.com/)It shows the percentage of people who can actually view your webpage.


A better site you could have a go with is IE NetRenderer - Browser Compatibility Check - (http://ipinfo.info/netrenderer/) it shows you sizes and also how your site looks in different browsers ;)