How do you exactly create a very responsive web design? Do you create application for your website to be responsive when using mobile and/or tablets?
1I'd start by googling 'responsive design'– DA01Oct 28, 2012 at 1:49
A nice definition and or article on responsive or fluid design can be found here: http://www.alistapart.com/articles/responsive-web-design/ . And I do not have to add to much to it. A responsive design is a designed site that adjusts to its environment and mostly adjusts itself to the screen resolution of the medium used by the visitor. This to make sure the site looks good on a 17" screen monitor, but also on your iPhone 5. It should not just fit, but content display should be appealing too, so often some content is not loaded or loaded later or in another form to make it look good.
OS CMS like Joomla! use Twitter Bootstrap to help in creating sites that display well on devices with different screen resolutions making the site responsive to the need of the user and the device he or she is using. WordPress also has themes like Roots that integrate Bootstrap and HTML5 Boilerplate. But Bootstrap can be implemented in any CMS or static site.
With HTML5 and CSS2 or 3 you can create your own responsive design as well of course. I just means making your site load content in a different way to make it fit and look good on an iPhone, Galaxy Tablet or Nokia Lumia as known examples. See an ok sample at Microsoft's knowledge base here.
My Two Cents
Still I'd recommend a framework like Twitter Bootstrap. Why not use a system that is Open Source and has already worked out the major issues?
The article you have provided is very useful because it actually provides the code on how to implement a responsive web design. Thanks Rhand! Oct 30, 2012 at 4:19
Just need to add adaptive-images.com Nov 29, 2012 at 21:35
I really like Zurb Foundation. I have built a few sites with it and had no issues. I have found it easy to extend - it's easy to build a prototype that and then take to full production. (I've been using version 2 - there is V3 out - however V3 has dropped support for IE7)
Also a new tool someone in the office was playing with was jetstrap.com
Let's you visually do responsive layouts - you can then check the code and see how it's done and might be a good way to get started.
I found the book "Responsive Web Design" by Ethan Marcotte extremely useful when I first looked into the subject. It will take you through the complete design process so you can understand how the coding works and what the limitations are. From there you can then go to some of the more complex frameworks, but have enough knowledge to better understand how to use them and get them working.
Usually it's done with CSS media queries and breakpoints for viewport widths.
It's a huge topic though, with many different opinions and techniques. I highly recommend you read lots of articles on the topic.
Somewhere like Smashing Magazine would be a good place to start: