Feb 20

Mikko Pervilä has released a thesis for his MSci at the University of Helsinki titled Performance of Ajax Applications on Mobile Devices:

This thesis evaluates the presentational capability and measures the performance of five mobile browsers on the Apple iPhone and Nokia models N95 and N800. Performance is benchmarked through user-experienced response times as measured with a stopwatch. 12 Ajax toolkit examples and 8 production-quality applications are targeted, all except one in their real environments. In total, over 1750 observations are analyzed and included in the appendix. Communication delays are not considered; the network connection type is WLAN.

Results indicate that the initial loading time of an Ajax application can often exceed 20 seconds. Content reordering may be used to partially overcome this limitation. Proper testing is the key for success: the selected browsers are capable of presenting Ajax applications if their differing implementations are overcome, perhaps using a suitable toolkit.

There is a large amount of detailed information here across several vectors.

Mobile device / platform differences

Mikko has gone into detailed testing on the Nokia 800, N95, and the iPhone. Within the N800 he tests Opera, Mozilla, and WebCore. On the N95 he tests Opera Mobile and the mini map interface.

Ajax libraries and their support

Here Mikko compared a large number of libraries:

  • Prototype
  • Script.aculo.us
  • jQuery
  • Yahoo! UI
  • Dojo
  • Ext JS
  • Gears
  • DWR
  • MooTools
  • moo.fx
  • ASP.NET Ajax
  • Frost Ajax library

Comparing large websites on mobile phones

Here Mikko runs up against properties such as:

  • Gmail
  • Google Maps
  • Yahoo! Mail
  • Flickr
  • myAOL

You can look through the study to see the details, but what about conclusions?

One can not yet assume that applications sup-
ported by the desktop browsers would be consequently supported by the mobile
browsers. Browser fragmentation seems to flow over to the mobile devices
with the shared code bases of the mobile and desktop user agents.

If we take a look at the grouping of grades for the various tests, you see that the browsers in question are across the map. All of them have issues, across the board.

Mobile Ajax Performance Comparison

Mikko does have this to say about the browsers:

By far, the fastest browser is Opera Mobile on the N95. This seems to be well in line with the overall worst capability in the capability evaluations. This combination seems to be indicative of ignored program directives, meaning that the browser gains speed by not executing some parts of the application code. Safari’s high number (14) of slow results is caused by the browser’s distinctive performance variation, specifically of pairwise high and low values. This phenomena has not yet been satisfactorily explained.

The two things that strike me are:

  • Mobile browsers are very different, and I hope they get closer (feels like a few years back with desktop browsers)
  • There is room for a mobile specific toolkit (or a mobile piece of a current toolkit) to help out like they did in desktop land. Frost is an early library here.

As you go through the thesis you will see a great set of graphs that show you the performance characteristics of micro elements of the Ajax experience on the phone. Thanks for the work Mikko!

Feb 14

We have heard that Flash is coming to the iPhone even since before the iPhone launched. Gear Live say that it is definitely coming.

Why isn’t it on the iPhone now? They make out that it is due to business decisions, but my guess is that this isn’t the case. The iPhone came out swinging that “the browsing experience is full.” The browser is a desktop-esque browser. No WAP here please.

This means that you would expect to see true Flash instead of Flash Lite, which you often see on a mobile phone. However, Flash does eat up a lot of memory, CPU, and thus battery, so I think that the Apple folks have been playing with Flash and making it fast and economical enough to run on the device.

At certain times it has been frustrating not to have Flash. You feel crippled. On the other hand, it has also often been nice. No silly Flash ads etc.

If it finally does make it on the phone, it will open up the world of iPhone development to Flash developers which will be a big thing.

Feb 06

Wayne Shea and Tenni Theurer have continued their performance series by delving into the iPhone and its poor little cache.

I always wonder why the cache is so small. It is typical Apple to not allow an expert mode where you can tweak it. I would rather have a few less songs and have a large cache. But, Steve knows best ;)

The end result of the article is that you should follow this ideal rule:

Reduce the size of each component to 25 Kbytes or less for optimal caching behavior

Given that the wireless network speed on iPhone is limited and the browser cache is cleared across power cycle, it is even more important to make fewer HTTP requests to achieve good performance than in the desktop world. To reduce the number of HTTP requests, Safari on iPhone supports image map, CSS sprites, inline images and inline CSS images. Take advantage of the browser cache whenever possible. If an external component can be shared across multiple pages in the site, remember that each individual component has to be smaller than 25 KB to be cacheable. Also, the maximum cache limit of all components is 475 - 500 KB. Minify all the JavaScript, CSS and HTML. For components that aren’t shared across multiple pages, consider making them inline.

This of course is quite painful if you like to package JavaScript in One Large File for other performance reasons, or if you use a library that is larger than 25KB!

The iPhone can tell us a bunch of things about a site. If I go to TechCrunch for example, it drives me batty as it does a bunch of JavaScript to load in the CrunchBase widgets, and the iPhone keeps thinking it is loading. The blue bar keeps going, and the browser isn’t as responsive. I hate those Crunchbase widgets :)

Feb 05

Opera 9.5

Opera has given a teaser announcement on Opera Mobile 9.5 where they have told us what to expect, but we don’t get to play with it yet:

  • Uses the new Presto engine, so it should be faster
  • Zoom around a la iPhone
  • Flash support (Flash Lite only)

You can see a video tour.

What is most interesting is that it supports Opera Widgets, so you can develop one form factor and have it work as a widget for the desktop and the mobile phone.

Jan 14

The New York Times has a piece (login required): Google Sees Surge in iPhone Traffic.

It starts off talking about the title itself:

On Christmas, traffic to Google from iPhones surged, surpassing incoming traffic from any other type of mobile device, according to internal Google data made available to The New York Times. A few days later, iPhone traffic to Google fell below that of devices powered by the Nokia-backed Symbian operating system but remained higher than traffic from any other type of cellphone.

The data is striking because the iPhone, an Apple product, accounts for just 2 percent of smartphones worldwide, according to IDC, a market research firm. Phones powered by Symbian make up 63 percent of the worldwide smartphone market, while those powered by Microsoft’s Windows Mobile have 11 percent and those running the BlackBerry system have 10 percent.

But, then you get to the important piece from a developer perspective:

“Consumers are going to demand Internet browsers” as good as Apple’s, said Vic Gundotra, a Google vice president who oversees mobile products.

Mr. Gundotra said Web browsers as capable as the iPhone’s could also prove a boon for developers of mobile software, who have long struggled to adapt their programs to different types of phones. As it does on the PC, he said, the browser could provide a more homogeneous “layer” for programmers.

“The reason no one considered this seriously is that the Web layer on mobile devices was terrible,” he said. Google has taken advantage of the capabilities of the iPhone browser to create a product, internally called Grand Prix, that it says provides easy access to many of the company’s services, including search, Gmail, Reader and Picasa.

Google, which developed the first version of Grand Prix in six weeks, is introducing a new version on Monday, just six weeks after the first one. That is a speed of development not previously possible on mobile phones, he said.

2008. The year that developers swarm onto mobile phones through the Web floodgates.

Dec 25

iPhone Snow Globe

Apple has put up some sample code that shows off the new window.onorientationchange and window.orientation ability that lets you detect the orientation of the iPhone.

You setup your HTML with a body tag with the class of “portrait” or “landscape” and most of the CSS goes from that. You also put an empty div with the id of currentOrientation that is used for some of the magic.

Below is a simple JavaScript handler:

window.onorientationchange = function() {
  /*window.orientation returns a value that indicates whether iPhone is in portrait mode, landscape mode with the screen turned to the
    left, or landscape mode with the screen turned to the right. */
  var orientation = window.orientation;
  switch(orientation)
  {
 
    case 0:
        /* If in portrait mode, sets the body's class attribute to portrait. Consequently, all style definitions matching the body[class="portrait"] declaration
           in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
        document.body.setAttribute("class","portrait");
 
        /* Add a descriptive message on "Handling iPhone or iPod touch Orientation Events"  */
        document.getElementById("currentOrientation").innerHTML="Now in portrait orientation (Home button on the bottom).";
        break;  
 
    case 90:
        /* If in landscape mode with the screen turned to the left, sets the body's class attribute to landscapeLeft. In this case, all style definitions matching the
           body[class="landscapeLeft"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
        document.body.setAttribute("class","landscapeLeft");
 
        document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the left (Home button to the right).";
        break;
 
    case -90:  
        /* If in landscape mode with the screen turned to the right, sets the body's class attribute to landscapeRight. Here, all style definitions matching the 
           body[class="landscapeRight"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
        document.body.setAttribute("class","landscapeRight");
 
        document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the right (Home button to the left).";
        break;
  }
}

And, since it is Christmas/insert your winter holiday here, there is a nice sample snow globe that you can shake by changing the orientation of your iPhone.

Have a great holiday period, and try to stay off of your phones and spend some time with the family ;)

Dec 18

Joe Walnes is a great open source developer who works on mobile fun in the Google London office. He just released a new iPhone interface for Picasa:

I had a look around some websites and I really liked how they looked on the iPhone. I could get to everything I needed. I went to picasaweb.google.com but it didn’t quite feel right. It was using some very cool AJAXy features, but these were designed with a desktop web-browsing experience in mind. So the next day I had a go at creating a new interface for Picasa Web, designed for the iPhone.

Today, I’m happy to tell you that we’ve just released this new iPhone interface for Picasa. After you go to Picasa on your iPhone and log in, you can quickly see all your albums that you’ve uploaded to Picasa Web. If you click on any of the albums, you can get a full view of your picture with comments from your friends. Or you can click on Slideshow, sit back and watch the pictures scroll. You can also search for photos in your album or through community photos. Finally, with one of my favorite features, you can view your friends’ albums through favorites.

Picasa iPhone

Dec 03

Nokia issued a press release unveiling the new device management features of its Intellisync Mobile Suite:

Nokia Intellisync Device Management delivers single service-optimized device management platform that seamlessly combines OMA DM and Nokia Intellisync Mobile Suite device management technologies

New York, NY - Nokia unveils today the newest device management features of Nokia Intellisync Mobile Suite. The next generation release offers single platform to manage both OMA DM compatible mobile devices as well as devices running Nokia Intellisync Mobile Suite client. This technology approach provides flexibility to support a wide variety of mobile devices and operating systems with advanced device management functionalities such as device configuration, application management, asset collection, help desk, theft-loss protection and recovery…

Mobility Site has the skinny.

Nov 27

First we saw the iPhone site. Then we had Blackberry support. Now we have Windows Mobile.

Peter Foot has written up Facebook Development with the .NET Compact Framework which delves into the world of creating a Windows Mobile Facebook view:

In the samples explored in this article we have seen how to use the functionality exposed by the Facebook Developer Toolkit. Although Facebook does not expose the full functionality of the site through their API, they provide a wide range of functions for retrieving information on your friends, groups, events, and photos. We have seen how to take advantage of Windows Mobile APIs to integrate Facebook data with our device Contacts and Calendar applications. Finally we saw how to browse and upload to your online photo albums directly from your mobile device.

Nov 26

Many people are talking about Amazon’s Kindle eReader device, and Russell has done some digging on how it fares as a mobile browser:

The Kindle is using Access NetFront to power the browser, and it seems like a combo of a basic mobile browser on the client with a server side proxy. It formats the markup as best as possible, but because there’s no scrolling in the Kindle, it does break up normal sites into into insane numbers of pages. There’s a default mode - which seems to ignore CSS and JavaScript, and a more Advanced Mode, which is marked as being even more “Experimental” than the default mode. The Advanced Mode actually displays CSS, however, so I can’t imagine many people using the default unless they don’t know otherwise. The connection over EVDO is reasonably fast, though the screen’s redraw time might make you want to cry a bit.

Here’s the relevant header info:

HTTP_USER_AGENT: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 4.0) NetFront/3.3
HTTP_X_FSN: ABC123ABC123ABC123ABC123ABC123ABC123ABC123ABC123*
HTTP_X_FORWARDED_FOR: 66.193.201.11, 10.0.52.11
HTTP_VIA: 1.1 (amazon proxy)
HTTP_ACCEPT: image/png, image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, */*

Because the internal browser is already doing paging, I used the above info to make sure that I deliver full pages through the Mowser content adapter - as it was confusing otherwise - and it seems to work pretty well. If you get a Kindle and want to use the browser for any realistic amount of time, I’d definitely recommend using Mowser, as the formatting ended up being much more readable (if I do say so myself), and you end up with less paging because of the more compact markup, and reduced image loading. Here’s a high-resolution example of the New York Times on the Kindle via Mowser.

All-in-all it’s a slick little device. The navigation for the web is a bit wonky - there might be a way of making more “Kindle-specific” GUI features which will help, but in general if you were to choose a reader, the free mobile browsing itself is worth quite a bit