HTML5 responsive design

Question

I'm a new bee to Responsive design. My customer asked me to implement a responsive design to be compatible with multiple screen support and multiple device support.

I have some doubts about Responsive design:

• Do all browsers that support HTML5 support responsive design?
• Will creating a responsive design take more time than conventional design?
• Do I need different css files to achieve responsive design?

Please advice.

Thanks.

Answer 1

I believe all modern browsers support most HTML5 features. But most of what you're doing for responsive design is done in CSS. So it's a matter of whether or not browsers support the CSS standards you're using. A site such as caniuse.com will be very helpful for browser compatibility.

If you're new to responsive layouts, you'll find things like Twitter Bootstrap or Zurb Foundations very helpful. Not only are they designed to be responsive, they're generally very easy to learn, and come packed with a lot of other things that are helpful when creating websites.

Twitter Bootstrap is more commonly used over Foundations. Foundations is nice, because the CSS is built using SASS. So you can do use variables and such in your CSS. Makes developing a bit more efficient. Bootstrap bases CSS off of LESS.

Answer 2

Are all browsers supporting HTML5 responsive design?

ans:most of all WEBKIT browser supports the responsive design perfectly. other than webkit also support responsive.

Will it take more time compare with conventional design? ans: ya it will take more time if you are design first time .

Do I need different css files to achieve responsive design? ans: if you make responsive site without responsive framework you have to write different css.

i advice that use responsive framework , it will save your lots of time.

TWITTER BOOTSTRAP http://twitter.github.io/bootstrap/ , boilerPlate http://html5boilerplate.com/ and foundation http://foundation.zurb.com/ this are good framework for responsive

Answer 3

Yes all browsers are supporting HTML5 responsive design?

Use media queries..check following links to get started..yes it takes more time

http://mediaqueri.es/

http://css-tricks.com/css-media-queries/

http://www.w3.org/TR/css3-mediaqueries/