Best Screen Resolution to Design Websites


Top Screen Resolutions Worldwide

[We keep the following charts up-to-date every month with the latest stats  (last 3 or 4 months) available for 2013-2014 on the most popular screen resolutions in use in 2013-2014.]

ww-graph-apr

/ww-bar-apr

Top Screen Resolutions in the US (2013-2014)

us-graph-apr

us-bar-apr

Top Screen Resolutions in the UK (2013-2014)

uk-graph-apr

uk-bar-apr

Last Years Global Trend (2013-2014)

ww-year

Last Years Trend for the US (2013-2014)

us-year

Last Years Trend for the UK (2013-2014)

uk-year


*Note – statistics above are from one source, so could be skewed in ways we might not know. Here are some other statistics:

Top screen resolutions in 2013 Browser statistics

 


What Is The Best Screen Size?

I’ve developed websites for 15 years and this post is here because once, I asked the same question. I spent a long time looking and this is basically what I found. I keep the images above updated as folk have found them valuable – The following article text was from 2005 (!)… but the advice below should be still sound. I added a little about responsive design too. I will update the text on this page if I get the time. My website template has also changed since I first wrote this article. FYI – I have a responsive design but I’ve not turned it on yet!

800×600? 1024×768? Possibly the oldest question in website design, and certainly one of the first questions I had as a young web designer with an interest in web accessibility:

Q: What is the best monitor screen resolution to use when building your site?
A:
  There is none.

Kind of.

It is impossible to design a website to look the same in every browser, platform and screen resolution, so be careful trying. You should probably opt for a fluid layout without tables for your design, with % widths that expand and contract to fit a visitors browser setting (which I used to have) OR you could consider looking into responsive design solutions that will achieve much the same thing. That would mean yes – design for 1024×768 setting (for instance) BUT ALSO ensure it also looks good, or ‘transforms gracefully’, to the 800×600 setting, for example.

One thing is for sure MOBILE IS ON THE RISE – so if developing a new website in 2014 – you MUST think about how mobile friendly your website really is. I err on keeping things simple when I am actually coding things (which I haven’t done for a few years now).

One thing is guaranteed.

You won’t – can’t – please everybody – and the question which website size is best is still a hot topic for debate in most web dev circles.

What I do know from experience is that it is of critical important for you to identify YOUR audience and the devices they use, and build your website (on the whole) to suit THAT audience. I personally prefer a liquid layout (as I used to have on this website). Some may not (including my designer, who is busy creating a new responsive design for this website).

Following the latest trends is always exciting and sometimes the old advice is still worth considering, too:

Your pages should work at any resolution. Jakob Nielsen is on record as recommending:

  • Optimise for 1024×768, which is the most widely used screen size. Of course, the general guideline is to optimize for your target audience’s most common resolution, so the size will change in the future. It might even be a different size now, if, say, you’re designing an intranet for a company that gives all employees big monitors.
  • Do not design solely for a specific monitor size because screen sizes vary among users. Window size variability is even greater, since users don’t always maximize their browsers (especially if they have large screens).
  • Use a liquid layout that stretches to the current user’s window size (that is, avoid frozen layouts that are always the same size).

When I say “optimise” I mean that your page should look and work the best at the most common size. It should still look good and work well at other sizes, which is why I *used to* recommend a liquid layout using percentage widths to control layout (when I got a say in design). I have generally followed Nielsen’s advice that it should be its best at 1024×768, although this would be quite outdated advice to give in 2014:

It is a different world today, than when that advice once ruled.

The three main criteria in optimising a page layout for a certain screen size are:

  • Web Page Initial visibility: Is all key information visible above the fold so users can see it without scrolling? This is a tradeoff between how many items are shown vs. how much detail is displayed for each item.
  • Web Page Readability: How easy is it to read the text in various columns, given their allocated width?
  • Web Page Aesthetics: How good does your page look when the elements are at the proper size and location for this screen size? Do all the elements line up correctly — that is, are captions immediately next to the photos, etc.?

You should also consider all three criteria at the full range of sizes, continuously resizing the browser window from 800×600 to 1280×1024. Your page should score high on all criteria throughout the entire resolution range.

Your page should also work at even smaller and bigger sizes, though such extremes are less important. Fewer than half a percent of users still have 640×480. Although such users should certainly be able to access your site, giving them a less-than-great design is an acceptable compromise.

As the first criterion implies, scrolling is always a key consideration. Users generally don’t like to scroll. So, when you design, you should consider how much users can see if they scroll only a screen full or two. Any more than five screen full’s should be an indication to you that there is two much copy on the page.

Both scrolling and initial visibility obviously depend on screen size: Bigger screens show more content above the fold and require less scrolling. This is where you have to optimise for 1024×768: present your most compelling material above the fold at this resolution (while ensuring that the absolutely critical information remains visible at 800×600).

So, what about tiny screens, such as those found on mobile devices? A liquid design should scale all the way down to a phone, but don’t assume that this is how you should deliver your company’s mobile user experience. Mobile environments are special; to optimise for them, you must design a separate service that provides fewer features, is written even more concisely, and is more context aware.

Remember to build a website to the size you expect most visitors to be using – some research can help you with this, but always aim to please the visitors you seem to attract!

What browsers and screen sizes should you design for?

Look at the graphs above. Carry out more research. Use multiple sources (as most stats systems are skewed in some way). Find out what’s best for your visitors, or the visitors you hope to attract.

Consider using Google Analytics or as I do, Clicky, to see what browsers and screen sizes YOUR visitors are using to access your site, and consider designing your new website for the most common sizes you find. You can of course use the charts above to help you make your final decision, but remember people don’t always view windows in full screen mode for instance. You are probably best NOT to build a design around ONE resolution (although my site is currently in this development limbo…) and try to find a solution that transforms gracefully on the widest number of devices as possible.

Responsive Website Design

In todays world a lot of folk are using hand held devices (tablets, smartphones) to browse the web and Responsive Website Design (RWD) has emerged as a possible solution (it’s still hotly debated) to screen size challenges. This method moves away from using fixed width websites and instead uses Media Queries in css style sheets to create a website that responds in size to the different viewports of hand held devices and smaller screens that people use. So whatever device a person may be using to view your website you are able to give them the fullest experience possible. Created properly, they certainly can transform gracefully and are often a joy to use, but they can have drawbacks too.

To be honest, I’m more involved in online marketing than website development or design, these days. We’re developing a responsive design for this blog – I’ll let you know how it goes in a future update to this post.

Did You Know?

Did you know that if you have too many ads on your page, or if your ads obfuscate copy or cause an otherwise frustrating user experience for Google’s visitors, your page can be demoted in rankings in Google? Keep an eye on where you put your ads or other sponsored content – get in the way of your copy and you could see traffic plummet from Google, the number 1 search engine in the world.

Graphs supplied by http://statcounter.com/ and w3.

NOTE – Article text first published in 2005. I started keeping the images updated. I’ve edited the text since and more so recently to make it more useful today, rather than stand as any actual advice from yesteryear (when the original article was a collection of my notes as I learned more about developing websites). I see from some comments that the article was confusing some as I don’t have the responsive AAA template I used to have when I wrote this article in 2005. Oh well – hope the article helped.



Loading Facebook Comments ...

Leave a Reply



Learn how you can get more sales from your website

Subscribe for free and let us share with you:

  • how to submit your site to Google, Yahoo & Bing
  • how to optimise your site to get more traffic from Google
  • how to target the most valuable keywords for your business
  • how to make your site rank better in free Google listings
  • how to rank high & avoid Google penalties in 2014

Trust Hobo with your SEO plan

SEO Audit