{"id":22840,"date":"2015-05-12T23:47:14","date_gmt":"2015-05-13T03:47:14","guid":{"rendered":"http:\/\/www.andysowards.com\/blog\/?p=22840"},"modified":"2023-03-10T12:57:36","modified_gmt":"2023-03-10T16:57:36","slug":"how-to-make-a-mobile-friendly-site","status":"publish","type":"post","link":"https:\/\/www.andysowards.com\/blog\/2015\/how-to-make-a-mobile-friendly-site\/","title":{"rendered":"Prepare for Mobilegeddon: How to Make a Mobile-Friendly Site"},"content":{"rendered":"<p>On February 26, 2015, Google announced that &#8220;starting April 21, 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.&#8221;<\/p>\n<p>Some are calling this announcement from Google the Mobilegeddon. Websites that are not mobile-friendly will probably lose ranking. Although it may seem like it if you haven&#8217;t yet adapted to mobile or haven&#8217;t been paying attention to the amount of mobile users, this change isn&#8217;t intended to be punitive. Google&#8217;s priority is to make the user experience as good as it can be \u2014 and that should be your priority, too.<\/p>\n<p>Google&#8217;s edict reflects a reality that has been true for several years: people expect to move from screen to screen seamlessly. And for your customers, function actually includes aesthetic \u2014 they expect to see an enticing online presence no matter how they&#8217;re accessing it.<\/p>\n<p>For web designers, this presents an ever-shifting challenge. New devices come on the market all the time. Browsers update, new apps are born. And the testing, testing, testing, for all these different interfaces might make you feel like Sisyphus had it easy. Luckily, there are some tools and tactics that can make adapting easier. Consider the following:<\/p>\n<h2>Take Stock<\/h2>\n<p><a href=\"http:\/\/www.sitepoint.com\/12-essential-responsive-design-tools\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"alignnone size-large wp-image-22842 lazyload\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/mobile-responsive-website-tools-Macaw-680x330.jpg\" alt=\"mobile-responsive-website-tools-Macaw\" width=\"680\" height=\"330\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 680px; --smush-placeholder-aspect-ratio: 680\/330;\" \/><\/a><br \/>\n<em>12 Essential Responsive Design Tools<\/em><\/p>\n<p>Google didn&#8217;t just throw down a challenge and then walk away. Check out the mobile-friendly test tools and guides they&#8217;ve put together to help you get started. Take the test to see how your site does currently. The Google Guides provide help with a basic walkthrough of what&#8217;s needed to meet many mobile challenges.<\/p>\n<h2>Prioritize Your Testing<\/h2>\n<p><a href=\"http:\/\/www.vandelaydesign.com\/responsive-web-design-testing\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"alignnone size-full wp-image-22843 lazyload\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/responsive-tools-5.jpg\" alt=\"responsive-tools-5\" width=\"600\" height=\"391\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 600px; --smush-placeholder-aspect-ratio: 600\/391;\" \/><\/a><br \/>\n<em>10 Helpful Resources for Testing Responsive Web Design<\/em><\/p>\n<p>Yes, ideally you get your site ready for all devices and all browsers at update or launch. But sometimes a deadline dictates otherwise. Smashing Magazine delivers strategies for prioritizing testing, such as to do the big browsers like Firefox, Chrome and Safari first. Then, for mobile devices, focus on a range of Android devices and iOS for Apple products. There&#8217;s no substitute for testing on the actual devices, but if you have limited time and resources, online testing services like Browserstack can help (Saucelabs also has a superb free account).<\/p>\n<h2>Use Responsive Web Design<\/h2>\n<p><a href=\"http:\/\/www.smashingmagazine.com\/2015\/04\/17\/using-sketch-for-responsive-web-design-case-study\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"alignnone size-full wp-image-22844 lazyload\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/10-multiple-artboads-opt-small.jpg\" alt=\"10-multiple-artboads-opt-small\" width=\"500\" height=\"299\" data-srcset=\"https:\/\/www.andysowards.com\/blog\/assets\/10-multiple-artboads-opt-small.jpg 500w, https:\/\/www.andysowards.com\/blog\/assets\/10-multiple-artboads-opt-small-320x190.jpg 320w\" data-sizes=\"(max-width: 500px) 100vw, 500px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 500px; --smush-placeholder-aspect-ratio: 500\/299;\" \/><\/a><br \/>\n<em>Using Sketch For Responsive Web Design (A Case Study)<\/em><\/p>\n<p>This is the new normal for web development and design. <a href=\"http:\/\/www.creativebloq.com\/rwd\/responsive-web-design-tutorials-71410085\" target=\"_blank\" rel=\"noopener\">Creative Bloq provides a list of helpful tutorials<\/a> for learning everything you need to know about responsive design, including building a site with CSS, adding responsive video and incorporating typography and grids.<\/p>\n<h2>Be Ready to Rock and Roll<\/h2>\n<p><a href=\"http:\/\/thenextweb.com\/socialmedia\/2015\/05\/11\/10-design-hacks-for-responsive-emails-that-dont-suck\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"alignnone size-full wp-image-22845 lazyload\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/Ditch-Multi-Column-Approach-520x984.jpg\" alt=\"Ditch-Multi-Column-Approach-520x984\" width=\"520\" height=\"984\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 520px; --smush-placeholder-aspect-ratio: 520\/984;\" \/><\/a><br \/>\n<em>10 design hacks for responsive emails that don\u2019t suck<\/em><\/p>\n<p>Stay abreast of upcoming releases. When new devices come to market, like the highly anticipated Galaxy S6, aim to be ready the moment they hit the market.<\/p>\n<p>Remember that older generations of almost every OS exist alongside the shiny new-and-improved ones. Google\u2019s Android offered up Jelly Bean in 2012 and KitKat in 2013, which plenty of people still use even though Android Lollipop is the most recent OS. Many mobile device users only update their actual device every other year, and some wait longer. Don&#8217;t risk losing their traffic because your site&#8217;s not functional for them.<\/p>\n<p>Mobile devices are no longer a fancy-dancy frill. It&#8217;s high time to treat them with the same respect as desktops. Whatever the challenges are, you&#8217;re not alone in needing to make this a goal a reality, and there&#8217;s lots of help out there if you look for it.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>On February 26, 2015, Google announced that &#8220;starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all<\/p>\n","protected":false},"author":1,"featured_media":22842,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[24,35,4050,1,5633,107],"tags":[5887,1127,3048,5447,5376,5185,5374,5879,115],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Prepare for Mobilegeddon: How to Make a Mobile-Friendly Site<\/title>\n<meta name=\"description\" content=\"On February 26, 2015, Google announced that &quot;starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.andysowards.com\/blog\/2015\/how-to-make-a-mobile-friendly-site\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Prepare for Mobilegeddon: How to Make a Mobile-Friendly Site\" \/>\n<meta property=\"og:description\" content=\"On February 26, 2015, Google announced that &quot;starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.andysowards.com\/blog\/2015\/how-to-make-a-mobile-friendly-site\/\" \/>\n<meta property=\"og:site_name\" content=\"Daily Business Resources for Entrepreneurs, Web Designers, &amp; Creatives by Andy Sowards\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/andysowardsfan\" \/>\n<meta property=\"article:published_time\" content=\"2015-05-13T03:47:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-10T16:57:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.andysowards.com\/blog\/assets\/mobile-responsive-website-tools-Macaw.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"389\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Andy Sowards\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@andysowards\" \/>\n<meta name=\"twitter:site\" content=\"@andysowards\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andy Sowards\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/2015\/how-to-make-a-mobile-friendly-site\/\",\"url\":\"https:\/\/www.andysowards.com\/blog\/2015\/how-to-make-a-mobile-friendly-site\/\",\"name\":\"Prepare for Mobilegeddon: How to Make a Mobile-Friendly Site\",\"isPartOf\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/2015\/how-to-make-a-mobile-friendly-site\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/2015\/how-to-make-a-mobile-friendly-site\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.andysowards.com\/blog\/assets\/mobile-responsive-website-tools-Macaw.jpg\",\"datePublished\":\"2015-05-13T03:47:14+00:00\",\"dateModified\":\"2023-03-10T16:57:36+00:00\",\"author\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/2e0f72bd7f6497fd883e2bd67d9f3415\"},\"description\":\"On February 26, 2015, Google announced that \\\"starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will\",\"breadcrumb\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/2015\/how-to-make-a-mobile-friendly-site\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.andysowards.com\/blog\/2015\/how-to-make-a-mobile-friendly-site\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/2015\/how-to-make-a-mobile-friendly-site\/#primaryimage\",\"url\":\"https:\/\/www.andysowards.com\/blog\/assets\/mobile-responsive-website-tools-Macaw.jpg\",\"contentUrl\":\"https:\/\/www.andysowards.com\/blog\/assets\/mobile-responsive-website-tools-Macaw.jpg\",\"width\":800,\"height\":389},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/2015\/how-to-make-a-mobile-friendly-site\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.andysowards.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Prepare for Mobilegeddon: How to Make a Mobile-Friendly Site\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/#website\",\"url\":\"https:\/\/www.andysowards.com\/blog\/\",\"name\":\"Daily Business Resources for Entrepreneurs, Web Designers, &amp; Creatives by Andy Sowards\",\"description\":\"Design Inspiration &amp; Business Resources for Creatives\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.andysowards.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/2e0f72bd7f6497fd883e2bd67d9f3415\",\"name\":\"Andy Sowards\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/15f95b011563b5894883b22bd4b32d59?s=96&r=pg\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/15f95b011563b5894883b22bd4b32d59?s=96&r=pg\",\"caption\":\"Andy Sowards\"},\"description\":\"Im a professional Freelancer specializing in Web Developer, Design, Programming web applications. Im an Avid member of the Design\/Development community and a Serial Blogger. follow me on Twitter @AndySowards\",\"sameAs\":[\"https:\/\/www.andysowards.com\"],\"url\":\"https:\/\/www.andysowards.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Prepare for Mobilegeddon: How to Make a Mobile-Friendly Site","description":"On February 26, 2015, Google announced that \"starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.andysowards.com\/blog\/2015\/how-to-make-a-mobile-friendly-site\/","og_locale":"en_US","og_type":"article","og_title":"Prepare for Mobilegeddon: How to Make a Mobile-Friendly Site","og_description":"On February 26, 2015, Google announced that \"starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will","og_url":"https:\/\/www.andysowards.com\/blog\/2015\/how-to-make-a-mobile-friendly-site\/","og_site_name":"Daily Business Resources for Entrepreneurs, Web Designers, &amp; Creatives by Andy Sowards","article_publisher":"http:\/\/facebook.com\/andysowardsfan","article_published_time":"2015-05-13T03:47:14+00:00","article_modified_time":"2023-03-10T16:57:36+00:00","og_image":[{"width":800,"height":389,"url":"https:\/\/www.andysowards.com\/blog\/assets\/mobile-responsive-website-tools-Macaw.jpg","type":"image\/jpeg"}],"author":"Andy Sowards","twitter_card":"summary_large_image","twitter_creator":"@andysowards","twitter_site":"@andysowards","twitter_misc":{"Written by":"Andy Sowards","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.andysowards.com\/blog\/2015\/how-to-make-a-mobile-friendly-site\/","url":"https:\/\/www.andysowards.com\/blog\/2015\/how-to-make-a-mobile-friendly-site\/","name":"Prepare for Mobilegeddon: How to Make a Mobile-Friendly Site","isPartOf":{"@id":"https:\/\/www.andysowards.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.andysowards.com\/blog\/2015\/how-to-make-a-mobile-friendly-site\/#primaryimage"},"image":{"@id":"https:\/\/www.andysowards.com\/blog\/2015\/how-to-make-a-mobile-friendly-site\/#primaryimage"},"thumbnailUrl":"https:\/\/www.andysowards.com\/blog\/assets\/mobile-responsive-website-tools-Macaw.jpg","datePublished":"2015-05-13T03:47:14+00:00","dateModified":"2023-03-10T16:57:36+00:00","author":{"@id":"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/2e0f72bd7f6497fd883e2bd67d9f3415"},"description":"On February 26, 2015, Google announced that \"starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will","breadcrumb":{"@id":"https:\/\/www.andysowards.com\/blog\/2015\/how-to-make-a-mobile-friendly-site\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.andysowards.com\/blog\/2015\/how-to-make-a-mobile-friendly-site\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.andysowards.com\/blog\/2015\/how-to-make-a-mobile-friendly-site\/#primaryimage","url":"https:\/\/www.andysowards.com\/blog\/assets\/mobile-responsive-website-tools-Macaw.jpg","contentUrl":"https:\/\/www.andysowards.com\/blog\/assets\/mobile-responsive-website-tools-Macaw.jpg","width":800,"height":389},{"@type":"BreadcrumbList","@id":"https:\/\/www.andysowards.com\/blog\/2015\/how-to-make-a-mobile-friendly-site\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.andysowards.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Prepare for Mobilegeddon: How to Make a Mobile-Friendly Site"}]},{"@type":"WebSite","@id":"https:\/\/www.andysowards.com\/blog\/#website","url":"https:\/\/www.andysowards.com\/blog\/","name":"Daily Business Resources for Entrepreneurs, Web Designers, &amp; Creatives by Andy Sowards","description":"Design Inspiration &amp; Business Resources for Creatives","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.andysowards.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/2e0f72bd7f6497fd883e2bd67d9f3415","name":"Andy Sowards","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/15f95b011563b5894883b22bd4b32d59?s=96&r=pg","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/15f95b011563b5894883b22bd4b32d59?s=96&r=pg","caption":"Andy Sowards"},"description":"Im a professional Freelancer specializing in Web Developer, Design, Programming web applications. Im an Avid member of the Design\/Development community and a Serial Blogger. follow me on Twitter @AndySowards","sameAs":["https:\/\/www.andysowards.com"],"url":"https:\/\/www.andysowards.com\/blog\/author\/admin\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts\/22840"}],"collection":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/comments?post=22840"}],"version-history":[{"count":1,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts\/22840\/revisions"}],"predecessor-version":[{"id":45140,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts\/22840\/revisions\/45140"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/media\/22842"}],"wp:attachment":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/media?parent=22840"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/categories?post=22840"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/tags?post=22840"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}