What Is The Best Screen Size To Design For in 2017?

What is the best screen size to design for in 2017? This was most definitely one of the first questions I had as a young(ish) web designer with an interest in web accessibility 15 years ago or so.

The most satisfying answer I ever found was: Design for YOUR audience first, the masses second.

That’s basically how I got by.

But – Google may have just decided for everybody on this long discussed question.

Google dictates the ebb and flow of online commerce and they’ve just dictated you need to design for a satisfying user experience across multiple devices IF you want to expect to rank high for competitive keywords in Google.

Starting April 21 (2015), we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results. Consequently, users will find it easier to get relevant, high-quality search results that are optimized for their devices. GOOGLE

So since April 21, 2015, all around the world, how mobile-friendly a site has affected ranking performance for websites across a variety of devices.

If you make websites for small businesses – you’ll know they want a website that will perform well in Google organic listings.

That performance is now based around good website UX, as Google quantifies it, at least for mobile users.

At the moment – that essentially now means responsive website design.

Google is Moving To A ‘Mobile First‘ Index

Now that Google is determined to focus on ranking sites based on their mobile experience, the time is upon businesses to REALLY focus on delivering the fastest and most accessible DESKTOP and MOBILE friendly experience you can achieve.

Because if you DO NOT, your competition will, and Google will rank those pages above your own, in time.

‘To make our results more useful, we’ve begun experiments to make our index mobile-first. Although our search index will continue to be a single index of websites and apps, our algorithms will eventually primarily use the mobile version of a site’s content to rank pages from that site, to understand structured data, and to show snippets from those pages in our results. Of course, while our index will be built from mobile documents, we’re going to continue to build a great search experience for all users, whether they come from mobile or desktop devices.

If you have a responsive site or a dynamic serving site where the primary content and markup is equivalent across mobile and desktop, you shouldn’t have to change anything.’
GOOGLE

For reference, here is a list of the current top screen resolutions worldwide as recorded recently (2016):

 

Top Screen Resolutions in the US (2016)

 

Top Screen Resolutions in the UK (2016)

Last Years Global Trend (2016)

 


*Note – statistics above are from one (albeit credible) source, so could be skewed in ways we might not know. Graphs supplied by http://statcounter.com/.

How Can I design A Site That Looks The Same In Every Browser?

Over the years I have found it impossible to design a website to look the same in every browser, platform and screen resolution, so avoid 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 OR you could consider looking into responsive design solutions that will achieve much the same thing.

I opted for a RESPONSIVE DESIGN and I am still testing my new responsive theme to see what works best for my visitors.

That could mean yes – design for a 1024×768 setting (for instance) BUT ALSO ensure it also looks good, or ‘transforms gracefully’, to the 800×600 setting, for example, or even smaller. Or –  as graceful as possible.

MOBILE IS ON THE RISE – so if developing a new website in 2017 – you MUST think about how mobile friendly your website really is from the start.

I aim to keep things simple when I am actually coding things.

You will not – cannot – please everybody – and the question which website size is best is still a hot topic for debate by designers with more usability and UX expertise than I.

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.

And that audience now includes GOOGLE.

Following the latest trends is always exciting but 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 was the most widely used screen size for a long time. Of course, the general guideline is to optimise for your target audience’s most common resolution, so 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 new big monitors.
  • Do not design solely for a specific monitor size unless you have been specifically commissioned to do so – because screen sizes vary among users. Window size variability is even greater, since users don’t always maximise 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).

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.

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 2017.

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.?

Usability guidelines also recommended you 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.

Although such users should certainly be able to access your site, giving them a less-than-great design is sometimes an acceptable compromise.

As the first criterion implies, scrolling is always a key consideration. Users generally didn’t like to scroll if the do not need to – although over the years, that’s changed. In 2017 – users expect to scroll, wether they like to or not.

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 might be too much copy on the page. Of course, this is balanced with the view that some articles are meant to be indepth and users would expect to wait a little longer to view some page content and content types.

Both scrolling and initial visibility obviously depend on screen size: Bigger screens show more content above the fold and require less scrolling.

Page Heavy Penalty Algorithm

Present your most compelling material above the fold at any resolution – Google also has a ‘Page Heavy Algorithm’ – I go into more of that kind of issue in my Google Panda Recovery post but in short if you have too many ads on your page, or if paid advertising obfuscates copy or causes an otherwise frustrating user experience for Google’s visitors, your page can be demoted in SERPs:

‘sites that don’t have much content “above-the-fold” can be affected.’ Google:

Keep an eye on where you put your ads or other sponsored content – get in the way of your main content copy of the page you are designing and you could see traffic decline.

Interstitial and Pop-Up ‘penalty’

Bear in mind also Google now (since January 2017) has an Interstitial and Pop-Up ‘penalty so AVOID creating a marketing strategy that relies on this.

‘Here are some examples of techniques that make content less accessible to a user: (1) Showing a popup that covers the main content, either immediately after the user navigates to a page from the search results, or while they are looking through the page. (2) Displaying a standalone interstitial that the user has to dismiss before accessing the main content. (3) Using a layout where the above-the-fold portion of the page appears similar to a standalone interstitial, but the original content has been inlined underneath the fold. Google’

EXIT POP-UPS (like the one I use on this site) do NOT interfere with a readers enjoyment and access to the primary content on a page. At the moment, these type of pop-ups seem to be OK (and do massively increase subscriber signups).

Mobile Devices

Mobile Friendliness

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 your desktop design 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 developed 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, first.

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 and try to find a solution that transforms gracefully on the widest number of devices as possible.

Responsive Website Design

In today’s world, a lot of people are using handheld devices (tablets and smartphones) to browse the web and responsive website design (RWD) has emerged as a very likely solution (it is still debated by aficionados) 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 handheld 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. I STILL prefer RESONSIVE design when compared with AMP (at the moment).

Does your mobile site redirect to another URL?

Well, that’s not ideal. It never has been.

Way back in the day – some folk used TEXT-ONLY versions of a website to produce content for users/browsers that didn’t support elements of their websites – in a (usually vain) attempt to make their content more accessible. The W3C even used to recommend it I think if all else failed:

A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only pages shall be updated whenever the primary page changes. SECTION 508

It’s ALWAYS been ideal to deliver one URL to a visitor for accessibility purposes, and there is no difference when delivering mobile or smartphone content if you are thinking about creating “a mobile” version of your site. This, of course, may be EVEN MORE IMPORTANT if Google is moving to a MOBILE FIRST INDEX! Google may very well rate you PRIMARILY on your mobile experience in the near future – so we all really need to be aware of the big changes that we might see very soon in Google’s SERPs.

When Google is the ‘visitor’ it’s usually even more important to deliver just one URL because of canonical url challenges for search engines – and this has been the case before the implementation of the canonical link element some time ago.

So the ideal is to deliver one url at all times.

John Mueller – @Paul If you have “smartphone” content (which we see as normal web-content, as it’s generally a normal HTML page, just tweaked in layout for smaller displays) you can use the rel=canonical to point to your desktop version. This helps us to focus on the desktop version for web-search. When users visit that desktop version with a smartphone, you can redirect them to the mobile version. This works regardless of the URL structure, so you don’t need to use subdomains / subdirectories for smartphone-mobile sites. Even better however is to use the same URLs and to show the appropriate version of the content without a redirect :).

Test Your Site For Mobile Friendliness

Test your site using the tool using this tool. Here’s the announcement from Google.

Note that passing Google’s mobile-friendliness test does not mean your website is automatically user friendly. For a site to be even more user friendly on mobile devices – you should be relying on W3C technologies – so I would recommend you use the free tool (which is suspended at the moment) provided by the W3c:

This checker performs various tests on a Web Page to determine its level of mobile-friendliness. The tests are defined in the mobileOK Basic Tests 1.0 specification. A Web Page is mobileOK when it passes all the tests.

I’m currently bringing my site in line with w3c on mobile friendliness and more general web accessibility recommendations.

User Experience

User Experience is a big part of successful search engine optimisation in 2017 – and a big factor in the Google Panda algorithm.

Will Having A Responsive Mobile Site Mean More Traffic From Google?

mobile-seo-results

Not necessarily, as the image above illustrates.

I actually had my record week in terms mobile traffic labeled as organic the week the week before I went mobile.

As many things to do with Google optimisation – having a mobile friendly website is more or less to ensure you KEEP the traffic you are already getting, not necessarily give you any more free traffic from Google. If you don’t already get a lot of traffic from mobile visitors – I’m not sure if this update from Google will have a noticeable effect on your traffic levels (in analytics at least) at the outset – but over time – it probably will be an extremely improtant challenge to navigate.

The quality bar is being raised – again – by Google – and if you want to compete in ever more competitive organic SERPs this is yet another hurdle for small businesses to get over.

In the LONG term – this mobile conversion can only be a good thing for your users – but in the short term – it will be interesting to see what effect it has on small businesses conversion rates – as conversion rates via mobile are often less than on desktop.

Google has said that this mobile friendly algorithm will have a greater impact on SERPs than both Google Penguin and Google Panda algorithms – and we’ll find out more as time goes on.

NB – I can tell you that I got a ‘mobile-friendly label‘ in Google SERPs 2 days after I launched my mobile friendly theme. And – actually – using Google is usually a great way of checking if your site is mobile friendly – because Google sometimes tells you in the SERPs on MOBILE.

Google Webmaster Tools

You should be able to track mobile errors in Search Console (AKA Google Webmaster Tools) and see errors disappear over time if your site is configured correctly:

Screenshot 2015-03-31 14.10.22

How To Make Your Website Mobile Friendly

Part 1 – PageSpeed Insights, Mobile-Friendly Test and Mobile-Usability

Part 2 – Viewports, zoom and plugins

Part 3 – Tap targets, margins and font sizes

Part 4 – Redirects

If you want to learn more about SEO, read my ‘what is SEO’ guide.

Web developers should find my other recent post useful now that site speed is a ranking factor in Google.

More reading:


  • FREE SEO Test

    Ranking high in Google in 2017 is the result of complex algorithms designed to work out if your website is relevant, search friendly and a satisfying user experience. This includes how 'mobile-friendly' your website is.

    Test Your Site