Design for Mobile: 10 Quick Tips

by on October 16, 2015

Design for mobile - 10 quick tips

Design for Mobile: 10 Quick Tips

  •  
  •  
  •  
  •  

Design for mobile - 10 quick tips

 

1. Include a Phone icon button next to your menu icon for quick communication.

Yes, this depends on the business you are in, but don’t get scared of letting people get at you. They won’t always use your quick contact details that should be available as much as possible, but these types of items give a deeper feeling of involvement and trust.

2. Call out your physical location with a map and ‘get directions’ button in your footer, or next to the call button if ‘coming in’ is the main action you want the visitor to take.

Your physical location is a huge trust factor as well, but if you’re a restaurant, a physical store, or an agency, keeping that ‘Get Directions’ button front and center on your website will really draw attention to your accessability. In this way you make people feel the closeness to you if they are in your city, and let’s them know they could ‘come right over.’ This is good even if they don’t need to visit, it’s that accessibility that gives a feeling of connection and increases rapport. Now that’s a good user interface!

3. Make search extremely prominent if your website is based around eCommerce, research has proven this is how people shop on their phones.

I touched on this in a recent article “9 Expert Tips for Mobile Commerce Experience” for Lemonstand, but search is massive on mobile. This can be right under your logo if your main goal is to sell product on your site. Visitors see this on Amazon, and expect from you as well.

4. Allow visitors to get to things quickly and choose ‘more info’ rather than trying to serve up tons of text content right away.

You don’t need to give the 500 word version of your product or service right away for people.

“If you can’t explain it simply, you don’t understand it well enough.”

-Albert Einstein

This is really more of a marketing tip, but you should be able to key on in the main reason people should care about your product in one sentence. What’s the core value proposition? Why should your best customer care about this? One or two sentences and the next action in a big button. If you can boil it down to this on mobile, you’re halfway to better conversions.

5. Look into your analytics, who’s coming in from what category of device? Use these percentages to spend time working on the category of device getting the most traffic, 2nd most time on the second category, etc.

I really had a hard time trying to design mobile first a couple years ago when mobile traffic was at 15-20% on many sites I worked on. It seems more reasonable now with mobile traffic often averaging 30% and higher. But still, guess what? Desktop is still bigger than mobile for most, so don’t neglect the desktop site. In the end mobile isn’t killing desktop, it’s growing but desktop traffic is staying pretty steady.

6. Don’t have separate content for non-mobile, and mobile users, as this is bad for SEO, and can frustrate your visitors who expect to not get a truncated version.

Perhaps you’re well aware but people don’t want a website without all of your content on your phones and tablets, they want the whole thing. They want their cake and to eat it too. Just 5 years ago, many people had mobile websites that gave people the high-level 10 second version, but people were frustrated with the crusty half version of the website. Also Google cares about consistency in your content on mobile and desktop.

7. K.I.S.S. – Keep it simple stupid.

Even if you just have to keep this in mind when creating your desktop version, it will help when you get to mobile. I actually do suggest designers tackle some websites from a mobile perspective until they understand that things have to be simple. I suppose I’m circling back, but the prioritization that the mobile-first idea requires you to confront, helps keep everything dead simple. This is why flat design and veritical scrolling sites with less content in each section have gained popularity.

8. Don’t be afraid to use iconography.

Always consider that the icon should be pretty self-explanatory to the visitor, but use these where you can, so that you quickly draw the visitors eye to an action. A phone icon of course is a great example, an envelope for ‘send us a message,’ three bars for ‘menu.’ This doesn’t mean that you can’t include text along with the icon, it’s just another opportunity to draw the eye and give people quick clues to function.

9. Pretend you have big fat fingers and make sure your fingers can tap them buttons, don’t stack links on top of each other closely.

Google will call you on this, as it’s site speed tool gives you a rating on User experience as well as site speed. The adult finger they suggest can get at a button that 48 CSS pixels by 48 CSS pixels. So you’re buttons should be this size. In the same vein, lists where the items are super close together might cause you to tap the wrong one by accident. So not only is it good for your visitors to follow this modern mobile convention, but Google will possibly show you further down in the rankings if your website doesn’t size clickable list items and buttons correctly for ease-of-use.

10. Make sure your key call to action is still clickable on mobile without scrolling, but allow the story to enfold vertically. Give them one more call to action at the end of the page.

Let them get at the main action you want them to take quickly, and give them the key action at the bottom as well so that you get the most out of your website, mobile or otherwise. You don’t need to stuff everything up towards the top of the site however, and in fact it would be messy if you did. Visitors expect longer scrolling sites these days as the modern limitations and responsive design have made this common.


  •  
  •  
  •  
  •  
Free Web Design Audiobook
  • Miguel Agawin

    Where are the buttons! (I’m on mobile.)

    • Tim Brown

      What buttons are you referring to? At the moment, I’m not trying to accentuate phonecalls or directions because I don’t have a physical space and can’t man the phone all the time, but I do this for the agency I work for.

    • Tim Brown

      I might have to add these, now that you called me on it though. :)

      • Miguel Agawin

        Whoops I must’ve deleted *share. I wanted to do so for LinkedIn but had to do it manually.

        • Tim Brown

          Haha, ok. I’ll think about adding easier share buttons! Thanks for the tip.

Ready to get started?

Get a free consultation now