Member Avatar for iquallsama

Hi to all
Why responsive web design is require...?

Edited by pritaeas because: Removed fake signature.
  • 5 Contributors
  • 4 Replies
  • 773 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by almuniz

Dani AI

Generated

Short answer: responsive design is required because most people now browse on phones, search engines index the mobile view first, and a single responsive codebase keeps content and metadata consistent across devices (so it is easier to maintain and less likely to lose users to a competitor). (gs.statcounter.com)

As noted, responsive layouts stop users from having to pinch and zoom. As pointed out, fixed-width pages break on other screens and on high-density displays; relative units (rem, em, %) and fluid grids adapt to user settings and DPI. Practical minimum steps: set the viewport meta, make media scale with CSS media queries, and make images flexible. Example snippets:

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

html { box-sizing: border-box; font-size: 16px; }
img, video { max-width: 100%; height: auto; display: block; }
@media (max-width: 768px) { /* layout adjustments for small viewports */ }

For the viewport tag, media queries and responsive images see MDN. (developer.mozilla.org)

Performance and search: responsive sites must also be fast on mobile. Measure and monitor Core Web Vitals (LCP, INP, CLS) and use tools like the web-vitals library or Lighthouse to find regressions. Prioritize small payloads, lazy-load offscreen images, preload critical assets, and serve modern image formats via srcset/sizes. (github.com)

Accessibility and touch: small fixed fonts and tiny buttons create usability and accessibility problems (users leave). WCAG and platform guidelines recommend minimum target sizes and allow scaling—aim for at least ~44–48 CSS pixels for tappable targets and keep spacing between them. Use rem/em for type so users who increase base font size actually see larger text. (w3.org)

Brief checklist to apply now: 1) add viewport meta; 2) adopt mobile-first CSS; 3) make images responsive (srcset/picture); 4) audit Core Web Vitals and fix heavy JS/images; 5) test on real devices and emulate common screen sizes. These steps address the usability, SEO, and accessibility gaps raised in the thread.

Recommended Answers

All 4 Replies

Member Avatar for drjohn

So that users with smart phones or small tablets will get an easier to use version of the page layout and not need to keep zooming in and out to get at bits of it. Links should also then be easier to click on as well.

Member Avatar for almostbob

fixed web sites work, ONLY on the device they were laid out on, look llike craqp on every other.

responsive design, using relative dimensionin in em or % adjusts to window size, screen resolution, device capability and user preferences
12px text vanishes on a screen with 267px/inch
1em text is visible on all devices
Blind freddy sets his basefont to 2inch high so he can readd it. em & % adjust, px pt pica do not
fixed size, pushes content offscreen in part windows, users do not scoll sideways, they leave

Member Avatar for frankjames018

now a days ever user is browsing internet on their smart phones, so if a website is not resopnsive then user will migrate to other website. This will become a drawback to website.

Member Avatar for almuniz

iquallsama,

Today more than ever it is smart to consider building a responsive website especially if your product, service or information is directed at the masses. Here is a link to a quick read on for your website. Enjoy!

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.