12 Rules of Effective Mobile Design

more than half of mobile phone users own smart phonesAnd 90% of smart phone users access the web from their devices.

Do the math, and that’s … a lot of people accessing mobile web sites.

What’s more, smart phones users increasingly user their devices to decide whether to visit a business. Most mobile users will not return to a website that is not mobile friendly, and unfriendly sites receive lower mobile search rankings.


So how accommodating is your mobile presence to this new reality?

The mobile version of your site needs its own design that takes into account not only reduced screen dimensions, but technical considerations affecting things like navigation. A good mobile developer can work with you to build your mobile presence in a way that it:

  • Is readable on a small screen
  • Has faster page-loads on mobile devices
  • Automatically detects mobile devices
  • Has improved mobile search ranking

To accomplish these traits we will incorporate our 12 key rules of mobile design, which include:

custom feature1. Design for your customers, not for you

Your mobile app and website is for your customers. Therefore, it helps to know the types of devices your target audience most uses, how they use them and where they most use them. Designing for your customers also means limiting the content you provide. Less is more. You may be tempted to build a complex site with several functions and abundant information about your company, but users will not enjoy the experience.

2. Grids, breakpoints and stacking

Since the advent of the printing press, every new medium has had its own design principles, templates and terminology. In the case of mobile, your site needs to adhere to grid patterns, breakpoints and a stacking strategy. Grids and breakpoints are the backbone of a responsive mobile design. And to ensure your content displays properly on a mobile device, you need to define how the content modules are going to stack and reorder themselves.

3. One column onlyhome screen shot

Smart phones allow you a small amount of space to use. Tablets have a little more, but many of these are getting smaller. The more columns you use in text, the smaller those words will be and the more difficult it will be for users to read. Stick with one column to maximize text size.

one column feature4. Lay off the graphics

As wired and wi-fi’d as the world has become, mobile users still find themselves in places where their service is spotty. It’s during these times that a graphic heavy mobile site will fail to load, which means you may have lost an opportunity to connect.

5. Simplified, touch-friendly navigation

People don’t have a mouse attached to their mobile device. Therefore, you need to offer simple and intuitive navigation with panels that a user can touch to get to the next screen.

6. Fewer wordsfewer words feature

Shakespeare said “brevity is the soul of wit” which is always a good policy in writing for the web, but even more so when considering copy for mobile device viewing. It’s just not that easy for visitors to read long blocks of text on a tiny screen. The guideline for mobile text presentation should be “short and sweet” – wherever possible consolidate sections into pages and pare down paragraphs into a couple of sentences.

7. Brand it

Your mobile website is an important part of your brand identity, and will become more so each day. Though you need to limit the amount of color and graphics, your app and/or mobile website still needs to reflect your identity.

8. Don’t make users type

Your mobile site or app is not the place to ask users to fill out a survey or form unless they can simply touch the screen to answer the questions. If you want to collect data from a mobile device, use multiple choice buttons instead of forcing users to type in free-form answers.

9. Limit layers

Layers are great when you’re tromping through the snow in an arctic climate. Too many on a mobile website or app hinder the user experience. We recommend two layers of navigation, and certainly no more than three on a mobile site. This allows users to find information quickly without bruising their index fingers from multiple tapping.

specials feature10. Font matters

Mobile devices have evolved enough that developers can be more creative with fonts and typefaces. Still, you need ensure users can read the content. You can probably be creative with headlines and subheads, while using more traditional fonts for text and body copy. At the same time, your font(s) should be appropriate for your content, properly licensed and optimized for mobile. Also consider your brand identity and whether specific types of font fit your image better than others.

11. Don’t drain their batteries

Remember the bad old days of dial-up Internet service when a few overzealous site owners would slap on heavy graphics, causing each page to take 10 minutes to load? How often did you return to those sites?

The same concept holds true with the limited battery life of some mobile devices. The more you work the processor of a smartphone or tablet, the more the battery will drain. If users start to notice the correlation between visiting your site and steadily losing juice in their battery, they may avoid your site. Therefore, keep the design simple enough to limit processing.

12. Test it

Will you remember all 11 of these tips plus the countless others that mobile experts give you? Probably not. But if nothing else, remember this one rule. Before you launch a mobile app or website, have objective third party end users who had nothing to do with its development give it a test drive. Based on their experience, you can tweak or overhaul the design before launching it to the masses. (See Rule #1)

I’m In Marketer is at your service

If you’re ready to mobilize your website, I’m In Marketer is ready to talk to you. We’ve been building successful mobile sites and apps for years, and we’ve only gotten better! With I’m In Marketer Mobile Design, the transition for your site will not be expensive or time consuming and the results will delight you. Just let us know the best way for us to reach you here.

Like It? Share It!

    Related Articles

    Learn More

    about our mobile apps & how they can provide true RO to your business.

    Watch Our Demo