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.
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.
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 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 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 http://html.adobe.com
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 http://web.ms/WebMatrix
WebMatrix since version 2 supports mobile websites, including:
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 http://aptana.com
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. http://mobilexweb.com/go/nokiawebtools.
Tizen IDE: For the creation of Tizen apps based on HTML5. https://developer.tizen.org/sdk
PhoneGap XDK: This is a non-official tool for creating Apache Cordova HTML5 native apps http://appmobi.com
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 http://www.mob4hire.com 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.com with $39 per tester at http://www.usertesting.com/mobile
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.
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).
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 http://emulato.rs.
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.
The Android emulator, is available in conjunction with the SDK to create native Java applications for Android. You can download it for free from http://developer.android.com; 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, 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
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 http://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.
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 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 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, 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 http://mobilexweb.com/go/android-browsers
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.
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 is included with the SDK for native development, available for free at the Mac App Store (search for Xcode) or at http://developer.apple.com/ios. 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 http://electricplum.com, , MobiOne emulator available at http://www.genuitec.com/mobile or BrowseEmAll at http://browseemall.com
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.
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 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 http://www.forum.nokia.com.
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.
If you need to emulate a Nokia device, first find the correct platform version for that device at http://developer.nokia.com/devices 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 127.0.0.1 to connect with your desktop host computer.
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 http://www.blackberry.com/developers; 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 http://mobilexweb.com/go/ripple 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.
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 http://na.blackberry.com/eng/developers/resources/simulators.jsp. 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.
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.
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 http://www.vmware.com/products/player) and VMWare Fusion on Mac (available at http://www.vmware.com/products/fusion).
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.
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 http://developer.palm.com. It is available for Windows, Mac OS X, and Linux. To use it, you must have VirtualBox, a free virtualization tool available from http://www.virtualbox.org, 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 http://openwebosproject.org
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 http://mobilexweb.com/go/wpsdk
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.
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 http://mobilexweb.com/go/winmobemu
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).
You can download the emulator for free at http://www.opera.com/developer/tools.
At http://www.opera.com/mini/demo, 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.
Opera also offers an emulator for Opera Mobile that works on Windows, Mac OS X, and Linux and can be downloaded for free at http://www.opera.com/developer/tools.
Other platforms have its own emulators but they are no so simple to use or they are not optimized for web development.
Tizen emulator, part of the SDK can be downloaded from http://developer.tizen.org
Firefox OS emulator, available as a Firefox plugin from https://addons.mozilla.org/es/firefox/addon/firefox-os-simulator/
Bada emulator, part of the native SDK, is not prepared for web testing and is available from http://developer.bada.com/devtools
Meego emulator, prepared for netbooks and smartphones, is available at http://developer.meego.com/meego-sdk
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.
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 http://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.
Able to open local files
Accesses host’s local server via
Smartphones and Tablets
Windows, Mac and Linux
Smartphones and Tablets
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
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 http://www.mobiletinyurl.com.
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 http://browserstack.com. 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 http://browserstack.com
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.
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 http://browshot.com
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 http://mobiletinyurl.com
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 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 http://adobe.com/go/edgeinspect
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.
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:
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.
“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 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 http://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.
At present, usage is limited to eight hours per day. The main features are:
Complete usage of the device
3G and WiFi connection support
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 (https://appthwack.com) 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 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).
You can access this remote lab from http://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-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 http://www.keynotedeviceanywhere.com. 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)
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.
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 http://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.
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.
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 (http://www.perfectomobile.com) 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 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.
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.
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.
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.
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 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.
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 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.