Accepted screen resolutions on websites

[DG_Silva]

Hi guys, I'm asking here because I'm not sure where else to ask, but it is a relatively simple question.

What is the accepted resolution for designing websites now? Do people design around most modern laptop's resolution of 1366x768, or do they stick with the old 4:3 resolutions 800x600 or 1024x768? The reason I ask is because I want to stick everything on a single page with no scrolling, so I want to make it as accessible as possible for all resolutions. However, if 1366x768 is the norm, it gives me a bit more room to play with.

 

[Ibonibo]

You can do it so it takes the best resolution for the monitor it is view on, so it is variable, though 1920*1080px will be a standard for some years if you want a fixed resolution.

 

[DQuaN]

It was my understanding that is best practice to set the resolution to the lowest you think it might be used on. If you set it to 1366x768, it won't look right to the thousands (millions?) of people using 1280x1024 or lower.

In short, to cater for the widest audience, set as low as possible.

 

[tlowr4]

I thought 1200x800 was the norm. That's for a 13" Widescreen laptop...maybe it's just my awesome Mac *stares at Dunc*

I'd suggest just designing it in 1080p, since that is becoming the norm for desktop monitors now.

 

[Grayfox]

Do 1366x768 since laptops have this as a low and go to 1080p

But if your site will be used by mobile devices you may need a 1024x768 version or a mobile version of it.

Who is the website going to be viewed by?

Your friends with modern screens or the elderly with old CRTs and P3s that are used for emails and skype?

Even if 1024x768 is the most common design it for those who will be viewing it.

One thing i hate more than anything else is having a site that is made for a low screen size and having huge amounts of white space on the sides cause of this.

 

[Pako]

I would agree that knowing your demographic of viewers would help determine what size to build for.

I have built websites for clients and have actually convinced the client to buy a better monitor because they were stuck at 1024x768. She now has a 1920x1080 and her site looks awesome. Unfortunately "customers" want to be able to view the site and have it easy to use and accessible.

Just ran some analytics on one of my sites, here is what those customers are using:

Mobile devices: 8.2%
1. 320x480 39%
2. 768x1024 29%
3. 960x1466 7%
4. 960x1492 7%
5. 960x1440 6%
6. 0x0 5 1%
7. 800x1332 4%
8. 960x1464 3%
9. 960x1420 3%
10. 240x400 1%

Non-Mobile device users: 91.8%
1. 1024x768 16.28%
2. 1280x1024 12.61%
3. 1280x800 7.74%
4. 1920x1080 7.74%
5. 1366x768 7.22%
6. 1680x1050 6.59%
7. 1600x900 6.42%
8. 1152x864 5.50%
9. 1440x900 4.18%
10. 1920x1200 3.72%

I hope you find this information useful and insightful.

 

[DG_Silva]

It's for a website that helps find bands for gigs and gigs for bands. The general idea is that a customer would come along and with a venue that needs a slot filling, and my friend plugs that gap. Also, he can organise complete tours for bands, including multiple venues, overnight stays, support bands, and so on.

Based on that info, I guess the demographic would be mainly males, aged 20-60, viewing on a range of mobile devices and laptops.

Finally, does anyone know of any html/java code that can automatically detect the device viewing and redirect to a 'safe version'?

Using the above info, 1024x768 seems the safest bet.

 

[Pako]

Well, if it's a flash based site, resolution is not a factor but you would be excluding a large audience of non-flash based users (mobile and iPad users come to mind).

The other thing you can do is with proper coding, you can have the site stretch according to resolution or browser window. Start taking note how other sites look at different resolutions. You can often limit the content to in fact, I will build the main content area to be 900px wide but use header and footer elements that span 100% regardless of resolution. It helps balance the site for widescreen and the 1980's 1024px wide monitors.

 

[tlowr4]

Might I ask, why do you want there to be no scrolling anyway? What's the big deal?

 

[DG_Silva]

I think if I was going to do it that way, I would do it the other way around, so that the borders stay the same size, and the body changes size. What I would like to do is keep a fixed size so that people wouldn't have to scroll at all, something like this (quick mock-up made in 30 minutes):

 

[Azuremen]

That could very easily be built in CSS to dynamically scale with whatever the window size is. Generally, you want to program for 1024 pixel widths, so 960 px after considering scrolls bars and window frames. This is more of an issue if you are using images for a background and nav bar that is as wide as the background image though.

Rounded corners are a hassle if you want scaling, as IE8 doesn't properly support rounded borders from CSS, so you have to build small .png files and then mess around with that if you want scaling and rounded corners to work in IE.

 

[tlowr4]

There are some programs that you can use that detect the resolution of the person that is viewing the page. That way you could make (if you had the sanity) several pages at different resolutions and let the program set the right one when they person enters the site. I don't know what they are or where to find them, but I'm sure someone will dig it up.

 

[BobK]

Keep in mind that some people (myself in particular) don't maximize the browser window so knowing their screen size won't tell you their browser window size.

It irks me when websites make assumptions like that.

 

[Grayfox]

so you have to build small .png files and then mess around with that if you want scaling and rounded corners to work in IE.

Don't worry about IE.

Most computers users set automatic updates to not annoy them and IE will be updated to IE9.

Even if it is not.

Have one of these on the site to promote the better browser.

 

[bergauk]

Keep in mind that some people (myself in particular) don't maximize the browser window so knowing their screen size won't tell you their browser window size.

It irks me when websites make assumptions like that.

I don't maximize the browser window either.

Don't worry about IE.

Most computers users set automatic updates to not annoy them and IE will be updated to IE9.

Even if it is not.

Have one of these on the site to promote the better browser.

Best is in the eye of the beholder. Maybe it'd be better to optimize for IE first. Seeing as most browsers can mimic, or do one better than IE it'd be best to optimize for it so everyone gets an even playing field.

Actually.. Go for IE and Safari, that way you don't leave Mac users out of the loop.

 

[Pako]

As much as I hate the incompatibilities of Internet Explorer (although IE9 is better), the majority of the sites I host, IE is always in the 70%+ range for browsers being used to view the site.

Something to consider.

 

[DG_Silva]

For the corners, I'm already using .png files, but I'm thinking about reducing the height to 50px to make the borders smaller. It was only a quick mockup to show you my ideas. It was scaled for 800x600, so I'll adjust the horizontal resolution to 950. Thanks for answering my questions guys, I'll let you know when I've got it made.

 

[Submerged]

Keep in mind that some people (myself in particular) don't maximize the browser window so knowing their screen size won't tell you their browser window size.

It irks me when websites make assumptions like that.

I also have a 1920x1200 resolution and I don't maximise the browser windows either.

I hate looking at masses of white, non-informative spaces. And it is a bit annoying when the websites doesn't resize for the window itself.

Although Opera does have a "Fit to Width" setting which works (sort of) and is very using for reading texts in the window.

Will you be tracking web browsers that are in use?

 

[BobK]

Just a quick comment on those "best viewed with XXX Browser" things, which used to be quite common but aren't seen very often nowadays:

They are often read as "I'm too lazy to test my site with anything other than Browser XXX". If you're going to dictate what browser I should use, chances are I'm going to choose "none" and leave your site.

 

[chuyler1]

Optimize for 1024x768
Support 800x600
Use bars on the edges for anything bigger than 1280x1024.
Offer mobile version for smaller screens.

Just because people have bigger screens doesn't mean they have their browser window that wide, or that they even have the eye precision to scroll that width and jump down a line to continue reading.