Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

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?

share|improve this question
    
I'd start by googling 'responsive design' –  DA01 Oct 28 '12 at 1:49
add comment

4 Answers

up vote 3 down vote accepted

Responsive Design

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.

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?

share|improve this answer
    
The article you have provided is very useful because it actually provides the code on how to implement a responsive web design. Thanks Rhand! –  Rupert Jamison Oct 30 '12 at 4:19
    
Just need to add adaptive-images.com –  Fahad Nov 29 '12 at 21:35
add comment

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:

http://mobile.smashingmagazine.com/tag/responsive-design/

share|improve this answer
add comment

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.

share|improve this answer
add comment

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)

http://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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.