× Terms of Use Privacy Policy

Take me back!! I want my CSS!! Click me to get back :)

×

READY FOR A NEW CAREER?

But not sure where to start? Find out if a tech career is right for you.

TAKE THE 3-MINUTE QUIZ

8 Secrets To Building Mobile Sites Users Love

mobile-design-main

“Oh, and of course it should look great on mobile.”

It was the end of my meeting with a brand new client, and we were about to wrap up our video call. We had spent an hour outlining exactly what he needed for his site: a Twitter feed, a page to showcase his freelance work, and even a feature to make it easy for clients to book his services.

At the end of our call, he tacked on that bit about mobile design.

It’s not the first time that’s happened. A lot of the time, a great mobile design for a new website is both implied and an afterthought.

We expect sites to look stellar on our phones, phablets, tablets, and tv screens—and that makes sense! It’s 2015 for crying out loud!

But when we think about our websites, we imagine them appearing first on desktop monitors and laptop screens and secondly on mobile devices, instead of the other way around.

Did you know that nearly 7 billion people in the world (95.5%!) have a mobile subscription (Mobiforge)? And with 60% of pageviews coming from mobile devices in 2014, more and more of those people are visiting sites on their mobile devices rather than on desktop screens (Small Business Trends).

That’s why it makes sense to make killer mobile designs a priority.

The mobile version of a site can make or break a business. Think about it. If you’re visiting a new city, Googling nearby restaurants, are you more likely to visit the Italian café with the easy-to-navigate menu and contact info, or the dumpling place with a mobile site that takes 5 minutes to load and has the tiniest font known to man?

Great! So mobile design is trés important. If you’re new to code, building a sleek and functional mobile site is probably pretty intimidating. But it doesn’t have to be! After all, if you’re a mobile user, you’re the ideal customer—you know what makes a mobile site a pleasure to visit (and what makes it a frustrating nightmare!).

Still, it’s helpful to have some guidelines to start from. Here are 8 elements of amazing web design to keep in mind every time you build a mobile site.

1. Large Buttons

No one wants to feel like their fingers are too big, and what is more frustrating than trying and failing to click a button? Big buttons guide users toward an action, so if you want someone to buy something on your site, a large “Buy Now” button makes sense. If you think your users are there to order something online, a “Place Order” button can draw their attention.

2. Minimalism

When users visit mobile sites, they probably don’t need to see ALL of a site’s content. The best mobile designs distill content down into its most minimal form. Feature the most important things you want your users to land on, and hide the rest away (either on the desktop version of the site or in hamburger or slide menus).

3. Negative Space

It’s easier to find what you’re looking for on a mobile site if there is a lot of empty space. The best mobile designs don’t fill every nook and cranny of the screen, but leave white or empty space to showcase important features (like buttons!).

4. Intuitive Design

Most smartphone users are accustomed to functions like swiping right to go to the next page and double-tapping to zoom in. Great mobile designs take advantage of these intuitive ways of interacting with a device.

5. Logical Flow

When you visit a mobile site, chances are, you have a specific purpose. The best mobile sites include a couple logical paths that users can follow, so that if someone visits a site to find a contact number, for example, it only takes a few obvious steps.

6. Integrated

Mobile users usually have a lot more going on than just a web browser. They move quickly between social media, email, and camera apps, for example. The best mobile designs make it easy for users to to jump from the site to an external app, like Twitter or Calendars, for example.

7. Easy to Navigate

Mobile screens are small (obviously), and getting around them is a lot different than clicking buttons on a mouse. The best mobile design layouts make it easy for users to move throughout the site, either by using intuitive movements (like swipes and taps) or by including arrows and menus that guide a user through the site.

8. Fast

Look, mobile users are in a hurry. The best mobile sites aren’t bogged down with too much information. Users don’t want to wait around for a bulky, overburdened site to load. So make sure image file sizes aren’t huge, and that the CSS is optimized.

And if you need some inspiration from mobile sites that are killing it, download the 8 Secrets Behind the Best Mobile Design below—it includes 71 examples of actual sites that look amazing across devices and stick to the tips above!

Your email address will not be published.

5 comments

  1. DB107 Replied

    What a great collection of sites in the guide. A great demonstration of what is possible with good planning, decision making and editing.

  2. RJay Replied

    In case I’m not clear I just want to say I am a big fan of Skillcrush.. What I would like to know is how to actually code a responsive mobile website from scratch. All I know is HTML, CSS and good graphic design. How do I build a responsive site from scratch? Thanks

    • SarahSpencerMusic Replied

      Start learning about Media Queries. :) They’re bits of CSS that change styles based on how wide the browser window it. 

      If you’re familiar with HTML/Css already, the Bootstrap framework is a great place to start using for responsive design. They make it real easy!

      Best of luck!

Want more articles like this?

Sign up to get the most recent tech news, tips and career advice.