The Screen Size Problem
You approve your new website on your office computer, everything looks perfect, and then you pull it up on your phone during lunch. The layout has shifted. Elements have stacked vertically. The menu has disappeared into a small icon.
Nothing is broken. This is responsive design working as intended.
What Responsive Design Actually Does
Responsive web design means your website adapts its layout based on the screen size viewing it. Rather than creating separate websites for desktop, tablet, and mobile, a single site reorganises itself.
On a wide desktop monitor, you might see three columns of content side by side. On a tablet, those become two columns. On a phone, they stack into a single scrollable column. The content remains the same—only the arrangement changes.
Why This Matters for Your Business
Depending on your industry, anywhere from half to three-quarters of your website visitors may arrive on mobile devices. For local service businesses, that percentage often skews even higher—people searching on their phones while out and about.
A site that looks impressive on desktop but frustrates mobile users creates real problems. Visitors leave. Potential customers call your competitor instead.
Common Responsive Adjustments
Here's what typically changes between desktop and mobile views:
Navigation: Desktop sites often show full menu bars across the top. On mobile, these compress into a "hamburger" icon (three horizontal lines) that expands when tapped.
Images: Large hero images may crop differently or reduce in prominence. Some decorative images might not display at all on smaller screens to improve loading speed.
Text columns: Multi-column layouts become single columns. This actually improves readability on narrow screens.
Buttons and links: Touch targets need to be larger on mobile than click targets on desktop. Buttons may appear bigger, with more spacing between them.
Forms: Input fields stretch to full width. Keyboards optimised for email or phone numbers appear automatically.
Testing Your Own Site
To see how your site behaves across devices:
1. Actually view it on your phone and a tablet if you have one 2. On desktop, narrow your browser window gradually and watch the layout shift 3. Ask friends or family to try finding specific information on their devices
Watch for problems like:
- Text too small to read without zooming
- Buttons placed too close together
- Horizontal scrolling (almost always unintentional)
- Images that load slowly or appear distorted
- Forms that are difficult to complete
Prioritising Mobile Experience
Many designers now work "mobile-first," designing the phone layout before expanding to larger screens. This ensures the most constrained view receives careful attention rather than being an afterthought.
When reviewing designs, ask to see mobile mockups early. If something works well on a small screen, it typically translates well to larger ones. The reverse is not always true.
Performance Considerations
Mobile users often have slower connections than desktop users. A page that loads instantly on office wifi might take several seconds on cellular data. Image optimisation, efficient code, and thoughtful feature choices all contribute to mobile performance.
Questions for Your Web Designer
When discussing a new site or redesign, consider asking:
- How will the navigation work on mobile?
- Can I see how the homepage will look on a phone?
- Have you optimised images for faster mobile loading?
- How will forms and contact methods work on smaller screens?
Understanding responsive design helps you participate meaningfully in decisions about your site, rather than being surprised when you check it on your phone.