Mobile Browser Testing(compatibility and Usability with various tools) Ravindran Antonysamy QA Head, Nimbuzz Internet India Date: Dec 13, 2012
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 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 Kits NetFront Blackberry Skyfire Obigo Mobile Android Sony HTC Android Bolt Ozone Samsung Blackberry NokiaiPhone Nexsus Iris (HTC) Ericsson Touch LG G1,G2 (E71) (E71) F700 9500 E71 S C510 Diamond
List of Mobile BrowsersBrowser Vendor / Rendering Browser Vendor / Rendering Engine EngineSafari Apple / Webkit Blackberry Old RIM / MangoAndroid Google / Webkit IE Mobile Windows / IE6Dolfin Samsung / Webkit Netfront Access / NetfrontBlackberry RIM / Webkit Obligo old Teleca - Brew/ ObligoOpera Mobile Android,MeeGo, Opera Mini iOS / s40, Symbian / Presto Android,MeeGo, Symbian / PrestoPalm HP / Webkit Bolt BB, BB Old / WebkitMicroB Nokia / GecKo Ovi Nokia / GecKoPhantom LG / Webkit UCWeb (china) UC on Android, BadaNokia S40 Nokia / Webkit / UCFirefox Android,MeeGo / GecKo
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 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.
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 files 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.
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.
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.
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.
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.
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.
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.
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/
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);
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
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.
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.
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.
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/