If you work at a larger company with an ad agency or web design firm, they’ve probably already set you up with a good, functioning mobile website that uses something called Responsive Design to re-format your desktop site for a mobile platform.

If you’re a smaller business that doesn’t have easy access to an ad agency or web design firm, then your first step to building a mobile website is to read How to Build a Mobile Website on the 60 Second Marketer blog. It provides step-by-step instructions on how a small- to mid-sized businesses can easily set-up a mobile website.

Once you’ve got the hang of creating and developing a mobile website, you’ll want to take the next step which is to think through mobile web design best practices. With that in mind, I’ve included 9 mobile website best practices in the post below.

But before we dive into the 9 best practices, it’s important to keep one thing in mind – the person viewing your site is mobile. That may seem like a no-brainer, but you’d be surprised by how many people forget that simple truth. When someone is mobile, they’re expecting an entirely different experience from the one they’ll get on your standard website.

For example, a mobile visitor is typically looking for a few key pieces of information: directions to your office, a click-to-call phone number, or a map of your store locations. What they’re not looking for are lengthy staff bios, information about your corporate philosophy, or PDFs of your latest press releases.

With all that in mind, let’s take a look at the 9 Best Practices for Mobile Website Design that can help you create a site that puts your best foot forward.

1. Simplify Your Design: The first step in creating a mobile site is determining what content you’ll include. Given the restricted amount of screen space, it’s important to figure out what the key pieces of information your visitors will probably be looking for. A store locator? Probably. A “Contact Us” form with 13 different fields to fill out? Not so much.

It’s also important to keep the steps involved in going from entry point to purchase as simple as possible. Fandango does a great job of this by eliminating much of their non-essential content to quickly bring their consumers what they want: movie times.

Better still, Fandango completes the sales cycle by providing a QR code that acts as a mobile ticket for the purchaser. Just bring the phone to the theatre and have them scan the code there – it acts as the purchaser’s ticket.

2. Analyze Your Site Layout: Mobile web pages will load slower than traditional web pages, so it’s important to keep the number of pages to a minimum. In addition, users won’t have the patience to click several pages deep on your site. Given that, it’s important to keep the site layout as streamlined as possible.

One technique I encourage people to use is to think like Steve Jobs. As you know, Jobs is famous for creating user experiences that are streamlined and intuitive. Put on your Steve Jobs Hat to remind you to keep things as streamlined as possible. By doing so, your visitor will have a better experience when they’re on your site.

3. Match the Branding Elements from Your Desktop Site to Your Mobile Site: Even though your mobile site will be much more streamlined than your standard site, you’ll still want to incorporate the same branding elements on both sides of the equation. This is important for two reasons. One, a mobile site is a brand touchpoint and, like any other property, should reflect and promote your brand essence. Two, for users who are already familiar with your company, a similar design will make them feel like they’re visiting an old friend, which is an important consideration for your most loyal customers.

The 60 Second Marketer site uses the same bright color palette and iconography in both the standard and mobile websites. The result is that a user who is familiar with the standard site will have a similar familiar on the mobile site, too.

4. Utilize White Space: When designing any website, it’s a natural tendency to cram in as much information as possible. But, fight that urge. Not only does white space give a cleaner, more sophisticated appearance, it also ensures that users can easily click the button they’re aiming for.

5. Avoid Flash or Java: The obvious reason for avoiding Flash is that Apple products do not support Flash and have declared that they have no intention to do so in the future. Because iPhones make up about 30% of the smartphone market, a significant portion of your audience may not being able to access your content if you use Flash.

6. Reduce The Amount of Text Entry Necessary: Do you suffer from Fat Finger Syndrome, which makes it difficult to use a smartphone keyboard? Most of us have trouble typing on tiny keyboards. When possible, use drop down menus, checklists and pre-populated fields as a means of data entry. This helps minimize the challenges people when typing text onto a smartphone.

Take a cue from FedEx’s mobile site. Even though a lot of information has to be entered into the site to accomplish the user’s goal, their use of checklists and dropdown menus cuts down on the amount of text a user must enter.

7. Do Not Use Pop Out Windows: Navigating between multiple tabs and browser windows is more difficult on mobile and can cause slow load times. If you need to open a new browser window, make sure you alert your user so that they know how to navigate back to the original page.

8. Redirects:  Once your site is designed and ready to go, make sure to put redirects in place that will sniff out when a visitor is using a mobile device and direct them to the mobile optimized version of the site. (For more on website re-directs, read How to Build a Mobile Website which explains them in detail.)

Once your redirects are in place, any mobile user that types in your web address or clicks on a link in a search engine will be sent to the mobile optimized version of your site.

9. Allow People To Visit the Full Site: You’ve worked hard on your mobile site. You want people to see it and you want people to love it. But the fact of the matter is, even if you’ve done a good job of paring down your content, there will likely be someone who wants information you’ve chosen not to display. As such, make sure you include links on multiple pages that allows the user to return to the full version of the site. You can see this feature on most mobile websites including sites like USA Today, The Home Depot, and Target.

Mobile websites are a new landscape for most marketers, so designing and building them can be a bit of a challenge. However, mobile sites also bring an awesome opportunity to showcase your brand and your creativity. As long as you keep the user’s needs top-of-mind, stay true to your brand, and follow a few simple rules, you will have the hang of it in no time.

About the author: Jamie Turner is the Founder of the 60 Second Marketer and co-author of “How to Make Money with Social Media” and “Go Mobile.” He is also a popular marketing speaker at events, trade shows and corporations around the globe.

var dd_offset_from_content = 40;var dd_top_offset_from_content = 0;var dd_override_start_anchor_id = "";var dd_override_top_offset = "";

Tuesday, December 18th, 2012, 3:07 pm   |   Mobile Marketing, Mobile Website Best Practices  |  RSS feed Pinging is disabled. But you can skip to the end and leave a response.

• Eric

  Thanks Jamie, good solid list for a mobile website strategy. Information architecture is critical for content selection and calls to action. The analytics and audience analysis will certainly help inform this. We have also found that a responsive site helps to cut down on managing multiples sites (desktop, tablet, and smartphone). Although the initial build out takes a little longer the longterm benefits are worth it and easily managed with CSS. Here’s a training course your readers may be interested in (this is not related to us) http://www.responsivewebdesignblog.com/CreatingResponsiveWebDesign

  Merry Christmas!

• http://www.60SecondMarketer.com Jamie Turner

  Hi, Eric — Thanks for your kind words about the post. It sounds as if you know a good amount about responsive design, which is the best approach for something like this. Would you be interested in writing a guest post on that topic? If so, our writer’s guidelines can be seen here: http://www.60SecondMarketer.com/SubmitContent

  Thanks!

  Cheers,
  Jamie

• Christopher Dubay

  Hi Jamie,

  First I want to say Thank you, You were my inspiration for starting my small local mobile marketing business.

  I would like to see a little more depth on Mobile Website Design, perhaps another article containing pics of the different graphic design elements. As a builder of mobile websites myself, I must report that mediocrity has found its way into mobile design in just four short years. the plethora of Horizontal navigation bars is everywhere. What as a designer and consumer I dislike about it is this: 1) Nothing stands out in the Menu. 2) They are not Thumb size for easy use. 3) They are not customizable for icon images which display their purpose. i could go on and on.

  I would be interested in your opinion now, ( two years later after the publishing of your Article on Mobile Website creation) concerning WP as a mobile platform. By this I mean that Small business is now asking for additional pages for contact, scheduling, coupon generation, photo gallery, etc. WP just seems to be too slow for this workload. I have switched to straight HTML creation. What is your experience?

• http://www.60SecondMarketer.com Jamie Turner

  Hi, Christopher –

  First of all, thanks for the compliment. I’m honored and flattered that something I did or said inspired you to go into the business.

  Regarding the use of WordPress as a mobile platform, I still think it works great for small businesses that need simplicity or ease. But for more complex sites, I agree with you — it’s not idea.

  I use HTML for the 60 Second Marketer mobile site but include a link to our blog which then uses the WP Touch Plug In to convert the blog into a mobile format. So, it’s a blended approach.

  That said, I’m having a heck of a time getting my site to render properly on Android devices. For iPhones, everything is good, but Android doesn’t currently work.

  We’re trying to isolate the issue and should have it resolved soon. I’ll keep you posted. In the meantime, keep up all your good work. And thanks again for your compliment.

  Cheers,
  Jamie

---

---