Member Avatar for MartyWooly

Hello all!

I'm new to responsive web design and I realize that it's fairly vital to desigining a good website today, what with today's ever changing screen sizes it's become vital to make sure my pages display well.

So my question to everyone is this; Are there any Tools, Web Services etc. that allow me to manage all of these different screen sizes (Phones, Tablets, Desktops) from one code base?

Also, through a few searches I came across people discussing jQuery but I'm not sure whether it would suit my needs, any opinions?

Many thanks!

Edited by pritaeas because: Moved.
  • 6 Contributors
  • 5 Replies
  • 2K Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by alexloxton

Dani AI

Generated

New to RWD? You can absolutely serve phones, tablets, and desktops from one codebase. Start mobile-first, like suggested, and scale up with CSS. Media queries let you adapt layouts at different viewport sizes, and in 2025 you also have container queries so components can adapt to the space they live in (great for cards, sidebars, and grids dropped into different places). Frameworks like Bootstrap (hat tip @iamthwee) can help, but modern CSS often means you do not need a heavy framework. (developer.mozilla.org)

A practical path: include the viewport meta, build your layout with Grid or Flexbox, use relative units (%, em, rem) as noted, and ship responsive images so small screens are not downloading desktop-sized assets. Google’s guidance still favors a single responsive site over redirects or device-specific code, so only fall back to user-agent detection when you truly must. jQuery is not required for responsiveness; reserve JS for behavior (menus, tabs), not layout. (developer.mozilla.org)

Starter snippet you can paste into a prototype:

/* Component-driven grid using container queries */
.gallery { container-type: inline-size; display: grid; grid-template-columns: 1fr; gap: 1rem; }
@container (min-width: 48rem) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@container (min-width: 72rem) { .gallery { grid-template-columns: repeat(3, 1fr); } }

/* Fluid type with relative units */
:root { --step: clamp(1rem, 1rem + 1vw, 1.25rem); }
body { font-size: var(--step); }
<!-- One codebase essentials -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Responsive image -->
<img src="img-640.jpg"
     srcset="img-640.jpg 640w, img-1280.jpg 1280w"
     sizes="(min-width: 48rem) 50vw, 100vw"
     alt="Example">

This workflow complements ’s point: tools help, but knowing CSS gets you further, faster. Use content-driven breakpoints, test in DevTools, and iterate. (developer.mozilla.org)

Recommended Answers

All 5 Replies

Member Avatar for pritaeas

Try CSS media queries.

Member Avatar for Member #46692

Twitter bootstrap is all you need.

Member Avatar for almostbob

fixed size elements do not work in any device except the one the page was laid out on
body:1000px looks ridiculous on my windescreen, even ridiculous on an iphone coz that tiny screen is 2700px wide
laid out in em or % ,,, scalar dimensions that auto adjust to window size, screen resolution and user preference the site can look very similar across a broad range of devices
together with the previously mentioned css media queries, to change css to the abilities of the display device
and
a redirect script to send those devices that cannot be handled this simply to a page tailored to their (lack of) ability, the google code mobile redirect script is simple and functional, and so far seems bug free

Edited by almostbob
Member Avatar for jrewing

In principle all that you need to do is to create some smart CSS3 rules and make good use of media queries. In practice this is not always enough and you need to look into using frameworks that provide tools and controls to do the job right.

Such tools are still quite thin on the ground - in my view there is more hype than substance to RWD right now. One good place to start is by taking a look at the resources on the jQuery Mobile site - http://jquerymobile.com/resources/. A potential solution to your requirement - handling all devices seamlessly from one codebase might well be this - though it is still a beta offering.

Make no mistake though - tools and IDEs may help you but there is no substitute to having a good grasp of CSS3, a decent JS framework (= jQuery. do the others still really matter?), HTML5 and tons of googling.

Member Avatar for alexloxton

You should try CSS media or bootstrap they both are useful to solve your quaries.

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.