{"id":10697,"date":"2013-11-21T21:52:58","date_gmt":"2013-11-21T10:52:58","guid":{"rendered":"https:\/\/creately.com\/blog\/?p=10697"},"modified":"2023-06-05T18:07:29","modified_gmt":"2023-06-05T07:07:29","slug":"understanding-responsive-web-design","status":"publish","type":"post","link":"https:\/\/creately.com\/blog\/software-teams\/understanding-responsive-web-design\/","title":{"rendered":"Understanding Responsive Web Design to Better Serve Website Visitors"},"content":{"rendered":"<div id=\"bsf_rt_marker\"><\/div><p>Google sent designers and developers alike scrambling when it recommended using &#8220;responsive web design&#8221; in June 2012. That forced many companies to seek out mobile solutions after Google said it would eventually stop showing web pages that directed users to a different page while using a mobile device.<\/p>\n<p>In other words, as the social media blog Soshable points out, Google wants people to have access to sites from any device, mobile or otherwise. Since then, &#8220;<a title=\"Understanding Responsive Web Design to Better Serve Website Visitors\" href=\"https:\/\/creately.com\/blog\/tech\/understanding-responsive-web-design\/\" target=\"_blank\" rel=\"noopener\">responsive web design<\/a>&#8221; has been the latest buzz word in the design world, and scores of companies are trying to convert their sites to adhere to Google&#8217;s recommendations. But what does responsive web design really mean? Here&#8217;s a brief overview:<\/p>\n<p>Whether you&#8217;re using responsive website templates or you&#8217;ve shelled out the cash to hire a professional designer, it&#8217;s important to gain a better understanding of the term. Soshable, for example, says many people haven&#8217;t made the distinction between what&#8217;s considered a new technology (but is not) and a new way of designing that utilizes new technologies in such a way that it allows sites to work well on any device.<\/p>\n<div id=\"attachment_10699\" style=\"width: 600px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/creately.com\/blog\/wp-content\/uploads\/2013\/11\/Responsive-design.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-10699\" class=\"size-full wp-image-10699  \" title=\"Understanding responsive design is critical for your online success\" src=\"https:\/\/creately.com\/blog\/wp-content\/uploads\/2013\/11\/Responsive-design.jpg\" alt=\"Understanding responsive web design is critical for your online success\" width=\"590\" height=\"392\" srcset=\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2013\/11\/Responsive-design.jpg 590w, https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2013\/11\/Responsive-design-300x199.jpg 300w\" sizes=\"auto, (max-width: 590px) 100vw, 590px\" \/><\/a><p id=\"caption-attachment-10699\" class=\"wp-caption-text\">Responsive web design makes your site look good in any device<\/p><\/div>\n<p>That&#8217;s where flexibility enters the picture. Layouts should adjust automatically to the different devices they&#8217;re being viewed on, from menus to images to content, according to Soshable. Remember, your site could be viewed on someone&#8217;s Android cellphone or on a 10-year-old desktop PC.<\/p>\n<h3>HTML5, CSS3 and Media Queries<\/h3>\n<p>Responsive web design comes down to three main components, according to Flaunt Responsive, a site geared toward responsive design. Those components include:<\/p>\n<ul>\n<li><strong>HTML5:<\/strong> This is the fifth version of HTML, or HyperText Markup Language, which is used to display content on a site. Think multimedia, offline storage and graphics support.<\/li>\n<li><strong>CSS3:<\/strong> Supports responsive layouts with special stylesheets and is the latest HTML5 implementation. What does all that mean? As Flaunt Responsive explains, CSS3 selectors are used for everything from background colors to fonts, plus you can liven up your site a little more with round corners, text shadows and animations.<\/li>\n<li><strong>Web Queries:<\/strong> Combines HTML5 and CSS3 so that web content can seamlessly appear on various screen sizes, with resolutions and width in mind. Flaunt Responsive says media queries is a core component of &#8220;responsiveness.&#8221; In other words, it allows you to create one website for every conceivable screen size. This is particularly important if you are operating or creating multiple websites.<\/li>\n<\/ul>\n<h3>It&#8217;s Not Just About Mobile Devices<\/h3>\n<p>Responsive web design isn&#8217;t just a way to ensure that one menu item on your favorite site still appears when viewing it on your smartphone. Think of it like building a highway. When you&#8217;re undergoing a massive construction project like that, smart developers will build it with the future in mind. In other words, the highway will likely need to support far more traffic in five, 10 and 20 years from now than it does now.<\/p>\n<p>The same can be said of responsive design. According to ThinkHandy, a digital marketing agency, responsive design needs to have the future in mind. Easy navigation, flexibility and grid-based layouts are all keys to responsive design, the agency says, adding that it has created a fundamental shift in the way sites are \u2013 or should be \u2013 designed.<\/p>\n<h3>Consequences of Not Having Responsive Web Design<\/h3>\n<p>Dropping from Google search listing will obviously affect your traffic numbers, but there are far more immediate concerns. Number of people using mobile devices to browse the web have increased significantly, making it critical that your website looks good in any device. Most sites have witnessed considerable increase in sales after they switched to a responsive design. So start working on it right now or you could be losing thousands of dollars in the process.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Google sent designers and developers alike scrambling when it recommended using &#8220;responsive web design&#8221; in June 2012. That forced many companies to seek out mobile solutions after Google said it would eventually stop showing web pages that directed users to&#8230;<span class=\"continue-reading\"> <a href=\"https:\/\/creately.com\/blog\/software-teams\/understanding-responsive-web-design\/\">Read More<\/a><\/span><\/p>\n","protected":false},"author":15,"featured_media":10699,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9274,9268],"tags":[453,454,85],"class_list":["post-10697","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-brainstorming","category-software-teams","tag-responsive-web-design","tag-user-experience","tag-web-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Understanding Responsive Web Design to Better Serve Website Visitors - Creately Blog<\/title>\n<meta name=\"description\" content=\"Understand responsive web design, various components associated with responsive web design and how not having it can affect your traffic and sales margins\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/creately.com\/blog\/software-teams\/understanding-responsive-web-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Understanding Responsive Web Design to Better Serve Website Visitors - Creately Blog\" \/>\n<meta property=\"og:description\" content=\"Understand responsive web design, various components associated with responsive web design and how not having it can affect your traffic and sales margins\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creately.com\/blog\/software-teams\/understanding-responsive-web-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Creately Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/creately\" \/>\n<meta property=\"article:author\" content=\"http:\/\/facebook.com\/nishadha\" \/>\n<meta property=\"article:published_time\" content=\"2013-11-21T10:52:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-05T07:07:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2013\/11\/Responsive-design.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"590\" \/>\n\t<meta property=\"og:image:height\" content=\"392\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Nishadha\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nishadha\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/creately.com\/blog\/software-teams\/understanding-responsive-web-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/creately.com\/blog\/software-teams\/understanding-responsive-web-design\/\"},\"author\":{\"name\":\"Nishadha\",\"@id\":\"https:\/\/creately.com\/blog\/#\/schema\/person\/3b0114786fc2afe9bb05acfea873e291\"},\"headline\":\"Understanding Responsive Web Design to Better Serve Website Visitors\",\"datePublished\":\"2013-11-21T10:52:58+00:00\",\"dateModified\":\"2023-06-05T07:07:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/creately.com\/blog\/software-teams\/understanding-responsive-web-design\/\"},\"wordCount\":639,\"commentCount\":60,\"publisher\":{\"@id\":\"https:\/\/creately.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/creately.com\/blog\/software-teams\/understanding-responsive-web-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2013\/11\/Responsive-design.jpg\",\"keywords\":[\"responsive web design\",\"user experience\",\"web-design\"],\"articleSection\":[\"Brainstorming\",\"Software Teams\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/creately.com\/blog\/software-teams\/understanding-responsive-web-design\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/creately.com\/blog\/software-teams\/understanding-responsive-web-design\/\",\"url\":\"https:\/\/creately.com\/blog\/software-teams\/understanding-responsive-web-design\/\",\"name\":\"Understanding Responsive Web Design to Better Serve Website Visitors - Creately Blog\",\"isPartOf\":{\"@id\":\"https:\/\/creately.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/creately.com\/blog\/software-teams\/understanding-responsive-web-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/creately.com\/blog\/software-teams\/understanding-responsive-web-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2013\/11\/Responsive-design.jpg\",\"datePublished\":\"2013-11-21T10:52:58+00:00\",\"dateModified\":\"2023-06-05T07:07:29+00:00\",\"description\":\"Understand responsive web design, various components associated with responsive web design and how not having it can affect your traffic and sales margins\",\"breadcrumb\":{\"@id\":\"https:\/\/creately.com\/blog\/software-teams\/understanding-responsive-web-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/creately.com\/blog\/software-teams\/understanding-responsive-web-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/creately.com\/blog\/software-teams\/understanding-responsive-web-design\/#primaryimage\",\"url\":\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2013\/11\/Responsive-design.jpg\",\"contentUrl\":\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2013\/11\/Responsive-design.jpg\",\"width\":590,\"height\":392,\"caption\":\"Reasons why most web designs fail\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/creately.com\/blog\/software-teams\/understanding-responsive-web-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/creately.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Understanding Responsive Web Design to Better Serve Website Visitors\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/creately.com\/blog\/#website\",\"url\":\"https:\/\/creately.com\/blog\/\",\"name\":\"Creately Blog\",\"description\":\"Latest Product Updates and Tips on Working Visually\",\"publisher\":{\"@id\":\"https:\/\/creately.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/creately.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/creately.com\/blog\/#organization\",\"name\":\"Creately\",\"url\":\"https:\/\/creately.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/creately.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2023\/01\/creately-logo-symbol.png\",\"contentUrl\":\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2023\/01\/creately-logo-symbol.png\",\"width\":430,\"height\":237,\"caption\":\"Creately\"},\"image\":{\"@id\":\"https:\/\/creately.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/creately\",\"https:\/\/x.com\/creately\",\"https:\/\/www.instagram.com\/creately_app\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/creately.com\/blog\/#\/schema\/person\/3b0114786fc2afe9bb05acfea873e291\",\"name\":\"Nishadha\",\"description\":\"Software engineer turned tech evangelist. I handle marketing stuff here at Creately including writing blog posts and handling social media accounts. In my spare time, I love to read and travel.\",\"sameAs\":[\"http:\/\/facebook.com\/nishadha\",\"https:\/\/x.com\/rumblinglankan\"],\"url\":\"https:\/\/creately.com\/blog\/author\/nish\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Understanding Responsive Web Design to Better Serve Website Visitors - Creately Blog","description":"Understand responsive web design, various components associated with responsive web design and how not having it can affect your traffic and sales margins","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:\/\/creately.com\/blog\/software-teams\/understanding-responsive-web-design\/","og_locale":"en_US","og_type":"article","og_title":"Understanding Responsive Web Design to Better Serve Website Visitors - Creately Blog","og_description":"Understand responsive web design, various components associated with responsive web design and how not having it can affect your traffic and sales margins","og_url":"https:\/\/creately.com\/blog\/software-teams\/understanding-responsive-web-design\/","og_site_name":"Creately Blog","article_publisher":"https:\/\/www.facebook.com\/creately","article_author":"http:\/\/facebook.com\/nishadha","article_published_time":"2013-11-21T10:52:58+00:00","article_modified_time":"2023-06-05T07:07:29+00:00","og_image":[{"width":590,"height":392,"url":"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2013\/11\/Responsive-design.jpg","type":"image\/jpeg"}],"author":"Nishadha","twitter_misc":{"Written by":"Nishadha","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/creately.com\/blog\/software-teams\/understanding-responsive-web-design\/#article","isPartOf":{"@id":"https:\/\/creately.com\/blog\/software-teams\/understanding-responsive-web-design\/"},"author":{"name":"Nishadha","@id":"https:\/\/creately.com\/blog\/#\/schema\/person\/3b0114786fc2afe9bb05acfea873e291"},"headline":"Understanding Responsive Web Design to Better Serve Website Visitors","datePublished":"2013-11-21T10:52:58+00:00","dateModified":"2023-06-05T07:07:29+00:00","mainEntityOfPage":{"@id":"https:\/\/creately.com\/blog\/software-teams\/understanding-responsive-web-design\/"},"wordCount":639,"commentCount":60,"publisher":{"@id":"https:\/\/creately.com\/blog\/#organization"},"image":{"@id":"https:\/\/creately.com\/blog\/software-teams\/understanding-responsive-web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2013\/11\/Responsive-design.jpg","keywords":["responsive web design","user experience","web-design"],"articleSection":["Brainstorming","Software Teams"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/creately.com\/blog\/software-teams\/understanding-responsive-web-design\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/creately.com\/blog\/software-teams\/understanding-responsive-web-design\/","url":"https:\/\/creately.com\/blog\/software-teams\/understanding-responsive-web-design\/","name":"Understanding Responsive Web Design to Better Serve Website Visitors - Creately Blog","isPartOf":{"@id":"https:\/\/creately.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/creately.com\/blog\/software-teams\/understanding-responsive-web-design\/#primaryimage"},"image":{"@id":"https:\/\/creately.com\/blog\/software-teams\/understanding-responsive-web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2013\/11\/Responsive-design.jpg","datePublished":"2013-11-21T10:52:58+00:00","dateModified":"2023-06-05T07:07:29+00:00","description":"Understand responsive web design, various components associated with responsive web design and how not having it can affect your traffic and sales margins","breadcrumb":{"@id":"https:\/\/creately.com\/blog\/software-teams\/understanding-responsive-web-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creately.com\/blog\/software-teams\/understanding-responsive-web-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/creately.com\/blog\/software-teams\/understanding-responsive-web-design\/#primaryimage","url":"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2013\/11\/Responsive-design.jpg","contentUrl":"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2013\/11\/Responsive-design.jpg","width":590,"height":392,"caption":"Reasons why most web designs fail"},{"@type":"BreadcrumbList","@id":"https:\/\/creately.com\/blog\/software-teams\/understanding-responsive-web-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creately.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Understanding Responsive Web Design to Better Serve Website Visitors"}]},{"@type":"WebSite","@id":"https:\/\/creately.com\/blog\/#website","url":"https:\/\/creately.com\/blog\/","name":"Creately Blog","description":"Latest Product Updates and Tips on Working Visually","publisher":{"@id":"https:\/\/creately.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/creately.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/creately.com\/blog\/#organization","name":"Creately","url":"https:\/\/creately.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/creately.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2023\/01\/creately-logo-symbol.png","contentUrl":"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2023\/01\/creately-logo-symbol.png","width":430,"height":237,"caption":"Creately"},"image":{"@id":"https:\/\/creately.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/creately","https:\/\/x.com\/creately","https:\/\/www.instagram.com\/creately_app\/"]},{"@type":"Person","@id":"https:\/\/creately.com\/blog\/#\/schema\/person\/3b0114786fc2afe9bb05acfea873e291","name":"Nishadha","description":"Software engineer turned tech evangelist. I handle marketing stuff here at Creately including writing blog posts and handling social media accounts. In my spare time, I love to read and travel.","sameAs":["http:\/\/facebook.com\/nishadha","https:\/\/x.com\/rumblinglankan"],"url":"https:\/\/creately.com\/blog\/author\/nish\/"}]}},"_links":{"self":[{"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/posts\/10697","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/comments?post=10697"}],"version-history":[{"count":7,"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/posts\/10697\/revisions"}],"predecessor-version":[{"id":29141,"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/posts\/10697\/revisions\/29141"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/media\/10699"}],"wp:attachment":[{"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/media?parent=10697"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/categories?post=10697"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/tags?post=10697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}