Considering screen size while designing your website

Considering screen size while designing your website

At the start of the handheld consumer device trend in 2005-2007, when designers only had to cater to a screen resolution of just 760×480 pixels or under, things were a lot simpler. Anything bigger is just crazy talk, they said. Considering screen size while designing your website is not optional anymore.

There won’t be another advancement in screens, another big change in the industry for years, these jokers said. Ha!

Gone are the days of seeing netbooks, the fad of having “not-quite-laptop but not-quite-notebook” that was obliterated by Apple’s iPad, and now screens resolutions are continually getting more massive each year. The average screen resolution around 2005 was quickly adopted to 1024×768 pixels to accommodate the more vibrant, larger screens electronics companies were churning out.  1024×768 continued its rise as the champion screen resolution (57%) in 2006 until it started to tumble the next year. By 2010, screen resolutions even higher than 1024×768 grew in exponential popularity and reached 85% of total Web traffic in 2011[1]. The resolution of 1024×768 finds itself trumped nowadays, sitting at just 14% of users.

The average display resolution changing year-to-year impacts the Web design, development and publishing business in that Web pages are designed to accommodate the majority of users going to the site. With such a wide variety of resolutions, extra care must be taken to deliver solid information design with compatibility to mobile devices. Since over 85% of users access sites at a resolution higher than 1024×768, logic dictates that this resolution should be the focus of any web designer, right? Maybe not!

The Explanation: When Considering Screen Size, There is No Normal

The iPad 3 was released in March 2012 and boasts a whopping screen resolution of 2048×1536, which is four times larger than the iPad 2 who was married to our old friend in Paragraph 1, 1024×768. Comparatively, the iPhone 4S uses a resolution of 960×640 and the iPhone 5, Samsung Note, and others are even larger.

The use of different resolutions means that each user has a chance of viewing the site differently than the next. Sites with a fixed width intended for a high-resolution desktop display won’t look good on a mobile device. To make products work for everyone, information designers must support mobile devices at the same time as high-resolution desktop browsers through responsive design or adaptive solutions depending on the website goals.

It is a mistake to create Web pages for specific browsers and display resolutions and risk the client missing important information. It is better to learn to design Web sites so that their appearance and functions are effective and uniform, regardless of the type, size or what planet the display screen came from.


[1] W3 Schools. Browser Display Statistics. http://www.w3schools.com/browsers/browsers_display.asp