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.
Meego Italian Day 2011 – Andrea Grandi - Qt: l’infrastruttura di programmazione multipiattaforma.
Panoramica di Qt: libreria multipiattaforma per lo sviluppo di programmi con interfaccia grafica tramite l’uso di widget. Perchè usarla? Quali sono i vantaggi? Che linguaggio di programmazione utilizza? E sotto che licenza viene rilasciata? Insomma, tutto quello che abbiamo sempre voluto sapere su Qt, ma non abbiamo mai osato chiedere. Inoltre qualche nozione teorica su Qt Quick e QML.
Andrea Grandi è studente di Informatica presso l’Università di Firenze e ha lavorato per qualche anno come sviluppatore di software. Dal 2007 fa parte della community di Maemo, in cui si impegna attivamente per aiutare i nuovi utenti, organizzare eventi e sviluppare applicazioni; recentemente è stato eletto membro del Maemo Community Council. Ha iniziato da alcuni anni a lavorare con Qt/C++ per creare programmi destinati ai dispositivi Maemo sino ad accumulare un’esperienza tale da essere nominato Nokia Qt Ambassador. Inoltre è socio fondatore del Pistoia Linux User Group.
http://www.meegoit.com/2011
Designing a user experience that mobile smartphone users love requires understanding the best practices in testing and monitoring mobile apps and mobile optimized websites - for performance, usability, and adoption.
Meego Italian Day 2011 – Andrea Grandi - Qt: l’infrastruttura di programmazione multipiattaforma.
Panoramica di Qt: libreria multipiattaforma per lo sviluppo di programmi con interfaccia grafica tramite l’uso di widget. Perchè usarla? Quali sono i vantaggi? Che linguaggio di programmazione utilizza? E sotto che licenza viene rilasciata? Insomma, tutto quello che abbiamo sempre voluto sapere su Qt, ma non abbiamo mai osato chiedere. Inoltre qualche nozione teorica su Qt Quick e QML.
Andrea Grandi è studente di Informatica presso l’Università di Firenze e ha lavorato per qualche anno come sviluppatore di software. Dal 2007 fa parte della community di Maemo, in cui si impegna attivamente per aiutare i nuovi utenti, organizzare eventi e sviluppare applicazioni; recentemente è stato eletto membro del Maemo Community Council. Ha iniziato da alcuni anni a lavorare con Qt/C++ per creare programmi destinati ai dispositivi Maemo sino ad accumulare un’esperienza tale da essere nominato Nokia Qt Ambassador. Inoltre è socio fondatore del Pistoia Linux User Group.
http://www.meegoit.com/2011
Designing a user experience that mobile smartphone users love requires understanding the best practices in testing and monitoring mobile apps and mobile optimized websites - for performance, usability, and adoption.
Android has revolutionized the mobile and device landscape and like many FOSS projects, Android is complex. Effective management and control requires training, tools, processes and standards. The SPDX standard will reduce friction in the mobile supply chain, increase efficiency and promote compliance.
This webinar presentation provides an overview of how to port various types of Java™ applications for BlackBerry OS to the Series 40 platform. Michael Samarin of Futurice walks you through the basic porting tasks involved and shows you how to map BlackBerry APIs to corresponding Series 40 APIs.
Building & Managing The Lifecycle of Mobile Apps For The EnterpriseApperian
This presentation covers the various options for creating mobile apps for iOS as well as other popular platforms including Android. The landscape is changing quickly, so we'll review everything from HTML5 web-only apps, cross-platform development tools, HTML-enabled "hybrid" apps, all the way to the full native XCode environment.
We'll cover best practices for managing the mobile app lifecycle from design, beta, rollout, update management, to retirement. We'll also see a demonstration of how to deploy and manage mobile apps in an "enterprise" or corporate environment for iOS and Android.
Originally presented at the Southland Mobile App Creators (SMAC) meeting November 9, 2011.
A Magic apresenta sua plataforma de desenvolvimento de aplicações agora com foco em dispositivos móveis.
Multi-plataforma e desenvolvimento de ponta a ponta, reduzindo complexidades e viabilizando pro
[MobileMonday Switzerland #3 : Mobile application platforms]
Claude Florin gave an introduction on the key industry trends in mobile environments and question to be addressed by the speakers. He invited Swiss start-ups to Mobile Mondays peer awards. At HP, he is marketing manager for Communication solutions, responsible for user experience and emerging applications worldwide.
http://cflorin.blogspot.com/
The smartphone revolution has till now come mostly in three flavors: iOS, Android, and Blackberry. Samsung Electronics’ bada powered smartphones, however, are making a major dent in the market. Samsung’s bada phones are gaining ground on their accessible interface, familiar development environment, competitive prices, and wide app selection.
Mobile technology is the technology used for cellular communication. Mobile code division multiple access (CDMA) technology has evolved rapidly over the past few years. Since the start of this millennium, a standard mobile device has gone from being no more than a simple two-way pager to being a mobile phone, GPS navigation device, an embedded web browser and instant messaging client, and a handheld game console. Many experts argue that the future of computer technology rests in mobile computing with wireless networking. Mobile computing by way of tablet computers is becoming more popular. The most popular tablet at the moment is the iPad, by Apple. Tablets are available on the 3G and 4G networks.
When should you use HTML5 vs native apps for mobile app development? What are the pros and cons of HTML5? What are the advantages of native apps? What is the cost of HTML5 app development?
This presentation contains the facts based on 6+ years of mobile app development and more recently HTML5 experience.
We look forward to your feedback.
These webinar slides introduce what’s new in Microsoft Windows Phone 8, with an emphasis on those features that are sure to excite Nokia developers the most. Whether you’re completely new to Windows Phone or you have Windows Phone applications already on the market, you’ll see how Windows Phone 8 offers new opportunities. We’ll cover new APIs and technologies, enablers for better app monetisation, and cross-platform portability.
During Intel Developer Day 2010 Uli, Rami and Christop talked about MeeGo, Atom CPU, Moorestown, Intel Atom Developer Program and much more. And here\'s the presentation!
Mobile Developer's Guide To The Galaxy Vol.7Marco Tabor
The 7th edition of the Mobile Developer´s Guide To the Galaxy has been presented on the Mobile World Congress 2011. On 160 pages, it gives an updated overview on mobile technologies, the differences between the numerous mobile platforms and possible development approaches. The new edition contains new chapters about app development for BlackBerry, about cross-platform development and about how to create accessible mobile software.
It is an open project hosted and coordinated by the German product and service provider Enough Software. Currently 17 experts from the mobile ecosystem contributed their know how, everyone is invited to join.
Send your feedback and input directly to: developers@enough.de
Android has revolutionized the mobile and device landscape and like many FOSS projects, Android is complex. Effective management and control requires training, tools, processes and standards. The SPDX standard will reduce friction in the mobile supply chain, increase efficiency and promote compliance.
This webinar presentation provides an overview of how to port various types of Java™ applications for BlackBerry OS to the Series 40 platform. Michael Samarin of Futurice walks you through the basic porting tasks involved and shows you how to map BlackBerry APIs to corresponding Series 40 APIs.
Building & Managing The Lifecycle of Mobile Apps For The EnterpriseApperian
This presentation covers the various options for creating mobile apps for iOS as well as other popular platforms including Android. The landscape is changing quickly, so we'll review everything from HTML5 web-only apps, cross-platform development tools, HTML-enabled "hybrid" apps, all the way to the full native XCode environment.
We'll cover best practices for managing the mobile app lifecycle from design, beta, rollout, update management, to retirement. We'll also see a demonstration of how to deploy and manage mobile apps in an "enterprise" or corporate environment for iOS and Android.
Originally presented at the Southland Mobile App Creators (SMAC) meeting November 9, 2011.
A Magic apresenta sua plataforma de desenvolvimento de aplicações agora com foco em dispositivos móveis.
Multi-plataforma e desenvolvimento de ponta a ponta, reduzindo complexidades e viabilizando pro
[MobileMonday Switzerland #3 : Mobile application platforms]
Claude Florin gave an introduction on the key industry trends in mobile environments and question to be addressed by the speakers. He invited Swiss start-ups to Mobile Mondays peer awards. At HP, he is marketing manager for Communication solutions, responsible for user experience and emerging applications worldwide.
http://cflorin.blogspot.com/
The smartphone revolution has till now come mostly in three flavors: iOS, Android, and Blackberry. Samsung Electronics’ bada powered smartphones, however, are making a major dent in the market. Samsung’s bada phones are gaining ground on their accessible interface, familiar development environment, competitive prices, and wide app selection.
Mobile technology is the technology used for cellular communication. Mobile code division multiple access (CDMA) technology has evolved rapidly over the past few years. Since the start of this millennium, a standard mobile device has gone from being no more than a simple two-way pager to being a mobile phone, GPS navigation device, an embedded web browser and instant messaging client, and a handheld game console. Many experts argue that the future of computer technology rests in mobile computing with wireless networking. Mobile computing by way of tablet computers is becoming more popular. The most popular tablet at the moment is the iPad, by Apple. Tablets are available on the 3G and 4G networks.
When should you use HTML5 vs native apps for mobile app development? What are the pros and cons of HTML5? What are the advantages of native apps? What is the cost of HTML5 app development?
This presentation contains the facts based on 6+ years of mobile app development and more recently HTML5 experience.
We look forward to your feedback.
These webinar slides introduce what’s new in Microsoft Windows Phone 8, with an emphasis on those features that are sure to excite Nokia developers the most. Whether you’re completely new to Windows Phone or you have Windows Phone applications already on the market, you’ll see how Windows Phone 8 offers new opportunities. We’ll cover new APIs and technologies, enablers for better app monetisation, and cross-platform portability.
During Intel Developer Day 2010 Uli, Rami and Christop talked about MeeGo, Atom CPU, Moorestown, Intel Atom Developer Program and much more. And here\'s the presentation!
Mobile Developer's Guide To The Galaxy Vol.7Marco Tabor
The 7th edition of the Mobile Developer´s Guide To the Galaxy has been presented on the Mobile World Congress 2011. On 160 pages, it gives an updated overview on mobile technologies, the differences between the numerous mobile platforms and possible development approaches. The new edition contains new chapters about app development for BlackBerry, about cross-platform development and about how to create accessible mobile software.
It is an open project hosted and coordinated by the German product and service provider Enough Software. Currently 17 experts from the mobile ecosystem contributed their know how, everyone is invited to join.
Send your feedback and input directly to: developers@enough.de
Presentation at Inside Mobile Conference (O'Reilly and 360Conferences) at San Jose, CA on July 27th, 2009.
Today is possible to create mobile offline (and installed) applications using web-related technologies (XHTML, CSS, JavaScript, AJAX, Flash) and additional APIs. WRT for Nokia-Symbian, WebUI for Motorola, WebOS for Palm Pre, online/offline Webapps for iPhone 3.0, widgets for BlackBerry, and other mobile widget platforms for Sony Ericsson, Samsung, Nokia S40, Windows Mobile, Opera and Yahoo!. There is also a new hybrid paradigm using the best of the web technologies and a native development, like the PhoneGap project that can be distributed in the AppStore.
What can we do using this technology? what are the differences between platforms? Can we distribute them in the Application Stores? What compatibility do we have with web standards? What kind of applications are best-suited for this platforms? How to access location, contacts, accelerometer, SMS, home screen and Internet for each platform? What about security and privacy of my code?
Let's see how to create mobile web 2.0 mashups ported to many platforms in a couple of minutes using web knowledge.
Mobile Developers Guide To The Galaxy Vol.6Marco Tabor
The latest updated edition of Enough Software`s Guide to mobile platforms. Useful for application developers as well as for decision makers wanting to enter the mobile market.
Understand the challenges of programming application for each mobile platform and Xoriant’s recommendations of porting your mobile apps for overcoming this challenge. Also learn more on why mobile testing is an integral part of a mobile app development project which incorporates testing applications across devices, networks and carriers.
Developers Guide To The Galaxy 8th editionMarco Tabor
Completely updated and extended edition of this non-commercial overview on mobile technologies and development approaches. Helpful for developers and decision makers without technical background.
Mobile Developer's Guide To The Galaxy No. 9Marco Tabor
This non-commercial brochure by the German company Enough Software (www.enough.de) provides an overview on the different mobile technologies and platforms. Almost 20 writers contributed their know-how and outline their views on the pros and cons of different operation systems and development approaches. Together with the Wireless Industry Partnership (WIP), we started this project in 2009. The current 9th edition has been presented in October 2011 and consists of 170 pages.
Please send your feedback and input directly to developers@enough.de
Use the same address if your company would like to sponsor upcoming editions.
In case you would like to get hardcopies of the guide, we will be happy to send them over to you. You would just need to pay us the postage and packaging.
The presentation slide that I presented on Creatology (creative and technology) seminar, University of Indonesia, Dec 17, 2011.
I used some materials from my previous presentations, but with some updated data.
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/