Make Your Site Mobile Friendly – Take 2

ready.mobi

Note: this is a revision of the original post which was deleted at the site owner’s request. This post was re-created with a different site than yesterday’s post.

Via Twitter, I was asked a question that is on a lot of mobi Enthusiast readers’ minds: “I have a site that is NOT mobile friendly and I want it to be – suggestions?”

The Challenge of Making a Computer Website Mobile-Friendly

To answer the question, let’s look at some of the reasons a website is not mobile friendly, and in the process you’ll want to do the opposite to get the ball rolling. Thanks to Jay Ehret’s mobile web podcast we have a number of small business owners and marketing people joining us, so I will keep this as non-techie as I can. (Thanks again, Jay!)

Those of you who are reading on a computer can follow along and check out this site, but if you have a phone other than an iPhone, wait until you are on a computer instead because this site is going to jam your phone browser for sure: sibmira.com.

Look around: The site is an example of a professional theme on a dark gray background. It has graphical links across the top, a large photo of hands holding the world, and several small graphics and photos of people in business suits looking at mobile phones. Don’t let the small size of the photos fool you – they average 20 kb each in file size (also known as weight). There isn’t much text on the site.

Next, let’s take a look at the site on ready.mobi. Ready.mobi is a site that analyzes a given website for how mobile friendly it is. Here’s the bad news: Not only does the phone emulator on ready.mobi show a full screen of dark gray, but our example site scores the lowest possible, a 1 out of 5, and receives this message: “It will definitely display very poorly on a mobile phone. Your mobi.readiness score is calculated from the results displayed below. Failing tests and large page sizes both lower the score.”

Not only did it score a 1/5, it has 9 code compliance failures for a mobile site. The worst offenses for this site are: it uses tables for structure, it has large file sizes for graphics, and it uses nested tables. It could be a lot worse. Other sites have fails which include using pop up windows, form submit buttons, and iframes.

Next, let’s take a look at what the site would look like if it were transcoded, or recoded for use on a phone as-is. Go to mowser.mobi and type in your site. Well, you don’t have to, I did it for you already. Here are the resultsSibmira transcoded by mowser. Now the site looks long and skinny, and it might load on a mobile phone, but then again it might not. Using mowser.mobi the pieces of the table used to create the structure are stacked on top of each other. It’s not very attractive, is it? It has a lot of gray blocks and pictures sprinkled randomly across the screen. The pictures are still too large and too heavy, meaning the file size is too large. In my experience, I do better with graphics if I keep them under 10 kb. People without unlimited internet plans are paying to download these graphics and are waiting for them to load. Phone internet users aren’t a patient lot, so you want these graphics to load practically instantly.

Think about your site. Is this how you want it to look? Other sites with fewer graphics show up with a lot of text and a lot of scrolling down. With mobile internet sites, it’s important to distill your information down to the smallest bites and serve those to your users.

Those of you on a mobile phone can see that this post is probably making your wrists hurt from all the scrolling down to read your long, skinny web page.

As a side note, the site we profiled is owned by a developer friend of mine who is adept at making mobile sites. He also owns the name sibmira.mobi and has it reserved to make a mobile site at a later date, which is also a good practice.

This is a first look to get you started. Take a look at your own site on ready.mobi and mowser.mobi to see what you will need to do differently when designing your own mobile site.

So, until next time, think about about the smallest screen. Don’t try to cram every little detail you can about your company on there – people will just leave. Make sure the graphics fit. Think about how much (or how little) reading you would want to do if you were visiting the site. Then edit, edit, edit.

FacebookTwitterGoogle+TumblrStumbleUponRedditLinkedInApp.netBaiduBufferEvernoteGoogle BookmarksGoogle GmailFlipboardSina WeiboYahoo BookmarksSlashdotShare

Leave A Comment...

*