Update: June 2011. Check out my free guide to building your own mobile friendly page for your small business site.
You can’t ignore it any longer.
The mobile internet is here. People are using their mobile phones to visit sites on the internet. Mobile browsers are hitting the mainstream.
How many people are browsing with mobile browsers?
Try 50 Million of them. And the number is growing every month.
Which means that people are definitely visiting your site from their mobile phones, with mobile browsers.
Here’s the question you need to ask yourself:
What does a person using a mobile browser they see when they call up your website?
(Hint: It’s probably not good.)
Now, I could show you pictures all day about how mediocre other people’s sites are when viewed on mobile browsers, but the only site you really care about is your own. That’s natural.
So let’s find out what your site looks like.
First, though, you’ll need to understand that this exercise is not going to give you a 100% accurate result. With so many different phones running so many different operating systems and mobile browsers, the best you can hope for is an approximation.
But an approximation can be useful. For example, which of these two versions of Wikipedia would hold your interest?
The first image is what most websites look like on mobile. You can use the site, but not well.
The second image shows a mobile optimized site. You can read the text! Which would you rather have?
Here’s how to check out your own site:
Visit http://www.opera.com/mini/demo/ (but don’t click just yet; there are a few things I want to explain)
This site shows you a virtual cell phone running the Opera Mini mobile browser. This mobile browser isn’t on every smartphone, but it’s pretty representative. If your site looks great on Opera Mini, it’ll probably look great on other mobile browsers. If it doesn’t, it probably won’t.
The best thing about this demo site is that you don’t have to download anything. If you do an Internet search you’ll find many different mobile browser emulators available, but most of them require a download. Many are geared toward professional developers, and require not only that you download software, but also that you know how to extract, configure, and run things from the command line. Not worth the trouble!
Here’s how to use the Opera site:
1. Call up the site. If the site doesn’t display a virtual cell phone screen, try a different browser. (Firefox works.)
2. Click the “accept” button. (This step took me a while to figure out. Probably I should have read the instructions!)
3. Enter your URL in the mobile browser:
4. Look at the results.
5. Cringe.
6. Whimper. (Optional)
If your site looks like this one, that’s totally typical:
The good news is, we can fix this.
As I warned above, this image of your site is not 100% accurate, but it will give you a good idea.
Let’s contrast this with a site that has been (minimally) designed for mobile. This is just a test site, FYI, not a real live version.
Notice any difference?
Other emulators:
If you’re running on Mac, there’s a decent application that’s worth downloading to see how your site looks on an iPhone. It’s called iPhoney, and you can get it at http://sourceforge.net/projects/iphonesimulator/. It’s interesting, but not perfect.
On Windows, you can download any number of simulators from Microsoft and manufacturers like Nokia.
But you shouldn’t waste your time. The simulator above gives you a good enough idea of what people see.
Next steps:
If you’re running a blog in WordPress, there are several plugins to “mobilize” your site. Take a look at http://ielectrify.com/design/wordpress-mobile/ for a rundown on the different options.
If you’re a regular small business owner with a regular website, check out my free guide to building your own mobile friendly page for your small business site
I have quite a bit more to say about mobile-friendly websites for small businesses. If you want to be sure to stay in the loop, sign up for my newsletter in the sidebar.
(If you’re like me you’re fully confident right now that you’ll remember to check back for the next installment in a few days, but you’re a busy person and it’s probably going to slip your mind. So do yourself a favor and sign up. It’s painless and there’ll be tons of value over the long term. Plus you get my free report on fixing up your website.)
You can also:
- Tell your friends about this post.
- Share it on social networks (tweet button works great, so does Facebook share, and more buttons are below)
- Ask questions in the comments.
(Photo credit for head in sand man: jvh33 via Flikr)
SEO help from the ScribeSEO plugin. Check it out for yourself.













{ 12 comments }
Thanks for this Joe – really helpful stuff to know. I’ve been putting off looking at my site because I just haven’t had the time to look, let alone change anything. You’ve made me curious enough to check it out now!
Looked.
*wince*
@Stacey: Your site actually looks a bit better on a real iPhone than on the simulator.
Advanced tip for the Opera Mini simulator: you can zoom in on text with the “enter” key if you see a little box around some of the content. This will make the text readable (at least a little bit of it). Presumably this is how Mini actually works on a phone (thought I don’t have a copy on mine).
Aye, aye, aye… my blog to-do list just got longer! Not surprised though, since I’ve seen what it looks like on my Blackberry. So, I signed up for your email list… looking forward to learning more. Thanks!
Yes, I was cringing, I admit it. Not as bad as some. I can’t wait to hear more about what we can do about it!
Great post, Joe. I’m passing this on. We really can’t ignore mobile any longer.
Hey Joe — let’s trade links – I just wrote a post about making your Wordpress mobile. Your writeup would complement what I wrote perfectly — and maybe vice versa. What’cha think? http://ielectrify.com/design/wordpress-mobile/
Definitely! I have WP Touch running on this site, and I’ve used Mobile Press on another site. Depending on your content, this can be a great solution. For example, people can easily read my blog posts on their phones. But they entirely miss the “branding experience,” (such as it is) and land on a site that doesn’t welcome or orient them. (There may be ways to improve this, but I haven’t put the time into figuring it out.)
For me, one of the key tasks with mobile is figuring out what your visitors actually need, and then delivering it to them. I’m not yet satisfied with my installation of WP Touch because there’s no clear mechanism for people to follow me or sign up for my newsletter.
But I do love how easy these plugins are to install.
Here’s a screenshot:
Really helpful post! Thanks, Joe. I don’t have much traffic yet, so I highly doubt anyone would use their phone to look at my site, but it’s good to be prepared. Using my ipod to browse online, I realized that most of the big blogs I read have mobile versions. But when it’s not a mobile site, you can just touch the screen to zoom in. I do that in order to access membership sites from my ipod.
Nice work! I’m going to install WPTouch on mine. I don’t believe there’s a way to incorporate a lot of the “good stuff” designers do — no CSS (boo), no Javascript and certain phones won’t display Flash or ActiveX components, so that pretty much strips out all the pretty functionality aside from graphics.
It kind of reminds me of when web pages first showed up. You had text, tables and images. Oh, and the blink tag
Plugins! Very good to know, adding thing for someone-who-is-not-me to get implemented.
This is pretty useful tutorial. Read few extra tips about How to Test Your Website Completely and Validate HTML,CSS , RSS, ATOM,Mobile compatibility
http://www.globinch.com/2010/05/01/how-to-test-your-website-completely-validate-htmlcss-rss-atommobile-compatibility/
{ 1 trackback }