I actually wanted to post an article on the current state of mobile web browsers but this weeks’ discussions in the blogosphere have been just too interesting for the mobile web development in general that I needed to get some thoughts straight here. I hope they will be useful for the readers of this blog too.
It started off last week with Russell Buckley and his Who Gave Google Permission to be the Judge and Jury of Mobile Content? article at Mobhappy, followed by additional insights of Dave Harper in An Open Letter to Google: “Page adapted for mobile phone?” Please stop now, you are crippling sites, not adapting pages on his Different Things blog which initiated Jason Coleman from Mobilicio.us to explain about his app – and its relation to Google Mobile, at the mobilicio.us blog and over at m-trends.org.
Meanwhile in Austin, Texas, there were the interesting panel discussions at SXSW where colleague Kelly Goto shared her vision and ideas on the future of the Mobile Web in Dogma Free Design panels, which made Carlo Longino think about a couple of things in this post back at Mobhappy:
“Sure, these (technical) issues are important, but just as important is taking a more holistic view of mobile design and considering how to create services and applications that fit the mobile lifestyle and workstyle, as opposed to just making something that looks nice on a phone.”
All in all, essential reading if you’re interested, developing and/or designing for the Mobile Web.
Nothing more I can add to the discussion as what is there now, but I thought it might be interesting to visualize what’s currently happening on the Mobile Web related to the topics discussed. So here’s my input to the story, feel free to comment and add your Mobile Web experiences with the issues discussed and shown here below. Sorry for the quality of the images, these are amateur pictures taken with my digital camera but they’re real :-) The cell phone used here to demo is a Sony-Ericsson v800.
One of the essential things when developing/designing for the Mobile Web is to understand the context of the mobile user: why, where and when would he need to access mobile web pages? Does he just need to find information or does he want to access news, feeds or blogs to read on his cell phone when traveling? Or does he need a more embedded approach including for example click-to-call information when navigating a tourist guide to find a restaurant? Maybe he wants to consult a map too to find the location? Or maybe he wants to forward the information to a friend by SMS or email? There are a lot of different parameters to consider here, let’s just leave MoSoSo out for now and focus on some basics.
As a starter, let’s check out how our gotomobile blog looks on a cell phone screen using some different mobile web browsers. This blog is using W3C standards so it should display correctly on any xml/xhtml/wap 2.0 enabled mobile web browser. You can see how it looks on the v800 here below.
Opera mini does a great job by respecting the site structure, the css style, the links but crops the images – which leads to some poorer squeezed image quality. The integrated Sony-Ericsson v800 Obigo browser respects the structure and the links but neglects the css and the images normally displayed. Winksite just uses the text feed and respects the site structure but doesn’t respect the links neither doesn’t display images. Google Mobile does the same but leaves the links intact.
Now here at gotomobile we have been experimenting with developing mobile web content. One of the projects we did is developing a small personalized tourist guide and tried to understand the different contextual aspects of mobile users needing to access content through their mobile web browser.
The home page shows the navigation structure including some images (or advertising), when clicking the food/dinner option I get some restaurants menu to choose from, note that I can navigate the menu using my keypad (!) When clicking a restaurant I get an animated image (can be SVG or animated gif depending on the phone support) to visualize the mood and atmosphere of the restaurant and another click leads me to a description, location and contact details. Click the phone number gives me immediate click-to-call access to the restaurant (voicecall). Now these are some simple steps, carefully chosen but practically and easy usable for the user, I can preview the restaurant atmosphere and eventually the menu, and when I like it, I can directly call the restaurant to reserve a table.
Here is how it looks in the Obigo browser as mobile specific (or adapted) web content.
The same navigation with Opera mini gives slightly different results on the design side: images are not displayed as they should but the overall design style and links are respected, however animated gifs are displayed as static gif images. The keypad navigation gets lost however, since it acts as a normal ‘mini’ web browser it doesn’t seem to understand specific call-to-action phone protocols. The good thing here is that the click-to-call option is respected, asking 1 more step to confirm if you want to leave the browser and do a phone call (!) Here’s how it looks below in 6 steps.
When searching for the ‘mobile adapted’ guide in Google Mobile, I cannot find it; by using the web option, the guide link displays on my screen and redirects me to my ‘Google transcoded’ ‘mobile adapted’ guide. Overall result is that the transcoding doesn’t respect our contextual elements such as keypad navigation, click-to-call, and doesn’t respect design css. Overall links and images are displayed correctly. Check the results below.
Conclusion: the Mobile Web is not just about surfing some web pages in a mini browser on a cell phone’s screen, inserting advertising or not, there are a lot more other cell phone specific contextual elements that need reflection and need to be respected.
Just checking the most obvious click-to-call and easier keypad navigation options we tested here need to be respected to create a worthwhile mobile user experience; there is a lot of work ahead by everyone involved in this mobile web value chain. It is essential for developers and designers to understand the context of the mobile user and browser environmental elements such as how different search engines behave not forgetting about mobile web browser display parameters influencing your final design.
If this blog can help disseminating valuable information and be a starting point for discussion on the mobile web, we’ll be delighted to hear your comments and discuss them with you.