{"id":9199,"date":"2016-05-17T12:59:59","date_gmt":"2016-05-17T12:59:59","guid":{"rendered":"https:\/\/howtomakemoneyonlineasap.com\/9199\/how-do-i-make-sure-my-site-is-mobile-friendly-a-checklist\/"},"modified":"2016-05-17T13:41:10","modified_gmt":"2016-05-17T13:41:10","slug":"how-do-i-make-sure-my-site-is-mobile-friendly-a-checklist","status":"publish","type":"post","link":"https:\/\/howtomakemoneyonlineasap.com\/9199\/how-do-i-make-sure-my-site-is-mobile-friendly-a-checklist\/","title":{"rendered":"How do I make sure my site is mobile friendly? A checklist"},"content":{"rendered":"\n<!-- SEO Ultimate (http:\/\/www.seodesignsolutions.com\/wordpress-seo\/) - Code Inserter module -->\n<!-- Google Tag Manager (noscript) -->\r\n<noscript><iframe src=\"https:\/\/www.googletagmanager.com\/ns.html?id=GTM-PJMTR4\"\r\nheight=\"0\" width=\"0\" style=\"display:none;visibility:hidden\"><\/iframe><\/noscript>\r\n<!-- End Google Tag Manager (noscript) -->\n<!-- \/SEO Ultimate -->\n\n<div class=\"wp-caption\"><img decoding=\"async\" loading=\"lazy\" width=\"260\" height=\"188\" src=\"https:\/\/howtomakemoneyonlineasap.com\/wp-content\/uploads\/2016\/05\/searchenginewatch.comwp-contentuploadssites25201605tablet-1315651_640-360x260-cc4a22e5aba332143df065076bbcbc9c22682726.png\" class=\"singular-post-thumbnail wp-post-image\" alt=\"A picture of a pair of hands holding a mobile device horizontally. A cloud of bubbles featuring icons for music and TV and social media logos is floating out of the screen.\" \/><\/div>\n<p><strong>As we reported in our<\/strong> <a href=\"https:\/\/searchenginewatch.com\/2016\/05\/13\/six-most-interesting-search-marketing-news-stories-of-the-week\/\"><strong>SEM news round-up<\/strong><\/a> <strong>on Friday, Google&rsquo;s Webmaster Trends Analyst John Mueller confirmed that the latest wave of<\/strong> <a href=\"https:\/\/searchenginewatch.com\/2016\/03\/17\/its-mobilegeddon-hot-in-here-google-strengthens-its-mobile-friendly-ranking-signal\/\"><strong>changes to Google&rsquo;s&nbsp;mobile-friendly ranking signal<\/strong><\/a> <strong>has now finished rolling out.<\/strong><\/p>\n<p>Ever since the <a href=\"https:\/\/searchenginewatch.com\/sew\/news\/2405046\/google-mobilegeddon-has-officially-arrived\">initial &lsquo;Mobilegeddon&rsquo; update<\/a> which debuted&nbsp;on 21<sup>st<\/sup> April 2015, mobile-friendliness has been a significant ranking factor in Google search results. In its <a href=\"https:\/\/webmasters.googleblog.com\/2015\/02\/finding-more-mobile-friendly-search.html\">blog post<\/a> foreshadowing the algorithm changes two months before, Google said it wanted users to &ldquo;find it easier to get relevant, high quality search results that are optimised for their [mobile] devices&rdquo;.<\/p>\n<p>Google has affirmed and re-affirmed its commitment to mobile-friendliness over the years, <a href=\"https:\/\/searchenginewatch.com\/sew\/news\/2382228\/google-officially-debuts-mobile-friendly-labels\">implementing a &lsquo;mobile friendly&rsquo; label<\/a> to distinguish websites that are adapted for mobile, making changes to the mobile search results page including user-friendly URLs and <a href=\"https:\/\/searchenginewatch.com\/sew\/news\/2422542\/google-expands-sitelinks-on-mobile-serps\">expanded sitelinks<\/a>, and launching <a href=\"https:\/\/searchenginewatch.com\/2016\/02\/23\/google-has-launched-accelerated-mobile-pages\/\">Accelerated Mobile Pages<\/a> to provide an ultra-fast mobile experience.<\/p>\n<p>Now, with this latest update, Google has strengthened its mobile-friendly ranking signal even further, making it all the more important for webmasters to have a site which meets Google&rsquo;s standards.<\/p>\n<p>With that in mind, how can you make sure that your site comes up to scratch? We&rsquo;ve put together a handy checklist of things you should do (or not do) in order to get the cleanest bill of mobile health possible from Google.<\/p>\n<h2><strong>Don&rsquo;t use Flash<\/strong><\/h2>\n<p>Most mobile browsers can&rsquo;t render Flash content, so one clear-cut rule of thumb in creating a mobile-friendly site is: don&rsquo;t use Flash. Google&rsquo;s <a href=\"https:\/\/support.google.com\/webmasters\/answer\/6101188?hl=en\">mobile usability report<\/a> sassily recommends that you use &ldquo;modern web technologies&rdquo; to display your page content, animations and navigation instead. Ouch!<\/p>\n<h2><strong>Make sure your viewport is set properly<\/strong><\/h2>\n<p>A <strong>viewport<\/strong> is a type of <a href=\"https:\/\/searchenginewatch.com\/sew\/how-to\/2067564\/how-to-use-html-meta-tags\">meta tag<\/a> that gives the browser instructions on how to adjust the page dimensions and scaling to different device widths. This should appear in the head of your webpage.<\/p>\n<p>If there is no viewport tag, mobile browsers will default to rendering the page at the width of a desktop screen. Google has a <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/design-and-ui\/responsive\/fundamentals\/set-the-viewport\">tutorial<\/a> on how to set the viewport for your page and make sure it&rsquo;s accessible.<\/p>\n<p class=\"c9\"><a href=\"https:\/\/howtomakemoneyonlineasap.com\/wp-content\/uploads\/2016\/05\/searchenginewatch.comwp-contentuploadssites25201605meta-tags-d8f2d2c70002925997a1e58cb827adab73f24a2a.jpg\" rel=\"attachment wp-att-60010\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-60010\" src=\"https:\/\/howtomakemoneyonlineasap.com\/wp-content\/uploads\/2016\/05\/searchenginewatch.comwp-contentuploadssites25201605meta-tags-d8f2d2c70002925997a1e58cb827adab73f24a2a.jpg\" alt=\"A screenshot of the meta tags for Search Engine Watch, including a section entitled &quot;mobile meta (hooray!)&quot; which has a correctly configured viewport meta tag.\" width=\"547\" height=\"263\" \/><\/a><\/p>\n<p><strong>What not to do:<\/strong> set your viewport to a fixed width. Some developers will define the viewport to a fixed pixel width to suit common mobile screen sizes, but this still won&rsquo;t be suitable for every kind of device, and so Google doesn&rsquo;t judge it to be mobile-friendly.<\/p>\n<p>If you follow the instructions in Google&rsquo;s tutorial and use the viewport value <strong>width=device-width<\/strong>, this will allow your page to match the width of whatever device your visitors are using.<\/p>\n<p>Adding the attribute <strong>initial-scale=1<\/strong> will also allow your page to fill the screen whether the device is portrait or landscape, and so take advantage of the full width of the screen.<\/p>\n<p>Finally, make sure that your content is <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/design-and-ui\/responsive\/fundamentals\/size-content-to-the-viewport\">sized to the viewport<\/a>. If you set absolute CSS widths for page elements like images and videos, this can cause a problem for devices that are narrower than the width you&rsquo;ve specified. You can get around this by using relative width values, such as <strong>width: 100%<\/strong>, in your CSS.<\/p>\n<h2><strong>Use large font<\/strong><\/h2>\n<p>If you&rsquo;ve configured your viewport properly, font sizes will be scaled according to the user&rsquo;s device, but Google makes some additional <a href=\"https:\/\/developers.google.com\/speed\/docs\/insights\/UseLegibleFontSizes\">recommendations for font<\/a> on top of that.<\/p>\n<p>It recommends using a base font size of 16 pixels, with any other font sizes (such as small and large) defined relative to that baseline. The vertical space between lines should be set at 1.2em.<\/p>\n<p>Try to also avoid using too many different fonts and font sizes, which leads to messy and complicated page layouts.<\/p>\n<h2><strong>Space out links and buttons<\/strong><\/h2>\n<p>Links and buttons, also called &ldquo;tap targets&rdquo; by Google, are harder to press on a mobile device than on a desktop browser, because fingers are wider and generally less accurate than a mouse cursor.<\/p>\n<p>Google will penalise any pages where the tap targets are too small and close together to press accurately.<\/p>\n<p class=\"c9\"><a href=\"https:\/\/howtomakemoneyonlineasap.com\/wp-content\/uploads\/2016\/05\/searchenginewatch.comwp-contentuploadssites25201605ipad-820272_640-c2b2f7d817a6b20fa0b0aba1eb65eb6841c1fd87.jpg\" rel=\"attachment wp-att-60011\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-60011 size-full\" src=\"https:\/\/howtomakemoneyonlineasap.com\/wp-content\/uploads\/2016\/05\/searchenginewatch.comwp-contentuploadssites25201605ipad-820272_640-c2b2f7d817a6b20fa0b0aba1eb65eb6841c1fd87.jpg\" alt=\"A picture of someone&#039;s hands using an iPad, one hand gripping the side of the screen and the other pressing on an image with one finger.\" width=\"392\" height=\"266\" \/><\/a><em>Image by <a href=\"https:\/\/pixabay.com\/en\/users\/fancycrave1-1115284\/\">fancycrave1<\/a>, CC0 public domain image<\/em><\/p>\n<p>The average adult finger pad is about 10mm wide, so Google recommends a minimum tap target size of about 7mm, or 48 pixels wide &ndash; at least for the most important tap targets, like frequently used buttons, navigational links, search bars and form fields.<\/p>\n<p>Less frequently used targets can be smaller, but should still be spaced far enough apart that a user trying to press one won&rsquo;t accidentally hit another target instead. The recommended space around smaller tap targets is at least 5mm.<\/p>\n<h2><strong>Don&rsquo;t use full-screen pop-ups<\/strong><\/h2>\n<p>Large or full-screen pop-ups and overlays, also called &ldquo;interstitials&rdquo;, such as a mailing list sign-up form or app promotion, can be extra disruptive on a mobile device.<\/p>\n<p>While a big, attention-grabbing pop-up might seem like a good idea from a business&rsquo; point of view, Google recognises that these interfere with the experience of browsing a site on mobile and will penalise sites that use them.<\/p>\n<p class=\"c9\"><a href=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/sites\/25\/2016\/05\/pop-up-window.jpg\" rel=\"attachment wp-att-60007\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-60007\" src=\"https:\/\/howtomakemoneyonlineasap.com\/wp-content\/uploads\/2016\/05\/searchenginewatch.comwp-contentuploadssites25201605pop-up-window-300x300-ad417f6b6140e3226c589a37fc51181c7ef4d24c.jpg\" alt=\"A simple graphic depicting a computer pop-up window, with a blue bar across the top, an X to close in the right-hand corner, and black lines representing text.\" width=\"300\" height=\"300\" \/><\/a><br \/><em>Image by <a href=\"https:\/\/pixabay.com\/en\/users\/OpenClipartVectors-30363\/\">OpenClipartVectors<\/a>, CC0 public domain image<\/em><\/p>\n<p>Instead of a full-screen pop-up, Google recommends using a banner, or implementing <a href=\"https:\/\/searchenginewatch.com\/sew\/study\/2435355\/what-is-app-indexing-and-why-is-it-important\">app indexing<\/a>, which will allow content from within your app to appear in search results, making it a very effective method of promotion.<\/p>\n<h2><strong>Run a check with Google&rsquo;s tools<\/strong><\/h2>\n<p>The easiest way to double-check whether your site is hitting all of the right targets for mobile-friendliness is to use the tools Google has provided to run a check.<\/p>\n<p>Google&rsquo;s <a href=\"https:\/\/searchenginewatch.com\/2016\/05\/09\/google-search-console-a-complete-overview\">Search Console<\/a>, formerly known as Webmaster Tools, has a &lsquo;<a href=\"https:\/\/searchenginewatch.com\/2016\/05\/09\/google-search-console-a-complete-overview\/#MobileUsability\">mobile usability<\/a>&rsquo; section that will diagnose any lingering issues with your site, usually one of the errors listed above.<\/p>\n<p>You can also check the mobile health of individual webpages by pasting the URL into Google&rsquo;s <a href=\"https:\/\/www.google.com\/webmasters\/tools\/mobile-friendly\/?utm_source=wmc-blog&amp;utm_medium=referral&amp;utm_campaign=blog-nav\">Mobile-Friendly Test<\/a>. And Google Developers has a section listing <a href=\"https:\/\/developers.google.com\/webmasters\/mobile-sites\/mobile-seo\/common-mistakes\">common mistakes made when designing for mobile<\/a>, which has some additional detail on things like unplayable content, faulty redirects and 404s and how to fix them.<\/p>\n<p class=\"c9\"><a href=\"https:\/\/howtomakemoneyonlineasap.com\/wp-content\/uploads\/2016\/05\/searchenginewatch.comwp-contentuploadssites25201605mobile-friendly-Copy-73b069fb50c7781c9848e4e5a7cc68bbfb37e85a.jpg\" rel=\"attachment wp-att-60016\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-60016\" src=\"https:\/\/howtomakemoneyonlineasap.com\/wp-content\/uploads\/2016\/05\/searchenginewatch.comwp-contentuploadssites25201605mobile-friendly-Copy-73b069fb50c7781c9848e4e5a7cc68bbfb37e85a.jpg\" alt=\"A Google mobile-friendly test for a website. At the top is a red bar reading &quot;not mobile friendly&quot;, with issues listed on the left. In the middle is an image of a mobile device showing &quot;How Googlebot sees this page&quot;. On the right you can select from options about how the page was created, in order to start improving it.\" width=\"635\" height=\"378\" \/><\/a><\/p>\n<h2><strong>The need for speed<\/strong><\/h2>\n<p>In its recommendations for working with a developer to build a mobile-friendly site (if you aren&rsquo;t able to make the necessary changes to their website yourself), Google suggests asking your developer to &ldquo;make a commitment to speed&rdquo;.<\/p>\n<p>While Google doesn&rsquo;t include a slow loading speed as one of its &lsquo;must correct&rsquo; mobile friendliness issues, we know that <a href=\"https:\/\/searchenginewatch.com\/sew\/how-to\/2409674\/every-second-counts-why-page-speed-should-be-your-next-focus\">speed <strong>is<\/strong> a ranking factor<\/a>, and <a href=\"https:\/\/blog.kissmetrics.com\/loading-time\/?wide=1\">statistics<\/a> show that slow loading speed can frequently cause users to abandon web pages.<\/p>\n<p>So if you want to provide the best user experience and also give your mobile-friendly site the best chance of a higher ranking, consider speeding it up as much as possible.<\/p>\n<p class=\"c9\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-60017\" src=\"https:\/\/howtomakemoneyonlineasap.com\/wp-content\/uploads\/2016\/05\/searchenginewatch.comwp-contentuploadssites25201605need-for-speed-aa79b92b13b502647aab5004f1281c61658b4c98.jpg\" alt=\"A picture of a girl with short, dark hair and glowing white headphones, wearing a skintight metallic body suit and white gloves. She is flying through the air and punching ahead of her with one fist, speed lines indicating her fast motion.\" width=\"540\" height=\"353\" \/><em>Image by <a href=\"https:\/\/pixabay.com\/en\/users\/alan9187-2347\/\">Alan9187<\/a>, CC0 public domain image<\/em><\/p>\n<p>Google&rsquo;s <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\">PageSpeed Insights<\/a> has a &lsquo;mobile&rsquo; tab which will give your page a mobile speed rating out of 100, with advice on how to fix the elements that might be slowing it down.<\/p>\n<p>It will also give your mobile page a user experience ranking out of 100, and flag up any mobile-friendliness issues in the same way as Google&rsquo;s other tools.<\/p>\n<p>There&rsquo;s also <a href=\"https:\/\/searchenginewatch.com\/2016\/04\/11\/google-accelerated-mobile-pages-and-content-the-need-for-speed\/\">Accelerated Mobile Pages<\/a>, Google&rsquo;s ultra-fast mobile web pages which run on a reinvented version of HTML. Building an AMP version of your site for mobile is another way to be sure it&rsquo;s fast and mobile-friendly, though many SEOs are still <a href=\"https:\/\/searchenginewatch.com\/2016\/05\/03\/why-are-seos-slow-to-implement-accelerated-mobile-pages\/\">holding back on implementing AMP<\/a> for a number of reasons. It&rsquo;s an option, but not a necessity for having a fast and Google-friendly mobile site.<\/p>\n<div class=\"more-in-category\">\n<h4>Related reading<\/h4>\n<div class=\"post category-border category-border-content\">\n<div class=\"post-thumbnail alignleft\"><a href=\"https:\/\/searchenginewatch.com\/2016\/05\/17\/bbc-food-website-closure-what-have-we-lost-and-who-stands-to-benefit\/\"><img decoding=\"async\" loading=\"lazy\" width=\"120\" height=\"90\" src=\"https:\/\/howtomakemoneyonlineasap.com\/wp-content\/uploads\/2016\/05\/searchenginewatch.comwp-contentuploadssites25201605hp-120x90-043581c8d955125fc94df1d780cf4494b769a535.png\" class=\"attachment-120x90 size-120x90 wp-post-image\" alt=\"hp\" \/><\/a><\/div>\n<div class=\"post-info\">\n<p class=\"excerpt\">Today it was announced that the BBC Food recipe website is to close, or at least mothballed in some way. It contains <a href=\"https:\/\/searchenginewatch.com\/2016\/05\/17\/how-do-i-make-sure-my-site-is-mobile-friendly\/\" class=\"c10\">&#8230; read more<\/a><\/p>\n<\/div>\n<\/div>\n<div class=\"post category-border category-border-content\">\n<div class=\"post-thumbnail alignleft\"><a href=\"https:\/\/searchenginewatch.com\/2016\/05\/17\/googles-doubling-down-on-native-app-experiences-with-gboard-chirp-and-translate\/\"><img decoding=\"async\" loading=\"lazy\" width=\"120\" height=\"90\" src=\"https:\/\/howtomakemoneyonlineasap.com\/wp-content\/uploads\/2016\/05\/searchenginewatch.comwp-contentuploadssites25201605japanese-milk-carton-120x90-3ce997c9433254ae6e6c808f2f57f789b0e7d23d.png\" class=\"attachment-120x90 size-120x90 wp-post-image\" alt=\"chinese milk carton\" \/><\/a><\/div>\n<div class=\"post-info\">\n<p class=\"excerpt\">Google puts high value in mobile user experience. The truthfulness of that statement can be tracked back as far Google&rsquo;s first .mobi website 10 years ago, or when it launched the first iteration of its Android operating system in 2008.<\/p>\n<\/div>\n<\/div>\n<div class=\"post category-border category-border-content\">\n<div class=\"post-thumbnail alignleft\"><a href=\"https:\/\/searchenginewatch.com\/2016\/05\/16\/how-to-write-meta-title-tags-for-seo-with-good-and-bad-examples\/\"><img decoding=\"async\" loading=\"lazy\" width=\"120\" height=\"90\" src=\"https:\/\/howtomakemoneyonlineasap.com\/wp-content\/uploads\/2016\/05\/searchenginewatch.comwp-contentuploadssites25201605title-tags-Google-Search-120x90-e523173285eb65007af2c53d873c9b8ea121b245.png\" class=\"attachment-120x90 size-120x90 wp-post-image\" alt=\"title tags Google Search\" \/><\/a><\/div>\n<div class=\"post-info\">\n<p class=\"excerpt\">What is a title tag? How do you write one? Why are title tags important? Do they actually help with search engine optimisation?<\/p>\n<\/div>\n<\/div>\n<div class=\"post category-border category-border-seo\">\n<div class=\"post-thumbnail alignleft\"><a href=\"https:\/\/searchenginewatch.com\/2016\/05\/16\/brand-slackers-organic-search-is-not-always-about-non-brand-keywords\/\"><img decoding=\"async\" loading=\"lazy\" width=\"120\" height=\"90\" src=\"https:\/\/howtomakemoneyonlineasap.com\/wp-content\/uploads\/2016\/05\/searchenginewatch.comwp-contentuploadssites25201605main-image-120x90-becbf061bfec45d6a509ed1acb3c240037724cf7-1.jpg\" class=\"attachment-120x90 size-120x90 wp-post-image\" alt=\"brand definition\" \/><\/a><\/div>\n<div class=\"post-info\">\n<p class=\"excerpt\">I admit it, I am addicted to the non-branded organic referral, but let&rsquo;s be honest, the branded or partially branded organic search traffic that you are receiving (or not) is much more qualified.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<script type=\"text\/javascript\" charset=\"utf-8\" src=\"http:\/\/w.sharethis.com\/widget\/?wp=6.2.5\"><\/script>","protected":false},"excerpt":{"rendered":"<p>As we reported in our SEM news round-up on Friday, Google&rsquo;s Webmaster Trends Analyst John Mueller confirmed that the latest wave of changes to Google&rsquo;s&nbsp;mobile-friendly ranking signal has now finished rolling out. Ever since the initial &lsquo;Mobilegeddon&rsquo; update which debuted&nbsp;on 21st April 2015, mobile-friendliness has been a significant ranking factor in Google search results. In <a href=\"https:\/\/howtomakemoneyonlineasap.com\/9199\/how-do-i-make-sure-my-site-is-mobile-friendly-a-checklist\/\" class=\"read-more-excerpt\">Read More <i class=\"fa fa-chevron-circle-right\"><\/i><\/a><\/p>\n","protected":false},"author":242,"featured_media":9201,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_links_to":"","_links_to_target":""},"categories":[248],"tags":[],"_links":{"self":[{"href":"https:\/\/howtomakemoneyonlineasap.com\/wp-json\/wp\/v2\/posts\/9199"}],"collection":[{"href":"https:\/\/howtomakemoneyonlineasap.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howtomakemoneyonlineasap.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howtomakemoneyonlineasap.com\/wp-json\/wp\/v2\/users\/242"}],"replies":[{"embeddable":true,"href":"https:\/\/howtomakemoneyonlineasap.com\/wp-json\/wp\/v2\/comments?post=9199"}],"version-history":[{"count":2,"href":"https:\/\/howtomakemoneyonlineasap.com\/wp-json\/wp\/v2\/posts\/9199\/revisions"}],"predecessor-version":[{"id":9212,"href":"https:\/\/howtomakemoneyonlineasap.com\/wp-json\/wp\/v2\/posts\/9199\/revisions\/9212"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/howtomakemoneyonlineasap.com\/wp-json\/wp\/v2\/media\/9201"}],"wp:attachment":[{"href":"https:\/\/howtomakemoneyonlineasap.com\/wp-json\/wp\/v2\/media?parent=9199"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howtomakemoneyonlineasap.com\/wp-json\/wp\/v2\/categories?post=9199"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howtomakemoneyonlineasap.com\/wp-json\/wp\/v2\/tags?post=9199"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}