{"id":9124,"date":"2016-05-22T09:00:46","date_gmt":"2016-05-22T09:00:46","guid":{"rendered":"https:\/\/pingler.com\/blog\/?p=9124"},"modified":"2016-05-22T06:37:34","modified_gmt":"2016-05-22T06:37:34","slug":"building-a-responsive-web-design-heres-what-you-should-consider","status":"publish","type":"post","link":"https:\/\/pingler.com\/blog\/building-a-responsive-web-design-heres-what-you-should-consider\/","title":{"rendered":"Building a Responsive Web Design? Here&#8217;s What You Should Consider"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-medium wp-image-9158\" src=\"https:\/\/pingler.com\/blog\/wp-content\/uploads\/2016\/05\/ux-787980_960_720-300x199.jpg\" alt=\"Web Design\" width=\"300\" height=\"199\" srcset=\"https:\/\/pingler.com\/blog\/wp-content\/uploads\/2016\/05\/ux-787980_960_720-300x199.jpg 300w, https:\/\/pingler.com\/blog\/wp-content\/uploads\/2016\/05\/ux-787980_960_720-768x510.jpg 768w, https:\/\/pingler.com\/blog\/wp-content\/uploads\/2016\/05\/ux-787980_960_720.jpg 960w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/>The nature of internet browsing has completely changed over the past few years. Major websites like Google and Facebook now report that majorities of their traffic come from mobile devices. With search engines in particular, this has led to some serious shifts in SEO. Google announced long ago that it was moving to a model that prioritizes its rankings in mobile search results \u2013 and arguably, all results \u2013 based on whether a website has a responsive web design or not. Whether you are building a new website or transitioning to a mobile responsive design, knowing what to include is important. Today, we&#8217;ll discuss some important elements when building your new design.<\/p>\n<h2>Font and Button Sizes<\/h2>\n<p>With a majority of web traffic now originating from mobile devices, the appearance of your responsive web design matters, and it matters in more ways than just merely rendering on a mobile device in basic fashion. In order to accommodate the needs of individuals across a wide variety of devices, careful selection of font sizes and font faces must be considered. This font should adjust automatically in order to accommodate any screen size in reasonable proportions. In addition to <a href=\"http:\/\/www.pingler.com\/\" data-wpel-link=\"external\">pinging users<\/a> with readable fonts, navigation and button sizes are another huge concern. Whether you are using static images, HTML or some other language to render these buttons, it is imperative that they be at least a few dozen pixels in each dimension in order for touchscreens to be usable with them.<\/p>\n<h2>Incompatibility Issues<\/h2>\n<p>Not all mobile devices are capable of displaying or rendering various plug-ins, modules and features found on websites. Before you deploy a mobile responsive design, it is important to consider how each element functions with mobile devices. For instance, a checkout solution for a store that cannot be accessed via select mobile devices will render your mobile marketing efforts futile and will waste valuable dollars while hurting SEO potential. While cross-compatibility in general is increasingly becoming the norm, some add-ons or features of your website may not play well with others: be sure to consider this before deployment.<\/p>\n<h2>Test in the Real World<\/h2>\n<p>Most responsive web design efforts can be handled from the ground-up either via coding it yourself or using online editors and programs. Regardless of the method used, it is essential to verify the functionality of the design on actual, physical devices. While it can be easy to \u201cpreview\u201d how your site will appear on mobile \u2013 especially when using programs in WYSIWYG interfaces \u2013 this may not actually be the reality. By accessing your website across different mobile devices, you can experience the site through the same lens as your visitors and customers. Pinging users with flaws in your responsive design that weren&#8217;t caught due to inferior previews can be fatal in multiple ways.<\/p>\n<p>Is your website new, and if not, what has prevented you from adopting it thus far? Many people have legitimate concerns about responsive web design projects \u2013 let us know your concerns below.<\/p>\n<p><i><html><br \/>\n\t<head><br \/>\n\t\t<title><\/title><br \/>\n\t<\/head><br \/>\n\t<body><\/p>\n<p style=\"text-align: center;\">\n\t\t\t<a href=\"http:\/\/www.pingler.com\/account\/register\/\" data-wpel-link=\"external\"><img decoding=\"async\" alt=\"\" src=\"http:\/\/www.pingler.com\/affiliates\/banners\/Pingler-468x60-01A.gif\" style=\"width: 468px; height: 60px;\" \/><\/a><\/p>\n<p>\t<\/body><br \/>\n<\/html><\/i><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The nature of internet browsing has completely changed over the past few years. Major websites like Google and Facebook now report that majorities of their traffic come from mobile devices. With search engines in particular, this has led to some serious shifts in SEO. Google announced long ago that it was moving to a model [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":9158,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[172],"tags":[1145,1070],"class_list":["post-9124","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design","tag-responsive","tag-web-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Building a Responsive Web Design? Here&#039;s What You Should Consider - Pingler Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/pingler.com\/blog\/building-a-responsive-web-design-heres-what-you-should-consider\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building a Responsive Web Design? Here&#039;s What You Should Consider - Pingler Blog\" \/>\n<meta property=\"og:description\" content=\"The nature of internet browsing has completely changed over the past few years. Major websites like Google and Facebook now report that majorities of their traffic come from mobile devices. With search engines in particular, this has led to some serious shifts in SEO. Google announced long ago that it was moving to a model [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pingler.com\/blog\/building-a-responsive-web-design-heres-what-you-should-consider\/\" \/>\n<meta property=\"og:site_name\" content=\"Pingler Blog\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/pinglerdotcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-22T09:00:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/pingler.com\/blog\/wp-content\/uploads\/2016\/05\/ux-787980_960_720.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"637\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Pingler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pingler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/pingler.com\/blog\/building-a-responsive-web-design-heres-what-you-should-consider\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/pingler.com\/blog\/building-a-responsive-web-design-heres-what-you-should-consider\/\"},\"author\":{\"name\":\"Pingler\",\"@id\":\"https:\/\/pingler.com\/blog\/#\/schema\/person\/4995c81e4dee73f9670af7fd1e1529b9\"},\"headline\":\"Building a Responsive Web Design? Here&#8217;s What You Should Consider\",\"datePublished\":\"2016-05-22T09:00:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/pingler.com\/blog\/building-a-responsive-web-design-heres-what-you-should-consider\/\"},\"wordCount\":504,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/pingler.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/pingler.com\/blog\/building-a-responsive-web-design-heres-what-you-should-consider\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/pingler.com\/blog\/wp-content\/uploads\/2016\/05\/ux-787980_960_720.jpg\",\"keywords\":[\"Responsive\",\"Web Design\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/pingler.com\/blog\/building-a-responsive-web-design-heres-what-you-should-consider\/\",\"url\":\"https:\/\/pingler.com\/blog\/building-a-responsive-web-design-heres-what-you-should-consider\/\",\"name\":\"Building a Responsive Web Design? Here's What You Should Consider - Pingler Blog\",\"isPartOf\":{\"@id\":\"https:\/\/pingler.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/pingler.com\/blog\/building-a-responsive-web-design-heres-what-you-should-consider\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/pingler.com\/blog\/building-a-responsive-web-design-heres-what-you-should-consider\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/pingler.com\/blog\/wp-content\/uploads\/2016\/05\/ux-787980_960_720.jpg\",\"datePublished\":\"2016-05-22T09:00:46+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/pingler.com\/blog\/building-a-responsive-web-design-heres-what-you-should-consider\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/pingler.com\/blog\/building-a-responsive-web-design-heres-what-you-should-consider\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/pingler.com\/blog\/building-a-responsive-web-design-heres-what-you-should-consider\/#primaryimage\",\"url\":\"https:\/\/pingler.com\/blog\/wp-content\/uploads\/2016\/05\/ux-787980_960_720.jpg\",\"contentUrl\":\"https:\/\/pingler.com\/blog\/wp-content\/uploads\/2016\/05\/ux-787980_960_720.jpg\",\"width\":960,\"height\":637},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/pingler.com\/blog\/building-a-responsive-web-design-heres-what-you-should-consider\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/pingler.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building a Responsive Web Design? Here&#8217;s What You Should Consider\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/pingler.com\/blog\/#website\",\"url\":\"https:\/\/pingler.com\/blog\/\",\"name\":\"Pingler.com\",\"description\":\"Ping\",\"publisher\":{\"@id\":\"https:\/\/pingler.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/pingler.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/pingler.com\/blog\/#organization\",\"name\":\"Pingler.com\",\"url\":\"https:\/\/pingler.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/pingler.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/pingler.com\/blog\/wp-content\/uploads\/2024\/09\/pingler-logo.jpg\",\"contentUrl\":\"https:\/\/pingler.com\/blog\/wp-content\/uploads\/2024\/09\/pingler-logo.jpg\",\"width\":300,\"height\":160,\"caption\":\"Pingler.com\"},\"image\":{\"@id\":\"https:\/\/pingler.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"http:\/\/facebook.com\/pinglerdotcom\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/pingler.com\/blog\/#\/schema\/person\/4995c81e4dee73f9670af7fd1e1529b9\",\"name\":\"Pingler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/pingler.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/db71def0321a21d7d90da93e8a25172df87a2673a1d70d32d64cc075558a9597?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/db71def0321a21d7d90da93e8a25172df87a2673a1d70d32d64cc075558a9597?s=96&d=mm&r=g\",\"caption\":\"Pingler\"},\"sameAs\":[\"http:\/\/www.pingler.com\"],\"url\":\"https:\/\/pingler.com\/blog\/author\/pingler\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Building a Responsive Web Design? Here's What You Should Consider - Pingler Blog","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:\/\/pingler.com\/blog\/building-a-responsive-web-design-heres-what-you-should-consider\/","og_locale":"en_US","og_type":"article","og_title":"Building a Responsive Web Design? Here's What You Should Consider - Pingler Blog","og_description":"The nature of internet browsing has completely changed over the past few years. Major websites like Google and Facebook now report that majorities of their traffic come from mobile devices. With search engines in particular, this has led to some serious shifts in SEO. Google announced long ago that it was moving to a model [&hellip;]","og_url":"https:\/\/pingler.com\/blog\/building-a-responsive-web-design-heres-what-you-should-consider\/","og_site_name":"Pingler Blog","article_publisher":"http:\/\/facebook.com\/pinglerdotcom","article_published_time":"2016-05-22T09:00:46+00:00","og_image":[{"width":960,"height":637,"url":"https:\/\/pingler.com\/blog\/wp-content\/uploads\/2016\/05\/ux-787980_960_720.jpg","type":"image\/jpeg"}],"author":"Pingler","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Pingler","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/pingler.com\/blog\/building-a-responsive-web-design-heres-what-you-should-consider\/#article","isPartOf":{"@id":"https:\/\/pingler.com\/blog\/building-a-responsive-web-design-heres-what-you-should-consider\/"},"author":{"name":"Pingler","@id":"https:\/\/pingler.com\/blog\/#\/schema\/person\/4995c81e4dee73f9670af7fd1e1529b9"},"headline":"Building a Responsive Web Design? Here&#8217;s What You Should Consider","datePublished":"2016-05-22T09:00:46+00:00","mainEntityOfPage":{"@id":"https:\/\/pingler.com\/blog\/building-a-responsive-web-design-heres-what-you-should-consider\/"},"wordCount":504,"commentCount":0,"publisher":{"@id":"https:\/\/pingler.com\/blog\/#organization"},"image":{"@id":"https:\/\/pingler.com\/blog\/building-a-responsive-web-design-heres-what-you-should-consider\/#primaryimage"},"thumbnailUrl":"https:\/\/pingler.com\/blog\/wp-content\/uploads\/2016\/05\/ux-787980_960_720.jpg","keywords":["Responsive","Web Design"],"articleSection":["Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/pingler.com\/blog\/building-a-responsive-web-design-heres-what-you-should-consider\/","url":"https:\/\/pingler.com\/blog\/building-a-responsive-web-design-heres-what-you-should-consider\/","name":"Building a Responsive Web Design? Here's What You Should Consider - Pingler Blog","isPartOf":{"@id":"https:\/\/pingler.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/pingler.com\/blog\/building-a-responsive-web-design-heres-what-you-should-consider\/#primaryimage"},"image":{"@id":"https:\/\/pingler.com\/blog\/building-a-responsive-web-design-heres-what-you-should-consider\/#primaryimage"},"thumbnailUrl":"https:\/\/pingler.com\/blog\/wp-content\/uploads\/2016\/05\/ux-787980_960_720.jpg","datePublished":"2016-05-22T09:00:46+00:00","breadcrumb":{"@id":"https:\/\/pingler.com\/blog\/building-a-responsive-web-design-heres-what-you-should-consider\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pingler.com\/blog\/building-a-responsive-web-design-heres-what-you-should-consider\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pingler.com\/blog\/building-a-responsive-web-design-heres-what-you-should-consider\/#primaryimage","url":"https:\/\/pingler.com\/blog\/wp-content\/uploads\/2016\/05\/ux-787980_960_720.jpg","contentUrl":"https:\/\/pingler.com\/blog\/wp-content\/uploads\/2016\/05\/ux-787980_960_720.jpg","width":960,"height":637},{"@type":"BreadcrumbList","@id":"https:\/\/pingler.com\/blog\/building-a-responsive-web-design-heres-what-you-should-consider\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/pingler.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Building a Responsive Web Design? Here&#8217;s What You Should Consider"}]},{"@type":"WebSite","@id":"https:\/\/pingler.com\/blog\/#website","url":"https:\/\/pingler.com\/blog\/","name":"Pingler.com","description":"Ping","publisher":{"@id":"https:\/\/pingler.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pingler.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/pingler.com\/blog\/#organization","name":"Pingler.com","url":"https:\/\/pingler.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pingler.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/pingler.com\/blog\/wp-content\/uploads\/2024\/09\/pingler-logo.jpg","contentUrl":"https:\/\/pingler.com\/blog\/wp-content\/uploads\/2024\/09\/pingler-logo.jpg","width":300,"height":160,"caption":"Pingler.com"},"image":{"@id":"https:\/\/pingler.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["http:\/\/facebook.com\/pinglerdotcom"]},{"@type":"Person","@id":"https:\/\/pingler.com\/blog\/#\/schema\/person\/4995c81e4dee73f9670af7fd1e1529b9","name":"Pingler","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pingler.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/db71def0321a21d7d90da93e8a25172df87a2673a1d70d32d64cc075558a9597?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/db71def0321a21d7d90da93e8a25172df87a2673a1d70d32d64cc075558a9597?s=96&d=mm&r=g","caption":"Pingler"},"sameAs":["http:\/\/www.pingler.com"],"url":"https:\/\/pingler.com\/blog\/author\/pingler\/"}]}},"_links":{"self":[{"href":"https:\/\/pingler.com\/blog\/wp-json\/wp\/v2\/posts\/9124","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pingler.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pingler.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pingler.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/pingler.com\/blog\/wp-json\/wp\/v2\/comments?post=9124"}],"version-history":[{"count":3,"href":"https:\/\/pingler.com\/blog\/wp-json\/wp\/v2\/posts\/9124\/revisions"}],"predecessor-version":[{"id":9160,"href":"https:\/\/pingler.com\/blog\/wp-json\/wp\/v2\/posts\/9124\/revisions\/9160"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pingler.com\/blog\/wp-json\/wp\/v2\/media\/9158"}],"wp:attachment":[{"href":"https:\/\/pingler.com\/blog\/wp-json\/wp\/v2\/media?parent=9124"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pingler.com\/blog\/wp-json\/wp\/v2\/categories?post=9124"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pingler.com\/blog\/wp-json\/wp\/v2\/tags?post=9124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}