The document discusses mobile browser testing, including browser engines, browsers, compatibility testing scope, W3 best practices, HTML5, CSS Mobile Profile 2.1, and usability testing. It provides lists of browser engines, browsers, features to test for compatibility, and W3 best practices. It also discusses tools for testing on different screen sizes and top tools for testing mobile browsers.

1. Mobile Browser Testing
(compatibility and Usability with various tools)
Ravindran Antonysamy
QA Head, Nimbuzz Internet India
Date: Dec 13, 2012

2. Index
1. Objective and Description
2. Browser Engines
3. List of Mobile Browsers
4. Browser Compatibility – Scope of testing
5. W3 Best Practices (1 to 60)
6. HTML 5
7. CSS Profile 2.1
8. Mobile Usability testing
1. View port or screen size testing
9. Top 10 Tools to test mobile browsers
10. References / Sample test pages

3. Objective
Description : Global market share of smart
phone’s are driven by different mobile
operating systems (Android, iOS, RIM,
Palm, Symbion, Windows Mobile). Different
OS, means, its different browser engines.
This study analyses how a mobile browser
based application can be tested for its
compatibility and usability in different mobile
browsers, such as Opera Mobile, Opera
Mini, S60 Webkit, Apple Webkit, Android
Webkit, Netfront, Blackberry, IE Mobile,
Skyfire
Objective : Objective of this presentation is, how to eliminate the problems in compatibility and
usability of mobile browser based applications, with respect to screen size, operating systems,
browser engines and various usability factors to be considered when designing mobile web
applications.

4. Mobile Browser Compatibility – Browser Engines
Scope of Browser Compatibility testing depends on the target application audience &
demographic target location. If the application targets only High end devices, then the scope
is limited. Defining the scope is the initial stage of the test tabled below.
Opera S60v5
Opera Mobile S60v3 WebKit S60V7
Mini 4.2 WebKit
(VFM) (9.5) HTC (8.00)
(8.65) SE Nokia Nokia Nokia Samsun Nokia
Nokia Touch Motorola C6, N8
P1i E71 E66 E71 g i560 5800
E66 Diamond V3xx
IE
Default Web Kits Non-default Web Kit's NetFront Blackberry Skyfire Obigo
Mobile
Android Sony HTC
Android Bolt Ozone Samsung Blackberry Nokia
iPhone Nexsus Iris (HTC) Ericsson Touch LG
G1,G2 (E71) (E71) F700 9500 E71
S C510 Diamond

5. List of Mobile Browsers
Browser Vendor / Rendering Browser Vendor / Rendering
Engine Engine
Safari Apple / Webkit Blackberry Old RIM / Mango
Android Google / Webkit IE Mobile Windows / IE6
Dolfin Samsung / Webkit Netfront Access / Netfront
Blackberry RIM / Webkit Obligo old Teleca - Brew/ Obligo
Opera Mobile Android,MeeGo, Opera Mini iOS / s40,
Symbian / Presto Android,MeeGo,
Symbian / Presto
Palm HP / Webkit
Bolt BB, BB Old / Webkit
MicroB Nokia / GecKo
Ovi Nokia / GecKo
Phantom LG / Webkit
UCWeb (china) UC on Android, Bada
Nokia S40 Nokia / Webkit / UC
Firefox Android,MeeGo /
GecKo

6. Browser Compatibility – Scope of testing
When designing applications, we have to make sure that the primary functionality / feature of
the application can be effectively used by the end user. So it is very important that the mobile
web application must be tested with the various browser engines in the market. In general, to
give maximum coverage, the below features to be tested on each browser, in order to find out
what are all the generic functionalities that could be implemented on mobile web applications
to reach maximum end users.
1.Click Event (On Document, On Link, On Form Field, on Paragraph, Event Bubbling)
2.DOM & Ajax
i) Basic DOM (getElementById, CreateElement,Create
TextNode, appendChild)
ii) Basic InnerHTML (getElementById,InnerHTML)
iii) Basic Ajax (new XMLHttpRequest(), Onload)
iV) Medium Complex DOM Test ( Storable Table handling, Edit
Text Script, Get Elements by tag name script, Usable Forms
Script)
3.Basic Font CSS (font weight, style (ex: Italic), text decoration (such as underline), font
variant (small / caps), color, letter spacing, word spacing, text transform
(uppercase), font size)

7. Browser Compatibility – Scope of testing - Cont
4. Focus, Blur, Scroll (Focus and Blur on links, form fields, other focusable elements, scroll)
5.Touch Action (mouseover, mouseout, mousemove, mousedown, mouseup, click, :hover,
other OS Specific hover (ex: iPhone)
6. Orientation Change, Resize, Screen Width and Height
7. Landscape modes
8. Key Events (Key down, key press, Key up, key code, Char Code, Key Identifier.
9. Usable Forms
The application can be designed using W3 best practices of use cases to make the mobile
web application to be received by many audience without much usability or compatibility
issues. Taptu.com is a great example for adopting different compatibility and usability
standards / screen sizes, in various mobile operating systems and browser engines.
Note : use the test page to execute some of the tests to understand the browser
compatibility : http://www.quirksmode.org/m/tests/touch.htm (Navigate to the link
using your mobile browser)

8. W3 Best Practices for Mobile Web Applications
W3 had taken constant efforts to eliminate the problems in compatibility and usability areas
of mobile web applications. Here, few guidelines of W3 had been listed..
Title Description
THEMATIC_CONSISTENCY Ensure that content provided by
accessing a URI yields a thematically
coherent experience when accessed from
different devices.
CAPABILITIES Exploit device capabilities to provide an
enhanced user experience.
DEFICIENCIES Take reasonable steps to work around
deficient implementations.
TESTING Carry out testing on actual devices as well
as emulators.
URIS Keep the URIs of site entry points short.
NAVBAR Provide only minimal navigation at the top
of the page.
BALANCE Take into account the trade-off between
having too many links on a page and
asking the user to follow too many links to
reach what they are looking for.
NAVIGATION Provide consistent navigation
mechanisms.

9. W3 Best Practices for Mobile Web Applications - Cont
Title Description
ACCESS_KEYS Assign access keys to links in navigational
menus and frequently accessed
functionality.
LINK_TARGET_ID Clearly identify the target of each link.
LINK_TARGET_FORMAT Note the target file's format unless you
know the device supports it.
IMAGE_MAPS Do not use image maps unless you know
the device supports them effectively.
POP_UPS Do not cause pop-ups or other windows to
appear and do not change the current
window without informing the user.
AUTO_REFRESH Do not create periodically auto-refreshing
pages, unless you have informed the user
and provided a means of stopping it.
REDIRECTION Do not use markup to redirect pages
automatically. Instead, configure the
server to perform redirects by means of
HTTP 3xx codes.

10. W3 Best Practices for Mobile Web Applications - Cont
Title Description
EXTERNAL_RESOURCES Keep the number of externally linked
resources to a minimum.
SUITABLE Ensure that content is suitable for use in a
mobile context.
CLARITY Use clear and simple language.
LIMITED Limit content to what the user has
requested.
PAGE_SIZE_USABLE Divide pages into usable but limited size
portions.
PAGE_SIZE_LIMIT Ensure that the overall size of page is
appropriate to the memory limitations of
the device.
SCROLLING Limit scrolling to one direction, unless
secondary scrolling cannot be avoided.

11. W3 Best Practices for Mobile Web Applications - Cont
Title Description
CENTRAL_MEANING Ensure that material that is central to the
meaning of the page precedes material that
is not.
GRAPHICS_FOR_SPACING Do not use graphics for spacing.
LARGE_GRAPHICS Do not use images that cannot be rendered
by the device. Avoid large or high
resolution images except where critical
information would otherwise be lost.
USE_OF_COLOR Ensure that information conveyed with
color is also available without color.
COLOR_CONTRAST Ensure that foreground and background
color combinations provide sufficient
contrast.
BACKGROUND_IMAGE_READABILITY When using background images make sure
that content remains readable on the
device.
PAGE_TITLE Provide a short but descriptive page title.

12. W3 Best Practices for Mobile Web Applications - Cont
Title Description
NO_FRAMES Do not use frames.
STRUCTURE Use features of the markup language to
indicate logical document structure.
TABLES_SUPPORT Do not use tables unless the device is
known to support them.
TABLES_NESTED Do not use nested tables.
TABLES_LAYOUT Do not use tables for layout.
TABLES_ALTERNATIVES Where possible, use an alternative to
tabular presentation.
NON-TEXT_ALTERNATIVES Provide a text equivalent for every non-
text element.
OBJECTS_OR_SCRIPT Do not rely on embedded objects or
script.
IMAGES_SPECIFY_SIZE Specify the size of images in markup, if
they have an intrinsic size.

13. W3 Best Practices for Mobile Web Applications - Cont
Title Description
IMAGES_RESIZING Resize images at the server, if they have
an intrinsic size.
VALID_MARKUP Create documents that validate to
published formal grammars.
MEASURES Do not use pixel measures and do not use
absolute units in markup language
attribute values and style sheet property
values.
STYLE_SHEETS_USE Use style sheets to control layout and
presentation, unless the device is known
not to support them.
STYLE_SHEETS_SUPPORT Organize documents so that if necessary
they may be read without style sheets.
STYLE_SHEETS_SIZE Keep style sheets small.
MINIMIZE Use terse, efficient markup.
CONTENT_FORMAT_SUPPORT Send content in a format that is known to
be supported by the device.
CONTENT_FORMAT_PREFERRED Where possible, send content in a
preferred format.

14. W3 Best Practices for Mobile Web Applications - Cont
Title Description
CHARACTER_ENCODING_SUPPORT Ensure that content is encoded using a
character encoding that is known to be
supported by the device.
CHARACTER_ENCODING_USE Indicate in the response the character
encoding being used.
ERROR_MESSAGES Provide informative error messages and a
means of navigating away from an error
message back to useful information.
COOKIES Do not rely on cookies being available.
CACHING Provide caching information in HTTP
responses.
FONTS Do not rely on support of font related
styling.
MINIMIZE_KEYSTROKES Keep the number of keystrokes to a
minimum.
AVOID_FREE_TEXT Avoid free text entry where possible.
PROVIDE_DEFAULTS Provide pre-selected default values where
possible.

15. W3 Best Practices for Mobile Web Applications - Cont
Title Description
DEFAULT_INPUT_MODE Specify a default text entry mode,
language and/or input format, if the device
is known to support it.
TAB_ORDER Create a logical order through links, form
controls and objects.
CONTROL_LABELLING Label all form controls appropriately and
explicitly associate labels with form
controls.
CONTROL_POSITION Position labels so they lay out properly in
relation to the form controls they refer to.

16. HTML 5
HTML5 is the new standard for Mobile Web. Exiting Features of HTML5 can be implemented in Mobile
Browsers and We have to make sure, all those features are compatible with the target audience of the
application being developed.
1.Offline Support (App Catch DB to store data locally – in the device)
2.Canvas Drawing (Graphs / game components can be directly drawn without flash support)
3.Video and Audio Streaming support (such as youtube and pandora)
4.GeoLocation API (sharing location with trusted websites)
Few Frameworks are already developed to support the various mobile browsers available in the market.
1.SenchaTouch (http://www.sencha.com/products/touch)
HTML5 Implementation with Enhanced touch user experience, integrated with multi OS mobile
application delivery platforms like PhoneGAP.
2. M-Project
Uses JQuery on the JavaScript and contains all the UI and core features
3. JQTouch
iPhone / iPad targeted, CSS Focused and JavaScript a little.

17. CSS Mobile Profile 2.1
Not all aspects of the full CSS specification lend themselves to use on mobile platforms, so the W3C has
developed the CSS Mobile Profile 1.0, which became a candidate recommendation (the last step before
becoming a full recommendation) in July 2002. The mobile profile is a cut down version of the full CSS
2.1 specification, appropriate to mobile, or wireless devices. In fact, it is very similar to the old CSS 1.
Regular CSS rules are obviously included in the mobile profile and the standard syntax is the same as
for CSS 2.1
1.Selectors:
2.At-Rules
3.Properties
Full List can be viewed @ : http://www.w3.org/TR/css-mobile/

18. Mobile Browser Usability Testing
Usability Testing
ISO says, “the extent to which a product can be used by specified users to achieve specified goals
with effectiveness, efficiency and satisfaction in a specified context of use“. Simple Applications can
be tested in the lab environment with a emulator or a device. (Ex: a web app). Complex applications
(Ex: Augmented Reality) must be tested in a field with multi-tasking, lighting, volume controls,
background noise etc)
Usability testing also crowd sourced with many testers, to receive positive and negative feedback of
the application from real people. Most of the companies beta test their applications (web or
standalone) in order to receive real feedback. What are all the things to be taken into account when
performing usability tests:
1.Look and Feel or appeal of the application
2.Simplicity and Intuitive interfaces
3.Easy navigation with menus, buttons, controls
4.Efficiency of the application such as Load time or navigation time
5.Minor user errors and support (help) in all over the application / page or screen
6.Landscape users mode
7.Left handed users mode
8.Screen Size Tests (see next page)
Notes: ISO 9241-11:1998 Ergonomic requirements for office work with visual
display terminals (VDTs) and Section 508 standard - Web-based Intranet and Internet Information
and
Applications (Rehabilitation Act, 1194.22);

19. Mobile Browser Usability Testing
Viewports or Screen Size test
The Mobile Web application has to be tested with different screen sizes. Its also called View ports. 4
Types of View ports can be discussed here.
1.CSS Pixels (Expand and contract with zooming; it’s this pixels that are taken as measurement grid
for all CSS declarations.)
2. Device Pixels (Formal number of pixels on device)
3.Layout viewport (The initial area of the HTML element. CSS declarations such as width: 20% are
calculated relative to this viewport. Is usually quite a bit wider than the visual viewport)
4.Visual Viewport (The actual screen viewport through which you look at the layout viewport.)
Code for testing Screen Sizes :
Screensize.rar
Screen Sizes Can also be tested using this Link : http://www.quirksmode.org/m/tests/widthtest.html

20. Top 10 Tools to test Mobile Browsers
1. iPhoney (http://www.marketcircle.com/iphoney/
An excellent free iPhone tester, iPhoney isn’t exactly an emulator, but allows developers to
create 320x480px websites for use on the iPhone. It allows you to test images and code in a
pixel-perfect Apple-Safari-powered environment, with all the normal features including
Portrait and Landscape modes, fullscreen, zoom and plugins.
2. W3C mobileOK Checker (http://validator.w3.org/mobile/)
This checker is a web-based automated validation tool that checks to see how mobile-
device-friendly your website is. The tests are checked against the
W3C mobileOK Basic Tests specification developed by W3C.
3. iPad Peek http://ipadpeek.com/
This handy web-based tool allows you to see how your websites look when rendered on the
iPad. It’s recommended that you use a WebKit-based browser such as Apple Safari or
Google Chrome to have as accurate a simulation as possible — or at the very least, a
CSS3-capable browser that supports transformation properties (like Opera) because it uses
them to render the page in Portrait mode.

21. Top 10 Tools to test Mobile Browsers
4. Modify Headers Add-on for Firefox (
https://addons.mozilla.org/en-US/firefox/addon/modify-headers/)
An excellent free iPhone tester, iPhoney isn’t exactly an emulator, but allows developers to
create 320x480px websites for use on the iPhone. It allows you to test images and code in a
pixel-perfect Apple-Safari-powered environment, with all the normal features including
Portrait and Landscape modes, fullscreen, zoom and plugins. The mobile user agent of the
phones needs to be searched and it can be used for testing.
5. Adobe Device Central CS5 (http://www.adobe.com/products/devicecentral.html)
As part of the latest Adobe Creative Suite, Device Central emulates the operation of mobile
devices on your desktop allowing you to test HTML and Flash from the comfort of your
desktop.
6. Google Mobilizer http://www.google.com/gwt/n
Google Mobilizer is a simple web tool that lets you input a web page address and then
makes the page mobile-web-friendly by trimming the content down to its bare essentials.
This is an excellent tool for seeing where you can make performance optimizations on your
site.

22. Top 10 Tools to test Mobile Browsers
7. Gomez (http://www.gomez.com/free-trial/
Gomez mobile readiness test gives you a score between 1 and 5 based on an analysis of
over 30 proven mobile web development techniques, ranging from stylesheet use (e.g.
media queries) to caching techniques and standards-compliant code. The results are
displayed in an easy-to-understand document that offers advice on how to make your site
better.
8. MobiReady (http://ready.mobi/launch.jsp?locale=en_EN)
MobiReady is another online testing site that allows you to enter a URL so that it can
perform a set of evaluations, including Page Test, Markup Test and Site Test of the web
page. This is a slightly more detailed version of Gomez above and provides a
comprehensive test result page including dotMobi compliance, W3C mobileOk tests, device
emulators, detailed error reports, HTTP tests and a code checker.
9. DotMobi http://mtld.mobi/emulator.php
An Excellent Simulator to test all kind of mobile web pages in many low/middle end phones
10. Opera Mobile Simulator http://www.opera.com/mobile/demo/
Same as DotMobi, It’s a simulator for even touch screen phones.

23. References
W3 Best Practices for Mobile Web: http://www.w3.org/TR/mobile-bp/
Closure Memory Test Code: http://www.jakearchibald.com/jsperformance/closurememory/
Usable Forms Script: http://www.quirksmode.org/dom/usableforms.html
HTML5 in Mobile Devices: http://en.wikipedia.org/wiki/HTML5_in_mobile_devices
CSS Mobile Profile 2 : http://www.w3.org/TR/css-mobile/
Mobile Usability : http://www.bughuntress.com/files1/Mobile_Usability_Testing_Report.pdf
Fully Compatible mobile website : http://www.taptu.com
To Test HTML5 : http://html5test.com/
Test Canvas Support : http://www.quirksmode.org/m/tests/canvas.html
JQuery Touch test page : http://www.jqtouch.com/preview/demos/main/#home
Sencha Touch Events test Page : http://dev.sencha.com/deploy/touch/examples/kitchensink/
Misc tests : http://www.quirksmode.org/m/

24. Thanks.
24