Posts tagged ‘mobile website best practices’

January 7th, 2012

How to Build a Mobile Website

Gartner predicts that by 2013, the #1 way consumers will access the internet is via their mobile devices, so if you haven’t created your mobile website yet, there’s no better time to do that than the present.

If you work with an ad agency or a web design firm, they should know everything about setting up a mobile website. (If they don’t, it might be time to start looking for a new ad agency or web design firm.) Your ad agency or web design firm will probably use something called responsive design to make your website render properly on various mobile devices.

But if you’re a smaller company that doesn’t work with an outside firm, or if you’re a blogger using a platform like WordPress, there are some insanely simple ways to set-up and launch a mobile website. I’ve outlined the steps involved below.

How to Build a Mobile Website:

When building a mobile website, it’s important to simplify the navigation and make it thumb-friendly (for people like me who suffer from fat finger syndrome)

  1. If you use WordPress, install WPTouch. There are a number of good plug-ins you can use on your WordPress blog that will render your blog so that it looks good on a smartphone, but the one I’ve been using for a while is WPTouch from Brave New Code. They have a free version or a pro version, both of which work very well.  (Not an affiliate link.)
  2. Alternatively, add Browser Re-direct Code to Your Site: Ask your web designer to install a browser re-direct feature onto your website. That’s a line of code that “sniffs” out whether your visitor is coming from a large regular browser or a smaller mobile browser. In many cases, your visitors will be coming from a regular PC, but in some cases, they’ll be coming from a smartphone. With a browser re-direct feature, your website will be able to re-direct mobile users to the pages on your website that were set up to be viewed in a mobile browser. (I’ve included the line of code I use for my browser re-direct below.) If you just have a WordPress blog, you won’t need to worry about this step because your WPTouch plugin (or alternative) will take care of it for you. But if your site is a little more complex (like ours is), then you might want to use the re-direct code or both the re-direct code and the WPTouch plugin.
  3. Redesign Key Pages: In most cases, you’ll want your mobile website to be a smaller version of your regular website. After all, visitors are typically looking for a few key pieces of information — directions to your store, information about your services, special offers, etc. In our case, we set up the 60 Second Marketer iPhone website with 6 key pages — Videos, Blog, Go Mobile Book, Social Media Glossary, Go Mobile Website and Speaking.
  4. Follow Google’s Best Practices: Google has provided a list of their best practices for mobile marketing on HowToGoMo.com. Here they are in a nutshell: 1) Keep it Quick, 2) Simplify Navigation, 3) Be Thumb-Friendly, 4) Design for Visibility, 5) Make it Accessible, 6) Make it Easy to Convert, 7) Make it Local, 8) Make it Seamless, 9) Use Mobile Site Re-Directs, 10) Listen, Learn and Iterate (i.e., Execute).

If you’d like to take a look at two mobile sites I’ve designed and created, grab your smart phone, open your browser and visit 60SecondMarketer.com and GoMobileBook.com. They’ll give you a sense of how to keep things simple, yet functional.

All of this is covered in Go Mobile, so if you’d like an in-depth understanding of this and other mobile marketing topics, stop by your favorite bookseller and grab a copy.

P.S. Tim made a comment below that was so good that I wanted to add them onto the post. Here’s what Tim wrote. I support it fully: I’d add two practical things. 1. if you can’t read a page in the time it takes a barista to fix your latte, rewrite it. 2. If it takes the page more than a breath to load, simplify it. More so than on a desktop, users will try the next brand if you’re slow.

P.P.S. The line of code I use for my browser re-direct is found below. It’s installed before the </head>

<script>
if (btm_isMobile()) {
window.location = “http://m.60secondmarketer.com”;
}

function btm_isMobile() {
userAgent = navigator.userAgent;

if (userAgent.indexOf(“Android”) > 0) {
return !(userAgent.indexOf(“Android 1″) > 0);
} else if (userAgent.indexOf(“iPhone”) > 0 || userAgent.indexOf(“iPod”) > 0) {
return true;
} else if (userAgent.indexOf(“BlackBerry”) > 0) {
return (userAgent.indexOf(“Version/6″) > 0 || userAgent.indexOf(“Version/7″) > 0);
}

return false;
}
</script>


(Don’t forget to replace “http://YourMobileWebsiteURL.com” with your own URL)

Posted by Jamie Turner, 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.

February 21st, 2011

How To Setup Your Mobile Website For Success

To recap our last post about mobile media, we continued your education with The Five Things You Need to Know Before Launching a Mobile Paid Search Campaign. The information in that post provided insight on what we feel are some of the more important pieces to launching a successful paid search campaign.

This of course leaves the burning question of — Now that you’ve got a mobile search campaign expertly tailored and ready to go, is your mobile website up to par? Because as most marketers will agree, no matter how good of an ad you have, regardless of media type, you’re not going to be successful if your store, website, product or service is a piece of junk. (Read our blog from last Friday for more on website design best practices)

This sentiment becomes intensely magnified when you are attempting to communicate with your target audience on the smaller screens of mobile devices where people want specific information in a quick and easily digestible format. We know that we have alluded to it in previous posts, but today we will take a deeper dive on the topic of mobile websites.

Mobile Website Best Practices

One of the first things your business should determine when designing your mobile website is what is the main activity that you want visitors to take or what is the most important information they want from you. Your mobile website should not incorporate all of the functionality and content of your traditional website. If you try to do this, your mobile site will be difficult to navigate and probably take forever to load.

Instead, review your website analytics reports and look for which pages are visited and what actions are taken most often on your standard website. These will be the pages you want to feature prominently on your mobile site or even consider using for your mobile homepage. Take a look at the screen capture to the right of our own mobile website that we recently redesigned versus the old version. You can also navigate to it on your mobile — www.bkv.com. Notice the four prominently displayed buttons for “about us”, “what we do”, “our clients” and “contact us”. We’ve taken the four most important things that anyone would want to know about a service firm and made them our mobile website homepage.

Now that you know what the focus of your mobile website is, you can start to build around that centerpiece. The next thing to be aware of is that mobile sites, because they can be viewed on any mobile device with a web browser, must be kept simple and clean from a layout and messaging perspective. Try not to get overly wordy (like some of our mobile blog posts, sorry!) with the copy and messaging on your mobile site. Remember, mobile site visitors aren’t doing research. Also, try to use a layout that will scale well for different sized screens. While you may be working on a brand new iPhone, penetration rates for smartphones still hovers around one third of all US cell phone users; not everyone can scroll left and right, zoom, pinch and flick.

Depending on the activity that people will be partaking in when they are on your mobile site, they may need to input a search query, fill out a form or input their credit card information to make a purchase. Regardless of the specific task, you want your mobile site visitor to be able to complete it all on one screen. Where you may have multiple pages in a check out process on your standard website, try to use a scrolling feature so that all information can be captured on one page. Common knowledge amongst marketers is that the more steps required to complete a purchase or fill out a request form, the fewer the number you can expect to receive.

As mentioned previously, you want to avoid making your mobile website cumbersome to navigate and do what you can to make sure that it loads quickly. Even the most advanced mobile device platforms are still not that great at handling complex elements on websites. To solve for this, keep your use of graphics to a minimum and when you do decide to include graphics, eliminate any Flash elements. Mobile users have enough problems getting website to load that result from the networks they are on, so don’t add to their frustration with a mobile website chock full graphics and unique style sheets. If ever there was a place to follow the K.I.S.S. principle, its here.

The last thing task that MUST be completed and arguably the most important thing to do before launching the new version of your mobile website is to test it out. This might seem like a simple recommendation, because quite frankly, it is. However, because this is the simplest task of any that we’ve mentioned here today, its the most likely one to be overlooked.

The best way to go about testing your new mobile website is to navigate to it on several different types of mobile devices with web browsers and test the navigation, layout and functionality. Be sure to include tablets, smartphones and standard mobile phones. Remember, the majority of people don’t have smartphones. Also, there are a number of free mobile website emulators available on the web where you can test out how your mobile website will perform. These emulators let you see how your mobile website will look and function on a variety of mobile operating systems all from the comfort of your desktop browser.  We recommend using the emulators first as they can help correct for a number of sweeping errors and then move to testing on handsets to look for device specific quirks.

Summary

To summarize the aforementioned best practices for mobile website design:

  1. Focus on the customer – Design your mobile website around what your customers are currently doing most often on your standard website.
  2. Keep the layout simple and the content succinct – You want your mobile website to be easily and quickly read on a range of mobile devices.
  3. Use a scrolling feature – Making your mobile visitors click through multiple pages is not a good idea.
  4. Don’t use tons of graphics or Flash – Use of large graphics files or advanced media will slow down your mobile website to a crawl.
  5. Test! Test! Test! – Did we mention you should test your mobile website?
  6. For an example of a very well designed and thought out mobile website, read about Penny Saver USA’s new mobile site

Parting Thought

We hope that you are keeping up with our posts about mobile marketing and that the homework assignments and takeaways have proved useful.

Clearly there is a lot more that goes into launching and perfecting a mobile marketing program but the information that we’ve presented, and continue to present, should be a good jumping off point for you to have a meaningful conversation with your colleagues, or maybe your advertising agency, about ways to begin incorporating mobile into your existing marketing efforts. With that said, if there is a topic within mobile media you would like to know more about, please post a comment and we will put together a brief, yet comprehensive piece on the requested topic to the best of our abilities.

Posted by Matt Luber, Mobile Media Manager at the 60 Second Marketer and MBA candidate at Emory University’s Goizueta Business School.


November 30th, 2010

How to Set Up a Mobile Website in 4 Easy Steps

Are you interested in learning how to set up a mobile website?

Believe it or not, putting together a mobile website is actually pretty simple. Here are the steps we used in putting together the 60 Second Marketer iPhone website:

How to Set Up a Mobile Website

We designed to 60 Second Marketer iPhone website to be intuitive and easy-to-use. Go ahead, give it a trial run. Just grab your iPhone, open your browser and type in www.60SecondMarketer.com

  1. Ask Your Designer to Install a Browser Re-direct: Ask your web designer to install a browser re-direct feature onto your website. All this is is a line of code that “sniffs” out whether your visitor is coming from a large regular browser or a smaller mobile browser. In many cases, your visitors will be coming from a regular PC, but in some cases, they’ll be coming from a smart phone. With a browser re-direct feature, your website will be able to re-direct mobile users to the pages on your website that were set up to be viewed in a mobile browser. (An alternative that works for other mobile platforms like Blackberry and Android is to set up a separate site on a .mobi domain or an m. (m dot) sub domain.)
  2. Redesign Key Pages: In most cases, you’ll want your mobile website to be a smaller version of your regular website. After all, visitors are typically looking for a few key pieces of information — directions to your store, information about your services, special offers, etc. In our case, we set up the 60 Second Marketer iPhone website with 6 key pages — Videos, Blog, 100 Top Mobile Apps, Social Media Glossary, Bookstore and Speaking.
  3. Install Mobile Plugins for Your Blog: I use WordPress for my blogging platform. It’s a wonderful platform and very easy to use. They have a plugin called WPTouch that reformats the blog so that it’s mobile friendly. It’s a terrific Plugin and very easy to install.
  4. Upload your Website: That’s all there is to it. Oh, sure, there are a few twists and turns along the way, but creating a mobile website is really not all that hard. Go ahead, give it a try!

Why don’t you take a spin through the 60 Second Marketer mobile website? Just grab your Smart Phone, open your web browser and type in www.60SecondMarketer.com. You’ll automatically be re-directed to our mobile website.

Enjoy!

Posted by Jamie Turner, Chief Content Officer of the 60 Second Marketer, the online magazine of BKV Digital and Direct Response. You can order Jamie’s new book today by clicking How to Make Money with Social Media.