You are previewing Programming the Mobile Web, 2nd Edition.

Programming the Mobile Web, 2nd Edition

Cover of Programming the Mobile Web, 2nd Edition by Maximiliano Firtman Published by O'Reilly Media, Inc.
  1. 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
  2. 1. The Mobile Jungle
    1. The Mobile Ecosystem
      1. What Is a Mobile Device?
      2. Mobile Device Categories
    2. Brands, Models, and Platforms
      1. Apple iOS
      2. Android
      3. Windows
      4. Nokia
      5. BlackBerry
      6. Samsung
      7. Sony Mobile
      8. Motorola Mobililty
      9. Amazon
      10. LG Mobile
      11. HTC
      12. HP and Palm
      13. Firefox OS
      14. Ubuntu for phones
      15. Chinese platforms
      16. Other Platforms
      17. Smart TV Platforms
    3. Technical Information
  3. 2. Understanding mobile web
    1. Myths of the Mobile Web
      1. It’s Not the Mobile Web; It’s Just the Web!
      2. You Don’t Need to Do Anything Special About Your Desktop Website
      3. One Website Should Work for All Devices (Desktop, Mobile, TV, etc.)
      4. Just Create an HTML File with a Width of 320 Pixels, and You Have a Mobile Website
      5. Native Mobile Applications Will Kill the Mobile Web
      6. People Are Not Using Their Mobile Browsers
    2. What is the mobile web?
      1. Differences
    3. Mobile Web Eras
      1. WAP 1
      2. WAP 2.0
    4. The Mobile Browsing Experience
      1. Browsing Types
      2. Zoom Experience
      3. Reflow Layout Engines
      4. Direct Versus Cloud-based Browsers
      5. Multipage Experience
      6. Web Engines
    5. Fragmentation
      1. Display
    6. Market Statistics
  4. 3. Browsers and Web Platforms
    1. Web platforms that are not browsers
      1. HTML5 Webapps
      2. Web Views
      3. Pseudo-browsers
      4. Native Web apps, packaged apps and hybrids
      5. Ebooks
    2. Mobile Browsers
      1. Preinstalled Browsers
      2. User-Installable Browsers
      3. Browser Overview
  5. 4. Tools for mobile web development
    1. Working with Code
      1. Adobe Dreamweaver
      2. Adobe Edge Tools
      3. Microsoft Visual Studio and WebMatrix
      4. Eclipse
      5. Native web IDEs
    2. Testing
      1. Emulators and Simulators
      2. Real devices testing
      3. Remote Labs
    3. Production Environment
      1. Web Hosting
      2. Domain
      3. Error Management
      4. Statistics
  6. 5. Architecture and Design
    1. Mobile Strategy
      1. When to get out of the browser
      2. Context
      3. Server Side Adaptation
      4. Progressive Enhancement
      5. Responsive Web Design
      6. RESS
    2. Navigation
    3. Design and User Experience
      1. Touch Design Patterns
      2. Tablet Patterns
      3. Official UI Guidelines
      4. What not to do
  7. 6. Markups and Standards
    1. First, the very Old Ones
      1. WML
    2. Current Standards
      1. Politics of the Mobile Web
      2. Delivering Markup
    3. XHTML Mobile Profile and Basic
      1. Available Tags
      2. Official Noncompatible Features
      3. Creating Our First Compatible Template
      4. Markup Additions
    4. Mobile HTML5
      1. Creating our first HTML5 template
      2. Syntax Rules
      3. New elements
    5. CSS for Mobile
      1. WCSS Extensions
      2. CSS 3
    6. HTML5 Compatibility levels
      1. Testing your browser
    7. Confusion
  8. 7. Basics of Mobile HTML5
    1. Heading Structure
      1. Title
      2. Website icon
      3. Home Screen icons
      4. The viewport
      5. Changing the navigation method
      6. Removing automatic links
      7. Meta data for sharing
      8. Hiding URL address bar
      9. Native app integration
    2. The Document Body
      1. Main Structure
    3. HTML5 Mobile Boilerplate
    4. The content
      1. Block Elements
      2. Lists
      3. Tables
      4. Frames
      5. Links
      6. Accessibility
  9. 8. HTML5 Forms
    1. Form design
    2. Form elements
      1. Select lists
      2. Radio buttons and checkboxes
      3. Buttons
      4. Hidden fields
      5. Text input fields
      6. Range slider field
      7. Date input fields
      8. File selection fields
      9. Non-interactive form elements
    3. Form Control Attributes
      1. Placeholder
      2. Auto focus
      3. Autocomplete
      4. Validation input attributes
      5. Read only
      6. Safari extensions
      7. Firefox extensions
      8. XHTML mobile <code xmlns="" xmlns:epub="" xmlns:m="" xmlns:pls="" xmlns:ssml="" xmlns:svg="" class="literal">inputmode</code>
      9. Additional form attributes
    4. Form validation
      1. HTML5 validation
      2. WAP CSS validation
  10. 9. Feature and device detection
    1. Possible problems
      1. Possible solutions
    2. Informational websites
      1. Can I use
      3. Web Platform
    3. Client-side detection
      1. HTML Fallbacks
      2. CSS Fallbacks
      3. Vendor Prefixes
      4. JavaScript fallbacks
      5. Modernizr
      6. Polyfills
      7. Platform detection
    4. Server-side detection
      1. HTTP
      2. Detecting the Context
      3. Cloud-based browsers
      4. Mobile detection
      5. Transcoders
      6. Device Libraries
  11. 10. Images and Media
    1. Images
      1. Image formats
      2. Using the img element
      3. Responsive Images
      4. Local pictograms
    2. Multiple density screens
      1. Using vector-based solutions
      2. Providing one single image
      3. Providing image alternatives
      4. SVG
      5. Canvas
    3. Adobe Flash
    4. Video
      1. Containers and Codecs
      2. Delivering video
      3. HTML5 video element
      4. Streaming
      5. Object embedding
      6. Video compatibility
    5. Audio
      1. Invisible audio player
      2. Web Audio API
      3. Audio Compatibility
  12. 11. CSS for Mobile Browsers
    1. Where to Insert the CSS
    2. Media Queries
      1. CSS3 Media Queries
    3. Selectors
    4. CSS Techniques
      1. Reset CSS Files
      2. Text Format
    5. Common Patterns
      1. Display Properties
      2. Rounded corners
      3. Border Image
      4. Pseudoclasses
      5. Backgrounds
      6. Scrollable areas
      7. Content
      8. Opacity
      9. Cursor management
      10. Selection management
      11. Touch Callout
      12. Highlight color
      13. Appearance override
    6. CSS Sprites
      1. Samples and Compatibility
      2. CSS Sprites Alternatives
      3. CSS3 Modules
      4. Gradients
      5. Reflection
      6. Masks
      7. Transforms
      8. Transitions
      9. Animations
      10. CSS Filter Effects
      11. CSS Regions and Exclusions
      12. CSS New Values and Units
  13. 12. JavaScript Mobile
    1. Coding for Mobile Browsers
      1. HTML5 script extensions
      2. Code Execution
      3. Cloud-based browsers
      4. JavaScript debugging and profiling
      5. Battery consumption
    2. Background execution
      1. Status detection
      2. Background tab notification trick
      3. Background execution compatibility
      4. Push notifications
    3. Supported Technologies
      1. Document Object Model
      2. Selectors API
      3. JSON
      4. Binary Data
      5. Web Workers
      6. HTML5 APIs
      7. Native webapp APIs
    4. Standard JavaScript behavior
      1. Standard dialogs
      2. History and URL management
      3. Manipulating windows
      4. Focus and scroll management
      5. Timers
      6. Changing the title
      7. Cookie management
      8. Event Handling
    5. JavaScript Libraries
      1. Mobile Libraries
    6. UI Frameworks
      1. Sencha Touch
      2. jQuery Mobile
      3. Enyo
      4. Montage
      5. iUI
      6. jQTouch
      7. JavaScript Mobile UI Patterns
  14. 13. Offline, Storage and Network
    1. Offline webapps
      1. The manifest file
      2. Reusing the manifest
      3. Accessing online resources
      4. Updating the package
      5. Deleting the package
      6. JavaScript API
      7. Compatibility and limits
    2. Client-side Storage
      1. Web Storage
      2. Web SQL Database API
      3. Indexed Database API
      4. FileSystem API
      5. User’s power
      6. Debugging storages
    3. Network communication
      1. Ajax
      2. Server Sent Events
      3. Web Sockets
  15. 14. Geolocation and Maps
    1. Location Techniques
      1. Accuracy
      2. Indoor Location
      3. Client Techniques
      4. Server Techniques
      5. Asking the User
    2. Detecting the Location
      1. W3C Geolocation API
      2. Carrier network location APIs
      3. IP Geolocation
    3. Maps and Navigation app integration
      1. Google Maps for Android
      2. iOS Maps
      3. Bing Maps
    4. Showing a Map
      1. Google Maps API v3
      2. Google Maps Static API
      3. Nokia Here
  16. 15. Device Interaction
    1. Mobile-specific URIs
      1. Making a call
      2. Sending email
      3. Sending an SMS
      4. Other communication apps
      5. Adding a contact to the phonebook
      6. Integrating with other applications
    2. JavaScript APIs
      1. Touch
      2. Gestures
      3. Sensors
      4. Network Information
      5. File Management
      6. Full Screen
      7. Web Notifications
      8. Camera
      9. Battery
      10. Vibration
      11. Other APIs
  17. 16. Native and installed Webapps
      1. Pros and Cons
      2. Architecture
    2. Standards
      1. Packaging and Configuration Standards
    3. Official platforms
      1. iOS Web apps
      2. Symbian standalone webapps
      3. Windows 8 Store apps
      4. Mozilla Open Web Apps
      5. Chrome apps
      6. Samsung Web apps
      7. BlackBerry WebWorks
      8. Nokia S40 webapps
      9. Nokia Symbian webapps
    4. Apache Cordova / PhoneGap
      1. Template creation
      2. Cordova WebView
      3. CordovaJS
      4. Plugins
    5. Distribution
      1. iOS AppStore
      2. Android stores
      3. BlackBerry AppWorld
      4. Microsoft Windows Store
      5. Microsoft Windows Phone Store
    6. Full screen apps Patterns
      1. Multiple Views
      2. Layout
      3. Input Method
      4. One-View Widget
      5. Dynamic Application Engine
      6. Reload my webapp
  18. 17. Content Delivery
    1. MIME Types
      1. Static definition
      2. Dynamic definition
    2. File Delivery
      1. Direct linking
      2. Delayed linking
      3. OMA Download
    3. Application and Games Delivery
      1. iOS applications
      2. Android applications
      3. Windows applications
      4. Java ME
  19. 18. Debugging and Performance
    1. Debugging
      1. Server-Side Debugging
      2. Markup Debugging
      3. Client-Side Debugging
    2. Performance Optimization
      1. Measurement
      2. Best Practices
  20. 19. Distribution and Social Web 2.0
    1. Mobile SEO
      1. Spiders and Discoverability
      2. How Users Find You
      3. User Fidelizing
    2. Mobile Web Statistics
      1. Google Analytics for Mobile
      2. Yahoo! Web Analytics
      3. Mobilytics
    3. Monetizing your website
      1. Mobile Advertisement
    4. Mobile Web Social Features
      1. Authentication and sharing APIs
      2. Share Content
  21. 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. Webapp MIME Types
  22. Index
  23. About the Author
  24. Colophon
  25. Copyright

Chapter 4. Tools for mobile web development

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.

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 Visual Studio, Eclipse, Aptana Studio, and of course any good text editor, such as Sublime Text, Textmate, WebStorm or Notepad++. In mobile web development, it is often easier and cleaner to work directly with the code.

Adobe Dreamweaver

Dreamweaver (since the CS5.5 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 HTML5 as the document type, as shown in Figure 4-1.

Dreamweaver allows us to define new files as HTML5 or XHTML Mobile Profile documents as well as the ability to start with a jQuery Mobile template.
Figure 4-1. Dreamweaver allows us to define new files as HTML5 or XHTML Mobile Profile documents as well as the ability to start with a jQuery Mobile template.

Adobe Dreamweaver since version CS6 includes several enhancements for supporting mobile web designing and development, such as:

  • HTML5 support and code hinting

  • Multiple screen preview

  • jQuery Mobile integration

  • PhoneGap Build integration for native webapps compilation from the IDE

Adobe Edge Tools

Adobe offers a group of tools under the name of Edge that help designers and developers to create HTML5 applications. Inside these tools, we can find:

  • Edge Code: a complete HTML5 editor based on web technologies. This tool is based on the open source editor Brackets and it includes several interesting ideas on how to code HTML, CSS and JavaScript fast and easily.

  • Edge Reflow: a tool that help designers to create responsive web design solutions.

  • Edge Inspect: a tool for mobile HTML5 testing. We are covering this tool in the following pages.

  • Edge Animate: a tool to design HTML5 animations visually.

  • You can download these tools from

Microsoft Visual Studio and WebMatrix

Microsoft IDE’s support HTML5 syntax and Intellisense since version 2010 SP1. You can also use WebMatrix for mobile web development available for free at

WebMatrix since version 2 supports mobile websites, including:

  • Mobile-friendly templates

  • Connection with Windows Phone emulator and iOS simulation through partners, such as Electrium Plumb

  • Code-competition for HTML5 and jQuery Mobile UI framework


If you would like to use Eclipse as your development environment there are several plugins you can use to create mobile HTML5 apps. I can suggest you Aptana from Titanium, a free Eclipse-based IDE for HTML5 and mobile development. You can download a free version from

Native web IDEs

If we are going to target native web or hybrid apps, some platforms offer us some tools and IDEs to develop, test and build our final packages. These are the most important products that we can use:

  • Nokia Web Tools: For testing and compilation of S40 webapps. A legacy 1.2 version that we can still found will help us with the legacy WRT Symbian format.

  • Tizen IDE: For the creation of Tizen apps based on HTML5.

  • PhoneGap XDK: This is a non-official tool for creating Apache Cordova HTML5 native apps

  • Titanium Studio: It’s an Eclipse plugin to create Appcelerator Titanium JavaScript mobile apps.


Testing with desktop browser is not good enough. Mobile browsers are really different and we need tools to test our mobile apps as accurate as possible.

Emulators are very useful and provide a simple, fast, and fairly accurate testing solution. If it doesn’t work in the emulator, it probably will not work on the real device, and if it works in the emulator, it probably will work on the real device (probably, again probably!).

There are some problems with this testing approach, though. For one thing, there are hundreds of differences between real devices, and hundreds of bugs. Furthermore, there are several platforms without emulation. That is why real device testing is mandatory.

But how can we get access to multiple real devices? Here are a few suggestions:

  • Acquire as many friends as you can (with different devices, if possible).

  • Buy or rent devices. Some vendors offer promotions for buying or renting devices for developers and their partners.

  • Use a testing house company. This is an expensive solution and not recommended for mobile web developers; we need to be as close as possible to the devices.


Mob4Hire is a mobile social network aimed at joining testers with mobile devices around the world and developers who want to test applications or websites using a payment service. You can find a similar solution from with $39 per tester at

  • Create a beta tester program, for receiving feedback.

  • Access a community mobile lab on your city.

  • Use a remote device lab.

In Chapter 18 we are going to review tools and services that will help us to test and measure performance on mobile web sites.

Let’s first review emulators and simulators, before talking about the other solutions we can use.

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 Phone 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, Chrome or Safari) with real typography nor simulate their rendering engines.

For mobile web development, we will find emulators from Nokia, BlackBerry, Android, webOS, and Windows Phone and simulators from Apple for iOS (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 Mobile, LG, Motorola, or Samsung with their proprietary OSs (used on their low- and mid-end devices).


Emulators and simulators don’t replace real device testing, but are useful for UI testing, JavaScript debugging and testing different scenarios. These tools are useless to test performance, touch interaction and some hardware scenarios, such as accelerometer and lighting conditions.

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, 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. On Windows, there is an installer version that will do the work for you.

After downloading the Android SDK, open the SDK 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 SDK 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 Manager shown in Figure 4-2, where you can download and configure Android platforms (known as packages or targets) after installing the base SDK.

You can download as many packages as you want, one per operating system version, and even you can download vendor-specific emulators, such as Motorola Xoom 2, LG 3D-screen or the Galaxy Tab. Try to download latest release of every Android version, such as Android 2.3.3, Android 4.0 and Android 4.1.

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 AVD Manager. The AVD (Android Virtual Device) Manager can be opened from the SDK Manager, in the menu Tools > Manage AVDs.

Once you’ve installed a platform, you need to create a new Virtual Device using the AVD Manager. Creating a new device involves selecting the target (of the installed packages), 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. To understand screen sizes names, check Table 2-1.


If you add external sites in the Android SDK Manager we can install third-party Android emulators. For example, we can install Kindle Fire emulators adding

One you’ve created the device, you can select it and click Start 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.

When starting the AVD, you will be prompted with an opening configuration window –as seen in Figure 4-5. In this Launch Options window you can scale the emulator if it’s bigger than your own computer screen, a possible situation when opening tablets emulators, using the Scale display to real size option. If you want to delete all the settings and application installed on that emulator you can use the option Wipe user Data.

When opening an AVD we need to select some configuration attributes, such as display scaling.
Figure 4-5. When opening an AVD we need to select some configuration attributes, such as display scaling.


When using Android emulator, you can use the shotcuts Control-F11 and Control-F12 to change emulator’s orientation.

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. The emulator doesn’t support opening local files directly using the file:// protocol, 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:

Up to version 4.0, Android emulator comes with Android Browser only. You can install other browsers inside if you find the installation package out of the Google Play Store. Inside the emulator, you can download other browsers from the URL


The Android Emulator doesn’t include officially the Google Play Store. Therefore, there is no way to download or buy native apps there. If you want to install other apps –such as alternative browser- you need to look for the installation package (apk file) on a different source.

iOS simulator

Only available for Mac OS, the iOS Simulator, shown in Figure 4-6, offers a free simulation environment for iPhone and iPad, including the mobile browser 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 iOS Simulator allows us to rotate the screen as in the real device.
Figure 4-6. The iOS Simulator allows us to rotate the screen as in the real device.

The iOS Simulator is included with the SDK for native development, available for free at the Mac App Store (search for Xcode) or at The SDK may take a while to download, because it’s about 1.5 GB. You will always download the latest version of the operating system and then add previous versions (such as 6.0), in which case you can switch between versions using the Hardware→Version menu option.

To download previous version of the operating system to the simulator, you need to open the Xcode app, open Preferences and select Downloads as seen in Figure 4-7.


When simulating high resolution devices we can change the scale of the simulator on the Window→Scale menu or using the hot keys Mac+1, Mac+2 and Mac+3.

Within the Simulator, you can also select what device do you want to simulate using the Hardware→Device menu option:

  • iPhone: emulates low resolution iPhone and iPod touch, such as iPhone 3GS

  • iPhone Retina 3.5-inch: emulates high resolution 3.5” screen iPhone and iPod touch devices, such as iPhone 4S

  • iPhone Retina 4-inch: emulates 4” screen iPhone and iPod touch devices, such as iPhone 5

  • iPad: emulate low resolution iPad, such as iPad 2 and iPad Mini

  • iPad Retina: emulates high resolution iPad, such as iPad third and fourth generation.


At the time of this writing, there is no way to emulate the real iPhone browser on Windows or Linux machines. There are some free and commercial tools that will help you to simulate some behaviors on Windows such as Electric Mobile Simulator available at, , MobiOne emulator available at or BrowseEmAll at

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). You can also drag and drop an HTML file from the desktop to the Simulator while it’s opened to browse it.

Opening Preferences in Xcode allow us to download previous iOS versions that will be available later on the simulator.
Figure 4-7. Opening Preferences in Xcode allow us to download previous iOS versions that will be available later on the simulator.

Pasting a URL from the clipboard can be a little tricky. 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-8 or use the Edit→Paste Text menu option.

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-8. 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.


There is no AppStore available for iOS Simulator meaning that you can’t download alternative browsers or pseudo-browsers such as Opera Mini or Google Chrome for iOS.

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 (feature phones and social devices) and for Symbian smartphones at


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, Nokia emulators, like that shown in Figure 4-9, are available only for the Windows operating system.

Here is a touch-based based over a Nokia S40 emulator. If you use File→Open, you must type http:// first.
Figure 4-9. Here is a touch-based based over a Nokia S40 emulator. If you use File→Open, 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.

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 File→Open, 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.

BlackBerry simulators

Research in Motion (RIM), vendor of the popular BlackBerrys, has two different tools available for web developers: emulators and a simulator for webapps known as Ripple.

RIM 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 and the simulators. The smartphones up to 7.1 emulators are compatible only with the Windows operating system and for BB10 and the PlayBook version for Mac and Linux are also available


Ripple is a free tool available as a Google Chrome for desktop plugin that help us testing HTML5 web content and WebWorks native web applications in a simulation environment. It’s available for free at and it’s compatible with Mac and Windows. There is also a standalone version that may be deprecated in the future, based on Chromium.

You can emulate different scenarios, from BlackBerry 7, PlayBook and the newest BlackBerry 10 platform, including mobile web support and WebWorks –adding support for native web API testing-. While Ripple is good for a first testing remember that is really the Chrome engine, not the real web engine running on BlackBerry devices. Ripple requires an HTTP connection (local or external), therefore you can not just open files from the local filesystem.

Ripple is a RIM free plugin for Google Chrome on desktop allowing us to simulate some mobile devices –such as BlackBerrys- and native web platform –such as Apache Cordova/PhoneGap or WebWorks-.
Figure 4-10. Ripple is a RIM free plugin for Google Chrome on desktop allowing us to simulate some mobile devices –such as BlackBerrys- and native web platform –such as Apache Cordova/PhoneGap or WebWorks-.
BlackBerry Smartphones

The first requirement for older emulators 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 from up to version 7.1 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. One example of a BlackBerry simulator is shown in Figure 4-11.

Some BlackBerry simulators are pointer-based, so you need to use the onscreen keys or the arrow keys on your desktop keyboard, and some are touch-based so you can use your mouse on the screen.
Figure 4-11. Some BlackBerry simulators are pointer-based, so you need to use the onscreen keys or the arrow keys on your desktop keyboard, and some are touch-based so you can use your mouse on the screen.

Once you’ve installed your emulator, for older versions 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.

PlayBook and BB10

The BlackBerry PlayBook tablet and BlackBerry 10 simulators are available for different operating systems and before installing them you need to have installed VMWare Player on Windows (available at and VMWare Fusion on Mac (available at

Both PlayBook and BB10 simulators are virtual machines and you can use the whole operating system, including the BlackBerry Browser to test your web applications. If you want to open local files, you need to setup a server and verify on your VMWare which IP address is your host machine.

webOS 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 webOS, the operating system available since Palm Pre. You can download the Palm SDK, which includes the Palm emulator, from It is available for Windows, Mac OS X, and Linux. To use it, you must have VirtualBox, a free virtualization tool available from, installed on your machine. If everything goes OK, you can open the webOS emulator from the Start menu, the command line/Terminal, or your applications list.


For the future, all the webOS emulation tools will be available as the open source project in

Windows emulators

If you want to test your applications on Windows Phone, you can download the free Windows Phone SDK or buy a license of Visual Studio. The Windows Phone emulator comes with the SDK and includes the current version of Internet Explorer to test web content. You can download the SDK from


The Windows Phone emulator is only compatible with Windows Vista SP2, Windows 7 or Windows 8 and a graphic driver with WDDM 1.1 support. You can check your hardware specification to verify if you have this version of a graphic driver. If you don’t have it, you will see the Emulator but you will see only a white page when trying to load Internet Explorer.

The Windows Phone 7.x emulator needs a Windows 7 desktop environment and Windows Phone 8 emulator needs Windows 8 desktop environment.
Figure 4-12. The Windows Phone 7.x emulator needs a Windows 7 desktop environment and Windows Phone 8 emulator needs Windows 8 desktop environment.

If you want to emulate Windows 8 for tablets, you have two options:

  • Use your own Windows 8 for desktop environment as for Internet Explorer is the same version.

  • Use the Windows Simulator included with Visual Studio for Windows 8 -even with Express, a free version of the IDE-. It includes Internet Explorer 10.

The Windows Simulator works only on Windows 8 desktop machines and it emulates a tablet touch environment, where you can emulate touch gestures, geolocation, different screen sizes and orientations.


If you are looking for the legacy Windows Mobile emulation, you can find a guide from the first edition of this book at

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 accurateWith this emulator you can also debug your mobile web applications using Dragonfly, a debugging service for Opera that we will cover in Chapter 13.

As we can see in Figure 4-13, this emulator comes with different real mobile devices profiles and we can create our own combination from screen resolution, pixel density and type (touch, keypad or tablet).

With Opera Mobile Emulator, we can select a device profile or create our own profile defining each property’s values.
Figure 4-13. With Opera Mobile Emulator, we can select a device profile or create our own profile defining each property’s values.

You can download the emulator for free at

Opera Mini Simulator

At, you can enjoy a full Opera Mini simulation in a Java applet (see Figure 4-14). This URL is for the latest version of the software (at the time of this writing, 7.0).


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, Android, 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-14. 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


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.

Other official emulation platforms

Other platforms have its own emulators but they are no so simple to use or they are not optimized for web development.

Adobe Device Central

The tool was included with Adobe Dreamweaver, Adobe Flash Professional, and some of the suites up to CS 5.5 and it had 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. From CS6, Adobe has abandoned the project.

Keynote MITE

Mobile Interactive Testing Environment (MITE) is a piece of software from Keynote for testing, validating, and monitoring mobile websites using thousands of simulated devices. You can download it from


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

Table 4-1. Comparison of available emulators and simulators


Able to open local files

Accesses host’s local server via


OS Compatibility



Smartphones and Tablets

Windows, Mac and Linux




Smartphones and Tablets


Nokia S40





Windows Phone







Network IP address



BlackBerry PlayBook / BB10


VMWare IP address

Smartphones and Tablets

Windows, Mac and Linux



Virtual Box IP address

Smartphones and Tablets

Windows, Mac and Linux

Opera Mobile



Smartphones and Tablets

Windows and Mac



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

Remote emulation services

The cloud has come to us to solve some problems, as we don’t need to have everything installed on our computer. In this case, for mobile web development we have some cloud-based solutions that we can use for mobile testing.


It’s a cloud-based service optimized for cross-browser testing available at While it’s useful for desktop web testing, it added mobile web browsers lately. Instead of having emulators installed on our own development machine, we can use this web-based solution and use a remote emulator or simulator.


With BrowserStack we can use the official iOS Simulator on Windows and Linux machines. You can request a trial account at

BrowserStack includes emulation of Safari on iOS, Android Browser and Opera through different device’s profiles such as iPhone 3GS, iPhone 4S, iPad, Samsung Galaxy SII, HTC Evo 3D and Motorola Xoom.

Using a Java-based tunnel we can test local files in our development machine, or on a private server that is not accessible through the public Internet.

With BrowserStack service we can emulate Android and iOS devices remotely, even the iOS Simulator on Windows computers.
Figure 4-15. With BrowserStack service we can emulate Android and iOS devices remotely, even the iOS Simulator on Windows computers.

Browshot allows us to take screenshots of our mobile website with iOS, Android and BlackBerry devices. While you can’t interact with the emulation, sometimes a screenshot is enough. You can request an account at

Real devices testing

There is nothing like real devices when testing mobile websites. Not only you will find differences in performance but also on behaviors, like using your fingers to navigate and not a precise mouse pointer. And while creating your own testing lab is ideal, it’s also expensive and needs to be updated frequently. At the time of this writing, I currently have around 45 devices.

If you are on a limited budget, then you should try to buy one key device per platform and if you are targeting tablets you should get one –don’t rely on smartphones for tablet testing as browser don’t act in the same way-.


While potentially you can copy your web files to the memory of your phone and open them locally, it’s not a good idea; using an HTTP server –local or remote- is the way to do it.

When you have a real device the first question is, how to easily test your web development? The answer is through a web server. If your device supports Wi-Fi (almost every social device, smartphone and tablet supports WLAN at the time) then you can run a web server on your computer –such as Apache- and access it from your device using your local IP address. Remember that your computer must be connected to the same network and you should have a firewall or a router allowing internal port connection.

On Windows hosts you can get your IP address, opening a command line terminal (Start menu, type cmd) and using the ipconfig command. On Mac hosts you can get your IP address from System Preferences, Network.


Typing IP addresses on mobile devices can be a little complicated. You can create a shorter version of your URL and even generate a QR Code for camera scanning using the free service

If you want to test your mobile website on cellular network or you have no possibility to run a local web server on your development environment, you can always use a normal shared web service to host your files.

Adobe Edge Inspect

When you have real iOS and Android devices you can use the tool Adobe Edge Inspect -formerly known as Adobe Shadow- to help on your testing and debugging. Shadow is a solution involving different applications that works together and helps you make multi-device testing with almost no effort. All the information and download links are available at

The tool is available as part of Adobe Creative Cloud services. If you have a free account, you can connect with one device at a time. If you have a premium account, you can connect multiple devices simultaneously.

To make it work, you need to download the following parts:

  • Google Chrome for Windows or Mac and the Edge Inspect extension available at the Chrome web store.

  • Edge Inspect server for Windows or Mac, connected to our Adobe Creative Cloud account.

  • Edge Inspect client available for iOS on the AppStore and for Android on Google Play Store and Amazon AppStore for the Kindle Fire

When you have everything installed, you can open the Edge Inspect app (the server) on your desktop computer and Chrome. Then, on your mobile devices, open the Edge Inspect mobile app (the client) that will try to automatically find on your local network the server.

Adobe Edge Inspect allow us to maintain in sync our desktop browsing experience with a real Android or iOS device, take screenshots and make basic HTML and CSS debugging.
Figure 4-16. Adobe Edge Inspect allow us to maintain in sync our desktop browsing experience with a real Android or iOS device, take screenshots and make basic HTML and CSS debugging.


It’s important to understand that both the desktop computer (the server) and the mobile device (the client) must be connected to the same local network for making Edge Inspector to work

If your device can’t connect to your computer, you can add it manually. Once connected then Chrome for desktop and all your connected devices will be synchronized. That means that browsing to a web in your Chrome on your Windows or Mac machine will automatically fire a browsing to the same URL on every connected device to Edge Inspector.

Edge Inspector support some advanced features, such as:

  • Mobile screenshot

  • Debug your HTML and CSS dynamically through a Weinre session (to be covered in Chapter 18)

  • HTTP authentication support

  • Clear the cache on your devices


Adobe Edge Inspector is not using the browser on your iOS and Android devices but the default Web View engine. That means that you can’t use Edge Inspector to test on a different browser on your mobile device such as Chrome or Firefox. While being mostly the same, some behaviors on the Web View are not the same as the browser such as the luck of Nitro engine on iOS Web View.

Remote Labs

“Any sufficiently advanced technology is indistinguishable from magic,” said sci-fi writer Arthur C. Clarke in 1961. When I demonstrate some of these remote labs in my classes, I see a lot of astonished faces.

A remote lab is a web service that allows us to use a real device remotely without being physically in the same place. It is a simple but very powerful solution that gives us access to thousands of real devices, connected to real networks all over the world, with a single click. You can think of it as a remote desktop for mobile phones.

There are three kinds of remote lab solutions for mobile devices:

  • Software-based solutions, using a resident application on the device that captures the screen, sends it to the server, and emulates keyboard input or touches on the screen.

  • Hardware-based solutions, using some technology (magic, I believe) to connect the server to the hardware components of the device (screen, touchscreen, keypad, lights, audio, etc.).

  • Mixed solutions, having some hardware connection, some software additions, and maybe a video camera for screen recording.


As these are real devices, only one user can make use of them at any given time. As such, the devices are a limited resource.

In terms of services provided we have two kind of solutions:

  • Free usage, where we can use the remote device freely. We can install apps, browse the web and use the whole operating system.

  • Closed usage, where we can just run a series of tests available on our website or app and receive a report. We can’t interact with the device.

Let’s take a look at some of the remote lab solutions currently on the market.

Nokia Remote Device Access

Nokia offers a free (yes, free!) remote lab solution for Symbian, MeeGo and S40 devices called Remote Device Access (RDA), shown in Figures Figure 4-17 and Figure 4-18. To use the service, you can access (you’ll need to have already created a free Nokia account). You will need Java Runtime 5.0 or newer, because RDA is a WebStart Java application.

Remote Device Access is a free and simple way to test on real Symbian, S40 and MeeGo devices.
Figure 4-17. Remote Device Access is a free and simple way to test on real Symbian, S40 and MeeGo devices.
The devices are connected to real 3G networks (you can even call them), so you can accurately test speeds and transfers.
Figure 4-18. The devices are connected to real 3G networks (you can even call them), so you can accurately test speeds and transfers.

At present, usage is limited to eight hours per day. The main features are:

  • Complete usage of the device

  • 3G and WiFi connection support

  • Application installation

  • Device rebooting

  • Changing screen orientation

  • Browser and app support

  • Reservation of devices for future usage

  • Usage of devices with SIM cards connected in Europe

  • Saving screenshot images

  • Incoming calls and SMS available

At the time of this writing, there are more than 200 devices available. There is no audio or accelerometer support, and depending on your network bandwidth you can select the video quality you want.


AppThwack ( is a commercial service that uses the virtual test lab idea to work with real Android and iOS devices. It has an option for mobile web testing -available only on Android at the time of this writing- that, giving it a URL, it will generate dozens of screenshots of that website in different browsers -Android Browser, Opera Mobile, Opera Mini, Firefox, Chrome and Dolphin- on different real devices.

Samsung Remote Test Lab

Samsung also offers a free remote lab web service, using a similar solution provider as Nokia’s RDA, called RTL (Remote Test Lab). It includes Android smartphones, Android tablets and Bada phones at the time of this writing.

The devices don’t have SIM cards, though, so you can only test WiFi connections (not 3G).

Samsung Remote Test Lab is a free service where you can use real Android and Bada devices remotely.
Figure 4-19. Samsung Remote Test Lab is a free service where you can use real Android and Bada devices remotely.

You can access this remote lab from

Keynote DeviceAnywhere

Keynote DeviceAnywhere is the leader and pioneer in remote lab solutions for mobile testing. It offers a hardware solution that allows any device (low-end, mid-end, or smartphone, from any vendor) to plug into the architecture.

The company offers a product called Test Center Developer, with different price models depending on the package. DeviceAnywhere Test Center offers more than 2000 devices (iOS, Android, Nokia, Motorola, Sony Ericsson, Samsung, BlackBerry, LG, Sanyo, Sharp, HTC, and more) connected to more than 30 live networks all over the world.

You can apply for a free trial at The IDE (Device Anywhere Studio) is a Java application, so it should work on any OS. Easy-to-install packages are available for Windows and Mac OS X, as shown in Figure 4-19. The company offers a special free plan prepared for mobile web testing only over the 10 most popular devices. The free service doesn’t need the IDE and it uses a web environment for the testing.

The solution includes:

  • Access to the registered packages and devices from DA Studio

  • Access to all hardware features (lock/unlock, close and open, change orientation, power off and on)

  • Ability to place calls, send and receive SMS messages, access the carrier’s portal, and buy premium content (as the devices are on live networks)

  • Pixel-based perfect image rendering, so you can save screenshots and videos of your testing for offline review (audio is also supported as an optional feature)

  • Ability to manage multiple devices at the same time

  • Virtual onscreen keyboard, and shortcuts to use your own desktop keyboard for testing

  • Team management for testing a device and sharing the screen with other users

  • DOM Inspector and HTTP headers viewer using an included proxy

Many manufacturers and carriers have selected DeviceAnywhere as the official testing solution for their Virtual Developer Labs (VDLs). Some of the Virtual Lab solutions include:

  • Nokia VDL (Series 40 and Symbian)

  • Sony Ericsson VDL

  • Palm VDL (Palm OS, Windows Mobile, and webOS)

  • Motorola VDL (Motorola OS, Windows Mobile, and Android)

  • BlackBerry VDL

To use the full DeviceAnywhere service, you’ll need to subscribe to one or more packages. At the time of this writing, a yearly contract is needed and on top of the monthly subscription fee (starting at $100), you will pay on a per-hour-basis or subscribe to a prepaid plan. On a per-hour-basis, the maximum price is $16/hr. There are also other promotions available on the website, and different manufacturers’ VDLs can have different pricing models.

The time spent on the system is calculated beginning from when you open a device and finishing when you release it, in 6-minute-minimum time slots.

For web development testing purposes, Keynote offers a free option that will allow us to test websites on real browsers in unlimited quantity of 10-minute sessions over the most popular devices.


If you apply for a free trial, you will get 3 hours of free usage and you will have to enter valid credit card details. It is safe to add this information, and it is a requirement because this is a live network where you can buy premium content.

Usage for mobile web testing

As DeviceAnywhere uses real devices from different manufacturers, you will need to learn to use every operating system interface to access the web browsers. You will generally find an icon in the home or applications menu labeled “Browser,” “Internet,” or even the name of the carrier’s online service (for example, “MediaNET,” the AT&T Wireless service).

When in the mobile browser you will need to type your URL using the phone’s features: a numeric keyboard, a QWERTY keyboard, or an onscreen touch keyboard. DeviceAnywhere also offers a feature where you can type or paste any URL and then press a button to automatically generate all the keypresses required on the hardware to type the URL.


For web developers, there is a no-contract, free service that allows us to use web browsers on 10-minute maximum sessions over the 10 most popular devices. It’s a good service to start working with the system and if we need more devices or more time, we can upgrade our account to a professional or corporate plan.

In numeric keypad devices the URL typing process can be slow, so it’s better if you first minimize the URL using a shortener service, like

For mobile web debugging purposes, DeviceAnywhere includes an excellent proxy-based browsing solution that brings into the IDE an HTTP sniffer and a DOM Inspector so you can see what markup is actually rendered on the device.


Remember that these are real devices on real networks. If you want to test an application or installable widget you will need first to upload it to a web server (DA offers a solution) and then access the URL from the browser, typing it or sending it by SMS to the device.

Testing automation

DeviceAnywhere offers many advanced features. One of them is testing automation, a premium service that allows you to create testing scripts and schedule them to be tested on several devices automatically. You can then access the results via a web report.

Perfecto Mobile

Perfecto Mobile ( is a company offering a software/hardware hybrid solution for mobile testing, shown in Figure 4-20. Perfecto Mobile uses a video camera for screen recording on some devices. A good point for Perfecto Mobile is that the whole environment is built on top of the Adobe Flash Player, so you don’t need to install anything, and it works from any desktop browser. You can try the system by registering for a free trial; it will be activated in minutes.

With Perfecto Mobile you can manage real phones (here, a Kindle Fire and an iPhone 4S) with a Flash-compatible desktop browser. The images are from cameras pointing at the devices until you take an screenshot.
Figure 4-20. With Perfecto Mobile you can manage real phones (here, a Kindle Fire and an iPhone 4S) with a Flash-compatible desktop browser. The images are from cameras pointing at the devices until you take an screenshot.

With this service, you have access to the whole list of devices and carriers from the same pricing policy. The devices are on real networks in Canada, Israel, the U.S., the UK, and France.


If you are using non-touch devices, for website scrolling it is better to have a key pressed down for a long time. You can emulate this using the Control key on your desktop keyboard.

Pricing structure

Perfecto Mobile has a simple pricing model. You can access the full cloud of devices with a prepaid montly plan starting at $17/hr with a minimum 10 hours or buying a flexible per project solution at $250 per 10 hours. There is also a flat plan where you can use the full cloud for as many hours as you need.

Sometimes Perfecto Mobile runs special promotions per platform, such as BlackBerry-only or Android-only devices as very low prices.


In both DeviceAnywhere and Perfecto Mobile you can use two or more devices at the same time. Your per-minute charges will be counted separately, so you will be spending two or more minutes at a time.

Main features

The main features of Perfecto Mobile for mobile web testing are:

  • When you take screenshots it uses the real screen image, not the camera one.

  • You can record videos and share or embed them easily.

  • You can send an SMS or invoke a call to the device from the UI.

  • You can transfer files to the device (if file transfer is supported).

  • There is an OTA mechanism where you can upload your app or widget and the device will receive an SMS link to download it within a 15-minute timeslot.

  • You can easily share a URL, so customers and coworkers can see what you are doing with the device via live streaming. The only requirement for the other parties is that they use a browser with Adobe Flash Player support.

  • You can request Automation, a macro-like recording feature that supports advanced actions and wait conditions using screen recognition and OCR (for example, “go to this URL, wait for the word “Hello” to appear on the screen, then take a snapshot”).

  • In Automation, there is a ScriptOnce technology that includes multiplatform templates for common actions.

  • You can test how your mobile website is rendering on multiple devices at the same time without your intervention. This feature, called Website Validation and is available on premium plans.

Production Environment

The mobile production environment, surprisingly, doesn’t differ too much from a classic web environment. Although many web hosting companies used to offer a “premium WAP hosting” option (obviously, more expensive than the non-mobile options), there is no need for any such distinction.

Web Hosting

To get started, you will need a web server with your favorite platform installed. It should support either static or dynamic files on all platforms you plan to work with (PHP, ASP.NET, Java, Ruby, Python, etc.). Cloud hosting (via a service like Amazon EC2, Google App Engine, Aptana Cloud, or Microsoft Azure) will work well, too.

You will need to have permissions to manage MIME types on the server. We will talk about this in Chapter 17, but for now, just remember that it will allow you to make compatible mobile websites more easily.


There is no special need to use HTTPS (secure connections) for mobile devices. If you want to, just remember that the most widely accepted certificates are from Thawte and VeriSign.


Which domain alternative should you use? I have no answer for this; you will have to decide for yourself. You can create a subdomain of your desktop website (if you have one), like, or you can use the main entry point ( or My only recommendation is that, whatever decision you make, you should try to have the other options available and set up a 301 HTTP Redirect to the domain you’ve chosen. I’ve tried myself many times to guess a mobile URL using m.<anysite>.com or <anysite>.mobi, and you should support that user behavior.


No matter which mobile domain you will be using, remember to create a 301 HTTP Redirect to the chosen one from all the possibilities (m.yourdomain, wap.yourdomain, mobile.yourdomain, and, if possible, You don’t want to lose visitors because they couldn’t guess your mobile address.

Error Management

You’ll need to ensure that your error pages will be mobile compatible. You should be able to configure the default error pages for most common HTTP error codes, like 404 (Page not Found) and 500 (Internal Server Error), on your server. These files must be mobile compatible; we don’t want to waste traffic for the user on a server error or deliver pages that aren’t compatible with low-end devices. If you’re not sure how to configure the default error pages, ask your server provider.

If you are providing both the desktop and mobile versions of your website from the same domain, you should create a dynamic code to detect whether the device accessing your site is a mobile or not. In the case of a 500 error, deliver a very simple HTML page for both desktop and mobile users; you won’t know whether the problem was in your dynamic platform. You can use responsive web design techniques on the error pages.


Statistics about mobile website usage are typically the same as those for desktop usage, but a mobile-friendly tool will be very helpful in understanding mobile-specific features. You can log requests on the server for later processing with a log analysis tool, or you can use a third-party tool for help in your statistics management. We will cover mobile-friendly statistical tools in Chapter 19.

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