0
February 7, 2012 Posted by Victor in Facts and figures, PHP best practice, Trends

Trends in screen resolution and color depth

Screen Resolution

Today, most visitors are using a screen resolution higher than 1024x768 pixels:

Date Higher 1024x768 800x600 640x480 Other
January 2012 85% 13% 1% 0% 1%
January 2011 85% 14% 0% 0% 1%
January 2010 76% 20% 1% 0% 3%
January 2009 57% 36% 4% 0% 3%
January 2008 38% 48% 8% 0% 6%
January 2007 26% 54% 14% 0% 6%
January 2006 17% 57% 20% 0% 6%
January 2005 12% 53% 30% 0% 5%
January 2004 10% 47% 37% 1% 5%
January 2003 6% 40% 47%     2% 5%
January 2002  6% 34% 52% 3% 5%
January 2001  5% 29% 55% 6% 5%
January 2000  4% 25% 56% 11% 4%

 

Color Depth

The current trend is that most computers use 24 or 32 bits hardware to display 16,777,216 different colors.

Older computers often use 16 bits display hardware, which gives a maximum of 65,536 different colors.

Very old computers use 8 bits color hardware, which gives a maximum of 256 colors.

Date 16,777,216 65,536 256
January 2012 98% 2% 0%
January 2011 97% 3% 0%
January 2010 97% 3% 0%
January 2009 95% 4% 1%
January 2008 90% 8% 2%
January 2007 86% 11% 2%
January 2006 81% 16% 3%
January 2005 72% 25% 3%
January 2004 65% 31% 4%
January 2003 51%  44% 5%
January 2002 43% 50% 7%
January 2001 37% 55% 8%
January 2000 34% 54% 12%

Advice

Optimize for 1024x768. For most sites this will cover most visitors. Most logs show that 92-99% of your visits will be over 1024 wide. While 1280 is increasingly common, there are still lots at 1024 and some below that. Optimize for this but don't ignore the others.

1024 = ~960. Accounting for scrollbars, window edges, etc means the real width of a 1024x768 screen is about 960 pixels.

Don't design for one size. Window sizes vary. Don't assume screen size equals windows size. Design for a reasonable minimum, but assume it will adjust.

Use liquid layouts. Use layouts that will adjust when the window is resized. People do this a lot, especially on big monitors. This is just good CSS practice.

Log browser display info. You can get actual numbers about this. I found some numbers here and here and here. You can also rig your site to collect the same data.

Mobile devices are special. If you get lots of traffic from iPhones and other mobile/small devices, you should probably give them special treatment.

User will scroll so don't worry much about height. The old argument was that users wouldn't scroll and anything important should be "above the fold."  This was overturned years ago. Users scroll a lot.

Click to share thisClick to share this