Disclosure: “This article is personal opinion of research based on my experience of almost 20 years. There is no third party advertising on this page or monetised links of any sort. External links to third party sites are moderated by me. Disclaimer. “ Shaun Anderson, Hobo
What is the best screen size to design for? This was most definitely one of the first questions I had as a young(ish) web designer with an interest in web accessibility almost 20 years ago.
Based on the Worldwide Screen Resolution Stats (Nov 2018 – Nov 2019) chart above and the charts below, these are the resolutions you need to be aware of in 2020.
- 360×640 – 14.49%
- 1366×768 – 8.77%
- 1920×1080 – 7.88%
- 375×667 – 4.42%
- 1440×900 – 2.68%
- 1280×800 – 1.6%
These resolutions take into consideration desktop, mobile and tablet resolutions. I’ve clarified this data (below) to focus on Worldwide, US and UK web traffic.
Table of Contents
What is the Best Screen Size to Design for in 2020?
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.
QUOTE: 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 – you know they are interested in search engine optimisation.
SEO in 2020 is now based, in part, on good website UX, as Google quantifies it, at least for mobile users.
At the moment – that essentially now means responsive website design.
TAKE NOTE: Google is Moving To A ‘Mobile First‘ Index in 2020
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 may rank those pages above your own, in time.
QUOTE: ‘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
Desktop Screen Resolution Stats Worldwide Nov 2018 – Nov 2019
For reference, here is a list of the current top screen resolutions worldwide as recorded recently (2019):
Most Common Desktop Screen Resolution Sizes Worldwide
- 1366×768 – 23.39%
- 1920×1080 – 20.69%
- 1440×900 – 7.19%
- 1600×900 – 4.58%
- 1280×800 – 3.46%
- 1280×1024 – 3.33%
Mobile Screen Resolution Stats Worldwide Nov 2018 – Nov 2019
Most Common Mobile Screen Resolution Sizes Worldwide – Nov 2016 – Nov 2017
- 360×640 – 23.86%
- 375×667 – 7.43%
- 414×736 – 3.74%
- 320×568 – 1.79%
- 720×1280 – 1.68%
Tablet Screen Resolution Stats Worldwide Nov 2018 – Nov 2019
Most Common Tablet Screen Resolution Sizes Worldwide
- 768×1024 – 55.21%
- 1280×800 – 6.43%
- 800×1280 – 4.57%
- 601×962 – 3.96%
- 600×1024 – 2.77%
- 1024×1366 – 2.39%
Desktop Screen Resolution Stats in the US Nov 2018 – Nov 2019
Top Screen Resolutions in the US (2017)
Most Common Desktop Screen Resolution Size in the United States Of America
- 1920×1080 – 19.81%
- 1366×768 – 16.02%
- 1440×900 – 9.38%
- 1536×864 – 6.58%
- 1600×900 – 4.57%
- 1280×800 – 4.49%
Mobile Screen Resolution Stats in the US Nov 2018 – Nov 2019
Most Common Mobile Screen Resolution Size in the United States Of America
- 375×667 – 15.75%
- 414×816 – 13.63%
- 360×640 – 11.62%
- 375×812 – 10.44%
- 414×736 – 10.11%
- 412×846 – 5.99%
- 320×568 – 3.6%
Tablet Screen Resolution Stats in the US Nov 2018 – Nov 2019
Most common Tablet Screen Resolution Size in the United States Of America
- 768×1024 – 61.87%
- 1280×800 – 4.68%
- 601×962 – 4.67%
- 800×1280 – 4.22%
- 1024×1366 – 3.67%
- 600×1024 -2.2%
Desktop Screen Resolution Stats in the UK Nov 2018 – Nov 2019
Top Screen Resolutions in the UK (2017)
Most Common Desktop Screen Resolution Size in the United Kingdom
- 1920×1080 – 23.13%
- 1366×768 – 17.45%
- 1440×900 – 10.28%
- 1536×864 – 6.75%
- 1280×800 – 4.66%
- 1280×1024 – 3.37%
Mobile Screen Resolution Stats in the UK Nov 2018 – Nov 2019
Most Common Mobile Screen Resolution Size in the United Kingdom
- 375×667 – 19.06%
- 360×640 – 13.01%
- 414×816 – 9.47%
- 375×812 – 8.36%
- 360×740 – 6.77%
- 414×736 – 5.71%
- 320×568 – 5.46%
Tablet Screen Resolution Stats in the UK Nov 2018 – Nov 2019
Most Common Tablet Screen Resolution Sizes in the United Kingdom
- 768×1024 – 63.21%
- 1280×800 – 5.99%
- 800×1280 – 4.83%
- 601×962 – 3.21%
- 600×1024 – 2.8%
- 1024×1366 – 2.13%
Desktop Browser Market Share Worldwide
Browser Market Share Worldwide
- Chrome – 64.26%
- Safari – 16.74%
- Firefox – 4.47%
- Samsung – 3.29%
- UC Browser – 2.95%
- Opera – 2.35%
- IE – 1.66%
Desktop vs Mobile vs Tablet Market Share Worldwide
Desktop vs Mobile vs Tablet Market Share Worldwide
- Mobile – 52.03%
- Desktop – 45.17%
- Tablet – 2.8%
For more about browser share: See Check How Your Website Looks to Google & Different Versions Of Browsers, Too.
*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/.
But…. How Can I design A Site That Looks The Same In Every Browser & Resolution?
I’ve been doing this for almost 20 years and this is not something a client immediately thinks of when commissioning a new website design. Any design will look different across browsers as it is sized to fit the available window.
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 could 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 used to have the former, now I have the latter. 10 years ago, I preferred working with a liquid design layout based on basic accessibility best practices when I was managing the site entirely myself, but with that comes unforeseen issues with design on individual pages if a later editor is unfamiliar with such accessibility practices. A responsive design lets me (I am not a professional web developer anymore) lay down some rules that better manage user experience expectations at specific important resolutions.
I opted for a RESPONSIVE DESIGN with this site a long time ago (and have recommended this for nearly ten years probably) 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, between devices at least.
Google favours responsive designs, which is good news for those who have adopted it:
MOBILE IS ON THE RISE – so if developing a new website in 2020 – 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 importance 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.
Old Advice Worth Noting
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 (a well-respected usability expert) is on record many years ago 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 2020. The charts above on this page can help you more.
The three main criteria for 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 they do not need to – although, over the years, that’s changed. In 2020 – users expect to scroll, whether 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 screens long could 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 in-depth information pieces 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.
NOTE: Google has a ‘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.
NOTE: Google has an ‘Interstitial and Pop-Up‘ Penalty Algorithm
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 seems to be OK for now (and do massively increase subscriber signups).
NOTE: Google Cares A Lot About Users on Mobile Devices
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 Web Analytics, to see what browsers and screen size 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.
A Responsive Website Template Is A Good Bet
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 RESPONSIVE design when compared with AMP (at the moment).
Does Your Mobile Site Redirect to Another URL & Version Of Your Site?
Well, that’s not ideal in 2020. It has never been, in fact.
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 well 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 situation is to deliver one URL at all times.
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 John Mueller, Google
Ignoring Google’s Recommendations Is Often Not A Smart Move
QUOTE: To recap, currently our crawling, indexing, and ranking systems typically look at the desktop version of a page’s content, which may cause issues for mobile searchers when that version is vastly different from the mobile version. Mobile-first indexing means that we’ll use the mobile version of the content for indexing and ranking, to better help our – primarily mobile – users find what they’re looking for. Webmasters will see significantly increased crawling by Smartphone Googlebot, and the snippets in the results, as well as the content on the Google cache pages, will be from the mobile version of the pages. Google Nov 2017
Google offers the following tips to check your site is prepared for the mobile first index, but essentially, if you are using a responsive web design template for your site you should have minimal issues with this change:
Make sure the mobile version of the site also has the important, high-quality content. This includes text, images (with alt-attributes), and videos – in the usual crawlable and indexable formats.
Structured data is important for indexing and search features that users love: it should be both on the mobile and desktop version of the site. Ensure URLs within the structured data are updated to the mobile version on the mobile pages.
Metadata should be present on both versions of the site. It provides hints about the content on a page for indexing and serving. For example, make sure that titles and meta descriptions are equivalent across both versions of all pages on the site.
No changes are necessary for interlinking with separate mobile URLs (m.-dot sites). For sites using separate mobile URLs, keep the existing link rel=canonical and link rel=alternate elements between these versions.
Check hreflang links on separate mobile URLs. When using link rel=hreflang elements for internationalization, link between mobile and desktop URLs separately. Your mobile URLs’ hreflang should point to the other language/region versions on other mobile URLs, and similarly link desktop with other desktop URLs using hreflang link elements there.
Ensure the servers hosting the site have enough capacity to handle potentially increased crawl rate. This doesn’t affect sites that use responsive web design and dynamic serving, only sites where the mobile version is on a separate host, such as m.example.com.
NOTE: User Experience Across Multiple Devices & Screen Resolutions
User Experience is a big part of successful search engine optimisation in 2020 – and a big factor in the Google Panda algorithm.
When thinking of designing a web-page in 2020, you are going to have to consider where certain elements appear on that webpage, especially advertisements.
Google will tell you if the ads on your website are annoying users which may impact the organic traffic Google sends you.
Annoying ads on your web pages has long been a problem for users (probably) and Google, too. Even if they do make you money.
What ads are annoying?
- ‘ the kind that blares music unexpectedly ‘ or
- ‘ a pop-up on top of the one thing we’re trying to find ‘
Apparently ‘frustrating experiences can lead people to install ad blockers and when ads are blocked publishers can’t make money’.
The video goes on to say:
‘ a survey of hundreds of ad experiences by the Coalition for better ads has shown that people don’t hate all ads just annoying ones eliminating these ads from your site can make a huge difference ‘
The New Ad Experience Report In Google Search Console
The ad experience report is part of Google Search Console.
‘ makes it easy to find annoying ads on your site and replace them with user-friendly ones ‘.
How To Fix Issues Found In the Google Ad Experience Report
- you will need to sign up for Google Search Console (AKA Google Webmaster Tools)
- review the Ad experience report
- ‘if your site hasn’t been reviewed or as past review, the report won’t show anything‘
- ‘if your review status is warning or failing violations will be listed in the what we found column ad reviews report on a sample of pages from both desktop and mobile versions of your site‘
- ‘if negative ad experiences are found they are listed separately in the report since a bad experience on mobile may not be as annoying on desktop’
- Google will highlight ‘site design issues such as pop-ups or large sticky ads‘ and rather cleverly will show you ‘a video of the ad that was flagged‘
- ‘Creative issues are shown on your site through ad tags like flashing animated ads or autoplay videos with sound’
- remove annoying ads from your site
- submit your site for a review of your ad experience in Search Console.
NOTE: Which type of Adverts Annoys Users?
“The Ad Experience Report is designed to identify ad experiences that violate the Better Ads Standards, a set of ad experiences the industry has identified as being highly annoying to users. If your site presents violations, the Ad Experience Report may identify the issues to fix.”
The Better Ads Standards people are focused on the following annoying ads:
Desktop Web Experiences
- Pop-up Ads
- Auto-playing Video Ads with Sound
- Prestitial Ads with Countdown
- Large Sticky Ads
Mobile Web Experiences
- Pop-up Ads
- Auto-playing Video Ads with Sound
- Prestitial Ads
- Postitial Ads with Countdown
- Ad Density Higher Than 30%
- Full-screen Scroll over Ads
- Flashing Animated Ads
- Large Sticky Ads
Google says in the video:
“once you’ve fixed the issues you can submit your site for a real review. We’ll look at a new sample of pages and may find out experiences that were missed previously. We’ll e-mail you when the results are in.”
Google offers some solutions to using pop-ups if you are interested
“In place of a pop-up try a full-screen inline ad. It offers the same amount of screen real estate as pop-ups without covering up any content. Fixing the problem depends on the issue you have for example if it’s a pop-up you’ll need to remove all the pop-up ads from your site but if the issue is high ad density on a page you’ll need to reduce the number of ads”
Your Website Will Recieve A LOW RATING If It Has Annoying Or Distracting Ads or annoying Secondary Content (SC)
Google has long warned about web page advertisements and distractions on a web page that results in a poor user experience.
The following specific examples are taken from the Google Quality Rater Guide
6.3 Distracting/Disruptive/Misleading Titles, Ads, and Supplementary Content
Some Low-quality pages have adequate MC (main content on the page) present, but it is difficult to use the MC due to disruptive, highly distracting, or misleading Ads/SC. Misleading titles can result in a very poor user experience when users click a link only to find that the page does not match their expectations.
6.3.1 Ads or SC that disrupt the usage of MC
While we expect Ads and SC to be visible, some Ads, SC or interstitial pages (i.e., pages displayed before or after the content you are expecting) make it extremely difficult to use the MC. Pages that disrupt the use of the MC should be given a Low rating.
Google gives some examples:
- ‘Ads that actively float over the MC as you scroll down the page and are difficult to close. It can be very hard to use MC when it is actively covered by moving, difficult-to-close Ads.’
- ‘An interstitial page that redirects the user away from the MC without offering a path back to the MC.’
6.3.2 Prominent presence of distracting SC or Ads
“Users come to web pages to use the MC. Helpful SC and Ads can be part of a positive user experience, but distracting SC and Ads make it difficult for users to focus on and use the MC.
Some webpages are designed to encourage users to click on SC that is not helpful for the purpose of the page. This type of SC is often distracting or prominently placed in order to lure users to highly monetized pages.
Either porn SC or Ads containing porn on nonPorn pages can be very distracting or even upsetting to users. Please refresh the page a few times to see the range of Ads that appear, and use your knowledge of the locale and cultural sensitivities to make your rating. For example, an ad for a model in a revealing bikini is probably acceptable on a site that sells bathing suits. However, an extremely graphic porn ad may warrant a Low (or even Lowest) rating.”
6.3.3 Misleading Titles, Ads, or SC
“It should be clear what parts of the page are MC, SC, and Ads. It should also be clear what will happen when users interact with content and links on the webpage. If users are misled into clicking on Ads or SC, or if clicks on Ads or SC leave users feeling surprised, tricked or confused, a Low rating is justified.
- At first glance, the Ads or SC appear to be MC. Some users may interact with Ads or SC, believing that the Ads or SC is the MC.Ads appear to be SC (links) where the user would expect that clicking the link will take them to another page within the same website, but actually take them to a different website. Some users may feel surprised or confused when clicking SC or links that go to a page on a completely different website.
- Ads or SC that entice users to click with shocking or exaggerated titles, images, and/or text. These can leave users feeling disappointed or annoyed when they click and see the actual and far less interesting content.
- Titles of pages or links/text in the SC that are misleading or exaggerated compared to the actual content of the page. This can result in a very poor user experience when users read the title or click a link only to find that the page does not match their expectations. “
The important thing to know here is:
“Summary: The Low rating should be used for disruptive or highly distracting Ads and SC. Misleading Titles, Ads, or SC may also justify a Low rating. Use your judgment when evaluating pages. User expectations will differ based on the purpose of the page and cultural norms.”
… and that Google does not send free traffic to sites it rates as low quality.
Recommendation: Remove annoying ads on your site.
- You can sign up for Google Search Console.
- See an example of the ad experience report.
- Visit the Better Ads Standards site.
Will A Change To A Responsive Mobile Site Result In Lots More Traffic From Google?
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 important challenge to navigate.
The quality bar is being raised – again – by Google, and its users – 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 is quick to notice any change in this regard.
How To Check For Important Mobile Usability Issues On Your Site
Google Webmaster Tools
You should be able to track mobile errors in Google Search Console (AKA Google Webmaster Tools) and see errors disappear over time if your site is configured correctly:
Test Your Site For Mobile Friendliness
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.
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.