{"id":900,"date":"2011-12-08T10:52:40","date_gmt":"2011-12-08T15:52:40","guid":{"rendered":"https:\/\/webdesignerwall.com\/?p=900"},"modified":"2012-05-18T16:42:45","modified_gmt":"2012-05-18T21:42:45","slug":"responsive-design-in-3-steps","status":"publish","type":"post","link":"https:\/\/webdesignerwall.com\/tutorials\/responsive-design-in-3-steps","title":{"rendered":"Responsive Design in 3 Steps"},"content":{"rendered":"

Responsive web design is no doubt a big thing now. If you still not familiar with responsive design, check out the list of responsive sites<\/a> that I recently posted. To newbies, responsive design<\/a> might sound a bit complicated, but it is actually simpler than you think. To help you quickly get started with responsive design, I’ve put together a quick tutorial. I promise you can learn about the basic logic of responsive design and media queries in 3 steps (assuming you have the basic CSS knowledge).<\/p>\n

Step 1.<\/em> Meta Tag (view demo<\/a>)<\/h3>\n

Most mobile browsers scale HTML pages to a wide viewport width so it fits on the screen. You can use the viewport meta tag to reset this. The viewport tag below tells the browser to use the device width as the viewport width and disable the initial scale. Include this meta tag in the <head>.<\/p>\n

<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<\/code>\r\n<\/pre>\n
Internet Explorer 8 or older doesn’t support media query. You can use media-queries.js<\/a> or respond.js<\/a> to add media query support in IE. <\/p>\n
<!--[if lt IE 9]>\r\n\t<script src=\"http:\/\/css3-mediaqueries-js.googlecode.com\/svn\/trunk\/css3-mediaqueries.js\"><\/script>\r\n<![endif]-->\r\n<\/code><\/pre>\n
Step 2.<\/em> HTML Structure<\/h3>\n
In this example, I have a basic page layout with  a header, content container, sidebar, and a footer. The header has a fixed height 180px, content container is 600px wide and sidebar is 300px wide. <\/p>\n
\n\t\"structure\"<\/a>
\n<\/figure>\n
Step 3.<\/em> Media Queries<\/h3>\n
CSS3 media query<\/a> is the trick for responsive design. It is like writing if conditions to tell the browser how to render the page for specified viewport width.<\/p>\n
The following set of rules will be in effect if the viewport width is 980px or less. Basically, I set all the container width from  pixel value to percentage value so the containers will become fluid.<\/p>\n
 \"image\"<\/a>
\n<\/figure>\n
Then for viewport 700px or less, specify the #content and #sidebar to auto width and remove the float so they will display as full width.<\/p>\n
 \"image\"
\n<\/figure>\n
For 480px or less (mobile screen), reset the #header height to auto, change the h1 font size to 24px and hide the #sidebar.<\/p>\n
 \"image\"
\n<\/figure>\n
You can write as many media query  as you like. I’ve only shown 3 media queries in my demo. The purpose of the media queries is to apply different CSS rules to achieve different layouts for specified viewport width. The media queries can be in the same stylesheet or in a separate file.<\/p>\n
Conclusion<\/h3>\n
This tutorial is intended to show you the basics of responsive design. If you want more in-depth tutorial, check out my previous tutorial: Responsive Design With Media Queries<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Responsive web design is no doubt a big thing now. If you still not familiar with responsive design, check out the list of responsive sites that I recently posted. To newbies, responsive design might sound a bit complicated, but it is actually simpler than you think. To help you quickly get started with responsive design, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[31,1],"tags":[21,40],"class_list":["post-900","post","type-post","status-publish","format-standard","hentry","category-featured","category-tutorials","tag-css","tag-responsive-design"],"yoast_head":"\nResponsive Design in 3 Steps - Web Designer Wall<\/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:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/responsive-design-in-3-steps\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive Design in 3 Steps - Web Designer Wall\" \/>\n<meta property=\"og:description\" content=\"Responsive web design is no doubt a big thing now. If you still not familiar with responsive design, check out the list of responsive sites that I recently posted. To newbies, responsive design might sound a bit complicated, but it is actually simpler than you think. To help you quickly get started with responsive design, […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/responsive-design-in-3-steps\" \/>\n<meta property=\"og:site_name\" content=\"Web Designer Wall\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webdesignerwall\" \/>\n<meta property=\"article:published_time\" content=\"2011-12-08T15:52:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2012-05-18T21:42:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdesignerwall.mystagingwebsite.com\/wp-content\/uploads\/2011\/12\/page-structure.png\" \/>\n<meta name=\"author\" content=\"Aigars Silkalns\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@nickla\" \/>\n<meta name=\"twitter:site\" content=\"@nickla\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Aigars Silkalns\" \/>\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\":\"WebPage\",\"@id\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/responsive-design-in-3-steps\",\"url\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/responsive-design-in-3-steps\",\"name\":\"Responsive Design in 3 Steps - Web Designer Wall\",\"isPartOf\":{\"@id\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/responsive-design-in-3-steps#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/responsive-design-in-3-steps#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdesignerwall.com\/wp-content\/uploads\/2011\/12\/page-structure.png\",\"datePublished\":\"2011-12-08T15:52:40+00:00\",\"dateModified\":\"2012-05-18T21:42:45+00:00\",\"author\":{\"@id\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/#\/schema\/person\/9c6a1ce807a45918d4157d0497157c84\"},\"breadcrumb\":{\"@id\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/responsive-design-in-3-steps#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/responsive-design-in-3-steps\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/responsive-design-in-3-steps#primaryimage\",\"url\":\"https:\/\/webdesignerwall.com\/wp-content\/uploads\/2011\/12\/page-structure.png\",\"contentUrl\":\"https:\/\/webdesignerwall.com\/wp-content\/uploads\/2011\/12\/page-structure.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/responsive-design-in-3-steps#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Responsive Design in 3 Steps\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/#website\",\"url\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/\",\"name\":\"Web Designer Wall\",\"description\":\"Design Trends and Tutorials - A wall of design ideas, web trends, and tutorials.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/#\/schema\/person\/9c6a1ce807a45918d4157d0497157c84\",\"name\":\"Aigars Silkalns\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ba8ffcefbaaec481373d85072fdfdae628449bf1ebae707ca57aa3b69dbbf350?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ba8ffcefbaaec481373d85072fdfdae628449bf1ebae707ca57aa3b69dbbf350?s=96&d=mm&r=g\",\"caption\":\"Aigars Silkalns\"},\"sameAs\":[\"https:\/\/webdesignerwall.mystagingwebsite.com\"],\"url\":\"https:\/\/webdesignerwall.com\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Responsive Design in 3 Steps - Web Designer Wall","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:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/responsive-design-in-3-steps","og_locale":"en_US","og_type":"article","og_title":"Responsive Design in 3 Steps - Web Designer Wall","og_description":"Responsive web design is no doubt a big thing now. If you still not familiar with responsive design, check out the list of responsive sites that I recently posted. To newbies, responsive design might sound a bit complicated, but it is actually simpler than you think. To help you quickly get started with responsive design, […]","og_url":"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/responsive-design-in-3-steps","og_site_name":"Web Designer Wall","article_publisher":"https:\/\/www.facebook.com\/webdesignerwall","article_published_time":"2011-12-08T15:52:40+00:00","article_modified_time":"2012-05-18T21:42:45+00:00","og_image":[{"url":"https:\/\/webdesignerwall.mystagingwebsite.com\/wp-content\/uploads\/2011\/12\/page-structure.png","type":"","width":"","height":""}],"author":"Aigars Silkalns","twitter_card":"summary_large_image","twitter_creator":"@nickla","twitter_site":"@nickla","twitter_misc":{"Written by":"Aigars Silkalns","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/responsive-design-in-3-steps","url":"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/responsive-design-in-3-steps","name":"Responsive Design in 3 Steps - Web Designer Wall","isPartOf":{"@id":"https:\/\/webdesignerwall.mystagingwebsite.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/responsive-design-in-3-steps#primaryimage"},"image":{"@id":"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/responsive-design-in-3-steps#primaryimage"},"thumbnailUrl":"https:\/\/webdesignerwall.com\/wp-content\/uploads\/2011\/12\/page-structure.png","datePublished":"2011-12-08T15:52:40+00:00","dateModified":"2012-05-18T21:42:45+00:00","author":{"@id":"https:\/\/webdesignerwall.mystagingwebsite.com\/#\/schema\/person\/9c6a1ce807a45918d4157d0497157c84"},"breadcrumb":{"@id":"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/responsive-design-in-3-steps#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/responsive-design-in-3-steps"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/responsive-design-in-3-steps#primaryimage","url":"https:\/\/webdesignerwall.com\/wp-content\/uploads\/2011\/12\/page-structure.png","contentUrl":"https:\/\/webdesignerwall.com\/wp-content\/uploads\/2011\/12\/page-structure.png"},{"@type":"BreadcrumbList","@id":"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/responsive-design-in-3-steps#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdesignerwall.mystagingwebsite.com\/"},{"@type":"ListItem","position":2,"name":"Responsive Design in 3 Steps"}]},{"@type":"WebSite","@id":"https:\/\/webdesignerwall.mystagingwebsite.com\/#website","url":"https:\/\/webdesignerwall.mystagingwebsite.com\/","name":"Web Designer Wall","description":"Design Trends and Tutorials - A wall of design ideas, web trends, and tutorials.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webdesignerwall.mystagingwebsite.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/webdesignerwall.mystagingwebsite.com\/#\/schema\/person\/9c6a1ce807a45918d4157d0497157c84","name":"Aigars Silkalns","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdesignerwall.mystagingwebsite.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ba8ffcefbaaec481373d85072fdfdae628449bf1ebae707ca57aa3b69dbbf350?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ba8ffcefbaaec481373d85072fdfdae628449bf1ebae707ca57aa3b69dbbf350?s=96&d=mm&r=g","caption":"Aigars Silkalns"},"sameAs":["https:\/\/webdesignerwall.mystagingwebsite.com"],"url":"https:\/\/webdesignerwall.com\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/webdesignerwall.com\/wp-json\/wp\/v2\/posts\/900","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdesignerwall.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdesignerwall.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdesignerwall.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webdesignerwall.com\/wp-json\/wp\/v2\/comments?post=900"}],"version-history":[{"count":3,"href":"https:\/\/webdesignerwall.com\/wp-json\/wp\/v2\/posts\/900\/revisions"}],"predecessor-version":[{"id":982,"href":"https:\/\/webdesignerwall.com\/wp-json\/wp\/v2\/posts\/900\/revisions\/982"}],"wp:attachment":[{"href":"https:\/\/webdesignerwall.com\/wp-json\/wp\/v2\/media?parent=900"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdesignerwall.com\/wp-json\/wp\/v2\/categories?post=900"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdesignerwall.com\/wp-json\/wp\/v2\/tags?post=900"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}