Apple’s iPhone 3.0 OS and Google’s Android run recent branches of the Open Source WebKit browser. To this end, they are able to support technologies that are only just making it to desktop browsers. In this article you can learn how you can build Web sites that target iPhone and Android Web browsers.

Getting yourself ready for a mobile world

Each day, more and more of us are accessing the Web using our mobile phones. There are two good reasons for this:

• we don’t want to be tethered to our laptops or PCs
• our phones do a great job of displaying the web

Companies such as Apple, Google, Palm and even Nokia are developing browsers for their phones that meet or exceed what we are used to on the desktop. Today, the vast majority of PC users connecting to the Web use Microsoft’s Internet Explorer (6, 7 or 8). If you are connecting to the Web on an iPhone or Android phone such as MyTouch, Droid or Nexus One, you may well be surprised to find out that your browser competes head to head with internet Explorer. In many ways, the browser in these new smart phones leads IE with support for emerging technologies such as HTML5, CSS3 and SVG.

The current darlings of the mobile world are Apple and Google with their iPhone and Android mobile operating systems. The browser that has been included with both OS’s is built on the WebKit Open Source project. If this sounds familiar then you will not be surprised to find out that WebKit is the engine that powers Google’s Chrome and Apple’s Safari browsers on the desktop.

There are a few differences between the desktop and mobile versions of WebKit used by Google and Apple. The largest difference comes in performance. There is a good reason for this: desktops are simply more powerful. With that said, mobile phones are catching up fast. The new Droid and iPad, both run mobile versions of WebKit, using a blazing 1 Ghz SOC (System On Chip) CPU/GPU combo. Within a couple of years you can expect multi-core SOCs running at 2 GHz or more.

The bottom line is that mobile devices can present the same level of experience in a hand held device that you can experience in your desktop. This does not mean you can develop the same kind of Web site. The CPU may be getting faster, but the screen size is not. Your basic phone form factor is fundamentally different to a desktop screen. The real-estate is smaller, the display is often in portrait view instead of landscape and you carry the Web browser from your phone in your hand. What this means is that you need to develop inrefaces that target the form factor being used by the customer. When you know what the form factor is, the you can take advantage of technologies such as Geolocation, Local Data Storage and CANVAS animation.

Browser Detection

The most obvious difference between mobile devices and their desktop brethren is the amount of screen real-estate you have. The Android and iPhone simply have small screens. Even the new iPad has a small screen compared to typical screen sizes of 1600x1200. The follow list breaks down the difference screen resolutions you can expect to work with your mobile device:

• Android (Motorola Droid) 480x854
• Android (MyTouch) 320x480
• Android (Nexus One) 480x800
• Apple iPhone 320x480
• Apple iPad 1024x768
• Palm Pre 320 x 480

The one caveat to this list is Android. The screen size can change depending on the hardware used by any specific vendor.  For instance, the HTC Magic and HTC Dream have a screen resolution of 320x480, but the HTC Passion has a screen resolution of 800x600. Google recommends, in the Android SDK, that you target your screen space to 320x455.

The default browser for all of the devices listed above can easily handle any Web site. Each web site, however, should be designed to take advantage of the screen space. For instance, Web site RoughlyDrafted.com looks like this in your Web browser:

However, if you go to Roughly Drafter in your Mobile device, you will see a different view:

The layout is optimized for the iPhone. Can you view the desktop version of the Web site on your iPhone? Sure you can, but you are not presenting a site that has the target form factor in mind. The roughlydrafted.com web site detects the screen resolutions and knows to show a different view of the content to fit the form factor, in this case an iPhone.

Detecting Web browsers and providing the correct layout can be accomplished using Cascading Style Sheets Level 3, or CSS3.

A new property called @media was included with CSS2. The goal of the @media property is to make it easier to use CSS to format content for difference devices such as printers, text to speech software and projectors. The role of the @media property is extended in CSS3 to allow you to detect device screen width.

Screen size detection is accomplished using the max-width and min-width properties that modify a CSS class definition. The CSS example below changes the background color and width of a class called dynamicScreen:

  

.dynamicScreen {
 
 font-family: Arial, Helvetica, sans-serif;
 
 height: 250px;
 
 color: black;
 
}

@media all and (max-width: 320px) {
 
 /* the default screen resolution for the iPhone/iPod Touch/Android */
 
 .dynamicScreen {background-color: orange;width:320px; } 
 
}

@media all and (max-width: 768px) {
 
 /* the default screen resolution for the iPad */
 
 .dynamicScreen {background-color: blue;}
 
}

@media all and (min-width: 769px) {
 
 /* the resolution to be used for all devices with a screen resolution larger than an iPad */
 
 .dynamicScreen {background-color: green;}
 
}

You will notice that the final definition uses min-width to change the display for screens larger than 769px. This is so the layout will look OK on desktop/laptop computers.

You can do a lot with CSS3 to change the presentation of content on the screen. For instance, you can create content that can be visible or hidden. Google’s Gmail, for example, has a different layout that only Android and iPhone users can view.

Working with HTML5

In a world going ga-ga for HTML5 it is interesting that two of the most popular and mature Web browsers supporting HTML5 run on Mobile devices. Both Android 2.0 and iPhone OS 3.0 are HTML5 friendly. This is largely due to the huge amount of work that has gone into WebKit by both Google and Apple. WebKit is used by both companies to run their desktop and mobile Web browsers. Palm also uses WebKit for the WebOS, the Operating System for the Palm Pre.

There are a lot of HTML5 features supported in Android and iPhone OS. Some of the immediate one include:

• Enhanced Form UI for Input Fields
• HTML5 API support (Geolocation and Local Data)
• Video/Audio Support
• Image Support
• CSS3

Some UI improvement to Input fields in Forms include:

• Email
• Web Address
• Search

You can now define a Input field to be the type “Email” as follows:

<input type="email">

A specialized soft keyboard pops-up when a user selects this field that is optimized for completing email addresses.

Notice that the keyboard allows you to select the “@” symbol from the main keyboard.

Changing the type selection to “URL” will convert the keyboard to one specialized for Web Addresses. Notice the ability to change address suffix.

<input type="url">

Changing the Input type value to “search” will convert the search box to one that is similar to Apple’s Spotlight search used in OS X.

There are several key API extensions to HTML5 also available in your mobile browser. If you have a Google Gmail account then you are already using Local Data Storage, an API that allows you to store structured data locally in the Web browser instead of using cookies.

GeoLocation is a second API technology that lends itself well to mobile devices. Web sites such as Google’s Latitude, is using the GeoLocation API built into WebKit. There is no reason why you should not start using both of these services today.

Video and Audio

High on the list of technologies to you need to support in your mobile OS is Video and Audio. Both Apple and Android have slightly different approaches to this.

For Apple, the approach is this: if the video is a link from YouTube then the native YouTube App will play back the video; on the other hand, you can link directly to a MP4 video to play back the content directly in the browser. You can also link to MOV, MP3 and AAC video and audio files.

Android, however, takes it one step further. With the latest release of Android 2.0/2.1 you can leverage the new HTML5 Video and Audio tags. By default, the video, when tapped, will pop-out and play full screen.  How cool is that?

Image Support in your Mobile Device

Much of the Web is still presented in bitmap images. There is nothing wrong with this. The good news is that WebKit has support for traditional image formats (GIF and JPEG). What is great news is Apple’s support for the PNG image format. You can take advantage of PNG features such as Alpha levels and transparency.  Additionally, the iPhone OS also supports TIFF. TIFF support is somewhat of a surprise to me and I do not see many Web designers switching to TIFF.

In addition to bitmap image support, you also leverage two new image presentation technologies: SVG and Canvas.

SVG, Scalable Vector Graphics, has been around for a while. The essence of SVG is to present vector based graphics formatted in XML in the Web browser. You can check out the support for SVG in your mobile phone by going to Wikipedia and looking up a map for a country. An SVG version of the country’s map will be presented. There are over 250,000 SVG drawings on Wikipedia you can check out. The advantages of having SVG support is that you get Flash-like presentation, animation and interaction into your Web site without using Flash. SVG can be extended using JavaScript.

The second drawing technology you take advantage of is CANVAS. Unlike SVG, a vector based illustration format, Canvas is bitmap based. Canvas does allow you to create complex animations and interactive displays.

Additional CSS3 Enhancements and Goodies

It will come as no surprise that CSS3 support is very prevalent in iPhone and Android phones. Both browsers give you support options that include:

• Rounded Corners
• Embedded fonts
• Transitions
• Transformation
• Animations

Interestingly, the iPhone supports 3D transformation a specification that is not supported in the desktop version of Safari for Windows or OSX.

Check out our CSS3 Animation article that jumps headlong into Transitions, Transformation and Animations. The content in the article applies equally well to mobile Web sites as well as Web sites designed for desktops.

Using Flash in your Web

At some point you have to address the question: what about Adobe Flash? The reality is that today, whether you agree with it or not, the iPhone, iPod and iPad do not support Flash. Steve Jobs himself has been very vocal about this.

On the flip side, the Android phone is going to support Flash. You can also expect support for Flash on many more mobile devices including Palm’s WebOS, RIM’s BlackBerry, Nokia’s Symbian and Window’s Mobile OS. The version of Flash coming to these devices is not the crippled step child called Flash Lite. Nope, you are getting the full Flash 10.1 Player. This means you can develop ActionScript 3 solutions to run on your phone.

You can comment below whether you think this is a good thing or not. Personally, I think that Adobe has stepped up to the plate with Flash 10.1 and made a much better Player. Whether you think Flash is lame or not, you cannot dispute the fact that a massive number of Web sites do use Flash and, if Adobe can demonstrate that the Flash Player does not chew up CPU and battery life, then there is no reason why it should not be included. In addition, Adobe is working hard to line up support for Flash on mobile devices. Today, more than 50 companies are or will be supporting Flash on their products, many of which as mobile devices.

OK, I know, the next request will be for Microsoft’s SilverLight. Unfortunately for Microsoft, SilverLight does not share the same level of usage Adobe’s Flash Player does. It does not even come close. This does not mean the technology is better or worse, it just is not installed on as many devices. Microsoft will need to campaign with the mobile manufacturers to have it included.

The bottom line is that Flash support is coming. Expect during 2010 a massive push from Adobe to encourage their hard ware vendors to updates their devices to support the new Flash Player 10.1. You should plan on using Flash in your mobile Web sites for end of 2010, beginning of 2011.

Apple iPhone Specific Support

While Android will have native support for Flash, the iPhone does have some special HTML tricks of its own. The first that you are likely to use is the ability to easily trigger a phone call from a number on a screen. Apple has extended the standard Anchor tag to support a new attribute that forces the phone to be activated:

<a href="tel:9205551212">Call Us Here</a>

Notice the phone number is added to the HREF attribute.

The initial display of your Web page can also be controlled on the iPhone through use of several META tags. The default display for any Web page is full screen with the ability to scale the page using a two finger pinch. The following meta tags allow you to control the default page dimensions:

• Width
• Height
• Initial-Scale
• User-Scalable
• Minimum-Scale
• Maximum-Scale

This works by adding a meta tag to the top of your HTML page, as follows:

<meta name="viewport" content=" user-scalable=no" />

This description will prevent a user from re-scaling your page.

<meta name="viewport" content="width=320" />

This description allows you to force the initial screen size to 320 pixels.

There are other iPhone specific additions to Safari you can find at http://developer.apple.com/iphone

Is the world ready for Mobile browsing?

Two years ago I would have argued that browsing the Web on your phone was a novelty. Today it is a necessity. Check your Web site usage logs and you will see an increase in the number of mobile users coming to your site. This number is only going to increase over the next few years until it reaches a point where it will eclipses desktop browsing. Now is the time to start learning how to optimize your web site for mobile phones.

Read more from Matthew David.