{"id":4,"date":"2017-01-02T04:30:15","date_gmt":"2017-01-02T04:30:15","guid":{"rendered":"http:\/\/appsbyjohn.com\/learn\/?p=4"},"modified":"2017-04-30T01:10:04","modified_gmt":"2017-04-30T01:10:04","slug":"getting-started-with-responsive-web-design","status":"publish","type":"post","link":"https:\/\/appsbyjohn.com\/learn\/getting-started-with-responsive-web-design\/","title":{"rendered":"Getting Started with Responsive Web Design"},"content":{"rendered":"<p><a href=\"#get-guide\">Get this guide as a PDF<\/a><\/p>\n<p>An increasing number of people are using a mobile phone to access the web. A lot of websites were built on the assumption that most visitors used a computer and unfortunately do not serve mobile visitors well. This leads to less impact, less conversions, and less attention.<\/p>\n<p>TL;DR jump to the <a href=\"#screencast-tutorial\">full screencast video<\/a>.<\/p>\n<p>One way to better serve a mobile\u00a0audience is to upgrade\u00a0your website using Responsive Web Design. This post will cover the basics of making a website more mobile friendly with Responsive Web Design.<\/p>\n<p><!--more--><\/p>\n<p>Before diving in it is best to keep a few things in mind:<\/p>\n<ul>\n<li>Most mobile devices have smaller screen sizes. Obviously.<\/li>\n<li>Most mobile users are comfortable scrolling vertically. It is okay to have content initially below the visible screen.<\/li>\n<li>Mobile users should not have to zoom &amp; pan to read text on websites. Scrolling vertically is more expected.<\/li>\n<li>Most content should be accessible to all\u00a0visitors, regardless of their device. Hiding content for mobile devices is not ideal.<\/li>\n<\/ul>\n<h2>How to upgrade an existing site using Responsive Web Design<\/h2>\n<p>I would like to cover four practical steps to get started with Responsive Web Design:<\/p>\n<ol>\n<li><a href=\"#step1-viewport\" title=\"Go to Step 1\">Use a viewport meta tag to control content width<\/a>.<\/li>\n<li><a href=\"#step2-eliminate-fixed\" title=\"Go to Step 2\">Eliminate fixed width elements<\/a>.<\/li>\n<li><a href=\"#step3-media-queries\" title=\"Go to Step 3\">Use media queries to adjust styles based on screen size<\/a>.<\/li>\n<li><a href=\"#step4-flexbox\" title=\"Go to Step 4\">Use Flexbox to align items<\/a>.<\/li>\n<\/ol>\n<h2 id=\"step1-viewport\">Using a viewport meta tag to control content width<\/h2>\n<p>This is what a website looks like on a mobile device without the viewport set:<\/p>\n<p\/>\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/Q1wrxArwFZg?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>As you can see the mobile browser attempts to fit the existing design into the smaller window. This often makes text difficult to read without zooming. By declaring a meta viewport tag we inform the browser our code is optimized for any screen size.<\/p>\n<p>Here is a sample viewport declaration:<\/p>\n<pre><code>&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;<\/code><\/pre>\n<p>This is what the same website looks like on a mobile device with the viewport set:<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/E-KFIGMk8rM?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>The text size is more reasonable but the user has to pan around to view all content due to fixed width elements. We have more work to do.<\/p>\n<h2 id=\"step2-eliminate-fixed\">Eliminate fixed width elements<\/h2>\n<p>Converting from a static layout to a fluid layout can be accomplished by converting fixed width elements into fluid elements. In most cases an element with a fixed width can be converted from <code>#elem {width: 1000px;}<\/code> into a more flexible <code>#elem {width: 100%; max-width: 1000px;}<\/code>. Take the example layout with static widths:<\/p>\n<p><b>Sample HTML<\/b><\/p>\n<pre><code>&lt;div class=\"container\"&gt;\r\n  &lt;header&gt;\r\n    &lt;h1&gt;Site Tagline&lt;\/h1&gt;\r\n  &lt;\/header&gt;\r\n\r\n  &lt;section&gt;\r\n    &lt;div&gt;\r\n      &lt;h4&gt; ... &lt;\/h4&gt;\r\n      &lt;p&gt; ... &lt;\/p&gt;\r\n    &lt;\/div&gt;\r\n    ...\r\n  &lt;\/section&gt;\r\n\r\n  &lt;aside&gt;\r\n    &lt;h4&gt; ... &lt;\/h4&gt;\r\n    &lt;p&gt; ... &lt;\/p&gt;\r\n    &lt;p&gt; ... &lt;\/p&gt;\r\n  &lt;\/aside&gt;\r\n\r\n  &lt;footer&gt;\r\n    &lt;span&gt; ... &lt;\/span&gt;\r\n  &lt;\/footer&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<p><b>Sample CSS<\/b><\/p>\n<pre><code>.container {\r\n  width: 1000px;\r\n}\r\n\r\nsection {\r\n  width: 600px;\r\n  margin-right: 40px;\r\n}\r\n\r\naside { width: 360px; }<\/code><\/pre>\n<p>Here is a video of the fixed width layout at various screen sizes:<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/mN1pI1dJtUU?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>As seen in the video this layout does not work well at screen sizes under 1000px. Converting exact widths into percentage widths makes this layout more responsive.<\/p>\n<p><b>Improved CSS using flexible widths<\/b><\/p>\n<pre><code>.container {\r\n  width: 100%;\r\n  max-width: 1000px;\r\n}\r\n\r\nsection {\r\n  width: 60%;\r\n  margin-right: 4%;\r\n}\r\n\r\naside { width: 36%; }<\/code><\/pre>\n<p>The layout fits much nicer on screen sizes under 1000px thanks to the more fluid grid:<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/Q7APC8kDPgg?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<h2 id=\"step3-media-queries\">Use media queries to adjust styles based on screen size<\/h2>\n<p>A flexible layout is not enough to fully deliver a good mobile experience. The layout shown in the previous video technically fits on smaller screens but cramps existing content. CSS Media Queries allow us to reposition content based on specific breakpoints. Our sample layout begins getting cramped around a screen size of 600px. The following declaration changes the layout for screen sizes under 600px.<\/p>\n<p><b>CSS with a Media Query<\/b><\/p>\n<pre><code>@media screen and (max-width: 600px) {\r\n  section,\r\n  aside {\r\n    width: 100%;\r\n    margin: 0;\r\n  }\r\n}<\/code><\/pre>\n<p>This video shows a more mobile friendly layout thanks to Media Queries:<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/S213x0DYxs4?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<h2 id=\"step4-flexbox\">Use Flexbox to align items<\/h2>\n<p>After implementing the first three steps there are likely individual styles that need improved to complete a responsive upgrade. A common issue is with the spacing of items. In our example the existing <code>div<\/code> items were perfectly spaced for a 1000px layout.<\/p>\n<p><b>Sample HTML<\/b><\/p>\n<pre><code>&lt;section&gt;\r\n  &lt;div&gt;\r\n    &lt;h4&gt;Section Header&lt;\/h4&gt;\r\n    &lt;p&gt; ... &lt;\/p&gt;\r\n  &lt;\/div&gt;\r\n  ...\r\n&lt;\/section&gt;<\/code><\/pre>\n<p><b>Sample CSS for equal padding between all div elements<\/b><\/p>\n<pre><code>section {\r\n  margin-bottom: 40px;\r\n}\r\nsection div {\r\n  width: 240px;\r\n  margin-top: 40px;\r\n  margin-left: 40px;\r\n}<\/code><\/pre>\n<p>Spacing of the <code>div<\/code> elements is perfect at full width but becomes inconsistent on smaller screens. The flexbox layout makes it easy to evenly space items within a container regardless of the container size. Here is the same example using flexbox.<\/p>\n<p><b>Upgraded CSS using Flexbox<\/b><\/p>\n<pre><code>section {\r\n  display: flex;\r\n  flex-direction: row;\r\n  flex-wrap: wrap;\r\n  justify-content: space-around;\r\n}\r\nsection div {\r\n  width: 40%;\r\n  margin-left: 4%;\r\n  margin-right: 4%;\r\n}<\/code><\/pre>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/2PIF-jkqsNA?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>Flexbox handles spacing of these items no matter the screen size. Much better! A few things to notice:<\/p>\n<ul>\n<li>Most of the styles are set on the parent element in this example.<\/li>\n<li>The <code>flex-direction<\/code> and <code>flex-wrap<\/code> commands can be combined into one shorthand <code>flex-flow: row wrap;<\/code> command.<\/li>\n<li>I also changed the width of the div elements to a percentage of their parent. Flexbox can handle any width on the child elements.<\/li>\n<\/ul>\n<p id=\"screencast-tutorial\">The entire tutorial can be viewed in this screencast:<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/mgYq8E8Q0fI?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>These were four introductory steps to take when starting a website upgrade using Responsive Web Design. I invite any questions or comments through <a href=\"mailto:john@appsbyjohn.com\">Email<\/a> or <a href=\"https:\/\/twitter.com\/appsbyjohn\">Twitter<\/a>. Below are a few additional resources that I have found helpful:<\/p>\n<ul>\n<li>Follow <a href=\"https:\/\/twitter.com\/rwd\" title=\"Follow Responsive Web Design on Twitter\">@rwd<\/a> from <a href=\"https:\/\/ethanmarcotte.com\/\" title=\"Homepage of Ethan Marcotte\">Ethan Marcotte<\/a> on Twitter.<\/li>\n<li><a href=\"https:\/\/developers.google.com\/web\/fundamentals\/design-and-ui\/responsive\/\" title=\"Responsive Web Design Basics from Google\">Responsive Web Design basics from Google<\/a>.<\/li>\n<li><a href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/\" title=\"A Guide to Flexbox\">A Guide to Flexbox<\/a> from CSS Tricks.<\/li>\n<li><a href=\"https:\/\/abookapart.com\/products\/responsive-web-design\" title=\"Responsive Web Design Book\">Responsive Web Design Book<\/a> from A Book Apart.<\/li>\n<\/ul>\n<h2 id=\"get-guide\">Get this Guide as a PDF<\/h2>\n<p>Subscribe to the Apps by John Newsletter. I will send you a PDF of this guide and send announcements of future guides!<\/p>\n<script>(function() {\n\twindow.mc4wp = window.mc4wp || {\n\t\tlisteners: [],\n\t\tforms: {\n\t\t\ton: function(evt, cb) {\n\t\t\t\twindow.mc4wp.listeners.push(\n\t\t\t\t\t{\n\t\t\t\t\t\tevent   : evt,\n\t\t\t\t\t\tcallback: cb\n\t\t\t\t\t}\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t}\n})();\n<\/script><!-- Mailchimp for WordPress v4.9.17 - https:\/\/wordpress.org\/plugins\/mailchimp-for-wp\/ --><form id=\"mc4wp-form-1\" class=\"mc4wp-form mc4wp-form-261\" method=\"post\" data-id=\"261\" data-name=\"Get Post PDF\" ><div class=\"mc4wp-form-fields\"><p>\r\n\t<label>Email address: <\/label>\r\n\t<input type=\"email\" name=\"EMAIL\" placeholder=\"Your email address\" required \/>\r\n<\/p>\r\n\r\n<p>\r\n    <label>First Name<\/label>\r\n    <input type=\"text\" name=\"FNAME\">\r\n<\/p>\r\n\r\n<p>\r\n    <label>Last Name<\/label>\r\n    <input type=\"text\" name=\"LNAME\">\r\n<\/p>\r\n\r\n\r\n<p>\r\n    <label>Requested Post<\/label>\r\n    <input type=\"text\" name=\"MMERGE3\" value=\"\/learn\/wp-json\/wp\/v2\/posts\/4\">\r\n<\/p>\r\n\r\n<p>\r\n\t<input type=\"submit\" value=\"Subscribe to get PDF\" \/>\r\n<\/p><\/div><label style=\"display: none !important;\">Leave this field empty if you're human: <input type=\"text\" name=\"_mc4wp_honeypot\" value=\"\" tabindex=\"-1\" autocomplete=\"off\" \/><\/label><input type=\"hidden\" name=\"_mc4wp_timestamp\" value=\"1780627963\" \/><input type=\"hidden\" name=\"_mc4wp_form_id\" value=\"261\" \/><input type=\"hidden\" name=\"_mc4wp_form_element_id\" value=\"mc4wp-form-1\" \/><div class=\"mc4wp-response\"><\/div><\/form><!-- \/ Mailchimp for WordPress Plugin -->\n","protected":false},"excerpt":{"rendered":"<p>Get this guide as a PDF An increasing number of people are using a mobile phone to access the web. A lot of websites were built on the assumption that most visitors used a computer and unfortunately do not serve mobile visitors well. This leads to less impact, less conversions, and less attention. TL;DR jump &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/appsbyjohn.com\/learn\/getting-started-with-responsive-web-design\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Getting Started with Responsive Web Design&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-4","post","type-post","status-publish","format-standard","hentry","category-responsive-web-design"],"_links":{"self":[{"href":"https:\/\/appsbyjohn.com\/learn\/wp-json\/wp\/v2\/posts\/4","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/appsbyjohn.com\/learn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/appsbyjohn.com\/learn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/appsbyjohn.com\/learn\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/appsbyjohn.com\/learn\/wp-json\/wp\/v2\/comments?post=4"}],"version-history":[{"count":56,"href":"https:\/\/appsbyjohn.com\/learn\/wp-json\/wp\/v2\/posts\/4\/revisions"}],"predecessor-version":[{"id":293,"href":"https:\/\/appsbyjohn.com\/learn\/wp-json\/wp\/v2\/posts\/4\/revisions\/293"}],"wp:attachment":[{"href":"https:\/\/appsbyjohn.com\/learn\/wp-json\/wp\/v2\/media?parent=4"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/appsbyjohn.com\/learn\/wp-json\/wp\/v2\/categories?post=4"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/appsbyjohn.com\/learn\/wp-json\/wp\/v2\/tags?post=4"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}