I like to know how to start with responsive design, how to start code for that.

your help will be greatly appreciated

thanks in advance

Recommended Answers

All 4 Replies

You may want to take a look at Twitter Bootstrap.

Just 'Google' it - there is so much information out there.

Well you could use overflows, min/max's or percents, but I think it is much simpler, and more easily personalized if you use things like

@media screen and (max-width:320px) {
    .sidebar { display: none }
  }
  @media screen and (min-width:1920px) {
    body { font-size: 15px }
  }

or just a whole nother CSS

<link rel="stylesheet" media="screen" href="main.css">
<link rel="stylesheet" media="only screen and (min-width: 480px)" href="480.css">
<link rel="stylesheet" media="only screen and (min-width: 640px)" href="640.css">
<link rel="stylesheet" media="only screen and (min-width: 800px)" href="800.css">

Here are some great articles
http://www.labnol.org/internet/responsive-web-design-faq/21361/
http://www.techrepublic.com/blog/webmaster/how-to-get-started-with-responsive-web-design/1769
http://stackoverflow.com/questions/8660241/single-vs-multiple-stylesheets-in-responsive-web-design
http://line25.com/tutorials/create-a-responsive-web-design-with-media-queries
http://www.youtube.com/watch?v=MBZYJ7QbN_c

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.