You are previewing Programming the Mobile Web.

Programming the Mobile Web

Cover of Programming the Mobile Web by Maximiliano Firtman Published by O'Reilly Media, Inc.
  1. Programming the Mobile Web
    1. SPECIAL OFFER: Upgrade this ebook with O’Reilly
    2. Preface
      1. Who This Book Is For
      2. Who This Book Is Not For
      3. What You’ll Learn
      4. Other Options
      5. If You Like (or Don’t Like) This Book
      6. Conventions Used in This Book
      7. Using Code Examples
      8. How to Contact Us
      9. Safari® Books Online
      10. Acknowledgments
    3. 1. The Mobile Jungle
      1. Myths of the Mobile Web
      2. The Mobile Ecosystem
      3. Mobile Knowledge
      4. Brands, Models, and Platforms
      5. Technical Information
      6. Market Statistics
    4. 2. Mobile Browsing
      1. The Mobile Browsing Experience
      2. Mobile Web Eras
    5. 3. Architecture and Design
      1. Website Architecture
      2. Design and Usability
    6. 4. Setting Up Your Environment
      1. Setting Up a Development Environment
      2. Production Environment
    7. 5. Markups and Standards
      1. First, the Old Ones
      2. Current Standards
      3. XHTML Mobile Profile and Basic
      4. CSS for Mobile
      5. Confusion
    8. 6. Coding Markup
      1. Heading Structure
      2. The Document Body
      3. Plug-ins and Extensions
    9. 7. CSS for Mobile Browsers
      1. Where to Insert the CSS
      2. Selectors
      3. CSS Techniques
      4. Common Patterns
      5. CSS Sprites
      6. WebKit Extensions
    10. 8. JavaScript Mobile
      1. Supported Technologies
      2. Coding JavaScript for Mobile Browsers
    11. 9. Ajax, RIA, and HTML 5
      1. Ajax Support
      2. JavaScript Libraries
      3. WebKit CSS Extensions
      4. Mobile Rich Internet Applications
      5. HTML 5
    12. 10. Server-Side Browser Detection and Content Delivery
      1. Mobile Detection
      2. Content Delivery
      3. Multimedia and Streaming
      4. Content Adaptation
      5. Mobilizing WordPress and Other CMSs
    13. 11. Geolocation and Maps
      1. Location Techniques
      2. Detecting the Location
      3. Showing a Map
    14. 12. Widgets and Offline Webapps
      1. Mobile Widget Platforms
      2. Standards
      3. Platforms
      4. Widget Design Patterns
    15. 13. Testing, Debugging, and Performance
      1. Testing and Debugging
      2. Performance Optimization
    16. 14. Distribution and Social Web 2.0
      1. Mobile SEO
      2. Mobile Web Statistics
      3. Mobile Web Advertising
      4. Mobile Web Social Features
    17. A. MIME Types for Mobile Content
      1. Markup and Script MIME Types
      2. Image MIME Types
      3. Mobile Content MIME Types
      4. Audio and Video MIME Types
      5. Widget and Webapp MIME Types
    18. Index
    19. About the Author
    20. Colophon
    21. SPECIAL OFFER: Upgrade this ebook with O’Reilly

Chapter 4. Setting Up Your Environment

Unlike desktop web development, where you’re likely to create and test your work on the same device, mobile development generally requires creating and managing several development environments.

Setting Up a Development Environment

Before starting our mobile web markup work, let’s take a look at some of the best tools, IDEs, and emulators available for our use. In Chapter 13, we’ll take a deeper look at testing and debugging and cover advanced techniques and tools.

Working with Code

For coding our markup, JavaScript, and CSS, we can use almost any web tool available in the market, including Adobe Dreamweaver, Microsoft Expression Web, Aptana Studio, or even a text editor. Some tools, like Dreamweaver (since the CS4 version), work better with mobile markup and allow us to validate against mobile web standards. In this editor, when we create a new document we can choose XHTML Mobile as the document type, as shown in Figure 4-1.

Dreamweaver allows us to define new files as XHTML Mobile documents. It is better not to use the layout templates.

Figure 4-1. Dreamweaver allows us to define new files as XHTML Mobile documents. It is better not to use the layout templates.

We will see in the following pages that it may be useful not to use too many of an editor’s visual design features. In mobile web development, it is often easier and cleaner to work directly with the code.

Emulators and Simulators

The most useful tools for our work will be emulators and simulators. Generally speaking, an emulator is a piece of software that translates compiled code from an original architecture to the platform where it is running. It allows us to run an operating system and its native applications on another operating system. In the mobile development world, an emulator is a desktop application that emulates mobile device hardware and a mobile operating system, allowing us to test and debug our applications and see how they are working. The browser, and even the operating system, is not aware that it is running on an emulator, so we can execute the same code that will execute on the real device.


We should also add to our mobile development environments classic tools for project and configuration management, like bug tracking, version control, and project management tools.

Emulators are created by manufacturers and offered to developers for free, either standalone or bundled with the Software Development Kit (SDK) for native development.

There are also operating system emulators that don’t represent any real device hardware but rather the operating system as a whole. These exist for Windows Mobile and Android.

On the other hand, a simulator is a less complex application that simulates some of the behavior of a device, but does not emulate hardware and does not work over the real operating system. These tools are simpler and less useful than emulators. A simulator may be created by the device manufacturer or by some other company offering a simulation environment for developers. As the simulator does not simulate all the device features, we can also find tools that will not be helpful for mobile web development but rather for other technologies, like Java ME. In mobile browsing, there are simulators with pixel-level simulation, and others that neither create a skin over a typical desktop browser (e.g., Firefox or Safari) with real typography nor simulate their rendering engines.

For mobile web development, we will find emulators from Nokia, Symbian, BlackBerry, Android, Palm Pre, and Windows Mobile and simulators from Apple for the iPhone (though only for Mac OS X). A multiple mobile browser simulator is available from Adobe, called Device Central, but we will not find any help from Sony Ericsson, LG, Motorola, or Samsung with their proprietary OSs (used on their low- and mid-end devices).

Some browser-based emulators, like the Opera Mini emulator, are also available.

An up-to-date list of emulator download URLs can be found at


As the emulators have the same operating system and applications as the real devices, we will need to wait for the OS to load before opening a web page.

Android emulator

The Android emulator, shown in Figure 4-2, is available in conjunction with the SDK to create native Java applications for Android. You can download it for free from; the base SDK and the different Android OS versions are available separately. The Android emulator is available for Windows, Mac OS X, and Linux. Once you’ve downloaded it, create a folder for the contents on your hard drive and unzip the package.

After downloading the Android SDK, open the Manager and download the platforms you want. The Google APIs are needed for native development using Google’s services.

Figure 4-2. After downloading the Android SDK, open the Manager and download the platforms you want. The Google APIs are needed for native development using Google’s services.

In the folder where you extracted the package, there is an android terminal command on Mac OS X/Linux and an SDK Setup.exe application for Windows that opens the Android SDK and AVD Manager, where you can download and configure Android platforms after installing the base SDK.


If you get errors while trying to retrieve “Available Packs” in the Android SDK and AVD Manager, you can go to Settings, click the option “Force https:// sources to be fetched using http://”, and then click Apply.

Opening the Android emulator can be a little tricky the first time. You can open it from an IDE such as Eclipse, but first you need to install the Android plug-in and create a native empty application. Alternatively, you can open the emulator from a console window (Terminal or the command prompt, depending on the operating system) or from the SDK and AVD Manager.


After you’ve had the Android SDK installed for a while, you may want to update it and install a new package. If you receive an XML error while doing this, you may have an outdated version of the AVD manager. Just go to the website and download the SDK again.

Once you’ve installed a platform, you need to create a new Virtual Device using the SDK and AVD Manager. Creating a new device involves selecting the target (of the installed platforms), defining a name, and specifying the size of the SD card, the screen size, and other optional hardware features, as you can see in Figure 4-3. One you’ve created the device, you can go to Virtual Devices and click Launch to reach a result like the one shown in Figure 4-4.

After installing the SDK and the platform, you must create virtual devices for each platform and screen combination you need.

Figure 4-3. After installing the SDK and the platform, you must create virtual devices for each platform and screen combination you need.

At this point, you can open the browser as if you were on a touch-enabled Android device. You can use the mouse over the emulator’s screen to emulate the user’s gestures.

Figure 4-4. At this point, you can open the browser as if you were on a touch-enabled Android device. You can use the mouse over the emulator’s screen to emulate the user’s gestures.

You can also install new tools from vendors, like the Droid device for Motorola. In the Motorola case, you need to download the MotoDev Studio for Android, available for free at


Motorola will simplify the SDK install process and emulator launch if you download MotoDev Studio for Android IDE first. It will ask you to download and configure the SDK and platforms automatically.

With the emulator opened, you can open a mobile website by finding the browser using your mouse (remember that almost all Android devices are touch capable) and typing the URL in its location bar. Up to Android 2.0, the emulator doesn’t support opening local files, so you’ll need to set up a local web server (e.g., Apache) or upload your files to a web server on the Internet.


If you want to load a local web server in the Android emulator, you can’t use localhost or because the browser will point the request to Android itself. There is a special IP address available to point to the host computer:

Nokia emulators

Nokia has always had the better emulators, since the beginning of mobile web development. Instead of one emulator per device, you’ll find one emulator for each version of each platform. You can download emulators for Series 40 (mid- and low-end devices) and for S60 (Symbian smartphones) at In some cases there are also specific model emulators with specific features, like for the Nokia N97 (an S60 5th edition device with home screen widgets, a feature we will cover in Chapter 12).


Nokia also has a tool called the Nokia Mobile Browser Simulator, developed in 2003 to test mobile websites for old WAP 1.0 devices and the first WAP 2.0 ones. Today, this tool is still available but deprecated; we don’t need it.

Unfortunately, Series 40 and S60 Nokia emulators, like that shown in Figure 4-5, are available only for the Windows operating system, and some of the old ones have problems with Windows Vista and Windows 7. It is a good idea to install at least the last three emulators for each platform; for example, Series 40 6th edition, Series 40 5th edition FP1 (Feature Pack 1), and Series 40 3rd edition FP2.

Here is a focus-based navigator over a Nokia S40 emulator. If you use File→Open, you must type http:// first.

Figure 4-5. Here is a focus-based navigator over a Nokia S40 emulator. If you use FileOpen, you must type http:// first.

If you need to emulate a Nokia device, first find the correct platform version for that device at and then download the emulator for that platform. Nokia guarantees (and it works almost all the time) that every device based on the same platform version has the same browser and rendering engine and even the same hardware features.


There isn’t a Maemo or MeeGo emulator for testing mobile websites, but you can download MeeGo for netbooks from and run it on a virtual machine.

The Nokia emulators will add shortcut icons to your Start menu, so it will be easy to find them. Once you’ve launched the emulator, you can open the browser and type in the URL or use the shortcut FileOpen, which allows you to type or paste a URL or browse for a file in your local filesystem. The emulator will open the browser automatically.


Some of the latest S40 emulators have predictive text input active by default, and this will deactivate the usage of your desktop QWERTY keyboard to type. Before using them, you’ll need to disable predictive input.

Nokia S40 emulators support the use of localhost or to connect with your desktop host computer.

iPhone simulator

Only available for Mac OS X, the iPhone Simulator, shown in Figure 4-6, offers a free simulation environment including Safari. It is not an emulator, so it does not really provide a hardware emulation experience and is not a true performance indicator. However, it is perfectly suitable for seeing how your website is rendering and how your code is working. It’s especially convenient for loading local or remote files by typing in the URL field using your desktop keyboard.

The iPhone Simulator allows us to rotate the screen as in the real device.

Figure 4-6. The iPhone Simulator allows us to rotate the screen as in the real device.

The iPhone Simulator is included with the SDK for native development, available for free at The SDK may take a while to download, because it’s more than 2 GB. You can download the latest version of the operating system, in which case you can switch between versions using the HardwareVersion menu option. With the Simulator, you can also select if you want to simulate an iPhone or an iPad.


At the time of this writing, there is no way to emulate the real iPhone browser on Windows or Linux machines. In Chapter 13 we will cover alternatives to emulation that can help even on Windows machines.

Once the emulator is open, you can open the Safari application and type a URL in the address bar. To open a local file, use the file:/// protocol in the address field (for example, file:///Users/myUser/Desktop/test.html to open an HTML file on the desktop of the myUser user).


The most accurate iPhone experience on Windows can be found using the MobiOne emulator, which includes a Visual Designer. It is available for free at and it includes a WebKit browser emulating most of the iPhone extensions. It also supports a Palm webOS skin.

Pasting a URL from the clipboard can be a little tricky from iOS 3.0. When you paste text using the keyboard or the Edit menu, the text will be pasted into the iPhone’s internal clipboard. You then need to paste it again using the iPhone’s gesture, tapping once over the text input and selecting Paste from the contextual menu, as shown in Figure 4-7.

You can use your desktop keyboard, or Edit→Paste to paste text to the iPhone’s clipboard, and then tap once on the text input and press Paste on the screen to paste it where you want it to go.

Figure 4-7. You can use your desktop keyboard, or EditPaste to paste text to the iPhone’s clipboard, and then tap once on the text input and press Paste on the screen to paste it where you want it to go.

Palm emulator

Palm has been in the emulator market for more than 10 years and has always had great support for these tools. We have already talked about the history of Palm and Palm OS; in this book we will cover only the new webOS, the operating system available since Palm Pre. You can download the Palm Mojo SDK, which includes the Palm emulator, from It is available for Windows, Mac OS X, and Linux. To use it, you must have Sun VirtualBox, a free virtualization tool available from, installed on your machine. If everything goes OK, you can open the Palm emulator from the Start menu, the command line/Terminal, or your applications list.


If you want to download and install old Palm OS (now Garnet OS) SDKs and simulators, you can find them at This is the developer’s site for ACCESS, the current owner of Garnet OS and the NetFront browser.

In the Palm emulator, you can open the applications menu with your mouse and choose Web to type a URL. This emulator can be a little confusing at first because it doesn’t support an onscreen keyboard (see Figure 4-8); we only see the screen of the device.

The webOS emulator doesn’t have an onscreen keyboard, so you need to learn the shortcuts to emulate keypresses.

Figure 4-8. The webOS emulator doesn’t have an onscreen keyboard, so you need to learn the shortcuts to emulate keypresses.

To help you get started, Table 4-1 lists some keyboard shortcuts that will be helpful for using the emulator.

Table 4-1. Palm emulator keyboard shortcuts



Alt (Windows, Linux), Option (Mac)

Option key


Opens (or closes) the launcher


Back action (generally goes back to the previous card/window)


Minimizes (or maximizes) the current card (window)

Left and right arrow

Switches between applications


If you have a MacBook laptop like me, you will not find the End or Home keys on your keyboard. In the Palm emulator, you can use Function-right arrow and Function-left arrow for the same functionality.

The Palm emulator, like Android’s, doesn’t support simple local file opening. You’ll need to use a local web server and use the internal VirtualBox IP address to access the host server.

BlackBerry simulators

Research in Motion (RIM), vendor of the popular BlackBerrys, has done a great job with emulators, with one only problem: it is very difficult to decide which one to download and use. Dozens of different installers are available at; you can download the proxy server, plug-ins for Eclipse and Visual Studio for web developers, and the simulators. All the tools are compatible only with the Windows operating system.

The first requirement is to download the BlackBerry Email and MDS Services Simulator Package. This proxy allows any simulator to access the network and emulates email services and an enterprise server. Before opening a browser, you need to start this service on your computer.

The BlackBerry Smartphone Simulators are available at The first step is to select the smartphone you want to emulate (for example, BlackBerry Tour 9630) and choose either the carrier you want (or Generic), or the OS version.

You can also click the “view all BlackBerry Smartphone Simulator downloads” link and select the appropriate version of the BlackBerry simulator from the list of more than 20 available choices, starting with version 3.6. Every version has a choice of simulators available for many combinations of BlackBerry device and operator firmware. For example, if you choose version 4.2, you can download a BlackBerry 8100 simulator with one of the following operator options:

  • Operator-less

  • Cingular Wireless

  • Vodafone

  • TIM

  • Telefonica

  • Rogers Wireless

  • T-Mobile USA

  • Orange

  • O2

In addition, there are different versions of the operating system available for the same device and for the same operators. You can either select the operator-agnostic firmware (Generic) or the firmware for a specific operator to download. One example of a BlackBerry simulator is shown in Figure 4-9.

This BlackBerry simulator is pointer-based, so you need to use the onscreen keys or the arrow keys on your desktop keyboard to browse as a mobile user.

Figure 4-9. This BlackBerry simulator is pointer-based, so you need to use the onscreen keys or the arrow keys on your desktop keyboard to browse as a mobile user.

A list of the devices available per version is shown in Table 4-2.

Table 4-2. List of BlackBerry simulators and device models available for each version

Simulator version

Some devices available (with many operators for each one)


Tour (9630), Curve (8530), Storm (9500, 9530), Storm 2 (9520, 9550), Bold (9700)


Tour (9630)


Storm (9500, 9530)


Curve (8350i, 8900, 8520, 8230), Bold (9000)


Pearl (8220, 8230), Bold (9000)


Pearl (8100, 8110, 8120, 8130), Curve (8300, 8310, 8330), 8800, 8820, 8830, 8880, 8700


Pearl (8110, 8120, 8130), Curve (8330)


8707, 8820, 8830, Curve (8300, 8310, 8320)


Pearl (8100), 7130, 8707, 8700, 8800


Pearl (8100)


8700, 8707, 7130, 8703, 8707, 7290, 7250, 7130, 7100

Once you’ve installed your emulator, remember to open the BlackBerry MDS Services Simulator before using it. Launch the emulator, open the browser, and type the URL you want to access, and you’ll see something like Figure 4-9. These emulators don’t support local files or accessing them through localhost; you can use the local IP address of your desktop if you’re on a network or the public IP address if you are connected directly to the Internet.

Windows Mobile emulators

You can download Windows Mobile emulators along with Visual Studio 2008 or 2010, or without the IDE in standalone mode. The emulator isn’t available with the free Express versions of Visual Studio, and they work only on Windows-based computers.

You will need to download:

  • The Microsoft Device Emulator

  • Windows Mobile emulator images or images from manufacturers

  • Virtual PC 2007 for Internet connectivity

  • ActiveSync (only for Windows XP or 2003 Server) or Windows Mobile Device Center (only for Windows 7, Vista, or 2008 Server)

All these packages are available for free at

If you’re using a version prior to 6.0, shortcut icons will not automatically appear in the Start menu after installation. You will need to locate the installation folder (e.g., c:\Program Files\Microsoft Device Emulator\1.0) and execute the Emulator Device Manager (the file dvcemumanager.exe).

The Emulator Device Manager lists all the installed images; you can right-click on one and select Connect from the context menu. However, your work is not finished yet.

One of the most common problems with Windows Mobile emulators is that the Internet connection doesn’t work out of the box. You need to do some setup before connecting to the network. To connect the emulator with the network, follow these steps:

  1. With the emulator opened, right-click it in the Device Manager and select Cradle.

  2. In the Device Manager, choose FileConfigure. On the Network tab, check “Enable NE2000 PCMCIA network adapter and bind to.”

  3. Press OK to save your changes and create a bridge between your real network and a virtual network in the emulator.

  4. In the emulator, go to the network settings. The location may change between Windows Mobile versions, but it should be found near Start menuSettingsConnections. Choose Network Cards and select The Internet from the drop-down list.

  5. Repeat this process for each emulator.

  6. Open a champagne bottle and enjoy.


If you have installed Visual Studio, you can create an empty Smart Device solution (for Windows Mobile or PocketPC) and run it. The emulator will open without any other issue.

Windows Phone emulator

Remember that starting in 2010, Microsoft will stop evolving the Windows Mobile operating system and replace it with Windows Phone 7. The whole platform is new, including the mobile browser. To install the Windows Phone emulator you should use Visual Studio 2010 (you can use the free version, called Visual Studio 2010 Express for Windows Phone). It includes the emulator, and you can also use Internet Explorer. To install it, you will need Windows Vista or Windows 7. A multitouch screen is required to emulate multitouch over the emulator.

You can download it for free from

i-mode HTML simulator

If Japanese people are likely to use your website, you should consider testing it for NTT DoCoMo i-mode devices. Fortunately for people like me, who do not read Japanese, the company has created an English version of its website containing almost all the relevant development information. A simulator for its devices is also available for Windows.

You can download the i-mode HTML Simulator and the i-mode HTML Simulator II from The first one is suitable for simulation of devices released prior to May 2009, and the second one is for the second generation of devices, starting in May 2009.


The Fire Mobile Simulator ( is a Firefox plug-in simulator for the three main operators in Japan, DoCoMo, Au, and Softbank. The page and plug-in are in Japanese, but an online translator such as Google Translate ( will give you all the information you need.

Opera Mobile emulator

In 2010, Opera released the first emulator for its Opera Mobile browser, available for Mac OS X, Linux, and Windows. The emulator runs the exact same code as the mobile version, so it is accurate. In addition to the browser, the package includes an Opera Widgets Mobile Emulator, a desktop version of the widget engine available for Symbian and Windows Mobile, discussed in Chapter 12. With this emulator you can also debug your mobile web applications using Dragonfly, a debugging service for Opera that we will cover in Chapter 13.

You can download the emulator for free at You can also download the Opera Debug Menu, a set of shortcuts to Opera’s developer-focused features, from the same URL.

Openwave simulator

We have already talked about Openwave, a browser installed on many low- and mid-end devices from a variety of vendors before 2008. The company has since been acquired by Myriad Group, but we can still download different versions of the simulator at


If you are using Visual Studio Development Server you will not be able to access your ASP.NET pages from a mobile emulator, for security reasons. You will have to change your security permissions, or use IIS instead.

Adobe Device Central

I really like Adobe and many of its products. I even manage an official Adobe User Group. However, while Adobe Device Central (the tool that provides mobile emulation for Flash and for mobile websites) is great for Flash Lite emulation, it’s not so good for websites.

The tool is included with Adobe Dreamweaver, Adobe Flash Professional, and some of the suites and has an updated list of devices, including their screen sizes and Flash Lite capabilities. However, for browser emulation it is just a miniature WebKit browser on the desktop. It doesn’t provide real (or almost similar) simulation in terms of typography, browser bars, and markup rendering.

To simulate a website as shown in Figure 4-10, open the HTML source in Dreamweaver and select FilePreviewDevice Central or, from version CS5, use FileOpen.

Don’t rely on Adobe Device Central’s rendering engine for mobile devices. Its best feature is its great library of mobile device capabilities.

Figure 4-10. Don’t rely on Adobe Device Central’s rendering engine for mobile devices. Its best feature is its great library of mobile device capabilities.


Table 4-3 shows how the different platform emulators and simulators allow us to access files and the clipboard on our host machines.

Table 4-3. Comparison of available emulators and simulators


Able to open local files

Accesses host’s local server via

Supports copy/paste from host




Nokia S40 and S60







Yes (two-phase for 3.0)



Network IP address


Palm webOS


Virtual Box IP address


Windows Mobile


Virtual PC IP address



For emulators without URL pasting abilities, you can generate a free mobile-optimized short URL for easy typing on a mobile device or in an emulator at

Online simulators

Online simulators are another option for exploring the mobile web.

Opera Mini Simulator

At, you can enjoy a full Opera Mini simulation in a Java applet (see Figure 4-11). This URL is for the latest version of the software (at the time of this writing, 5.0), but you can also find simulators for previous versions, like 4.2 at


Remember that Opera Mini and other user-installable browsers are available as normal native or Java ME applications, so you can use any emulator to download them. The Nokia, Windows Mobile, and BlackBerry emulators are great for this purpose.

The Opera Mini Simulator is an online free service running the same Java browser as the one on real devices.

Figure 4-11. The Opera Mini Simulator is an online free service running the same Java browser as the one on real devices.

Opera also offers an emulator for Opera Mobile that works on Windows, Mac OS X, and Linux and can be downloaded for free at

The website has a great testing tool that we will cover later in this book (see Chapter 13). It also has an online simulator for some older devices, such as the following:

  • Nokia N70

  • Samsung Z105

  • Sony Ericsson K850i

  • Motorola v3i

  • Sharp GX-10


When using the Nokia, BlackBerry, Symbian, Windows Mobile, and Android emulators, we can install over them browsers that are available for free, such as Opera Mini, Bolt, Opera Mobile, and the UC Browser.

iPhone web simulation

Some websites, such as and, try to simulate the iPhone browser, but the experience isn’t the real thing; they are just iframes with the skin of the iPhone.


We will get deeper into the creation of a testing environment in Chapter 13, moving beyond emulators and simulators.

The best content for your career. Discover unlimited learning on demand for around $1/day.