{
    "version" : "https://jsonfeed.org/version/1",
    "content" : "news",
    "type" : "single",
    "title" : "Is Your Site Mobile-Friendly? |Digital.gov",
    "description": "Is Your Site Mobile-Friendly?",
    "home_page_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/","feed_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/2015/10/23/is-your-site-mobile-friendly/index.json","item" : [
    {"title" :"Is Your Site Mobile-Friendly?","summary" : "What is mobile-friendly? Mobile-friendly simply means your visitors can use phones and tablets to visit your website and have a user-friendly experience. Many of us get toward the end of mobile site development and really do not know if what we created is “mobile-friendly.” We think we have followed all of the mobile best practices","date" : "2015-10-23T11:00:12-04:00","date_modified" : "2025-01-27T19:42:55-05:00","authors" : {"david-fern" : "David Fern"},"topics" : {
        
            "mobile" : "Mobile",
            "usability" : "Usability"
            },"branch" : "bc-archive-content-3",
      "filename" :"2015-10-23-is-your-site-mobile-friendly.md",
      
      "filepath" :"news/2015/10/2015-10-23-is-your-site-mobile-friendly.md",
      "filepathURL" :"https://github.com/GSA/digitalgov.gov/blob/bc-archive-content-3/content/news/2015/10/2015-10-23-is-your-site-mobile-friendly.md",
      "editpathURL" :"https://github.com/GSA/digitalgov.gov/edit/bc-archive-content-3/content/news/2015/10/2015-10-23-is-your-site-mobile-friendly.md","slug" : "is-your-site-mobile-friendly","url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/2015/10/23/is-your-site-mobile-friendly/","content" :"\u003cdiv class=\"image\"\u003e\n  \u003cimg\n    src=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2015/10/600-x-434-no-shadow-Smartphones-and-wrong-and-right-icons-frikota-iStock-Thinkstock-500886657-500886437.jpg\"\n    alt=\"Two smart phones; one with a red x wrong icon on the screen, and the other with a green check mark right icon on the screen.\"/\u003e\u003c/div\u003e\n\n\n\u003cp\u003eWhat is mobile-friendly?\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/2015/04/30/mobile-friendly-park-websites-on-nps-gov/\"\u003eMobile-friendly\u003c/a\u003e simply means your visitors can use phones and tablets to visit your website and \u003ca href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/2015/10/20/focus-on-mobile-performance/\"\u003ehave a user-friendly experience\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eMany of us get toward the end of mobile site development and really do not know if what we created is “mobile-friendly.” We think we have followed all of the mobile best practices and performed usability testing. However, do we have something concrete to quantitatively certify that we are mobile-friendly?\u003c/p\u003e\n\u003cp\u003eMost would say no.\u003c/p\u003e\n\u003ch2 id=\"why-does-it-matter-if-your-site-is-mobile-friendly\"\u003eWhy Does It Matter If Your Site Is Mobile-Friendly?\u003c/h2\u003e\n\u003col\u003e\n\u003cli\u003eYou want your \u003ca href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/2015/10/07/is-your-agency-winning-its-mobile-moments/\"\u003emobile moments\u003c/a\u003e to be happy experiences! You are building software and tools for your customers and they will not be used if they are hard to use, slow or do not work on the user’s small device.\u003c/li\u003e\n\u003cli\u003eOn April 21, 2015, Google released a new \u003ca href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/2015/04/15/mobilegeddon-government-edition/\"\u003emobile-friendly ranking algorithm designed to give a boost to mobile-friendly pages\u003c/a\u003e in Google’s mobile search results. If you want to be found in Google, you need a mobile-friendly site.\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch2 id=\"what-tools-can-help-improve-our-site\"\u003eWhat Tools Can Help Improve Our Site?\u003c/h2\u003e\n\u003cp\u003eFor every task, someone has created a tool. This is no exception; there are many tools available to check to see if your site is mobile-friendly. Many of these “checkers” are online, free, quick and make a great addition to your testing process.\u003c/p\u003e\n\u003cp\u003eThese sites are not simply emulators but programs that scan your site, check a variety of criteria and provide a report. Additionally, most provide reporting on performance on the mobile device that is often overlooked in responsive design development.\u003c/p\u003e\n\u003cp\u003eThis means you may want to scan with multiple tools as each was developed looking for different criteria. For example, tools like the W3C Mobile OK Checker focuses on code compliance, Google Developers Page Speed Insights focuses on speed and the Google Mobile-Friendly test focuses on design.\u003c/p\u003e\n\u003cp\u003eMost have nicely-formatted results reports and suggestions, but it is up to you to interpret the reports, and you may find many false positives or issues that you are willing to live with. The performance results are especially interesting as it makes tuning easier, allowing developers to optimize mobile rendering to meet their specific performance objectives. Those performance objectives operate on a continuum: From highly optimized to the point of excluding images and interactive elements, down to websites that are not functional for mobile and considered desktop-only.\u003c/p\u003e\n\u003cp\u003eThese tools may be challenging for some sites. For example, some tools only work on non-SSL (http not https) sites, and most tools require your site be accessed online. DigitalGov has an article with more \u003ca href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/2015/09/16/speed-matters-optimizing-your-website-for-maximum-performance/\"\u003etips on optimizing website performance\u003c/a\u003e.\u003c/p\u003e\n\u003ch2 id=\"what-do-the-results-reports-look-like\"\u003eWhat Do the Results Reports Look Like?\u003c/h2\u003e\n\u003cp\u003eMost of the tools have nice, easy-to-read reports (that in many cases are printable) with solutions and risk ratings for each issue to help you prioritize your work.\u003c/p\u003e\n\u003ch2 id=\"online-tools-that-evaluate-your-website\"\u003eOnline Tools That Evaluate Your Website\u003c/h2\u003e\n\u003cp\u003eThe following is a list of free, online tools you may want to use to help you evaluate if a site is mobile-friendly. Let’s see what USA.gov looks like in a few of the tools.\u003c/p\u003e\n\u003ch3 id=\"google-mobile-friendly-site\"\u003eGoogle Mobile-Friendly Site\u003c/h3\u003e\n\u003cp\u003eGoogle’s \u003ca href=\"https://www.google.com/webmasters/tools/mobile-friendly/\"\u003eMobile-Friendly Test\u003c/a\u003e will analyze a URL and report if the page has a mobile-friendly design.\u003c/p\u003e\n\u003cp\u003eThe site appears to be mobile-friendly.\u003c/p\u003e\n\u003cdiv class=\"image\"\u003e\n  \u003cimg\n    src=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2015/10/600-x-528-Google-Mobile-Friendly-Test-Tool.jpg\"\n    alt=\"Google Mobile Friendly Test Tool\"/\u003e\u003c/div\u003e\n\n\n\u003ch3 id=\"heading\"\u003e\u003c/h3\u003e\n\u003ch3 id=\"google-developers-page-speed-insights\"\u003eGoogle Developers Page Speed Insights\u003c/h3\u003e\n\u003cp\u003e\u003ca href=\"https://developers.google.com/speed/pagespeed/insights/\"\u003ePageSpeed Insights\u003c/a\u003e analyzes the content of a Web page, then generates suggestions to make that page faster\u003c/p\u003e\n\u003cp\u003eThere are some suggestions on how to improve the site’s performance. By clicking on the links, the user is provided with specific suggestions.\u003c/p\u003e\n\u003cdiv class=\"image\"\u003e\n  \u003cimg\n    src=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2015/10/600-x-507-Google-Developers-Page-Speeds-Insights.jpg\"\n    alt=\"Google Developers Page Speeds Insights\"/\u003e\u003c/div\u003e\n\n\n\u003ch3 id=\"w3c-mobile-ok-checker\"\u003eW3C Mobile OK Checker\u003c/h3\u003e\n\u003cp\u003e\u003ca href=\"https://validator.w3.org/mobile/\"\u003eMobile OK Checker\u003c/a\u003e 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.\u003c/p\u003e\n\u003cp\u003eThere are some suggestions and three are critical. One example is:\u003c/p\u003e\n\u003cp\u003e“Loading the page requires a mobile browser to make more than 20 separate HTTP requests, which on some mobile networks can induce a delay of 20 seconds or more before the page is shown to the user.”\u003c/p\u003e\n\u003cp\u003eThe suggestion to fix the issue is:\u003c/p\u003e\n\u003cp\u003e“Try to reduce the number of included resources (images and style sheets). For instance, style sheets can be merged together instead of being split across several files.”\u003c/p\u003e\n\u003cdiv class=\"image\"\u003e\n  \u003cimg\n    src=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2015/10/600-x-508-W3C-Checker.jpg\"\n    alt=\"W 3 C Mobile OK Checker\"/\u003e\u003c/div\u003e\n\n\n\u003ch3 id=\"mobile-moxie\"\u003eMobile Moxie\u003c/h3\u003e\n\u003cp\u003e\u003ca href=\"http://www.mobilemoxie.com/tools/site_analysis/\"\u003eThis free tool\u003c/a\u003e gives the user an overall score and feedback on functionality, design, accessibility, technical optimization, load time and HTML contents of a site.\u003c/p\u003e\n\u003cp\u003eThis report is like a report card and indicated a caching issue that the other tools also pointed to.\u003c/p\u003e\n\u003cdiv class=\"image\"\u003e\n  \u003cimg\n    src=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2015/10/600-x-512-Mobile-Moxie.jpg\"\n    alt=\"Mobile Moxie\"/\u003e\u003c/div\u003e\n\n\n\u003ch3 id=\"mobi-ready-only-non-ssl-sites\"\u003eMobi Ready (Only Non-SSL Sites)\u003c/h3\u003e\n\u003cp\u003e\u003ca href=\"http://ready.mobi/\"\u003eThis free tool\u003c/a\u003e is for developers, designers and marketers to test website performance on mobile devices.\u003c/p\u003e\n\u003cp\u003eSince this does not support https sites, we are using REI.com.\u003c/p\u003e\n\u003cp\u003eNotice that this one shows four different resolutions and a report that “the total number of DOM elements should be less than 700 to avoid complexity that will affect rendering and user experience.”\u003c/p\u003e\n\u003cp\u003eWith a solution of:\u003c/p\u003e\n\u003cp\u003e“You should consider reducing the page complexity and content to reduce the DOM element count.”\u003c/p\u003e\n\u003cdiv class=\"image\"\u003e\n  \u003cimg\n    src=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2015/10/600-x-444-Mobi-Ready.jpg\"\n    alt=\"Mobi Ready\"/\u003e\u003c/div\u003e\n\n\n\u003ch3 id=\"webpagetest\"\u003eWebPageTest\u003c/h3\u003e\n\u003cp\u003e\u003ca href=\"http://www.webpagetest.org/\"\u003eWebPageTest\u003c/a\u003e is a free online site that allows the user to see exactly how much time every component uses to load. Through tuning, applications can be made to perform at acceptable levels. One of the most beneficial features I found was that prior to test execution you are able to select a test location, browser and mobile device. This functionality allows us to better replicate our users’ environments and more closely see what they are experiencing or will experience.\u003c/p\u003e\n\u003cdiv class=\"image\"\u003e\n  \u003cimg\n    src=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2015/10/600-x-755-WebPage-Test.jpg\"\n    alt=\"Screen capture of WebPageTest\"/\u003e\u003c/div\u003e\n\n\n\u003ch2 id=\"conclusions\"\u003eConclusions\u003c/h2\u003e\n\u003cp\u003eWhile tools can help evaluate how mobile-friendly your site is, once the site is developed it may be difficult to go back and change things. These tools and checks should be used as an opportunity to optimize your site. Where else can you get free suggestions on how to improve your site? Keep in mind that you may not need to fix every issue reported, depending on your application.\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003e“A fool with a tool is still a fool” ~ Grady Booch\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003ch2 id=\"additional-resources\"\u003eAdditional Resources\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://developers.google.com/webmasters/mobile-sites/get-started/why\"\u003eWhy Make a Website Mobile-Friendly?\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"http://searchengineland.com/library/google/google-mobile-friendly-update\"\u003eGoogle: Mobile-Friendly Update—What is Mobilegeddon \u0026amp; The Google Mobile-Friendly Update\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"http://webmarketingtoday.com/articles/10-Tools-for-Testing-Mobile-Websites/\"\u003e10 Tools for Testing Mobile Websites\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://playbook.cio.gov/designstandards/visual-style/#pairings\"\u003eU.S. Web Design Sandards\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n"}
  ]
}