Design and develop for large screen resolutions

In the last couple of years we have witnessed an explosion in the amount of different screen sizes. In my company, this has resulted in a huge focus on designing websites that target Smartphone-devices as well as Tablet-devices. Almost every project today involves designing a responsive website that will be displayed well on small screens.

However, I believe that in this process we’re forgetting about the larger screens. We’re giving the mobile user a lot of attention in our web development. But in this focus on the mobile user we forget that there is a huge amount of screen estate that we’re not using at all.

A lot of websites has been built using the popular Twitter Bootstrap CSS-framework. Twitter Bootstrap creates a grid that allows the web developer to create optimized layout for extra small devices (phones <768px), small devices (tablets >= 768px), medium devices (desktops >= 992px) and large devices (desktops >= 1200px). So a lot of websites built with the latest version of Twitter Bootstrap have a maximum width of 1200px.

In fact, most websites built on top of Twitter Bootstrap will probably have been built using the old version of Twitter Bootstrap which had a grid with a maximum width of 940px.

But as you can see from the following chart, most users have a screen resolution that is larger than that.

Development in screen resolution - data source: W3Schools Browser Display Statistics

Development in screen resolution – data source: W3Schools Browser Display Statistics

The chart above shows that in January 2014 93% of all users that visited the W3Schools had a screen resolution of 1280×800 or higher. And 99% of all users had a screen resolution of more than 940px.

In fact, if you look into the statistics from Statcounter, you can see the decline of the 1024×768 resolution and the rise of the larger screen resolutions. Desktop computers with a resolution of 1024×768 went from 18% in May 2013 to 10% in May 2014. This is in contrast to desktop computers with a resolution of 1366×768 which went from 25% to 29%, and desktop computers with a resolution of 1920×1080 which went from 7% to 10%. In fact, the most popular resolution right now is the 1366x768px resolution.

Top 10 Desktop Screen Resolutions from May 2013 to May 2014 - data source: Statcounter

Top 10 Desktop Screen Resolutions from May 2013 to May 2014 – data source: Statcounter

So what is the solution for this? Well, I have the following recommendations that I use when I speak to our customers:

  • You should absolutely still focus on smaller screens – more and more users are using Smartphones and Tablets when they surf your website, so this is still very important. Therefore, you should still optimize design and functionality for these devices.
  • You should realize that designing for a maximum width of 1024px is a thing of the past. Most desktop users will have a screen resolution that is much larger than this. How can you utilize this extra space?
  • Consider that it is almost impossible to predict the future screen resolutions, and users will have all sorts of different devices that will have different screen resolutions. There are different techniques to handle this – an example of this would be the fluid design that will adapt 100% to different screen sizes. This is in contrast to responsive webdesign that creates “fixed” layouts for different screen resolutions.
  • If you do not want to use fluid design then you should at least use a responsive grid that will adapt to larger screen sizes. The latest version of Twitter Bootstrap does this, but it is important that the webdesign process takes this larger screen size into consideration.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s