Member Avatar for designershiv

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

  • 5 Contributors
  • 4 Replies
  • 200 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by code739

Dani AI

Generated

A practical starter plan: treat responsive design as content-first, mobile-first work. Make the layout fluid, images flexible, and add breakpoints only where the design actually breaks. Include the viewport meta so mobile browsers render at the intended scale. Frameworks mentioned by and can speed development, but learning the basics first prevents heavyweight or inflexible results.

A minimal head + layout example (mobile-first, using flexbox and flexible images):

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
  .container { max-width:1100px; margin:0 auto; padding:0 16px; }
  .row { display:flex; flex-wrap:wrap; gap:16px; }
  .col { flex:1 1 100%; }
  .col.sidebar { flex:1 1 280px; }
  .col.main { flex:2 1 520px; }
  img.responsive { max-width:100%; height:auto; display:block; }

  @media (min-width:720px) {
    .col { flex-basis:auto; }
  }
</style>

Practical workflow and troubleshooting tips: design breakpoints from the content rather than device names; start with stacked (single-column) rules and add min-width queries to expand layouts; prefer relative units (%, rem, vw) over fixed px; use srcset/sizes and image compression or lazy-loading for performance; test with browser DevTools device mode and at least a couple of real devices. Watch accessibility: visible focus states and 44px-ish touch targets matter.

Tie-ins to existing posts: ’s media-query idea is sound — use breakpoints thoughtfully — and ’s grid/framework suggestions are useful once a pattern system exists. ’s point about researching is valid, but starting with the viewport tag, flexible images, and a simple content-first prototype will make later learning and framework adoption far more effective.

Recommended Answers

All 4 Replies

Member Avatar for JorgeM

You may want to take a look at Twitter Bootstrap.

Member Avatar for simplypixie

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

Member Avatar for jspence29

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.