How to design a beautiful, functional mobile website

Chances are, whether you’re building a site for yourself or your client, you’re planning to build it with responsive integration.

And with good reason:

  • Google includes this as a search relevance parameter.
  • Over 50% of worldwide mobile phone users access the internet via their phone.

But have you ever noticed that a lot of “responsive” websites are really terrible? Like maddeningly, frustratingly awful?

💔 Falling out of love with your clients? Trade some of your worst clients for the best companies in the world with SolidGigs, our premium weekly freelance job list & course library. Love your business again. Learn more »

(And I’m not just talking mom & pop operations.)

Now I know you’re probably already amazingly talented in web design, so I’m going to assume you’ve got the “beautiful” part down pat. 😉 I’m here to help with the user interface experience.

So to create a beautiful, functional responsive website for your target audience, design with these aspects in mind:

1) Know what users want to know

For each website it’ll be different, but often mobile users are specifically looking for:

Enter your email. Grow your business.

Submit your email below and join 45,000+ creatives who get our most helpful content via email every week. 100% free. Unsubscribe anytime. Privacy protected.

  • locations / directions
  • hours of operation
  • contact information
  • event schedules
  • quick “what we do” overview

Select the top 3 most-often-searched-for pieces of information and make sure they’re very obviously available on the home page or within 1 click.

Pro tip! Find out what your users are looking for with tools like JetPack site statistics (if you’re already using WordPress) and Google Analytics. Don’t forget to ask actual customers, too!

2) Go big(ger)

In almost all things mobile, go bigger, especially:

  • Links
  • Text
  • Buttons
  • Menus
  • Spacing between clickable elements

It is incredibly frustrating to have to use the “pinchable” zoom feature liberally in order to use a responsive website.

And it’s even more frustrating when you repeatedly have something akin to this conversation:

Mom: “It brought something else up. What’s Twitter? Why did it take me here?”

You: “I think you clicked the wrong thing. Let’s try again. Here’s how you go back…”

Mom: “This is why I hate computers!”

Pro tip! Test liberally. Things like:

  • Can you easily navigate to typical user queries?
  • Is the “View your cart” button too close to your Facebook icon?
  • Can you read the button text without zooming?

3) Make it fast

Animations, videos, and big, beautiful portfolio pictures are wonderful, rich, interactive elements of a desktop website that absolutely incense mobile users.

(Especially when they’ve got 15 seconds to decide whether to get off at this bus stop or the next.)

And you’re really going to infuriate the ones who visit all the time and know exactly where the link is going to be if only the darn page would load already! Which they often exclaim out loud to their friends real-time.

The bottom line: make sure your responsive site loads as quickly as possible. Cut out the fluff that slows it down, and if necessary, create responsive-only images.

4) Be concise

This is great advice for many aspects of writing, but especially so for responsive websites.

Here’s why:

  • Two average sentences (or one long sub-heading) may fill up the entire screen and make your site feel overwhelmingly wordy.
  • Chicken-pecking in feels like a monstrous task. Then you realize you typed in *grrrr*

Unless the point is to elaborate (i.e. blog, about us page, etc.), short ‘n sweet is the way to go.

What responsive issues really grind your gears?

Share your responsive design tips and pet peeves in the comments below!

Looking for more on web design?

Read more here:

Keep the conversation going...

Over 5,000 of us are having daily conversations over in our free Facebook group and we'd love to see you there. Join us!