Designing For The Mobile Surfer

DaveSawers · #1 (**permalink**) 12-20-2006, 04:28 PM

I looked at a couple of my web sites on a Blackberry the other day. What a mess! Since using the internet from mobile devices is likely to be the next big thing, I decided to add a mobile version to one of my sites.

The original site can be seen at http://www.crowfootcrossing.com/ and the mobile version at http://www.crowfootcrossing.com/mobile/

I added browser detection and redirection from the main site, cut down the content for the mobile user and hopefully made a useful site that is better for the mobile user to get benefit from. Full story can be found in my blog at http://www.activeminds.ca/blogarticl...software&id=11.

Do you guys think this is something we should be doing more of? Are you already doing it? Have I missed something vital in my implementation?

Dubbya · #2 (**permalink**) 12-21-2006, 04:29 PM

Mobile browsers have been around for several years, but their use is growing steadily. It's a niche market though, largely due to network speed, coverage and connectivity issues.

If you've designed your site with web browsers in mind and those represent the greatest number of visitors, I wouldn't bother redesigning it to accomodate every single device that may view it.

What you may wish to consider is Using a browser detect to determine the user agent connecting to the site and automatically redirect the detected device to a page that is rendered appropriately. Since blogs are primarily textual, the conversion can be a snap.

Your content need not change but the scripting for mobile browsera will. With cell phones, Blackberries, Palm OS devices, iPaqs, etc, the task of accomodating every single device is almost impossible.

You'll need to familiarize yourself with WML, WAP, and dumbed down versions of HTML and be able to render the site in a variety of screen resolutions.

You can sign up as a developer at most device manufacturer's websites and gain access to device emulators for testing purposes. You install the device, view your page to see what it looks like and take it from there.

Graphics pose another significant problem. There's no telling how the image will render or whether it will be included at all. Some devices only display a few colors or just 11 shades of gray, so you'll need to consider these issues before you even construct the page.

There is image editing software that'll help convert images but it's not an exact science. Bear in mind that most of the fancier devices still restrict your page dimensions to 180pixels by 180 pixels.

Site navigation is a huge problem to consider as well, since every device does this differently. No fancy Javascript rollovers, then there are the form submissions... Grrrr.

It's not as easy as it sounds, so if you don't honestly expect a great number of mobile visitors, just leave well enough alone.

Head over to Nokia, Palm and the RIM developer sites to download their device emulators. If you still see value in going down this road, get yourself a few books and go for it.

I'll warn you in advance, this is not for the feint of heart. Designing and building sites such as these can be extremely frustrating and the code is quite unforgiving. Pick a few mobile browsers that require very little page modification to display your site and see how it goes.

Start with the iPaq then move on to the RIM browser (for the Blackberry). Script your pages, set your browser detect up on your server and see what happens. Watch your server logs to see who's connecting. You'll know within a few weeks if it's worth adding other versions.

Good Luck.

DaveSawers · #3 (**permalink**) 12-22-2006, 09:16 AM

Hmm. It's nothing like as complicated as you make out.

You simply design for the small screen making sure nothing is fixed width. You also avoid Javascript, flash or fancy DHTML. The result is a small site that downloads quickly and renders correctly on ALL mobile browsers (and incidentally on all non mobile browsers too).

In terms of delivering the fancy stuff you may see it as a step backwards, but our job is to develop the sort of sites that the market wants, not to push technology. If the pundits are to be believed, mobile surfing is the next big thing. I think we need to do more to be ready for it.

Dubbya · #4 (**permalink**) 12-22-2006, 11:21 AM

Quote:

Originally Posted by DaveSawers

I looked at a couple of my web sites on a Blackberry the other day. What a mess!

Quote:

Originally Posted by DaveSawers

Hmm. It's nothing like as complicated as you make out.

If that's the case, why are you having problems?

DaveSawers · #5 (**permalink**) 12-22-2006, 12:42 PM

Quote:

Originally Posted by Dubbya

If that's the case, why are you having problems?

I'm not having problems! I didn't say anywhere in my posts or my blog that I was having difficulties. Sorry if I was not being clear but may I suggest you actually read what I posted?

I'm simply asking whether anyone else out there thinks that we should be doing more for mobile surfers.

cspelts · #6 (**permalink**) 12-27-2006, 01:33 AM

Hey Dave, I've been thinking along the same lines, and actually came to many of the same conclusions as you. The only thing I plan to do slightly differently is to add to the meta tags a request that the search engines NOT index the version designed for smart phones. Since all the content will be duplicated, I want to make sure the main site is the what comes up in searches.

I'd love to hear how others are dealing with this? Maybe there's a better way?

DaveSawers · #7 (**permalink**) 12-27-2006, 09:59 AM

Quote:

Originally Posted by cspelts

The only thing I plan to do slightly differently is to add to the meta tags a request that the search engines NOT index the version designed for smart phones.

Good idea. I'll add that.

weslinda · #8 (**permalink**) 02-19-2007, 08:13 PM

I noticed no one here discussed creating a specific style sheet for mobile devices and only delivering the content a mobile user would actually need.

If you build your web site from the ground up with thought behind the layout, you can do unique style sheets for mobile devices, aural readers and printing. All without having to do different "versions" of each page and requiring a "browser" detect script at the start of the page.

Lets say you did your main menu using CSS and as a List. By simply changing a few items, the menu could then fit nicely in a browser on a mobile device. Same is true for content to the mobile brower.

I wonder when it will become mainstream to use CSS to design for various devices with one set of content.

kgun · #9 (**permalink**) 02-19-2007, 08:33 PM

Quote:

Originally Posted by DaveSawers

I added browser detection ...

Generally feature sniffing is more secure than brower detection.

Just before I saw this thread, I posted a answer to the thread: Any Opinions on which resolution to design for??

where I gave an example of using different style sheests, that is the way to go, as long as people use different browsers, some with inbuilt style options and other without.

So you took my advice and designed for mobile devices?

It is a very good first step IMO.