Mobile browser testing v1.0

Mobile Browser Testing Mobile Browser Testing ((compatibility and Usability with various tools)

Date: Apr 11, 2023

Ravindran AntonysamyQA Head, Nimbuzz Internet India

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

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.

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 MobileOpera

Mini 4.2S60v3 WebKit

S60v5 WebKit

S60V7

(VFM) Nokia E66

(9.5) HTC Touch

Diamond

(8.65) SE P1i

(8.00) Motorola

V3xx

Nokia E71

Nokia E66

Nokia E71

Samsung i560

Nokia 5800

C6, N8

Default Web Kits Non-default Web Kit's NetFront BlackberryIE

MobileSkyfire Obigo

iPhoneAndroid G1,G2

Android Nexsus

S

Bolt (E71)

Iris (HTC)Ozone (E71)

Samsung F700

Sony Ericsson

C510

Blackberry 9500

HTC Touch

Diamond

Nokia E71

LG

List of Mobile Browsers

Browser Vendor / Rendering Engine

Safari Apple / Webkit

Android Google / Webkit

Dolfin Samsung / Webkit

Blackberry RIM / Webkit

Opera Mobile Android,MeeGo, Symbian / Presto

Palm HP / Webkit

MicroB Nokia / GecKo

Phantom LG / Webkit

Nokia S40 Nokia / Webkit

Firefox Android,MeeGo / GecKo

Browser Vendor / Rendering Engine

Blackberry Old RIM / Mango

IE Mobile Windows / IE6

Netfront Access / Netfront

Obligo old Teleca - Brew/ Obligo

Opera Mini iOS / s40, Android,MeeGo, Symbian / Presto

Bolt BB, BB Old / Webkit

Ovi Nokia / GecKo

UCWeb (china) UC on Android, Bada / UC

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)

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)

W3 Best Practices for Mobile Web Applications

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.

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

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.


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.


Title DescriptionCENTRAL_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.


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.


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.


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.


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.

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.

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-Rules3.Properties

Full List can be viewed @ : http://www.w3.org/TR/css-mobile/

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 application2.Simplicity and Intuitive interfaces3.Easy navigation with menus, buttons, controls4.Efficiency of the application such as Load time or navigation time5.Minor user errors and support (help) in all over the application / page or screen6.Landscape users mode 7.Left handed users mode8.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);

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 :

Screen Sizes Can also be tested using this Link : http://www.quirksmode.org/m/tests/widthtest.html

Screensize.rar

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.

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.


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.


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/

References

24

Thanks.

Date post:	06-May-2015
Category:	Documents
Upload:	ravindran-antonysamy
View:	2,972 times
Download:	4 times

Mobile browser testing v1.0

Documents