Mobile is most of your traffic
Across service-business clients we measure 58–82% mobile share on organic. If the site is bad on mobile, most of your traffic is having a bad time.
Responsive Web Design
Responsive Web Design That Actually Works on the Devices Your Users Have
A SeoMata responsive engagement designs and builds mobile-first by default. We test on real Android and iOS devices, hold a hard CLS budget on the smallest screens, and make sure the primary CTA never disappears below the fold or under a sticky element.
< 0.05
CLS on 320px
smallest tested width
44px
Min tap target
WCAG-compliant
3+
Real devices tested
Android + iOS + tablet
58–82%
Mobile share
typical service-business traffic
What "responsive" actually means here
A lot of "responsive" sites are desktop-first builds with breakpoints added on. The mobile layout shows up working in DevTools and falls apart on a real phone — primary CTA below the fold, hero image cropped wrong, forms scrolling horizontally, sticky elements hiding the primary action.
SeoMata responsive work designs mobile-first, builds mobile-first, and tests on real devices in QA. Desktop layout is the larger-screen expansion of the mobile layout, not the other way around. This sounds obvious; the visible result of the opposite habit is most of the sites we audit.
320–1440
px tested
plus ultrawide spot-check
0
Horizontal scroll
on any tested viewport
< 100ms
INP on mobile
p75 on mid Android
Why
Six reasons mobile-first is not optional
Mobile-first indexing
Google indexes the mobile version of your site primarily. Desktop-only content is invisible to ranking.
Conversion penalty is real
Mobile conversion rates lag desktop by 30–60% on most sites. Most of that gap is fixable design + UX work, not "mobile users do not convert".
Performance gap matters
LCP / INP / CLS on mobile is where Google judges the site. Mobile-first design forces the budget questions at the right time.
Tap targets fail accessibility
Most "responsive" sites have tap targets < 44px on mobile. WCAG fails, accessibility lawsuit risk, and conversion penalty all in one design decision.
Forms break first on mobile
Long forms, narrow inputs, missing input modes, no autofill — the first thing to break on mobile and the easiest to fix in design.
Services
Six things a responsive engagement ships
Mobile-first key templates
Home, service, pricing, blog, contact — designed at 360px first, expanded to desktop. Reviewed on a real phone before sign-off.
Sticky mobile CTA bar
Phone-tap and "book now" thumb-reach pattern. Recovers conversions desktop-mindset designs leave on the table.
Mobile-first navigation
Hamburger or bottom-tab nav, primary action visible, anchor-link TOC for long content. Desktop nav expands, not replaces.
Form input UX
Correct input modes, autofill, error-on-blur, mobile-friendly field grouping, sticky submit, accessible error messages.
Image + media responsiveness
Different image sources per breakpoint, mobile-optimised aspect ratios, video that plays inline (or does not play at all on mobile).
Accessibility on mobile
44px+ tap targets, focus visible on tab + touch, screen reader friendly headings + landmarks, no scroll traps.
Breakpoints
Breakpoints + viewports we test
Every responsive engagement is tested across at least 5 viewports on real devices. The matrix below is the default.
| Viewport | Why we test it | |
|---|---|---|
| 320px (iPhone SE / small) | Width | Smallest common phone — most fragile layout |
| 375px (iPhone 12/13/14) | Width | Most common iOS viewport in service-business traffic |
| 414px (large iPhone) | Width | Default for Pro / Plus models |
| 768px (iPad portrait) | Width | Tablet tipping point — table vs card layout decisions |
| 1024px (iPad landscape / laptop) | Width | Where desktop layout typically starts |
| 1440px (laptop / desktop) | Width | Reference desktop viewport |
Foldables (Galaxy Z Fold, Surface Duo) and ultrawide (2560px+) are spot-checked on request. Landscape phones tested on every page.
Process
Six-stage responsive process
Audit current state
Real-device audit on top templates, CrUX data, mobile session replay if available. Output: prioritised issue list.
Mobile-first IA + key pages
Sitemap reviewed for mobile, key pages designed at 360px first.
Component-level redesign
Navigation, hero, forms, sticky CTA, footer — redesigned for thumb-reach and screen-reader use.
Implementation
Mobile-first CSS, responsive image sources, input mode + autofill, font + image performance.
Real-device QA
iOS + Android + iPad on real hardware. Browser stack for legacy + edge cases. Sign-off before launch.
Launch + monitor
Live Field data monitoring on mobile metrics, weekly check for 30 days, hotfix as needed.
Performance
Mobile performance constraints we design against
A mobile-first build has tight performance budgets that drive every design and engineering decision. Total JS budget above the fold on the LCP path: under 170 kb gzipped on key templates. Image budget per page on mobile: under 800 kb across all sources. Font payload: under 80 kb after subsetting.
INP on real interactions stays under 200 ms — and the easiest way to keep it there is to be honest about third-party scripts. Most "performance retainer" work we do is just removing chat, A/B and heatmap scripts that should never have shipped on mobile in the first place.
CLS budget on mobile is strict: under 0.05 on smallest tested width. Every image and embed has explicit width / height. Fonts swap with `size-adjust`. There are no layout shifts after first contentful paint.
These budgets are enforced in CI on every PR. A regression beyond the budget blocks merge until a real engineer signs off.
Portfolio
Recent mobile-first responsive work
Scope
Standard scope of a responsive engagement
Real-device audit
iOS + Android + iPad on top templates. Documented issue list with severity.
Mobile-first redesign
Key templates designed at 360px first, signed off on real phone.
Component-level updates
Hero, nav, forms, sticky CTA, footer redesigned for mobile.
Performance budgets
JS / image / font / INP / CLS budgets enforced in CI.
Accessibility pass
Tap targets, focus, screen reader, contrast all WCAG 2.1 AA on mobile.
Cross-device QA
5+ viewports on real hardware, multi-browser, landscape included.
Sticky CTA + form UX
Sticky bottom bar + form inputs optimised for thumb-reach.
30-day monitoring
Mobile Field data dashboard, weekly check, hotfix included.
Common responsive design questions
Our site is "already responsive". Do we need this?
Almost every site is "responsive" in the sense that it scales. The question is whether the mobile experience was designed for, or just resized for. We can do a free 30-minute mobile audit and tell you — usually the answer is "lots of low-effort wins available".
How long does it take?
4–8 weeks for a responsive engagement on a typical 30-page service-business site. Larger or more complex sites run 8–14 weeks.
Will this hurt our desktop layout?
No. Desktop layout is the larger-screen expansion of the mobile layout. Done well, desktop gets cleaner, not worse.
Can you do mobile-only changes without a full redesign?
Yes — for sites that recently launched and just need mobile improvements, we scope a 2–4 week "mobile sprint" rather than a full responsive engagement.
Do you test on iPad and tablets?
Yes — iPad portrait + landscape are part of standard QA. Foldable + ultrawide on request.
What about apps?
For native mobile apps see /design-development/mobile-app-development. Responsive web design and native mobile are separate engagements with different deliverables.
Ready to fix mobile?
Start with a free 30-minute mobile audit. We will test your top templates on real Android + iOS devices, identify the conversion-blockers and write back with a prioritised list — usually within 3 business days.
Related services
Explore related services
Website Design
Connect design, development, and SEO into one growth program.
Web Development
Connect design, development, and SEO into one growth program.
Page Speed Optimization
Connect design, development, and SEO into one growth program.
SEO Website Design
Connect design, development, and SEO into one growth program.
Next step
Get a Free Mobile UX Audit
Start with a free mobile UX audit. SeoMata will test how your site behaves on real iOS and Android devices, identify where layout breaks or speed kills conversions, and prioritize the responsive fixes that matter most.