Member Avatar for touqeer s

Responsive Web Design essentially indicates that a web site is crafted to use Cascading Style Sheets 3 media queries…with fluid proportion-based grids, to adapt the layout to the viewing environment, and probably also use flexible images. As a result, users across a broad range of devices and browsers will have access to a single source of content, laid out so as to be easy to read and navigate with a minimum of resizing, panning, and scrolling.

  • 6 Contributors
  • 7 Replies
  • 305 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Nmalik1

Dani AI

Generated

A short, practical update to the thread that ties the earlier comments together and adds modern, actionable steps.

Responsive design basics: RWD still rests on three things — a viewport meta, flexible layouts, and conditional CSS (media queries) as said. The simple, canonical viewport is shown below; without it media queries won’t behave as intended on phones. (web.dev)

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

Layout strategy: prefer a mobile-first flow (base styles for small screens, then @media (min-width: …) for larger screens). Use Flexbox for 1‑D alignment and CSS Grid for two‑dimensional layouts, avoid fixed pixel widths, and rely on relative units (fr, %, vw, logical properties) so the design stays fluid. Example pattern: (developer.mozilla.org)

/* mobile-first base */
.container { display: block; }

/* upgrade at a breakpoint */
@media (min-width: 768px) {
  .container { display: grid; grid-template-columns: 1fr 3fr; gap: 16px; }
}

Images and performance: serve appropriately sized images with srcset/sizes or the <picture> element, include width/height to avoid layout shift, and use loading="lazy" for non-critical assets. Modern formats (WebP/AVIF) help bandwidth. Example: (web.dev)

<img src="hero-800.jpg"
     srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
     sizes="(min-width:1000px) 50vw, 100vw"
     width="1200" height="800" loading="lazy" alt="">

Workflow and testing: ’s warning about Dreamweaver’s extra markup is valid — hand-written HTML/CSS (VS Code + build tools) yields cleaner, maintainable output. Test with browser device emulation and sensor/network throttling, and run Lighthouse audits for performance and accessibility. Container queries (@container) are now available for component-level responsiveness but should be used with awareness of browser support and fallbacks. Real-device testing remains essential, as hinted. (developer.chrome.com)

Quick troubleshooting hints: if a layout breaks, check for a missing viewport tag, hard-coded widths, missing max-width:100% on media, incorrect media-query direction (min vs max), and image sizes mismatches. These cover the common causes seen in the thread and give a concise path from concept to a working, modern responsive page.

Recommended Answers

All 7 Replies

Member Avatar for raihanbd1000

Have you any resource or more news about Responsive Web Design. i want to know Responsive Web Design.how can i do this.
menopause libido

Member Avatar for touqeer s

create your website in dreamweaver cs version and style your webpages in css
works for different screens resolution
ex @media screen....

Member Avatar for bradly.spicer

Don't design your website in dreamweaver.

It adds extra lines of code.

<script>
<!--#include file="inc/include.inc" -->
</script>

Turns into

<script>
<MM:BeginLock translatorClass="MM_SSI" type="ssi_comment"
 orig="%3C!--#include file=%22inc/include.inc%22 --%3E" fileRef="inc/include.inc"
 depFiles="file:///C|/MySites/asp/inc/include.inc">#993333
<MM:EndLock>
</script>
Member Avatar for touqeer s

what software you use to create website

Member Avatar for Violet_82

Agree, forget about Dreamweaver if you are serious about building websites. About responsive design, depending on how much you know about web development, I would start with a good article of Ethan Marcotte http://alistapart.com/article/fluidgrids. It is easy to understand but it is very comprehensive I think. This http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design also has some useful concepts like media queries, which you have to get familiar with (unless you are already) if you plan to do responsive design. And last but not least, something about images:

That should be a good start

Member Avatar for silverice282

IMO, I believe RWD is helpful but it doesn't seem to be perfect in all devices...

Member Avatar for Nmalik1

I have done for findings, how to make a responsive website, luckily I have found a best tutorial for designing responsive website in Just 15 Minutes.This is best article that,I have found for me, If you have better than it than please share with Daniweb community.

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.