Unlike desktop web development, where you’re likely to create and test your work on the same device, mobile development generally requires setting up and managing several development environments.
For coding our markup, JavaScript, and CSS, we can use almost any web tool available on 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 rather than using a visual tool or IDE.
Since the CS5.5 version, Dreamweaver has worked better with mobile markup and allows 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.
Version CS6 includes several enhancements that support mobile web design and development, such as:
HTML5 support and code hinting
Multiple screen preview
jQuery Mobile integration
PhoneGap Build integration for native web app compilation from the IDE
Adobe offers a group of tools under the name of Edge that help designers and developers to create HTML5 applications. They include:
- 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 quickly and easily.
- Edge Reflow
A tool that helps designers to create responsive web design solutions.
- Edge Inspect
A tool for mobile HTML5 testing. We’ll cover this tool later in this chapter.
- Edge Animate
You can download these tools from Adobe’s website.
Microsoft IDEs have supported HTML5 syntax and IntelliSense since version 2010 SP1. You can also use WebMatrix for mobile web development; it’s available for free.
WebMatrix has supported mobile websites since version 2, including:
Mobile-friendly templates
Connection with the Windows Phone emulator and iOS simulation through partners, such as Electrium Plumb
Code completion for HTML5 and the jQuery Mobile UI framework
If you would like to use Eclipse as your development environment, there are several plug-ins you can use to create mobile HTML5 apps. I suggest Aptana from Titanium, a free Eclipse-based IDE for HTML5 and mobile development. You can download a free version from Aptana’s website.
If you are going to target native web or hybrid apps, some platforms offer tools and IDEs you can use to develop, test, and build your final packages. The most important products include:
- Nokia Web Tools
For testing and compilation of S40 web apps. A legacy 1.2 version that will help with the legacy WRT Symbian format is still available.
- Tizen IDE
- Intel XDK
A nonofficial for creating tool for creating Apache Cordova HTML5 native apps.
- Titanium Studio
An Eclipse plug-in to create Appcelerator Titanium JavaScript mobile apps.
Testing with a desktop browser is not good enough. Mobile browsers are really different, and we need to test our mobile apps using tools that are 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 (yes, 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 is not recommended for mobile web developers; we need to be as close as possible to the devices.
Create a beta tester program, for receiving feedback.
Access a community mobile lab in your city, see www.opendevicelab.com for more information.
Use a remote device lab.
In Chapter 18, we will review tools and services that will help us to test and measure performance on mobile websites.
Let’s first review emulators and simulators before talking about the other solutions we can use.
Note
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 UserTesting (at a cost of $39 per tester).
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 we would execute on the real device.
Note
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 be helpful not 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 (such as Firefox, Chrome, or Safari) with real typography nor simulate these browsers’ 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-end and mid-range devices).
Warning
Emulators and simulators don’t replace real device testing, but they 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 the 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 emulato.rs.
Note
As the emulators have the same operating system and applications as the real devices, you’ll need to wait for the OS to load before opening a web page.
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 Android Developer page; 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.
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; you can even download vendor-specific emulators, such as for the Motorola Xoom 2, LG Optimus 3D, or Galaxy Tab. Try to download the latest releases of every Android version, such as Android 2.3.3, Android 4.0, and Android 4.1.
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.
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 (Android virtual device) Manager. The AVD Manager can be opened from the SDK Manager, using the Tools→Manage AVDs menu option.
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 the screen size names, refer back to Table 2-1.
Figure 4-3. After installing the SDK and the platform, you must create virtual devices for each platform and screen combination you need.
Note
If you add external sites in the Android SDK Manager, you can install third-party Android emulators. For example, you can install Kindle Fire emulators by adding kindle-sdk.s3.amazonaws.com/addon.xml.
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.
Figure 4-4. At this point, you can open the browser as if you were on a touch-enabled Android device and use the mouse over the emulator’s screen to emulate the user’s gestures.
When you start the Android virtual device (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 tablet emulators—using the “Scale display to real size” option. If you want to delete all the settings and applications installed on that emulator, you can use the option “Wipe user data.”
Figure 4-5. When opening an AVD we need to select some configuration attributes, such as display scaling.
Note
When using the Android emulator, you can use the shortcuts Ctrl-F11 and Ctrl-F12 to change the 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 (for example, Apache) or upload your files to a web server on the Internet.
Warning
If you want to load a local web server in the Android emulator, you can’t use localhost or 127.0.0.1 because the browser will point the request to Android itself. There is a special IP address available to point to the host computer: 10.0.2.2.
Up to version 4.0, the Android emulator comes with only the Android browser. You can install other browsers if you find the installation packages at the Google Play Store. Inside the emulator, you can download other browsers from the URL www.mobilexweb.com/go/android-browsers.
Warning
The Android Emulator doesn’t officially include 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 an alternative browser—you need to look for the installation package (.apk file) on a different source.
Available for only Mac OS, the iOS Simulator (shown in Figure 4-6) offers a free simulation environment for the 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.
Warning
Some websites, such as www.testiphone.com and www.iphonetester.com, try to simulate the iPhone browser, but the experience isn’t the real thing; they are just iframes with the skin of the iPhone.
The iOS Simulator is included with the SDK for native development, available for free at the Mac App Store (search for Xcode) or at from Apple’s website. 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 can then add previous versions (such as 6.0), in which case you can switch between versions using the Hardware→Version menu option.
To download a 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.
Figure 4-7. Opening Preferences in Xcode allows us to download previous iOS versions that will be available later on the simulator.
Note
When simulating high-resolution devices, we can change the scale of the simulator using the Window→Scale menu or using the hot keys with ⌘-1, with ⌘-2, and with ⌘-3.
Within the Simulator, you can also select what device you want to simulate using the Hardware→Device menu option. Options include:
- iPhone
Emulates low-resolution iPhone and iPod Touch devices, such as the iPhone 3GS
- iPhone Retina 3.5-inch
Emulates high-resolution 3.5"-screen iPhone and iPod touch devices, such as the iPhone 4S
- iPhone Retina 4-inch
Emulates 4"-screen iPhone and iPod touch devices, such as the iPhone 5
- iPad
Emulates low-resolution iPads, such as the iPad 2 and iPad Mini first generation
- iPad Retina
Emulates high-resolution iPads, such as the third and fourth generation iPads
Warning
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 simulate some behaviors on Windows, however, such as the Electric Mobile Simulator, the MobiOne emulator, and BrowseEmAll.
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.
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.
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.
Warning
There is no App Store available in the iOS Simulator, meaning that you can’t download alternative browsers or pseudo-browsers such as Opera Mini or Google Chrome for iOS.
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 devices (feature phones and social devices) and for Symbian smartphones at the Nokia forum.
Note
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.
Figure 4-9. A touch-based browser running in 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 Nokia’s website 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.
Warning
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 127.0.0.1 to connect with your desktop host computer.
Research in Motion (RIM), vendor of the popular BlackBerry devices, has two different tools available for web developers: emulators and a simulator for web apps known as Ripple.
RIM has done a great job with emulators, with only one problem: it is very difficult to decide which one to download and use. Dozens of different installers are available at BlackBerry’s developer site; you can download the proxy server and the emulators. The BlackBerry Smartphone Simulators (for BlackBerry OS versions up to 7.1) are compatible only with the Windows operating system, but the emulators for BB10 and PlayBook are also available for the Mac and Linux platforms.
Ripple (Figure 4-10) is a free tool available as a Google Chrome for desktop plug-in that helps us test HTML5 web content and WebWorks native web applications in a simulation environment. It’s available for free and it’s compatible with Mac and Windows. There is also a standalone version that may be deprecated in the future, based on Chromium.
Figure 4-10. Ripple is a free plug-in for Google Chrome for desktops that allows us to simulate some mobile devices, such as BlackBerrys, and native web platforms, such as Apache Cordova/PhoneGap or WebWorks.
You can simulate different scenarios, from BlackBerry 7 to PlayBook and the newest BlackBerry 10 platform, and it includes mobile web support and WebWorks support (adding support for native web API testing). While Ripple is good for a first testing, remember that it is really the Chrome engine, not the real web engine running on BlackBerry devices. Also, Ripple requires an HTTP connection (local or external), so you cannot just open files from the local filesystem.
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 are available. The first step is to select the smartphone you want to emulate (for example, the 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.
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; others are touch-based, so you can use your mouse on the screen.
Once you’ve installed your emulator, you can launch it, open the browser, and type the URL you want to access (if it’s an older version, remember to open the BlackBerry MDS Services Simulator before launching the emulator!). 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.
The BlackBerry PlayBook tablet and BlackBerry 10 emulators are available for different operating systems. Before installing them, you need to have installed VMWare Player on Windows or VMWare Fusion on Mac.
Both the PlayBook and BB10 emulators 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 set up a server and verify on your VMWare which IP address is your host machine.
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 webOS, the operating system available since Palm Pre. You can download the Palm SDK, which includes the Palm emulator. It is available for Windows, Mac OS X, and Linux. To use it, you must have VirtualBox, a free virtualization tool, 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.
Note
For the future, all the webOS emulation tools will be available as an open source project from Open WebOS Project.
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 (Figure 4-12) comes with the SDK and includes the current version of Internet Explorer to test web content.
Figure 4-12. The Windows Phone 7.x emulator needs a Windows 7 desktop environment and the Windows Phone 8 emulator needs a Windows 8 desktop environment.
Warning
The Windows Phone emulator is compatible with only Windows Vista SP2, Windows 7, or Windows 8 and requires a graphic driver with WDDM 1.1 support. You can check your hardware specifications to verify whether your graphic driver is compatible. If not, you will see the emulator, but you will see only a white page when trying to load Internet Explorer.
If you want to emulate Windows 8 for tablets, you have two options:
Use your own Windows 8 for desktop environment.
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; it emulates a tablet touch environment, where you can emulate touch gestures, geolocation, and different screen sizes and orientations.
Note
If you are looking for the legacy Windows Mobile emulation, you can find a guide from the first edition of this book.
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. With this emulator you can also debug your mobile web applications using Dragonfly, a debugging service for Opera that we will cover in Chapter 18.
As you can see in Figure 4-13, this emulator comes with different real mobile device profiles, and you can create your own combinations of screen resolution, pixel density, and type (touch, keypad, or tablet).
Figure 4-13. With the Opera Mobile Emulator, we can select a device profile or create our own profile by defining each property’s values.
You can download the emulator for free at www.opera.com/developer/tools.
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).
Note
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.
Other platforms have their own emulators, but they are often not so simple to use or are not optimized for web development:
The Tizen emulator is part of the SDK.
The Firefox OS emulator is available as a Firefox plug-in
The Bada emulator, part of the native SDK, is not prepared for web testing.
The MeeGo emulator is prepared for netbooks and smartphones.
This tool was included with Adobe Dreamweaver, Adobe Flash Professional, and some of the suites up to CS5.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 even almost-similar) simulation in terms of typography, browser bars, and markup rendering. From CS6, Adobe has abandoned the project.
The 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 mite.keynote.com.
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
Platform | Able to open local files | Accesses host’s local server via | Devices | OS compatibility |
|---|---|---|---|---|
Android | No | 10.0.2.2 | Smartphones and tablets | Windows, Mac, and Linux |
iOS | Yes | localhost | Smartphones and tablets | Mac |
Nokia S40 | Yes | localhost | Phones | Windows |
Windows Phone | Yes | localhost | Smartphones | Windows |
BlackBerry | No | Network IP address | Smartphones | Windows |
BlackBerry PlayBook/BB10 | No | VMWare IP address | Smartphones and tablets | Windows, Mac, and Linux |
webOS | No | Virtual box IP address | Smartphones and tablets | Windows, Mac, and Linux |
Opera Mobile | Yes | localhost | Smartphones and tablets | Windows and Mac |
Note
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 Mobile Tiny URL.
The cloud has come to us to solve some problems: now, we don’t need to have everything installed on our own computers. In this case of mobile web development, there are some cloud-based solutions that we can use for mobile testing.
BrowserStack is a cloud-based service optimized for cross-browser testing. While it’s been useful for desktop web testing for a while, it recently added mobile web browsers. Instead of having emulators installed on our own development machines, we can use this web-based solution and use a remote emulator or simulator.
Note
With BrowserStack we can use the official iOS Simulator on Windows and Linux machines. You can request a trial account at BrowserStack’s website.
BrowserStack includes emulation of Safari on iOS, the Android browser, and Opera through different device profiles, such as the iPhone 3GS, iPhone 4S, iPad, Samsung Galaxy SII, HTC Evo 3D, and Motorola Xoom (see Figure 4-15).
Figure 4-15. With BrowserStack we can emulate Android and iOS devices remotely—even the iOS Simulator on Windows computers.
Using a Java-based tunnel, we can test local files on our development machines, or on a private server that is not accessible through the public Internet.
Browshot allows us to take screenshots of our mobile websites with iOS, Android, and BlackBerry devices. While we can’t interact with the emulations, sometimes a screenshot is enough. You can request an account at Browshot’s website.
There is nothing like real devices when testing mobile websites. You will find differences not only in performance but also in behavior, like when you use 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 for testing.
If you have a limited budget, 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 the browsers don’t act the same way.
Note
While you can potentially 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 WiFi (almost every social device, smartphone, and tablet supports WLAN at the time of this writing), 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 connections.
On Windows hosts you can get your IP address by opening a command line/terminal (from the
Start menu, type cmd) and using
the ipconfig command.
On Mac hosts you can get your IP address from System
Preferences→Network.
Note
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 Mobile Tiny URL.
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.
When you have real iOS and Android devices, you can use the tool Adobe Edge Inspect—formerly known as Adobe Shadow—to help with your testing and debugging. Adobe Edge Inspect is a solution involving different applications that work together and help you carry out multidevice testing with almost no effort. All the information and download links are available at Adobe Edge Inspect’s website.
The tool is available as part of the 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
The Edge Inspect server for Windows or Mac, connected to your Adobe Creative Cloud account
The Edge Inspect client, available for iOS via the App Store, for Android via the Google Play Store, and for the Kindle Fire via the Amazon Appstore
When you have everything installed, you can open the Edge Inspect app (the server) and Chrome on your desktop computer. Then, on your mobile devices, open the Edge Inspect mobile app (the client), which will automatically try to find the server on your local network.
Warning
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 in order for Edge Inspect to work.
If your device can’t connect to your computer, you can add it manually. Once connected, Chrome for desktop and all your connected devices will be synchronized, as seen in Figure 4-16. That means that browsing to a website in Chrome on your Windows or Mac machine will automatically fire a browsing to the same URL on every device connected to Edge Inspect.
Figure 4-16. Adobe Edge Inspect allows us to keep our desktop browsing experience in sync with a real Android or iOS device, take screenshots, and do basic HTML and CSS debugging.
Edge Inspect supports some advanced features, such as:
Mobile screenshots
Debugging your HTML and CSS dynamically through a Weinre session (covered in Chapter 18)
HTTP authentication
Warning
Adobe Edge Inspect does not use the browser on your iOS and Android devices, but rather the default web view engine. That means that you can’t use Edge Inspect to test on a different browser on your mobile device, such as Chrome or Firefox. While mostly similar, some behaviors on the web view differ from the browser (for example, the iOS web view does not support the Nitro JavaScript engine).
“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, touch screen, keypad, lights, audio, and so on)
Mixed solutions, having some hardware connection, some software additions, and maybe a video camera for screen recording
Note
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 kinds of solutions:
Free usage, where we can use the remote device freely. That is, 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 offers a free (yes, free!) remote lab solution for Symbian, MeeGo, and S40 devices called Remote Device Access (RDA), shown in Figures 4-17 and 4-18. To use the service, go to www.mobilexweb.com/go/rda (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.
Figure 4-17. Remote Device Access is a free and simple way to test on real Symbian, S40, MeeGo, and Windows Phone devices.
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
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 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.
Note
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): give it a URL, and it will generate dozens of screenshots of that website in different browsers—the Android browser, Opera Mobile, Opera Mini, Firefox, Chrome, and Dolphin—on different real devices.
Samsung also offers a free remote lab web service, similar to Nokia’s RDA, called Remote Test Lab (RTL). RTL, shown in Figure 4-19, 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 test only WiFi connections (not 3G).
Figure 4-19. Samsung’s Remote Test Lab is a free service where you can use real Android and Bada devices remotely.
You can access this remote lab from www.mobilexweb.com/go/labdev.
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-range, 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 2,000 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 DeviceAnywhere website. The IDE (DeviceAnywhere Studio) is a Java application, so it should work on any OS. Easy-to-install packages are available for Windows and Mac OS X. The company offers a special free plan prepared for mobile web testing of only the 10 most popular devices. The free service doesn’t require the IDE; 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 either 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 six minute minimum time slots.
For web development testing purposes, Keynote offers a free option that allows you to test websites on real browsers in an unlimited quantity of 10-minute sessions, on the most popular devices. It’s a good service to start working with the system, and if you decide you need more devices or more time, you can upgrade your account to a professional or corporate plan.
Note
If you apply for a free trial, you will get three 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.
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 screen 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.
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 www.mobiletinyurl.com.
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.
Note
Remember that these are real devices on real networks. If you want to test an application or installable widget, you will need to first 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.
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.
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.
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 US, the UK, and France.
Note
If you are using nontouch 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.
Perfecto Mobile has a simple pricing model. You can access the full cloud of devices with a prepaid monthly plan starting at $17/hr with a minimum 10 hours, or buy a flexible per-project solution at $250 per 10 hours. There is also a flat-rate 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 at very low prices.
Warning
In both DeviceAnywhere and Perfecto Mobile, you can use two or more devices at the same time. However, your per-minute charges will be counted separately, so you will be charged for two or more minutes at a time.
The main features of Perfecto Mobile for mobile web testing are:
When you take screenshots it uses the real screen image, not the camera image.
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 time slot.
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, is available on premium plans.
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 nonmobile options), there is no need for any such distinction.
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, and so on). 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.
Note
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 m.mydomain.com, or you can use the main entry point (mydomain.com or www.mydomain.com. 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.
Note
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, yourdomain.mobi). You don’t want to lose visitors because they couldn’t guess your mobile address.
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 dynamic code to detect whether or not the device accessing your site is a mobile device. 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.
Get Programming the Mobile Web, 2nd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
