: How to create a responsive web design? 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?

@Mendez620

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)
foundation.zurb.com/docs/
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.

Vote Up Vote Down

@Ravi4787994

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.

Vote Up Vote Down

@Murray664

Responsive Design

A nice definition and or article on responsive or fluid design can be found here: 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.

Twitter Bootstrap

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.

Responsive DIY

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?

Vote Up Vote Down

@Samaraweera207

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:
mobile.smashingmagazine.com/tag/responsive-design/

Vote Up Vote Down