How to Build a Mobile Website

3.6K Flares Twitter 33 Facebook 3 Google+ 4 LinkedIn 3.5K Pin It Share 1 Buffer 5 3.6K Flares ×

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.

Print Friendly