Come a little closer.
Closer still.
Now, look carefully at the screen. You may be able to see some of the thousands of pixels which make up the illusion of text. These are the tiny building blocks manipulated by web designers to display websites. The problem is, there can be a big difference between both the number and density of pixels which each screen displays.
There was a time, when 800×600 was the most popular screen resolution, and most web designers built sites with this in mind. Then, gradually, the old 800×600 monitors began to be outnumbered by 1024×768 monitors, and designers hotly debated which one to target as the default.
“Designing for 800 pixels wide makes things too cramped!!”
“Designing for 1024 pixels wide is tough on people with small monitors!!”
Tempers flared, but in time 1024 px layouts became standard, as these monitors were used by a majority of the population, peaking at 60% of users in 2006. 1024×768 has been widely accepted as the de facto standard to design for ever since then. But technology never stands still for long, and by early 2009, 1024×768 resolutions were being used by only 36% of users. So what is the new standard screen size to replace it?
There is none.
Screen resolutions have been diverging wildly for some time now. At one end of the spectrum is a mammoth resolution of 2560×1600, displayed on top of the range monitors. At the other end, the tiny resolutions provided by mobile phones. Some of them, especially the older ones, can have displays of as little as 128×128 px. Other hand held devices like the Blackberry and the iPhone have comparatively small screens which also have very crisp resolutions.
In the next few years we will see mobile phones with even better screen resolutions than today as they effectively over-take the long-outdated 640×400 monitors popular in the 1990’s. The Xperia X1, for example, has an 800×480 display, which is only 3 inches wide. So not only do hand held devices tend to have smaller screen resolutions than monitors (less overall dots being displayed); their screens are also more condensed (the smaller number of dots are more densely packed). This exacerbates matters further.
Laptops and notebooks are also becoming more widespread. Most of them have medium sized screens, but with different aspect ratio to traditional monitors. A monitor with a display of 1024×768 has a 4:3 aspect ratio, compared to the more widescreen 16:9 of some laptops (and some modern monitors.)
Some people are even browsing with gaming consoles, such as the xBox, Wii, PSP or DS. The percentage of console browsers is still quite small, but it is definitely something to keep an eye on in future. Especially because many of these devices have unusual displays. For example, the DS is a small hand held gaming console with two screens. There is a version of Opera available for it called Nintendo DS Browser. The top screen displays a zoomed in version of a site, while the bottom screen shows an overview of the whole web page. The user can use the stylus on the thumbnail on the bottom screen, in order to scroll on the top screen.
So what is a designer to do?
It’s useful to bear in mind that most people still are browsing with an ordinary monitor or laptop, rather than a mobile phone, console or other device, and that while 1024×768 doesn’t have the stranglehold it once had, it’s still fairly well used. There is a very diverse mixture of monitor heights being used, but the most typical widths are 1024 px with 37.2% of users, and 1280 px with 36.2% of users. Larger monitors are beginning to become quite popular too, with 1440 px wide monitors being used by 8.6%, and 1690 px wide monitors being used by 5.5% of the online population.
Screen Resolutions are now as varied as 2560x1600 at largest, and less than 240x160 at smallest, but the most popular resolutions are 1280x1024 and 1024x1280.
Interestingly, the 800 px wide monitor, long abandoned by the web design community is still being used by over 5% of users, while the likes of the iPhone, which has attracted a lot more attention, is only being used by 0.56%.
One possible solution to the huge variety of screen resolutions is to use more fluid designs. Fluid, or liquid, designs adapt to the users viewport, rather than forcing the user to adapt to the design. Fluid design presents its own set of challenges however, and doesn’t suit every project.
Fluid design sample:
http://www.csszengarden.com/
Another possible way to cope with the diversity of screen resolutions is to make a specific mobile site. Mobile sites are usually stripped down, to just the most essential images and content. However, it takes extra time and money to set up a separate mobile site, so this may not be an option for many companies.
Some mobile sites:
http://m.flickr.com/#/home
http://m.cnn.com/
Tags: mobiles, monitors, screen resolutions