PixelMEDIA Inc.

At PixelMEDIA, we’re starting to see more of our clients inquiring about how to get started on the mobile web. I thought I’d share some of the lessons we’ve learned. These are five things to keep in mind when starting a new mobile project.

1) Decide which content to put on your mobile site

One of the first challenges when starting a new mobile project is deciding exactly what content to offer your mobile visitors. There are a few differing opinions in the industry right now; some people strongly believe in the One Web, while others believe that the experience should be re-shaped for the medium. This could mean a new website, new content, and a new information architecture as well as a design optimized for mobile.

2) Mobile enabling your site isn’t as simple as adding a new stylesheet.

CSS, the language used for applying styles to your website, currently provides a method for specifying where those styles should be applied. This functionality is provided in the form of a ‘media’ attribute applied to your stylesheets. Supported media types include screen (your computer), print (for printing a web page), and handheld (small screen, handheld devices). Unfortunately, support for the handheld media type is limited and buggy. If it were, it would theoretically be as easy to reformat your website for a mobile device as it is to reformat it for print. There would of course still be other considerations—hiding a large banner image via CSS will not stop it from being downloaded over a slow connection to a mobile device.

Because of the lackluster support for the handheld media type, we’re generally stuck with device detection: if a user hits the site from a handheld device, we route them to a separate mobile website. Websites built for mobile use a very similar markup language as regular websites. However, just like some desktop browsers offer different levels of standards support, so do mobile browsers—and there are a lot more of them!

3) Understand the different levels of mobile browsing

At least here in the U.S., we are just starting to see a big push toward phones that are really optimized for browsing the web. With devices like the Apple iPhone, Samsung Instinct, LG Dare, and the G1, every major wireless carrier now offers a decent phone for web browsing. While the iPhone (with its bundled version of the Safari web browser) is easily the winner for web browsing, the other devices aren’t far behind. All the major browser makers also have versions of their browsers that run on mobile devices.

However, there are still a lot of older phones in use whose browsing experience is basic, at best. Even popular devices like the BlackBerry tend to have a sub-standard browser compared to the devices listed above. It’s definitely a challenge to optimize your site to work on the small screens and bad browsers of the older devices, while trying to take advantage of the bigger screens and better rendering ability of newer devices.

4) Play to the strengths of the platform!

So, this should be fairly obvious—it’s a mobile device! Build a site that supports what a user needs to do when they’re on the go. Things like making telephone numbers into hyperlinks that automatically dial the phone can make all the difference to a user. Limiting content to what’s really important and removing images for faster page load times might be painful at first, but as you strip down to the essentials,  you’ll start increasing the usability and value of your mobile site.

5) Test on a range of devices

Testing is definitely one of the bigger challenges we have to deal with. There is simply no way to test on every device. However, with the right combination of devices you can get a great idea of how your site will perform across a wide range of different devices. On page 62 of Cameron Moll’s book, Mobile Web Design, Joe Shepter explains how Yahoo! employed this technique when developing a new mobile site for FIFA.

To make sense of the chaos, Yahoo!’s team first selected a target
group of ten phones. They were all widely distributed, and their
browsers ran the gamut from high-end to barely functional. As the
thinking went, if the site worked perfectly on all of them, it would
perform reasonably well on the rest of the world’s phones.
- Joe Shepter

The folks at MobiForge recommend a similar process:

One way to approach this problem is to focus on five classes of devices that span a range of capabilities. Of the hundreds of devices available, supporting five mainstream devices makes a great place to start. Obviously supporting more devices ensures greater compatibility with more devices and developers should always endeavor to do this, but supporting five devices disparate devices can do the job.

There are also plenty of emulators to help you along, but are definitely not a substitute for the real thing.

6) Use the resources available to you!

Ok, so I know I said 5 pointers, but everyone likes that last extra freebie, right? One last thing to keep in mind—there are resources available to help you along. Aside from the emulators to help with testing (which can be much quicker to use when still in development), there are some web sites that will help check your website to see if it’s ready for prime time.

• W3C mobileOK validator: Similar to their HTML validator, but results are specific to mobile sites
• ready.mobi: “evaluates mobile-readiness using industry best practices & standards”

And of course, partnering with a company who’s been through it couldn’t hurt either. We’d love to answer your questions if you’re thinking it’s time to make the leap into mobile for yourself. Contact us and let’s talk about it!

Tags: mobile