{"id":11389,"date":"2012-05-24T12:06:48","date_gmt":"2012-05-24T16:06:48","guid":{"rendered":"http:\/\/www.andysowards.com\/blog\/?p=11389"},"modified":"2012-05-24T12:06:48","modified_gmt":"2012-05-24T16:06:48","slug":"30-responsive-web-design-tutorials","status":"publish","type":"post","link":"https:\/\/andysowards.com\/blog\/2012\/30-responsive-web-design-tutorials\/","title":{"rendered":"30+ Responsive Web Design Tutorials"},"content":{"rendered":"

Since you guys really liked the Responsive Web Design Inspiration<\/a> we showed you last week, we decided to put together some really good tutorials for making your site look great on mobile devices like those. Responsive is where it is at! Over the past year or so (and recently) we have found some really great tutorials we thought we would share with you that explain the basics, and the more advanced topics like fluid grids and css3 media queries, layouts, javascript tools, etc.<\/p>\n

Responsive Design is not going anywhere anytime soon, so prepare yourself, and learn it! The web is heading more and more towards mobile devices as the mobile phone & app trend rise. Responsive web design basically makes your website look great for desktop users at home, and mobile users on the go – with some minor guidelines and some css3 :D. So I hope you enjoy these tutorials and learn something! There is even some more inspiration in these things, so dive in! Enjoy!<\/p>\n

Responsive Web Design<\/a><\/h2>\n

This is easily the best place to start on your journey of responsive web learning – Good foundational knowledge! This article was written by Ethan Marcotte who (according to the wikipedia) coined the term Responsive Web Design<\/a> (RWD) in this article way back in 2010 – and even wrote a book on the subject of responsive web design<\/a><\/p>\n

\"\"<\/a><\/p>\n

Beginner\u00e2\u20ac\u2122s Guide to Responsive Web Design<\/a><\/h2>\n

This is another really nice place to start, if you are new to the mobile arena and have no idea what ‘responsive web design’ is – then this does a great job of explaining it and telling you about stuff like fluid grids and media queries. <\/p>\n

\"\"<\/a><\/p>\n

Responsive Design in 3 Steps<\/a><\/h2>\n

Great little tutorial that shows you 3 simple steps on how to setup your web design workflow to be responsive and mobile friendly!<\/p>\n

\"\"<\/a><\/p>\n

5 Useful CSS Tricks for Responsive Design<\/a><\/h2>\n

A nice quick little list of some tricks you can use in your designs to make them responsive!<\/p>\n

\"\"<\/a><\/p>\n

5 Really Useful Responsive Web Design Patterns<\/a><\/h2>\n

This is a really nice post for once you get the grasp of everything and you are building your responsive design. This post goes into an overview of common & proven patterns used in the wild – it will help you see what works and give you some ideas on how to structure your sites layout with one of these patterns or perhaps make your own!<\/p>\n

\"\"<\/a><\/p>\n

Responsive Web Design: What It Is and How To Use It<\/a><\/h2>\n

This is another nice overview of Responsive Web Design – has very in depth examples that explain concepts and guidelines on how to pull these things off – and at the end it has some really nice responsive web examples showcased.<\/p>\n

\"\"<\/a><\/p>\n

Create a Responsive Web Design with Media Queries<\/a><\/h2>\n

Great tutorial that really ties everything together and shows you how to build a responsive web design from scratch, beginning to end! Will really put all the pieces you’ve learned together \ud83d\ude42<\/p>\n

\"\"<\/a><\/p>\n

Responsive Web Design: Layouts and Media Queries<\/a><\/h2>\n

Good tutorial that gives you a few different types of Layouts that are typically used in responsive web design, gives you the code examples and explains how they are working and what they will look like!<\/p>\n

\"\"<\/a><\/p>\n

<\/a><\/h2>\n

Great post with an overview of another developers workflow for how he is implementing responsive web design. As I always say, it is very good to see how other people work, and adapt their methods to your own. Once you learn the basics and check out a few other peoples workflows, you have everything you need!<\/p>\n

\"\"<\/a><\/p>\n

More Responsive Web Tutorials & Resources<\/h3>\n

Need even more awesome resources, tools, and tutorials for your journey to the top of Responsive Web Design? Well here are a few more resources that will help you along your way.<\/p>\n

W3C Media Queries<\/a><\/h2>\n

W3C is the standard source – so its always nice to check that out when really learning the basics on anything \ud83d\ude42<\/p>\n

Responsive Web Design Techniques, Tools and Design Strategies<\/a><\/h2>\n

This is a great article with tons of tutorials, inspirations and resources relevant to Responsive Web Design!<\/p>\n

\"\"<\/a><\/p>\n

50 fantastic tools for responsive web design<\/a><\/h2>\n

\"\"<\/a><\/p>\n

Ultimate Guide to Responsive Web Design: 55 Stunning Tools, Tutorials, and Examples<\/a><\/h2>\n

\"\"<\/a><\/p>\n

Responsive Illustration<\/a><\/h2>\n

I added this just because I thought it was really cool – resize your browser and it shows you basically what ‘responsive design’ is all about \ud83d\ude42 cool animations & illustration<\/p>\n

\"\"<\/a><\/p>\n

What was your favorite tutorial? Got a new one for us? Got a cool responsive website to show off? or some cool mobile trick? Leave it in the comments below!<\/p>\n

You like this? Don’t forget to follow us on twitter @andysowards<\/a> and like us on facebook @andysowardsfan<\/a>! We are also on that Google Plus<\/a> & Pinterest<\/a> thing.<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"

Since you guys really liked the Responsive Web Design Inspiration we showed you last week, we decided to put together some really good tutorials for making your site look great<\/p>\n","protected":false},"author":1,"featured_media":11390,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[4207,1654,24,4206,225,4584,35,73,202,4050,34,107],"tags":[5914,5885,1971,418,5887,5889,1127,5446,5377,5447,163,5373,5185,5445,115,459,84,5886,848],"class_list":["post-11389","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code","category-css3","category-design","category-development-2","category-freelance","category-html5","category-inspiration","category-javascript","category-jquery","category-mobile","category-tutorials","category-web","tag-css3","tag-design","tag-how-to","tag-html5","tag-inspiration","tag-javascript","tag-mobile","tag-mobile-ready","tag-mobile-web","tag-mobile-web-design","tag-resources","tag-responsive-web","tag-responsive-web-design","tag-responsive-web-tutorials","tag-tips","tag-tricks","tag-tutorial","tag-tutorials","tag-web-design"],"yoast_head":"\n30+ Responsive Web Design Tutorials<\/title>\n<meta name=\"description\" content=\"Since you guys really liked the Responsive Web Design Inspiration we showed you last week, we decided to put together some really good tutorials for\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/andysowards.com\/blog\/2012\/30-responsive-web-design-tutorials\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"30+ Responsive Web Design Tutorials\" \/>\n<meta property=\"og:description\" content=\"Since you guys really liked the Responsive Web Design Inspiration we showed you last week, we decided to put together some really good tutorials for\" \/>\n<meta property=\"og:url\" content=\"https:\/\/andysowards.com\/blog\/2012\/30-responsive-web-design-tutorials\/\" \/>\n<meta property=\"og:site_name\" content=\"Daily Business Resources for Entrepreneurs, Web Designers, & Creatives by Andy Sowards\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/andysowardsfan\" \/>\n<meta property=\"article:published_time\" content=\"2012-05-24T16:06:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/andysowards.com\/blog\/assets\/beginners-guide-to-responsive-web-design.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"704\" \/>\n\t<meta property=\"og:image:height\" content=\"635\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Andy Sowards\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@andysowards\" \/>\n<meta name=\"twitter:site\" content=\"@andysowards\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andy Sowards\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/andysowards.com\/blog\/2012\/30-responsive-web-design-tutorials\/\",\"url\":\"https:\/\/andysowards.com\/blog\/2012\/30-responsive-web-design-tutorials\/\",\"name\":\"30+ Responsive Web Design Tutorials\",\"isPartOf\":{\"@id\":\"https:\/\/andysowards.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/andysowards.com\/blog\/2012\/30-responsive-web-design-tutorials\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/andysowards.com\/blog\/2012\/30-responsive-web-design-tutorials\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/andysowards.com\/blog\/assets\/beginners-guide-to-responsive-web-design.jpg\",\"datePublished\":\"2012-05-24T16:06:48+00:00\",\"dateModified\":\"2012-05-24T16:06:48+00:00\",\"author\":{\"@id\":\"https:\/\/andysowards.com\/blog\/#\/schema\/person\/9e3197b37c1389a69a23f29ed4dc999d\"},\"description\":\"Since you guys really liked the Responsive Web Design Inspiration we showed you last week, we decided to put together some really good tutorials for\",\"breadcrumb\":{\"@id\":\"https:\/\/andysowards.com\/blog\/2012\/30-responsive-web-design-tutorials\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/andysowards.com\/blog\/2012\/30-responsive-web-design-tutorials\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/andysowards.com\/blog\/2012\/30-responsive-web-design-tutorials\/#primaryimage\",\"url\":\"https:\/\/andysowards.com\/blog\/assets\/beginners-guide-to-responsive-web-design.jpg\",\"contentUrl\":\"https:\/\/andysowards.com\/blog\/assets\/beginners-guide-to-responsive-web-design.jpg\",\"width\":704,\"height\":635},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/andysowards.com\/blog\/2012\/30-responsive-web-design-tutorials\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/andysowards.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"30+ Responsive Web Design Tutorials\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/andysowards.com\/blog\/#website\",\"url\":\"https:\/\/andysowards.com\/blog\/\",\"name\":\"Daily Business Resources for Entrepreneurs, Web Designers, & Creatives by Andy Sowards\",\"description\":\"Design Inspiration & Business Resources for Creatives\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/andysowards.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/andysowards.com\/blog\/#\/schema\/person\/9e3197b37c1389a69a23f29ed4dc999d\",\"name\":\"Andy Sowards\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/andysowards.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2505c3eff66b791c5d294a1459772e38487496aebe3f766f8813bed90b98f1ec?s=96&r=pg\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2505c3eff66b791c5d294a1459772e38487496aebe3f766f8813bed90b98f1ec?s=96&r=pg\",\"caption\":\"Andy Sowards\"},\"description\":\"Im a professional Freelancer specializing in Web Developer, Design, Programming web applications. Im an Avid member of the Design\/Development community and a Serial Blogger. follow me on Twitter @AndySowards\",\"sameAs\":[\"https:\/\/www.andysowards.com\"],\"url\":\"https:\/\/andysowards.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"30+ Responsive Web Design Tutorials","description":"Since you guys really liked the Responsive Web Design Inspiration we showed you last week, we decided to put together some really good tutorials for","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:\/\/andysowards.com\/blog\/2012\/30-responsive-web-design-tutorials\/","og_locale":"en_US","og_type":"article","og_title":"30+ Responsive Web Design Tutorials","og_description":"Since you guys really liked the Responsive Web Design Inspiration we showed you last week, we decided to put together some really good tutorials for","og_url":"https:\/\/andysowards.com\/blog\/2012\/30-responsive-web-design-tutorials\/","og_site_name":"Daily Business Resources for Entrepreneurs, Web Designers, & Creatives by Andy Sowards","article_publisher":"http:\/\/facebook.com\/andysowardsfan","article_published_time":"2012-05-24T16:06:48+00:00","og_image":[{"width":704,"height":635,"url":"https:\/\/andysowards.com\/blog\/assets\/beginners-guide-to-responsive-web-design.jpg","type":"image\/jpeg"}],"author":"Andy Sowards","twitter_card":"summary_large_image","twitter_creator":"@andysowards","twitter_site":"@andysowards","twitter_misc":{"Written by":"Andy Sowards","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/andysowards.com\/blog\/2012\/30-responsive-web-design-tutorials\/","url":"https:\/\/andysowards.com\/blog\/2012\/30-responsive-web-design-tutorials\/","name":"30+ Responsive Web Design Tutorials","isPartOf":{"@id":"https:\/\/andysowards.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/andysowards.com\/blog\/2012\/30-responsive-web-design-tutorials\/#primaryimage"},"image":{"@id":"https:\/\/andysowards.com\/blog\/2012\/30-responsive-web-design-tutorials\/#primaryimage"},"thumbnailUrl":"https:\/\/andysowards.com\/blog\/assets\/beginners-guide-to-responsive-web-design.jpg","datePublished":"2012-05-24T16:06:48+00:00","dateModified":"2012-05-24T16:06:48+00:00","author":{"@id":"https:\/\/andysowards.com\/blog\/#\/schema\/person\/9e3197b37c1389a69a23f29ed4dc999d"},"description":"Since you guys really liked the Responsive Web Design Inspiration we showed you last week, we decided to put together some really good tutorials for","breadcrumb":{"@id":"https:\/\/andysowards.com\/blog\/2012\/30-responsive-web-design-tutorials\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/andysowards.com\/blog\/2012\/30-responsive-web-design-tutorials\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/andysowards.com\/blog\/2012\/30-responsive-web-design-tutorials\/#primaryimage","url":"https:\/\/andysowards.com\/blog\/assets\/beginners-guide-to-responsive-web-design.jpg","contentUrl":"https:\/\/andysowards.com\/blog\/assets\/beginners-guide-to-responsive-web-design.jpg","width":704,"height":635},{"@type":"BreadcrumbList","@id":"https:\/\/andysowards.com\/blog\/2012\/30-responsive-web-design-tutorials\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/andysowards.com\/blog\/"},{"@type":"ListItem","position":2,"name":"30+ Responsive Web Design Tutorials"}]},{"@type":"WebSite","@id":"https:\/\/andysowards.com\/blog\/#website","url":"https:\/\/andysowards.com\/blog\/","name":"Daily Business Resources for Entrepreneurs, Web Designers, & Creatives by Andy Sowards","description":"Design Inspiration & Business Resources for Creatives","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/andysowards.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/andysowards.com\/blog\/#\/schema\/person\/9e3197b37c1389a69a23f29ed4dc999d","name":"Andy Sowards","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/andysowards.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2505c3eff66b791c5d294a1459772e38487496aebe3f766f8813bed90b98f1ec?s=96&r=pg","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2505c3eff66b791c5d294a1459772e38487496aebe3f766f8813bed90b98f1ec?s=96&r=pg","caption":"Andy Sowards"},"description":"Im a professional Freelancer specializing in Web Developer, Design, Programming web applications. Im an Avid member of the Design\/Development community and a Serial Blogger. follow me on Twitter @AndySowards","sameAs":["https:\/\/www.andysowards.com"],"url":"https:\/\/andysowards.com\/blog\/author\/admin\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/andysowards.com\/blog\/wp-json\/wp\/v2\/posts\/11389","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/andysowards.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/andysowards.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/andysowards.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/andysowards.com\/blog\/wp-json\/wp\/v2\/comments?post=11389"}],"version-history":[{"count":0,"href":"https:\/\/andysowards.com\/blog\/wp-json\/wp\/v2\/posts\/11389\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/andysowards.com\/blog\/wp-json\/wp\/v2\/media\/11390"}],"wp:attachment":[{"href":"https:\/\/andysowards.com\/blog\/wp-json\/wp\/v2\/media?parent=11389"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/andysowards.com\/blog\/wp-json\/wp\/v2\/categories?post=11389"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/andysowards.com\/blog\/wp-json\/wp\/v2\/tags?post=11389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}