What is the best screen size to design for in 2015? 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.
Q: What is the best screen size to design for?
A: Design for your audience
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 said you need to design for a good experience across multiple devices.
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 from April 21 2015, all around the world, how mobile friendly a site is WILL affect ranking performance across a variety of devices.
If you make websites for 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 the moment – that essentially now means responsive website design.
For reference, here are a list of the current top screen resolutions worldwide:
Top Screen Resolutions in the US (2014-2015)
Top Screen Resolutions in the UK (2014-2015)
Last Years Global Trend (2014-2015)
Last Years Trend for the US (2014-2015)
Last Years Trend for the UK (2014-2015)
*Note – statistics above are from one 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 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 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 2015 – 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 2015.
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 – although over the years, that’s changed. In 2015 – users expect 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 might be too 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.
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.
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!
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 todays world a lot of people are using hand held 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 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.
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.
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 public tool found here: ALTHOUGH NOTE if you want to be sure your site is mobile friendly as far as Google is concerned – it means 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 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.
Will Having A Responsive Mobile Site Mean More Traffic From Google?
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).
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 on April 21 2015 – we’ll find out more.
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 a great way of checking if your site is mobile friendly – because Google WILL tell you in the SERPS on MOBILE.
Google Webmaster Tools
You should be able to track mobile errors in Google Webmaster Tools and see errors disappear over time if your site is configured correctly:
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 – check out my ‘what is seo‘ guide.