How to design a beautiful, functional mobile website

tweet share share pin email

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?

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

You'll also like: 45+ Top tools for freelancers & solopreneurs

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:

  • 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.

You'll also enjoy this episode of our new podcast...

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 omgthisisalongURL.com feels like a monstrous task. Then you realize you typed in omgthosisalongURL.com. *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:

tweet share share pin email
About April Greer

April is the Director of Projects at Reliable PSD, a design-to-code company for designers, by designers. She’s the glue keeping everything together, organized, and right on time, and giving everyone a fantastic experience while she does it.

 

Leave a Comment

*

Turn your one-time paying clients into recurring revenue.

Learn how 4 solopreneurs built passive income models that changed their business—and how you can too. Just enter your email below and get instant access to our free guide.
Email address
Secure and Spam free...