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 . So I hope you enjoy these tutorials and learn something! There is even some more inspiration in these things, so dive in! Enjoy!
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 (RWD) in this article way back in 2010 – and even wrote a book on the subject of responsive web design
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.
Great little tutorial that shows you 3 simple steps on how to setup your web design workflow to be responsive and mobile friendly!
A nice quick little list of some tricks you can use in your designs to make them responsive!
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!
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.
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
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!
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!
More Responsive Web Tutorials & Resources
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.
W3C is the standard source – so its always nice to check that out when really learning the basics on anything
This is a great article with tons of tutorials, inspirations and resources relevant to Responsive Web Design!
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 cool animations & illustration
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!