Catching Up on the Mobile Web

I know I’m not the first to say that the mobile Web is becoming more advanced all the time. There have been countless articles written on the subject of designing for the mobile web and many of them have some really innovative and exciting suggestions. What lies beneath all the great speculation is the fact that standards for the mobile Web is hardly existent. If you thought designing a cross compatible site for the desktop was a challenge, wait until you work with handhelds.

When designing for the mobile Web you’re looking at a virtually endless list of proprietary browsers with different levels of implementation and sophistication. They also have varying levels of standards compliance and support for CSS. You’re also faced with a wide range of screen resolutions, but that’s nothing new. Only this time the screen can be as small as 120 pixels wide. From time to time, each header level may be represented in exactly the same way, and without you knowing, your style sheet may not be applied to your document. There are countless other things you might encounter when testing. As a designer, this isn’t a very friendly environment to work in.

The Mobile Web and PDAs

Perhaps the most common method of browsing the mobile Web is via your PDA. Like computers, there are different makes and models of PDAs, each shipping with their own operating system and browser if applicable. Windows Mobile uses Pocket IE to browse the Web, while Palm uses their own solution. The abundance of browser possibilities makes it very difficult to design any site for handheld display.

Presenting Opera Mobile

Opera, in my opinion, is probably the leading developer of a mobile Web browser. Their supported products list is impressive and gives anybody access to the proper version of Opera Mobile to install on their device.

What’s great about Opera Mobile is that it inherits many of the positive aspects of the Opera browser itself. This helps to advance the progress of mobile Web in that people will choose Opera Mobile over a proprietary browser should it prove to render webpages more accurately.

I haven’t had any personal experience with Opera Mobile, but I assume it would be an improvement to the various proprietary browsers. Opera Mobile for Windows Mobile/PocketPC looks pretty feature packed for a mobile Web browser. Features such as tabs, zooming, bookmarks, and landscape/portrait mode aren’t very common on handheld browsers. Unfortunately, this version isn’t free but I hope that Opera Mobile will follow Opera’s lead and drop the price tag eventually.

The Mobile Web and Cell Phones

In my personal opinion, browsing the Web on your cell phone will always be more common than using a PDA to surf the Net. Cell phones are far more common than PDAs and their capabilities are constantly growing. Just about every modern cell phone has the capability to get online and it’s quite easy to do so. This opens up a door of new challenges for design however. A cell phone is burdened with a much smaller screen (as compared to a PDA), no stylus for scrolling or navigation, and no keyboard for Web address entry. You’ll find even more proprietary browser solutions on various cell phones which have more difficulty with standards and CSS support than their PDA counterparts.

Opera has More for Mobile

Alongside Opera Mobile, there’s Opera Mini, another version of the Opera Web browser.

Opera Mini is a fast and easy alternative to Opera’s mobile browser, allowing users to access the Web on mobile phones that would normally be incapable of running a Web browser. This includes the vast majority of today’s WAP-enabled phones.

Opera Mini uses a remote server to pre-process Web pages before sending them to your phone. Web content is optimized for your device, ensuring fast browsing and a great user experience.

Opera Mini offers the same speed and usability as the renowned Opera mobile browser, and uses Opera Small Screen Rendering technology to provide access to the Web.

Opera Mini incorporates a technique commonly used by a proprietary mobile Web browser: pre-processing of webpages before display. These page pre-processors attempt to reorganize a page in such a way that it is more effectively displayed once it reaches your screen. In my experience, this technology has been less than flattering to any design you had going and often makes the content difficult to use.

My Experience with Opera Mini

I took a minute to try out Opera Mini on my cell phone. After navigating my proprietary browser to http://mini.opera.com and downloading the 74k browser, I loaded Opera Mini. After running a quick network test, I was able to begin using the browser. Naturally I started my test by navigating to Monday By Noon. Originally this site wouldn’t even display using the included proprietary browser. Using Opera Mini, however, was a pleasant surprise.

Image © Opera.com

Images were resized according to my screen resolution and the site was truly usable. What’s nice is even though the content is pre-processed, if a style sheet using media="handheld" is defined, it’s applied. This gives you a bit of control over your design, but far less than normal. If no style sheet is provided for handheld media, the screen style sheet is applied to the best of Opera’s Small Screen Rendering ability. After a few minutes of use, I was really pleased with what Opera Mini had to offer over my proprietary browser. I don’t find myself surfing the Web from my cell phone all that often, but for those times I choose to, Opera Mini helps to make the process much more bearable than it once was.

If you’re interested in trying out Opera Mini, the site has a great way of finding out whether or not the application is available for your handset. I definitely recommend giving it a quick try if you’d like.

The Mobile Web and Everything Else

The Web will continue to expand into each aspect of our lives, and that means displaying Web pages on a variety of devices. From video game systems to in car computers, the need to display Web pages in more devices is on the horizon. While the need seems quite far fetched at our current place in time, some feel that it’s the future.

Opera for Devices

Opera didn’t stop there. Enter Opera for Devices. Other than PDAs and cell phones, there are more devices that want to surf the net. Opera realized this and they work to support those devices too. The one device that caught my attention some time ago was the Nintendo DS, a popular handheld gaming system with included WiFi. The innovative addition to the DS is the fact that it has two screens. Opera made ingenious use of this new real estate.

Details of Opera on the Nintendo DS

Normally there is only one screen on a handheld device, which severely limits the space in which to render a website. Opera now allows the bottom screen to show the page you’re viewing sized to fit the screen, and provides a navigation window on top of it. That navigation window represents what is displayed on the top screen, which has been zoomed in to 100%. This effectively allows the device to retain the intended look of the site, while allowing the user to make proper use of the content — reading it. Take a look at this in depth video review on Google Videos, it really goes into a lot of detail about other features of the browser. While browsing the Web using a Nintendo DS is probably the least common when compared to PDAs and cell phones, it seems like the most usable at this time.

So far it sounds like this article is a giant ad for Opera and everything they’re doing. Truth be told I don’t use it on my machine for anything other than testing and I wouldn’t have it any other way. But when it comes to browsing the mobile Web, Opera seems to have it together as far as CSS and standards support are concerned.

How do we Prepare Our Sites?

There are plenty of fantastic articles with great tips on designing for small screen devices, some of which are listed below:

• Mobile Web Design – The Series – Cameron Moll
• The Mobile Design Community Mailing List
• Targeting Small Screens – stopdesign
• Handheld Stylesheets – css-discuss
• HTML and CSS for Mobiles – htmldog
• Handheld media browser conformance compatibility – Code Style
• Making Small Devices Look Great
• 7 steps to better handheld browsing – CollyLogic
• Creating Web Content for Mobile Phone Browsers, Part 1 – Part 2
• Pocket-Sized Design: Taking Your Website to the Small Screen – A List Apart

In my personal opinion, a separate style sheet should be used using media=handheld and effort should be put into carrying over the brand of the site, but focusing on usable display of page content. Don’t try to get fancy with multi-column layouts or excessive background image use, because more often than not they won’t display properly anyway. You’re working with screens that can shrink to 120 pixels wide and there’s no way to squeeze more than one column of text on that real estate. Attempting to use widths in any instance will more often than not get you into trouble and should be avoided. If you continue to use semantic markup you will often be pleased with what you see.

Test with what you can and leave the site as simple as possible. Remember to include ’skip links’ if applicable, as they’ll help out your cell phone readers get to what they want to read (or back to your navigation). I think the take home message would be to keep your handheld versions as simple as can be for the time being, while offering your viewer the best experience possible.