If you’re a creative small business owner or web designer, here’s a question: is your website truly optimized for mobile users, or is it just a shrunk-down version of your desktop site?
Most responsive websites fall into the latter category—and it’s costing them conversions. Today, I’m sharing the exact mobile design strategy we use with our clients at With Grace and Gold that’s contributing to some incredible results, including doubled revenue for a majority of our clients.
If you’ve been wondering whether your mobile site is actually working for you, keep reading. This strategy might just transform how you approach web design.
Why Responsive Design Isn’t Enough
Here’s the thing: responsive design is a great foundation, but it’s not the complete solution for creating an exceptional mobile experience.
Most responsive websites simply take the desktop design and shrink it to fit smaller screens. Everything stacks vertically, and while it technically “works,” it doesn’t create an experience that truly serves your mobile visitors.
The difference between a functional mobile site and one that converts comes down to intention. Are you designing for mobile users, or are you just making your desktop site fit on a phone?
The Separate Design Approach
Our strategy is simple but powerful: we design mobile and desktop separately. Not mobile-first, not desktop-first—we give each platform its own intentional design.
Here’s how we think about it:
For mobile visitors: We ask, “What does someone on their phone need to see and do?” Then we design specifically for that experience.
For desktop visitors: We ask, “What does someone at their computer need to see and do?” And we create that experience from scratch.
Why does this matter? Because mobile and desktop users have fundamentally different behaviors and needs.
Mobile users are often:
- Browsing during short breaks
- Scrolling with their thumb
- Multitasking or on-the-go
- Looking for quick answers
Desktop users are typically:
- Ready to dive deeper into content
- Comparing options side-by-side
- Reading longer-form content
- Settled in for a more extended session
When you design these experiences separately, you honor what each visitor actually needs in that moment. And that respect for user experience is what drives conversions.
Mobile Web Design Best Practices: Key Considerations
Let’s dive into what designing separately actually looks like in practice. Here are the specific elements we focus on for mobile design:
Touch Targets and Tap-Friendly Elements
On mobile, everything needs to be easy to tap with a thumb. This means:
- Buttons should be larger (minimum 44×44 pixels)
- Links need adequate spacing around them
- Interactive elements shouldn’t be cramped together
Have you ever tried to click a navigation link on your phone and accidentally tapped the wrong one? That’s poor mobile design, and it creates frustration that sends visitors away.
Mobile Navigation Design
Desktop navigation might feature a full menu bar with dropdowns and multiple levels. That rarely translates well to mobile screens.
For mobile, we simplify the navigation structure by:
- Using hamburger menus or alternative mobile-friendly patterns
- Identifying the most important pages mobile users need
- Making those priority pages easiest to access
- Reducing menu complexity for faster decision-making
Content Hierarchy for Small Screens
Desktop screens allow you to display multiple elements simultaneously—sidebars, columns, expansive hero sections. Mobile requires a different approach.
On mobile, we get intentional about:
- What content appears first
- What gets emphasized
- What might be condensed or removed entirely for mobile
- Creating a tighter, more focused narrative
The story you tell on mobile should be streamlined for quick consumption.
Optimized Imagery and Media
Visual content requires special attention on mobile:
- Hero images may need different cropping to maintain focal points
- Some desktop images might need to be swapped for mobile-optimized versions
- Autoplay videos on desktop might become static thumbnails on mobile (to save data and loading time)
- File sizes should be optimized for faster mobile loading
Streamlined Forms and Conversion Points
If you have contact forms or checkout processes, mobile users need maximum simplicity:
- Fewer form fields when possible
- Larger input boxes for easy typing
- Prominent, easy-to-tap submit buttons
- Minimal steps between user and conversion
Every bit of friction on mobile is a potential drop-off point. Streamlining these elements directly impacts your conversion rates.
Common Mobile Design Mistakes That Kill Conversions
When clients come to us for website redesigns, we consistently see the same mobile design mistakes. Here’s what to avoid:
Mistake #1: Text That’s Too Small to Read
Font sizes that look perfect on desktop often become nearly unreadable on mobile. When users have to pinch and zoom just to read your content, you’ve lost them.
This isn’t just a usability issue—it’s a credibility problem. Most visitors won’t bother struggling with tiny text; they’ll simply leave your site.
Mistake #2: Buttons and Links That Are Too Small or Too Close
We mentioned this earlier, but it bears repeating: if someone can’t easily tap your “Book Now” or “Add to Cart” button on the first try, you’re losing sales.
Inadequate button sizing and spacing is one of the fastest conversion killers on mobile sites.
Mistake #3: Not Testing on Actual Devices
Your website might look acceptable in your browser’s mobile preview mode, but that’s not the same as real-world testing.
Until you test on actual phones—preferably several different models—you won’t catch issues like:
- Images that don’t load correctly
- Alignment problems
- Pop-ups covering call-to-action buttons
- Touch target problems
- Loading speed issues
Desktop preview tools are helpful, but they’re no substitute for real device testing.
Mistake #4: Cramming Everything from Desktop onto Mobile
Just because you can technically fit all your desktop content onto mobile doesn’t mean you should.
Sometimes less is more. If your mobile homepage feels endless because you’ve stacked every single desktop section, visitors will bounce before reaching what actually matters.
Be selective. Prioritize what mobile users truly need.
Mistake #5: Ignoring Mobile Load Time
Mobile users are frequently on slower connections than desktop users. If your mobile site is weighed down with:
- Massive unoptimized images
- Excessive scripts
- Heavy design elements
…it’s going to load slowly. And slow sites lose visitors fast—53% of mobile users abandon sites that take longer than 3 seconds to load.
Optimize everything for mobile to keep the experience fast and smooth.
The Bottom Line: Mobile Users Deserve Better
Your mobile visitors deserve more than a shrunk-down version of your desktop site. They deserve an experience designed specifically for their needs, behaviors, and context.
When we started designing mobile and desktop separately at With Grace and Gold—giving each platform the attention and intention it deserves—we started seeing our clients’ results transform. A majority of them have doubled their revenue, and prioritizing the visitor experience, especially on mobile, is a significant factor in that success.
Next Steps: Improving Your Mobile Design
If you’re a web designer: Start approaching mobile as its own project, not an afterthought. Design with intention for the specific needs of mobile users, and you’ll create experiences that actually convert.
If you’re a business owner: Take a look at your website on your phone right now. Ask yourself:
- Is it easy to navigate?
- Is the text easy to read?
- Can you tap buttons without frustration?
- Does it load quickly?
- Does the content hierarchy make sense?
If you’re answering “no” to any of these questions, it might be time to rethink your mobile strategy.
The investment in proper mobile design isn’t just about aesthetics—it’s about creating an experience that respects your visitors and ultimately drives business results. And in today’s mobile-first world, that’s not optional anymore.
Want to learn more web design and brand strategy tips? Subscribe to the Brand It, Build It Podcast for weekly 10-minute episodes packed with tactical advice for creative small business owners and web designers.
Trusted by industry leaders worldwide, our customizable Showit templates are designed to create connection and results. Shop Now
Showit Website Templates
Done-for-you templates
A one-of-a-kind brand and website — thoughtfully crafted to reflect your goals and the experience only you can offer. Learn More
Custom Design Services
Custom Brand and Web Design
The must-have resource for Showit designers. Design more efficiently with our library of canvases and resources. Learn More



























































