{"id":342055,"date":"2021-09-20T20:00:00","date_gmt":"2021-09-20T17:00:00","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/what-is-responsive-design-and-how-do-you-use-it-cloudsavvy-it\/"},"modified":"2021-09-20T20:00:00","modified_gmt":"2021-09-20T17:00:00","slug":"what-is-responsive-design-and-how-do-you-use-it-cloudsavvy-it","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/what-is-responsive-design-and-how-do-you-use-it-cloudsavvy-it\/","title":{"rendered":"#What Is \u201cResponsive Design,\u201d And How Do You Use It? \u2013 CloudSavvy IT"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a2599d79973f\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a2599d79973f\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-responsive-design-and-how-do-you-use-it-cloudsavvy-it\/#What_Is_Responsive_Design\" >What Is Responsive Design?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-responsive-design-and-how-do-you-use-it-cloudsavvy-it\/#How_Does_Responsive_Design_Work\" >How Does Responsive Design Work?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-responsive-design-and-how-do-you-use-it-cloudsavvy-it\/#How_Do_I_Make_My_Site_Responsive\" >How Do I Make My Site Responsive?<\/a><\/li><\/ul><\/nav><\/div>\n<p><strong>&#8220;#What Is \u201cResponsive Design,\u201d And How Do You Use It? \u2013 CloudSavvy IT&#8221;<\/strong><\/p>\n<div id=\"article-content-area\">\n<figure style=\"width: 700px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"type:primaryImage imgchk9 wp-image-6819 size-full\" srcset=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2019\/08\/547a0880.png?width=398&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1 400w, https:\/\/www.cloudsavvyit.com\/p\/uploads\/2019\/08\/547a0880.png?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1 1200w\" sizes=\"auto, 400w, 1200w\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2019\/08\/547a0880.png?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"Responsive web design on modern electronics\" width=\"700\" height=\"300\" data-crediturl=\"https:\/\/www.shutterstock.com\/image-illustration\/fully-responsive-web-design-modern-electronic-1387832039?src=9WabQLoZO--T8b8HIU8bXA-1-6\" data-credittext=\"Shutterstock\/Lukas Kurka\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><figcaption class=\"wp-caption-text\"><span class=\"type:primaryImage imagecredit\"><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.shutterstock.com\/image-illustration\/fully-responsive-web-design-modern-electronic-1387832039?src=9WabQLoZO--T8b8HIU8bXA-1-6\">Shutterstock\/Lukas Kurka<\/a><\/span><\/figcaption><\/figure>\n<p>Responsive design is the idea of making your website look great at any resolution\u2014not just on desktop and mobile. With a responsive site, your desktop and mobile site are the same page, and scale with window size.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"What_Is_Responsive_Design\"><\/span>What Is Responsive Design?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Responsive design allows your site to resize to fit any screen. Rather than designing around a specific layout, or designing a separate mobile and desktop site, your site should scale to fit any device. In the real world, people will use your site in all kinds of different ways; there are small phones, big phones, tablets, tablets in landscape mode, netbooks, laptops, and 5K iMacs.<\/p>\n<p>Take a look at the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/howtogeek.com\">howtogeek.com<\/a>\u00a0homepage. On desktop, it has a header with a logo, main categories, <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/social-mediaa\/\" data-internallinksmanager029f6b8e52c=\"1\" title=\"Social Media\" target=\"_blank\" rel=\"noopener\">social media<\/a> buttons, and finally a hamburger menu with extended categories. The article boxes are laid out in a grid that scales with screen size but will only ever take up about 1000px (as scaling up too much would look weird). All in all, there\u2019s a lot of room to work with, so the site looks the best here.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"imgchk9 alignnone wp-image-1548 size-full\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2019\/08\/f802fabf.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"The How-To Geek website\" width=\"700\" height=\"300\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Shrink the screen down a bit to tablet size, and there\u2019s not as much space. The text breaks differently, the images are scaled down or cropped, and the main categories dis<a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">app<\/a>ear.<\/p>\n<p>The article boxes maintain the layout but at the cost of having extra lines of text. The front-page article is more important though, and will maintain its aspect ratio and scale down without cropping.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"imgchk9 alignnone wp-image-1547 size-full\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2019\/08\/b4517975.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"The article boxes maintain the layout\" width=\"700\" height=\"300\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>And on really small devices, you can\u2019t really afford to have all those buttons in the menu, and there\u2019s not enough room to place the article boxes next to each other, so the menu is collapsed into a hamburger menu and the article boxes are laid out in a column. This column will always take up the full width of the device (minus 20px on each side for padding).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"imgchk9 alignnone wp-image-1549 size-full\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2019\/08\/8e575a30.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"The menu is collapsed into a hamburger menu and the article boxes are laid out in a column on smaller devices\" width=\"700\" height=\"400\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>You can test this for yourself to see how your site scales. Open up Chrome\u2019s developer tools by right-clicking anywhere and selecting \u201cInspect.\u201d Press the mobile devices button in the top-right corner of the pane that pops up, and select \u201cResponsive\u201d as the device type:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"imgchk9 alignnone wp-image-1550 size-full\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2019\/08\/8095f8a2.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"See how your site scales by right-clicking anywhere, selecting &quot;Inspect,&quot; pressing mobile devices button, then selecting &quot;Responsive&quot; as the device type\" width=\"700\" height=\"300\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>You can grab the handles on the edge of your site to adjust the size, or you can enter in manual pixel values. You can also preview what it will look like on popular mobile resolutions (though you should still test on a real device).<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"How_Does_Responsive_Design_Work\"><\/span>How Does Responsive Design Work?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Before doing any responsive design, you\u2019ve got to fix a bug with mobile pages and the viewport. Without this <code>meta<\/code> tag in your HTML\u2019s header, your mobile page <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3schools.com\/css\/css_rwd_viewport.asp\">might be zoomed out<\/a> and not display correctly. This might already be set, as it\u2019s a fairly common piece of boilerplate, but if it isn\u2019t, go ahead and add it:<\/p>\n<pre>&lt;meta content=\"width=device-width, initial-scale=1\" name=\"viewport\" \/&gt;<\/pre>\n<p>The primary way of making sites responsive is with the magical <code>display: flex<\/code>\u00a0property, otherwise known as flexbox. Flexbox works by adjusting the size of items within a container to scale with a changing window size. You start by creating a container and setting it to <code>display: flex<\/code>:<\/p>\n<pre>.container {&#13;\n   display: flex;&#13;\n}<\/pre>\n<p>And then, set the <code>flex<\/code>\u00a0parameter of all of the children:<\/p>\n<pre>.child {&#13;\n  flex: 1;&#13;\n}<\/pre>\n<p>This will cause the children to expand and take up as much space as the container allows. For example, if you had two children, each would take up 50% of the space:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"imgchk9 alignnone wp-image-1447 size-full\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2019\/08\/3b3431f3-3.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"Flexbox works by adjusting the size of items (children) within a container to scale with a changing window size\" width=\"700\" height=\"300\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>If you instead set the second child to <code>flex: 2<\/code>, it would take up twice as much space as the other (66% in total).<\/p>\n<p>When the screen shrinks, the children will shrink with it. They\u2019ll hit a point though where they can\u2019t shrink smaller than the size of their content, but you can make them wrap around to another line (just like text) with\u00a0<code>flex-wrap<\/code>\u00a0on the container.<\/p>\n<pre>.container {&#13;\n  flex-wrap: wrap;&#13;\n}<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"imgchk9 alignnone wp-image-1450 size-full\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2019\/08\/3b3431f3-4.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"When the screen shrinks, the children will shrink with it and can wrap\" width=\"700\" height=\"300\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Now, you\u2019ll never run into issue of having your site content off screen or so scrunched up that it\u2019s illegible.<\/p>\n<p>Another piece of CSS tech behind responsive design is media queries. Media queries are like CSS <code>If<\/code>\u00a0statements that allow you to check a value before applying some CSS. You can use this to dynamically style components based off of the width of the browser. For example, if you had a top menubar that you wanted to hide on mobile and replace with a hamburger menu, you could hide it with an <code>@media<\/code>\u00a0query:<\/p>\n<pre>.topmenu {&#13;\n  display: block&#13;\n}&#13;\n&#13;\n@media screen and (max-width: 600px) {&#13;\n  .topmenu {&#13;\n    display: none;&#13;\n  }&#13;\n}<\/pre>\n<p>600px is just an arbitrary value used to define the limits of most mobile devices, but you can have many breakpoints that change the styling. You can use these in combination with flexbox to change the flex properties based on the device size; for example, one common use is making horizontal lists display vertically and center aligned, for easier readability on mobile.<\/p>\n<p>There\u2019s plenty more to responsive design than we can cover here, so if you\u2019d like to learn more about the CSS behind it you can read <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/\">this great guide to flexbox<\/a> from CSS Tricks, or <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3schools.com\/css\/css3_mediaqueries_ex.asp\">read the W3Schools documentation<\/a> for media queries.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"How_Do_I_Make_My_Site_Responsive\"><\/span>How Do I Make My Site Responsive?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>If you don\u2019t want to spend time remaking your site with flexbox in mind, there are plenty of responsive site templates you can use as a base, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/medium.com\/level-up-web\/free-responsive-html5-css3-website-templates-9c3938d62428\">including many free ones<\/a>. Many templates that you can use with managed hosting providers (GoDaddy, SquareSpace, Wix, etc.) will be responsive out of the box. <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/underscores.me\/\">Underscores<\/a> is a great free starter template for WordPress.<\/p>\n<p>If you do want to code it yourself, but don\u2019t want to do it <em>all<\/em> by hand,\u00a0there are many third-party libraries for working with flexbox. The most popular of these is Bootstrap, which adds easy-to-use classes for working with flexbox (along with many other useful UI elements). With Bootstrap, you specify containers with the <code>row<\/code>\u00a0class and then specify column size with classes like <code>col-md-6<\/code>, and the CSS is handled for you. For example, the following code will arrange each <code>div<\/code> into a row of three on desktop, and add a media query breakpoint to turn it into a full-width column on mobile:<\/p>\n<pre>&lt;div class=\"row\"&gt;&#13;\n &lt;div class=\"col-md-4 col-sm-12\"&gt; \/\/content &lt;\/div&gt;&#13;\n &lt;div class=\"col-md-4 col-sm-12\"&gt; \/\/content &lt;\/div&gt;&#13;\n &lt;div class=\"col-md-4 col-sm-12\"&gt; \/\/content &lt;\/div&gt;&#13;\n&lt;\/div&gt;<\/pre>\n<p>Sizes are measured out of 12, so <code>col-md-4<\/code>\u00a0will set the div to 33% width on medium size (<code>\"md\"<\/code>) and <code>col-sm-12<\/code>\u00a0will set it to 100% width on small devices (<code>\"sm\"<\/code>).<\/p>\n<p>Bootstrap also has a ton of <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/bootswatch.com\/\">themes<\/a> and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/startbootstrap.com\/themes\/\">templates<\/a> for you to start with. It\u2019s designed to get you off the ground very quickly and to get rid of the time spent messing with boilerplate HTML and CSS (hence the name).\n<\/div>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.cloudsavvyit.com\/1434\/what-is-responsive-design-and-how-do-you-use-it\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#What Is \u201cResponsive Design,\u201d And How Do You Use It? \u2013 CloudSavvy IT&#8221; Shutterstock\/Lukas Kurka Responsive design is the idea of making your website look great at any resolution\u2014not just on desktop and mobile. With a responsive site, your desktop and mobile site are the same page, and scale with window size. What Is Responsive&#8230;<\/p>\n","protected":false},"author":1,"featured_media":342056,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2019\/08\/547a0880.png","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-342055","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/342055","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=342055"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/342055\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/342056"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=342055"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=342055"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=342055"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}