Just as Twitter is a micro-blog version of regular blogs, allowing only "posts" of 140 characters, stripped down to the bare minimum, so
mobile websites are stripped down versions of "main" websites, showing only the most important information.
What constitutes "the most important information"?
In a nutshell, stuff the user needs to know.
Photos are gone. Graphics are gone. Ads are gone (though that is about to change, thanks to mobile advertising companies such as
AdMob). Everything is strictly "need to know".
What graphics should you "keep", when creating a mobile version of your website?
Well, human beings thrive on consistency and love repetition, so by all means, keep the same colors as your main PC site (even
though the layout will have to be different). If you have a "branded" business with a logo, it's a good idea to include a small version of
your logo on your home page. And pay particular attention to navigation.
(Remember, people are going to be accessing your information on tiny browsers - often while multi-tasking (a polite way of saying
"driving".)
One of the most important items to include? Reassurances about security, if your mobile website visitors are going to be doing any
e-trade.
One other thing to remember about many mobile devices: They don't like JavaScript, so your standard Google Analytics won't work.
You can try out a commercial service s but this is where AdMob Analytics really comes into its own. (It's free, too - as is motally.com!)
And if the thought of learning Tiny XHTML (the latest mobile website coding language) turns you pale, you're now able to download 40
free 1-column website templates from Mashable - though it might help to know that, in spite of varying screen sizes, the accepted
standard for mobile screen design is 240 X 320.
Meanwhile, forget 3G, Blackberries and SmartPhones - the next greatest thing is going to be the iPad, with a 9.7" screen, entirely
accessed through touch. (No, not the "iPod" - the "iPad", running on the same operating system as the iPhone (which should mean
you'll be able to access all the same apps!) I had a look recently at pictures of the first versions.
My thoughts?
Who knows... Maybe this time next year, we'll all be designing bigger mobile websites again (to fit in all that advertising!)
Monday, June 7, 2010
Mobile Website Branding
If you are focused on branding your business, remember that your mobile website can help - or hurt - this process.
What is "branding" exactly? The practice of creating an instantly recognizable site, logo, color scheme or any other visual "cue" that helps viewers identify it instantly with your product or business.
If you've set things up properly, the advantages you can expect to reap from branding are:
Your customer knows who you are and what you're about
What to expect in quality, service and price
Whether or not he is your favored target market (and if he is, he tends to stay loyal!)
You need a strategy, if you decide to focus on branding. You need ideas and methods to keep your sites and products in front of the public eye.
Coca-Cola's distinctive red-and-white colors are as much a part of its branding as its actual logo. Even when small details change, the overall feel stays the same.
The Coca-Cola polar bears are instantly recognizable as part of that brand. Their graphic representation taps into 2 key elements of strong branding:
- Consistency
- Repetition
Even though you don't want heavy graphics with a mobile website, small graphic elements that instantly remind people of your brand will work well. Allowing your branding to remain even through your mobile sites ensures:
1. Potential customers think of you, the moment they see those graphic elements on their mobiles
2. Potential customers know instantly what they're going to get - they develop either a positive or negative emotion when they see your name or logo
3 Repetition of positive feelings brings trust - and a willingness to entertain your offers
4. Trust brings purchases - and develops repeat customers, who remain loyal for as long as you remain consistent
So don't neglect your branding (if that's relevant to your business strategy) when you decide to go mobile.
It can help boost your credibility more than you might ever realize, or think!
What is "branding" exactly? The practice of creating an instantly recognizable site, logo, color scheme or any other visual "cue" that helps viewers identify it instantly with your product or business.
If you've set things up properly, the advantages you can expect to reap from branding are:
Your customer knows who you are and what you're about
What to expect in quality, service and price
Whether or not he is your favored target market (and if he is, he tends to stay loyal!)
You need a strategy, if you decide to focus on branding. You need ideas and methods to keep your sites and products in front of the public eye.
Coca-Cola's distinctive red-and-white colors are as much a part of its branding as its actual logo. Even when small details change, the overall feel stays the same.
The Coca-Cola polar bears are instantly recognizable as part of that brand. Their graphic representation taps into 2 key elements of strong branding:
- Consistency
- Repetition
Even though you don't want heavy graphics with a mobile website, small graphic elements that instantly remind people of your brand will work well. Allowing your branding to remain even through your mobile sites ensures:
1. Potential customers think of you, the moment they see those graphic elements on their mobiles
2. Potential customers know instantly what they're going to get - they develop either a positive or negative emotion when they see your name or logo
3 Repetition of positive feelings brings trust - and a willingness to entertain your offers
4. Trust brings purchases - and develops repeat customers, who remain loyal for as long as you remain consistent
So don't neglect your branding (if that's relevant to your business strategy) when you decide to go mobile.
It can help boost your credibility more than you might ever realize, or think!
How To Redirect Visitors to your Mobile Website
How To Redirect Visitors to your Mobile Website
Facebook and Twitter are two of the most user-friendly sites on the mobile web - and that's great news for those who are going mobile with their websites, because it means people can right-click on bit.ly links in Twitter - and be automatically taken to a mobile version of your site, if they're accessing it from Twitter.
The best way to accomplish this is to set up redirects, so that whenever a user is detected on a mobile, it goes straight to the mobile version of your site. There are several ways to do this, all based on detecting browser screen size.
The easiest method I've seen comes from justtechnika.com, and involves inserting a small piece of JavaScript code on your main website, "anywhere between ([] and [])". (I'd recommend right at the bottom of your page, so as not to interfere with search engine bots and site SEO.) I tried the piece of code provided - and it worked! I don't have permission to reproduce the code - I only found it today, and there's been no time to contact the blog owner, but you can find the article with the code snippet at the following link: http://justtechnika.com/articles/find-mobile-visitors-to-your-website-and-redirect-them-to-your-mobile-site/
Treat Your Mobile Website like A Tweet
So you've successfully redirected them to the mobile version of your website - now what?
If you're re-writing a shortened, condensed version of your main website, treat it like a Twitter tweet: Just hit the high points, and strip out all the filler. (One thing Twitter has done for us since its inception: Turned us into effective self-editors!) Think of your mobile site visitors like Twitter users, and you'll increase your targeting automatically: You have about 2 seconds to get to the point, and half that again to show them where they want to go.
Don't use bottom of the page or sidebar navigation - simple tabs at the top will do the best job (and people are becoming used to looking there for them.) Make sure your type fonts are large enough, and easy to read (Verdana and Arial are two of the most popular), and avoid "high tech" color combinations with dark backgrounds (unless your demographic is between 18 and 26): Most people find them hard on the eyes.
Make your site easy to bookmark - and remind people to do it (your "call to action".)
Above all, be consistent with every element. After all, you'd find even Twitter confusing, if the colors and layout changed every time you visited.
Don't worry - you'll soon get into the habit of "thinking mobile". But until then, remember this maxim:
Keep it short... and sweet.
Facebook and Twitter are two of the most user-friendly sites on the mobile web - and that's great news for those who are going mobile with their websites, because it means people can right-click on bit.ly links in Twitter - and be automatically taken to a mobile version of your site, if they're accessing it from Twitter.
The best way to accomplish this is to set up redirects, so that whenever a user is detected on a mobile, it goes straight to the mobile version of your site. There are several ways to do this, all based on detecting browser screen size.
The easiest method I've seen comes from justtechnika.com, and involves inserting a small piece of JavaScript code on your main website, "anywhere between ([] and [])". (I'd recommend right at the bottom of your page, so as not to interfere with search engine bots and site SEO.) I tried the piece of code provided - and it worked! I don't have permission to reproduce the code - I only found it today, and there's been no time to contact the blog owner, but you can find the article with the code snippet at the following link: http://justtechnika.com/articles/find-mobile-visitors-to-your-website-and-redirect-them-to-your-mobile-site/
Treat Your Mobile Website like A Tweet
So you've successfully redirected them to the mobile version of your website - now what?
If you're re-writing a shortened, condensed version of your main website, treat it like a Twitter tweet: Just hit the high points, and strip out all the filler. (One thing Twitter has done for us since its inception: Turned us into effective self-editors!) Think of your mobile site visitors like Twitter users, and you'll increase your targeting automatically: You have about 2 seconds to get to the point, and half that again to show them where they want to go.
Don't use bottom of the page or sidebar navigation - simple tabs at the top will do the best job (and people are becoming used to looking there for them.) Make sure your type fonts are large enough, and easy to read (Verdana and Arial are two of the most popular), and avoid "high tech" color combinations with dark backgrounds (unless your demographic is between 18 and 26): Most people find them hard on the eyes.
Make your site easy to bookmark - and remind people to do it (your "call to action".)
Above all, be consistent with every element. After all, you'd find even Twitter confusing, if the colors and layout changed every time you visited.
Don't worry - you'll soon get into the habit of "thinking mobile". But until then, remember this maxim:
Keep it short... and sweet.
Does your Blog Need a Mobile WordPress Plug-in?
If you have a blog, don't assume it will translate perfectly to mobile: Chances are, it has at least 2 columns, and runs ads, graphics and is set for a screen width that's (at absolute minimum) 760 px wide.
Besides, even if it was able to load in and emerge with a readable format, you need to remember that many people are paying heavily for each megabyte downloaded on their mobiles (not to mention for the time)... and they're not going to wait twenty minutes for all your graphics and plug-ins to load.
One superb and very user-friendly plug in is WordPress Mobile edition. If you can't find it by searching the plug-in section via your blog Dashboard, you can easily download it from WordPress.org's plug-in section. (It even allows comments - something that is often a problem.)
One word of caution: If you have one of the smaller mobile phones, avoid the popular Carrington theme recommended on the WordPress.org Wordpress Mobile editions page.)
According to WordPress.org, this plug-in works particularly well on Blackberries, iPhones, Androids, touch phones, all wireless, and PDA.
Advertising, Anyone?
If you want to display ads, the Mippin Mobilize plug-in (also found at WordPress.org) is a configuration-free plug in. It works by redirecting other mobile users to Mippin's rendering of your blog. This is a nice plug-in, because it scales photographs to conform to your mobile site visitor's screen width, and converts vides to 3G format.
Customization, Anyone?
If you'd rather customize your blog theme somewhat, a plug-in you might like is MobilePress. This one isn't available at WordPress.org, but you can find it on its home site, mobilepress.co.za/.
It's biggest benefit: Allowing you to use customized themes, and it also allows specific themes for the iPhone, as well as the Opera Mini browser and Windows CE Mobile. (Surprisingly simple to install!)
So there you have it: 3 fantastic plug-ins to help your WordPress blog go mobile.
(Perhaps the new mobile technology is going to end up being easier to adapt to than we think!)
Besides, even if it was able to load in and emerge with a readable format, you need to remember that many people are paying heavily for each megabyte downloaded on their mobiles (not to mention for the time)... and they're not going to wait twenty minutes for all your graphics and plug-ins to load.
One superb and very user-friendly plug in is WordPress Mobile edition. If you can't find it by searching the plug-in section via your blog Dashboard, you can easily download it from WordPress.org's plug-in section. (It even allows comments - something that is often a problem.)
One word of caution: If you have one of the smaller mobile phones, avoid the popular Carrington theme recommended on the WordPress.org Wordpress Mobile editions page.)
According to WordPress.org, this plug-in works particularly well on Blackberries, iPhones, Androids, touch phones, all wireless, and PDA.
Advertising, Anyone?
If you want to display ads, the Mippin Mobilize plug-in (also found at WordPress.org) is a configuration-free plug in. It works by redirecting other mobile users to Mippin's rendering of your blog. This is a nice plug-in, because it scales photographs to conform to your mobile site visitor's screen width, and converts vides to 3G format.
Customization, Anyone?
If you'd rather customize your blog theme somewhat, a plug-in you might like is MobilePress. This one isn't available at WordPress.org, but you can find it on its home site, mobilepress.co.za/.
It's biggest benefit: Allowing you to use customized themes, and it also allows specific themes for the iPhone, as well as the Opera Mini browser and Windows CE Mobile. (Surprisingly simple to install!)
So there you have it: 3 fantastic plug-ins to help your WordPress blog go mobile.
(Perhaps the new mobile technology is going to end up being easier to adapt to than we think!)
6 Picks for Best Mobile Websites
What makes a great mobile website? We all have our own criteria, but basically, many of the same qualities that make good sites on PC’s. They have to be:
- Reliable
- Quick to load
- Easy to browse
This latter requirement, however, differs slightly, when it comes to mobiles. “Easy to browse” means the navigation buttons can’t be too piddly-sized; shouldn’t be out of sight, and the amount of interaction (i.e. clicking and entering data) you have to do should be the absolute minimum.
And if it’s a mobile version of a well-established PC website, as many components as possible should be the same (or a simplified version), making it familiar and friendly to use.
Here are my top 6 picks for enjoyable and easy to use browsers for most mobiles. When so many sites still haven't caught on to
what's happening out in the real world, these sites are refreshingly easy to access - and use.
1. Topping the list and easily bagging the gold, m.facebook.com. You can basically use it exactly the way you would on computer.
2. Next, the silver medal goes to m.amazon.com. Amazon has espoused the credo: "Keep It Very, Very Simple". What this means in
actual fact is that (providing you already have an Amazon account set up) you can purchase goods directly, using your mobile.
3. The bronze medal goes to the competitor everyone loves to hate (secretly), google.com/xhtml - you can personalize it for your
mobile, as well as access weather, movie times, news, and local searches. (A GPS, though, it's not!)
4. This one's a personal favorite... Darren Rowse's Problogger.net has gone mobile (using the WPTouch plug-in, so you don't even have to lift a finger to view it properlly in your mobile screen.)
5. Don't want to wait till you get home to log onto Twitter? Don't want to miss any of the latest links? You can set yourself up for
m.twitter.com either on your PC or on your mobile. (Only drawback - pushing it further down the list - no Direct Messages.)
6. Last but not least, mobile Wikipedia (wapedia.mobi/en) - entertaining and handy if you want to look something up in a spare
moment - but it's last in my top six because Wikipedia data is not always reliable.
Notice that these are all large, mainstream sites. It's my hope that more and more unique, individual sites will go mobile in the near future.
And then I hope you'll write and suggest your own "local heroes".
- Reliable
- Quick to load
- Easy to browse
This latter requirement, however, differs slightly, when it comes to mobiles. “Easy to browse” means the navigation buttons can’t be too piddly-sized; shouldn’t be out of sight, and the amount of interaction (i.e. clicking and entering data) you have to do should be the absolute minimum.
And if it’s a mobile version of a well-established PC website, as many components as possible should be the same (or a simplified version), making it familiar and friendly to use.
Here are my top 6 picks for enjoyable and easy to use browsers for most mobiles. When so many sites still haven't caught on to
what's happening out in the real world, these sites are refreshingly easy to access - and use.
1. Topping the list and easily bagging the gold, m.facebook.com. You can basically use it exactly the way you would on computer.
2. Next, the silver medal goes to m.amazon.com. Amazon has espoused the credo: "Keep It Very, Very Simple". What this means in
actual fact is that (providing you already have an Amazon account set up) you can purchase goods directly, using your mobile.
3. The bronze medal goes to the competitor everyone loves to hate (secretly), google.com/xhtml - you can personalize it for your
mobile, as well as access weather, movie times, news, and local searches. (A GPS, though, it's not!)
4. This one's a personal favorite... Darren Rowse's Problogger.net has gone mobile (using the WPTouch plug-in, so you don't even have to lift a finger to view it properlly in your mobile screen.)
5. Don't want to wait till you get home to log onto Twitter? Don't want to miss any of the latest links? You can set yourself up for
m.twitter.com either on your PC or on your mobile. (Only drawback - pushing it further down the list - no Direct Messages.)
6. Last but not least, mobile Wikipedia (wapedia.mobi/en) - entertaining and handy if you want to look something up in a spare
moment - but it's last in my top six because Wikipedia data is not always reliable.
Notice that these are all large, mainstream sites. It's my hope that more and more unique, individual sites will go mobile in the near future.
And then I hope you'll write and suggest your own "local heroes".
Subscribe to:
Comments (Atom)