Service · from $49
Responsive web design
One codebase that adapts to any screen — built with container queries and fluid scaling, not a handful of breakpoints and hope.
Responsive is not a feature to sell any more; it is the baseline, and Google has indexed the mobile version of your site as the primary version for years. What still varies enormously is how well it is done — and that is decided between the breakpoints your designer actually drew.
The old approach was to pick four widths, style each one and accept that everything in between was approximate. It produced layouts that jumped abruptly at a breakpoint and looked wrong on any device that did not match a chosen width. We build the space between the breakpoints deliberately instead.
Fluid scaling does most of that work. Type, spacing and container widths use clamp() so they move smoothly between a sensible minimum and maximum. A heading is not 32px until exactly 768px and then suddenly 48px — it grows with the viewport, which is what your designer meant even if the file only shows two sizes.
Container queries are the bigger shift, and they change how components are built. A card can respond to the width of the column it sits in rather than the width of the window, so the same component works in a wide hero, a three-up grid and a narrow sidebar without a single variant class. Build a component once, place it anywhere, and it behaves.
Then there are the details that only show up on real hardware. Dynamic viewport units so a full-height section is not cut off by a mobile browser toolbar that appears and disappears as you scroll. Safe-area insets so content clears the notch and the home indicator. Touch targets sized to be hit reliably with a thumb. Hover states that do not stick on a touchscreen. None of these are visible in a desktop browser resized with the mouse.
We test accordingly: real iOS and Android handsets and tablets alongside emulation, at the small sizes people actually browse on and at the large ones nobody remembers to check. Landscape phones and split-screen tablet views included, because they break more layouts than anything else.
The build also honours what the device asks for — prefers-reduced-motion for people who get motion sickness from parallax and autoplaying animation, and prefers-color-scheme where your design has a dark variant.
What responsive means in this build
- Fluid type and spacing with clamp(), so layouts scale smoothly instead of jumping at breakpoints
- Container queries so components respond to their own space, not just the viewport
- Dynamic viewport units and safe-area insets for mobile browser chrome and notched screens
- Touch targets sized for reliable thumb use, with no hover states stuck on touchscreens
- Responsive images with srcset and sizes, so a phone never downloads a desktop-sized file
- Tested on real iOS and Android hardware, portrait, landscape and split-screen
- prefers-reduced-motion and prefers-color-scheme honoured where relevant
Have an existing fixed-width site? We retrofit a responsive layer onto working HTML rather than rebuilding it from scratch, which is usually the faster and cheaper route.
PSD to Responsive starts at $49
Send your design and get a fixed quote — usually within a few hours.
- Responsive
- Container Queries
- Fluid Type
- Mobile First
- Real Devices
- Modern CSS
- Responsive
- Container Queries
- Fluid Type
- Mobile First
- Real Devices
- Modern CSS
FAQ
PSD to Responsive — questions we get asked
Which breakpoints do you build for?
What are container queries and why do they matter?
Do you test on real devices?
Can you make an existing static site responsive?
A friendly team who create neat stuff for our clients
Tell us about your project and we will get back to you with a fixed price and a delivery date.