In 2026, 82% of UK web traffic is mobile. A site that fails on a phone fails for the majority of its visitors. Sitejet handles responsive design automatically across every template and preset — but understanding the breakpoints, cascade rules and per-device customisation lets you fine-tune for the edge cases that auto-handling misses. This guide covers all of it with UK mobile context.
Why responsive design matters · How Sitejet handles responsive design · Device breakpoints · Breakpoint cascade rules · Previewing your site on different devices · Customising your design per device · Practical tips for a great mobile experience · FAQ
Mobile is now the majority UK browser. Google uses mobile-first indexing — the mobile version of your site is the one Google evaluates and ranks. A site that breaks on a phone does not just frustrate visitors; it ranks lower, even for desktop searchers. See our mobile-friendly websites guide for the broader picture.
Every Sitejet template and preset is built mobile-first. The editor renders each page at desktop, tablet and mobile breakpoints; you can switch between them at any time. Layout uses CSS flexbox and grid, so sections re-flow intelligently at narrower widths.
You do not have to do anything to get basic responsiveness. Override per device only where auto-handling falls short.
| Device | Breakpoint (px) | Typical UK user |
|---|---|---|
| Desktop | ≥ 1200 | Office, home laptop |
| Laptop | 992 – 1199 | Smaller laptops, landscape tablets |
| Tablet | 768 – 991 | iPad portrait, large Android tablets |
| Mobile | < 768 | Phones (iPhone, Android) |
Critical breakpoint: 375 px (iPhone SE / smaller Android). If it works at 375 px it works on almost every UK phone.
Styles cascade from desktop down. Set a style at desktop level, it applies to all smaller devices unless overridden. Override at tablet level, it applies to tablet and mobile unless mobile-overridden. Override at mobile, applies only to mobile.
Practical impact: set base styling at desktop, then override only where the smaller screens need different behaviour — not everywhere.
Top toolbar → device icons. Click to render at each breakpoint. Resize the browser window for intermediate sizes.
Always test on a real phone before publishing — the device preview is close but not identical to a real iPhone Safari or Chrome Android experience. Test on 4G, not home Wi-Fi, for realistic load.
Select any element, switch to the device view you want to override, change the property (size, padding, alignment, visibility). The change applies only to that device; other devices remain unchanged.
Common per-device tweaks for UK SME sites:
tel: link, clickable.Q: Do I need to build a separate mobile site?
A: No. Responsive design means one site adapts to every screen size. Sitejet (and every serious modern builder) handles this via a single codebase.
Q: How do I make a section mobile-only?
A: Select the section → switch to desktop view → Hide for this device. The section only shows on tablet and mobile.
Q: Why does my site look different on iPhone vs Android?
A: Usually a Safari-specific CSS quirk — position:fixed, viewport units, or flex gap on older iOS. Test in real Safari; tweak with custom CSS if needed.
Q: Can I use different images per device?
A: Yes — select the image, switch to desktop / tablet / mobile view, swap the image. Each device loads its own image.
Q: What about accessibility (Equality Act 2010)?
A: Responsive design is one input to accessibility. Also check colour contrast, keyboard navigation, screen reader compatibility. See our essentials guide.
Q: Does Sitejet send a specific mobile version to Google?
A: No — there is one responsive site that adapts. Google’s mobile-first indexing evaluates the mobile render of the same site.