Member Avatar for iquallsama

Hello there,

Responsive websites are developed to deliver the content and appearance based on screen dimensions that can be handled by all the devices like desktop, mobile, iPhone, tablet etc.

Edited by JorgeM because: Deleted link. Use the signature tool in your profile to display your link.
  • 8 Contributors
  • 8 Replies
  • 259 Views
  • 4 Months Discussion Span
  • Latest Post Latest Post by vinod1

Dani AI

Generated

A short, practical update and some concrete next steps (answers tied to the posts above).

Early workflow and "why now" — answering : before smartphones and wide CSS3 support it was common to build separate mobile sites or use server-side/device sniffing because browsers and screens were fewer and CSS/HTML features were limited. Once CSS media queries, fluid layouts and responsive-image techniques became reliable, a mobile‑first, screen‑size driven approach became the practical, maintainable choice. (developer.mozilla.org)

Implementation checklist (modern, low‑friction):

  • Start mobile‑first and include the viewport meta.
  • Use Flexbox for one‑dimensional layout and CSS Grid when you need two‑dimensional control.
  • Serve responsive images with srcset/sizes or <picture>, set width/height to avoid layout shifts, and use loading="lazy" for non‑critical images.

Example basics:

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

/* mobile-first */
.container { padding: 1rem; }
@media (min-width: 768px) {
  .container { max-width: 720px; margin: 0 auto; }
}

Use modern layout tools and responsive image features rather than heavy JS polyfills where possible. Pay attention to accessibility: do not disable pinch‑zoom (user-scalable=no is harmful). (developer.mozilla.org)

Testing, tool choices and legacy support — tying back to other replies: browser DevTools give a fast approximation (Chrome device toolbar, Firefox Responsive Design Mode, Safari’s Responsive Design Mode), but always verify on real devices or with remote device testing for touch, performance and fonts. Prefer feature detection and progressive enhancement (CSS @supports) over user‑agent sniffing. Regarding legacy browsers: Internet Explorer desktop app was retired for many Windows 10 channels; enterprise scenarios use Edge IE mode—plan support intentionally rather than assuming full IE compatibility. If a framework is wanted, Bootstrap is a solid, mobile‑first option (as suggested); lightweight alternatives like Tailwind or Bulma are also common choices depending on the project. (developer.chrome.com)

Notes tied to thread posts: introduced the concept; and touched on menu and parity across devices — design for the same content and tasks, not identical pixel‑perfect layouts, and keep important navigation discoverable on small screens.

Recommended Answers

All 8 Replies

Member Avatar for jcarr

I guess I'd like to know the history of Web Design in regard to devices. I was in training in 2009, where we were taught to design for each divice and use scripting to force the site to a specific device. As in many cases we've had to do for different browsers? I'm taking a responsive web class and am shock to see we are now designing for screen size. I say, yea... but, why didn't we do this before? Do we still need to design or other browsers that users prefer, Mozilla, IE and Safari?

Member Avatar for shophiarajan47

A responsive website is much more than a desgin it focus on the all the devices not the smarphones only. Though it use the media css property to adjust itself. ANother thing about them is the menu which go in one.

You can check on desktop itself if you website resposnvie or not. Try to resixe the window and see the effect.

Member Avatar for jcarr

I have seen that pages will respond and change. I just wonder if we still need to be concerned with other browsers, or legacy browsers.

Member Avatar for Hemanth Malli

Hi,
You are right to know the website is perfectly designed this responsive design is more useful. However when you check the site in laptop and in iphone the site should be same and then it is called Responsive Design.

Member Avatar for mesh457

There are lots of tool available for creating responsive websites. But in my opinion is bootstrap is the better choice for doing this.

Member Avatar for vinod1

A responcive website is the completly flexible and all kind of devices, & browser friendly. This kind of website also reduse the bounce rate and give the complete freedom to the user to access all the accesable pages of that website.

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.