8 Tuts To Teach You Responsive Web Design

Posted on July 18, 2012 by Anthony James Founder/CEOAnthony James Founder/CEO

Responsive design is awesome because it allows a web designer to design for any screen size including, but not limited to, mobile, tablet, TV, computer and the 400 different tablet/mobile screen sizes. The core of responsive design is really media queries, but it’s still an art. Below is a list of ten resources that will help you start learning responsive web design. Even if you’re not a web designer, you need to know how to use and modify code that is built responsive.
First, get started by understanding The Possibilities and Restrictions of Responsive Web Design.

Learn Responsive Web Design For Drupal
This is a comprehensive list of links that will help you get started learning responsive design for Drupal. The resources include frameworks, concepts, and more, but are geared towards the Drupal CMS.
Beginner’s Guide to Responsive Web Design
This guide is just as the title says, a responsive web design tutorial by Think Vitamin geared toward beginners. This is a must read.
Responsive Design Using Foundation with ASP.Net MVC
We don’t give enough love to the ASP.net fans, so this one is for you!
5 Useful Tools For Responsive Web Design
This one is out of the Pinehead playbook. I like to mention these because the writer nDeHertogh does a great job of showing these responsive web design tools to newbies.
CSS3 Media Queries
At the core of responsive design are media queries. Knowing how they work is essential.
The Possibilities and Restrictions of Responsive Web Design: Responsive Data Tables
This tutorial will help you dive into the specifics of responsive data tables and how they work.  This is another one from the Pinehead playbook.
Creating A Mobile-First Responsive Web Design
Lastly, let’s take a look at what mobile-first responsive web design looks like.  We’ve heard a lot of concepts of “mobile-first,” but how does it apply to responsive design?

2 Comments

Image of free sim xian
free sim xian
7 years ago

Great post, thanks for all this great info! It a big help.

Image of Fingerprint
Fingerprint
2 years ago

Thanks for the great tips! I do have a question however that I think you could probably answer.
I was wondering, What is difference between Interaction design,
Visual Design, Web design, UX design, UI design, UI development?
I’m really confused about how they are differnet. Any insight would be greatly appreciated!

Image of Joel
Joel
1 year ago

Great Question! The definition for these will really depend on who you’re talking to, but I’ll give you a quick overview of each one. An Interactive Designer is very similar to that of a UX Designer. These designers work directly with creating and mapping out how interaction change the experience of the users inside of the application they are working on. Web Design and Visual Design are also very similar. They focus on the aesthetics and making things “look pretty”. A UI Designer is another one who does make things “look pretty”, but they usually work hand in hand with a UX Designer. Sometimes they are even the same person. They ensure that the experience is there and that it gets enhanced by the visual dynamics of the application. This could include graphics, icons, and even animations!. Finally, a UI Developer is what I like to call a “Front-End Developer Lite!”. They focus on creating the interfaces in a web application. They do HTML/CSS and Javascript, however most of the time they do not implement back-end calls or anything attaching it to a server. They focus on bringing a UI come to life! 🙂
I hope this helps!

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *