Website Rescue Workshop on Orcas Island, January 30



Join me for a three-hour live workshop where I'll help you learn how to find and fix the problems on your website -- problems that are costing you customers and sales.

Special bonus if you sign up with a friend.

Click here

get started

Just how bad does your site look on a mobile phone?

by Joe on March 3, 2010

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?

Is your head in the sand about mobile marketing?

Take your head out of the sand

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?

Wikipedia for desktop

Wikipedia for mobile browser


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!)

Click the accept button

3. Enter your URL in the mobile browser:

Enter your URL

4. Look at the results.

5. Cringe.

6. Whimper. (Optional)

If your site looks like this one, that’s totally typical:

Typical results for mobile browsers

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.

Test site designed for mobile

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:

  1. Tell your friends about this post.
  2. Share it on social networks (tweet button works great, so does Facebook share, and more buttons are below)
  3. 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 }

Rachel Mathews March 4, 2010 at 1:07 pm

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!

Stacey Cornelius March 4, 2010 at 2:11 pm

Looked.

*wince*

Joe March 4, 2010 at 2:16 pm

@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).

Mary Flaherty March 4, 2010 at 5:39 pm

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!

SusanJ March 5, 2010 at 1:12 pm

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!

Lisa Wood March 5, 2010 at 2:39 pm

Great post, Joe. I’m passing this on. We really can’t ignore mobile any longer.

Sherice Jacob March 8, 2010 at 9:46 am

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/

Joe March 8, 2010 at 10:00 am

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:

websitemomentum-in-operamini

Kathleen K. O'Connor March 9, 2010 at 9:51 am

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.

Sherice Jacob March 12, 2010 at 1:23 pm

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 ;)

Sonia Simone May 1, 2010 at 12:11 pm

Plugins! Very good to know, adding thing for someone-who-is-not-me to get implemented.

Globinch May 1, 2010 at 8:02 pm

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 }

Previous post:

Next post: