Site Compatibility Testing for Firefox for Android

  • Revision slug: Mozilla/Firefox_for_Android/Compatibility_Testing
  • Revision title: Compatibility Testing
  • Revision id: 290515
  • Created:
  • Creator: jds2501
  • Is current revision? No
  • Comment

Revision Content

Testing Top Sites for Mobile Gecko Compatibility

1. Overview

Many top sites today on the web are serving Firefox for Android inferior (in-comparison to content served to other widely used mobile browser) mobile sites, traditional desktop sites, WAP (Wireless Application Protocol) or sites with functional and layout issues. These areas of contention arise due to:

  • Sniffing the target browser’s user agent to send differing content to Firefox for Android in-comparison to other mobile browsers
  • Usage of targeting WebKit based prefixes in CSS styling when serving a site on Firefox for Android

We need your help in identifying which top sites are having problems and what problems those sites are having. We are largely focused on getting standardized compliant mobile content.

Outlined below are steps to help one understand how to identify site problems and how one might report them.

2. Setup Steps

The following steps tell one what one needs in order to help test top sites for mobile-oriented Gecko compatibility:

  1. Own a phone that is in our list of supported devices for Firefox for Android (http://www.mozilla.org/en-US/firefox/mobile/platforms/)
  2. Install Firefox for Android off of Google Play (https://play.google.com/store/apps/details?id=org.mozilla.firefox)
  3. Install the Phony Add-on (a user-agent switcher) for Firefox on Android
  4. Setup an account on bugzilla here

Optional step: Install Firefox for Windows, Linux or Mac OS X alongside a user-agent switcher (see this article for an in-depth explanation about browser user-agents) to assist in further exploratory investigation into site differing issues.

3. Testing Steps

The following steps illustrates how one might test a top site after completion of the aforementioned setup instructions detailed in section 2:

  1. Select a top site to test off of this list here that is flagged for investigation
  2. Visit the selected website in Firefox for Android [1] and begin with exploration. Test the functionality of the site by visiting different areas of the site. Click on links, use forms, create accounts, sign-in, and question:
    1. Does the site have any blatant layout problems? Are elements overlapped? Is there missing content? Are areas of the page not shown correctly? Does the site simply look bad?
    2. Is the site a desktop site? Is the site exactly the same as one might see it on desktop? Are the URL’s the exact same? Is the site the same site that one would get with the iPhone user agent? Android Browser user agent? Opera user agent? Chrome user agent? Desktop Firefox user-agent. Feel free to explore by testing the same website in Firefox for Windows, Linux or Mac OS X and compare to what one might see on an Android device.
  3. Visit the same website on the device’s Android Browser and begin with the same exploration methods, and question:
    1. Are there any similar layout issues as seen in Firefox for Android? If so, what problems do you see on Firefox for Android that do not show up in the Android Browser?
    2. Does the site render as a mobile site? Does the content greatly differ than what was seen on Firefox for Android?
  4. On Firefox for Android, switch the user agent to IPhone using the Phony add-on. Visit the same website again and continue with the same exploration methods and question:
    1. Is the site rendered different than what was seen on Firefox for Android? If so, how is it different? Is it a mobile optimized site?
    2. Does the site have any layout problems? If so, what are those problems?

[1] Firefox for Android sends the following user agents to sites:

  • Phone: Mozilla/5.0 (Android; Mobile; rv:14.0) Gecko/14.0 Firefox/14.0:
  • Tablet: Mozilla/5.0 (Android; Tablet; rv:14.0) Gecko/14.0 Firefox/14.0

4. Reporting Results

If you find out that the Android Browser or iPhone user agent appear to have been served better (differing for better or worse) mobile optimized content with less layout problems than Firefox for Android, then you should report those problems in Bugzilla.

To file a bug on a problem you found while testing, file a bug in the Fennec Native Evangelism component in Bugzilla and provide the following information that may provide useful in investigation:

  • Component: Set this to Evangelism
  • Summary: Provide a short summary of the problem you found on a certain site
  • Description: Provide a description summarizing the problem including details such as what is seen in Firefox for Android, what is seen in the Android Browser, and lastly what is seen with the IPhone user agent. Please also include a summary of the underlying problems

It is also valuable to attach to the bug to be filed a screen capture that identifies and exposes the problem in Firefox for Android from one's Android device. More information on how might one create an Android screen capture can be read here.

5. Contact Information

If you have any questions on how to test, become engaged in our evangelism process, or comment and question on anything about Mozilla’s mobile website compatibility efforts, feel free to send an email to: compatibility@lists.mozilla.org.

Revision Source

<h1 id="Testing_Top_Sites_for_Mobile_Gecko_Compatibility"><strong>Testing Top Sites for Mobile Gecko Compatibility</strong></h1>
<h2 id="1._Overview"><strong>1. Overview</strong></h2>
<p>Many top sites today on the web are serving Firefox for Android inferior (in-comparison to content served to other widely used mobile browser) mobile sites, traditional desktop sites, WAP (Wireless Application Protocol) or sites with functional and layout issues. These areas of contention arise due to:</p>
<ul>
  <li>Sniffing the target browser’s user agent to send differing content to Firefox for Android in-comparison to other mobile browsers</li>
  <li>Usage of targeting WebKit based prefixes in CSS styling when serving a site on Firefox for Android</li>
</ul>
<p>We need your help in identifying which top sites are having problems and what problems those sites are having. We are largely focused on getting standardized compliant mobile content.<br>
  <br>
  Outlined below are steps to help one understand how to identify site problems and how one might report them.</p>
<h2 id="2._Setup_Steps"><strong>2. Setup Steps</strong></h2>
<p>The following steps tell one what one needs in order to help test top sites for mobile-oriented Gecko compatibility:</p>
<ol>
  <li>Own a phone that is in our list of supported devices for Firefox for Android (<a href="http://www.mozilla.org/en-US/firefox/mobile/platforms/">http://www.mozilla.org/en-US/firefox/mobile/platforms/</a>)</li>
  <li>Install Firefox for Android off of Google Play (<a href="https://play.google.com/store/apps/details?id=org.mozilla.firefox">https://play.google.com/store/apps/details?id=org.mozilla.firefox</a>)</li>
  <li>Install the <a href="https://addons.mozilla.org/en-US/android/addon/phony/">Phony</a> Add-on (a <a href="https://developer.mozilla.org/en/Browser_detection_using_the_user_agent">user-agent</a> switcher) for Firefox on Android</li>
  <li>Setup an account on bugzilla <a href="https://bugzilla.mozilla.org/createaccount.cgi">here</a></li>
</ol>
<p><strong>Optional step:</strong> Install Firefox for Windows, Linux or Mac OS X alongside a <a href="https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/?src=search">user-agent switcher</a> (see <a href="https://developer.mozilla.org/en/Browser_detection_using_the_user_agent">this article</a> for an in-depth explanation about browser user-agents) to assist in further exploratory investigation into site differing issues.</p><h2 id="3._Testing_Steps">3. Testing Steps</h2>
<p>The following steps illustrates how one might test a top site after completion of the aforementioned setup instructions detailed in section 2:</p>
<ol>
  <li>Select a top site to test off of this list <a href="http://lmandel.github.com/mobilewebcompat/">here</a> that is flagged for investigation</li>
  <li>Visit the selected website in Firefox for Android [<a href="#Firefox for Android User Agents">1</a>] and begin with exploration. Test the functionality of the site by visiting different areas of the site. Click on links, use forms, create accounts, sign-in, and question:
    <ol>
      <li>Does the site have any blatant layout problems? Are elements overlapped? Is there missing content? Are areas of the page not shown correctly? Does the site simply look bad?</li>
      <li>Is the site a desktop site? Is the site exactly the same as one might see it on desktop? Are the URL’s the exact same? Is the site the same site that one would get with the iPhone user agent? Android Browser user agent? Opera user agent? Chrome user agent? Desktop Firefox user-agent. Feel free to explore by testing the same website in Firefox for Windows, Linux or Mac OS X and compare to what one might see on an Android device.</li>
    </ol>
  </li>
  <li>Visit the same website on the device’s Android Browser and begin with the same exploration methods, and question:
    <ol>
      <li>Are there any similar layout issues as seen in Firefox for Android? If so, what problems do you see on Firefox for Android that do not show up in the Android Browser?</li>
      <li>Does the site render as a mobile site? Does the content greatly differ than what was seen on Firefox for Android?</li>
    </ol>
  </li>
  <li>On Firefox for Android, switch the user agent to IPhone using the Phony add-on. Visit the same website again and continue with the same exploration methods and question:
    <ol>
      <li>Is the site rendered different than what was seen on Firefox for Android? If so, how is it different? Is it a mobile optimized site?</li>
      <li>Does the site have any layout problems? If so, what are those problems?</li>
    </ol>
  </li>
</ol>
<p>[<a name="Firefox for Android User Agents">1</a>] Firefox for Android sends the following user agents to sites:</p>
<ul>
  <li>Phone: Mozilla/5.0 (Android; Mobile; rv:14.0) Gecko/14.0 Firefox/14.0:</li>
  <li>Tablet: Mozilla/5.0 (Android; Tablet; rv:14.0) Gecko/14.0 Firefox/14.0</li>
</ul><h2 id="4._Reporting_Results">4. Reporting Results</h2>
<p>If you find out that the Android Browser or iPhone user agent appear to have been served better (differing for better or worse) mobile optimized content with less layout problems than Firefox for Android, then you should report those problems in Bugzilla.<br>
  <br>
  To file a bug on a problem you found while testing, file a bug in the <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Fennec%20Native">Fennec Native Evangelism component</a> in Bugzilla and provide the following information that may provide useful in investigation:</p>
<ul>
  <li>Component: Set this to Evangelism</li>
  <li>Summary: Provide a short summary of the problem you found on a certain site</li>
  <li>Description: Provide a description summarizing the problem including details such as what is seen in Firefox for Android, what is seen in the Android Browser, and lastly what is seen with the IPhone user agent. Please also include a summary of the underlying problems</li>
</ul>
<p>It is also valuable to attach to the bug to be filed a screen capture that identifies and exposes the problem in Firefox for Android from one's Android device. More information on how might one create an Android screen capture can be read <a href="http://developer.android.com/tools/debugging/ddms.html">here</a>.</p><h1 dir="ltr" id="5._Contact_Information"><span style="font-size:24px;font-family:Arial;color:#000000;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;">5. Contact Information</span></h1>
<p><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;">If you have any questions on how to test, become engaged in our evangelism process, or comment and question on anything about Mozilla’s mobile website compatibility efforts, feel free to send an email to: </span><a href="mailto:compatibility@lists.mozilla.org"><span style="font-size:15px;font-family:Arial;color:#1155cc;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:underline;vertical-align:baseline;">compatibility@lists.mozilla.org</span></a><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;">. </span></p>
Revert to this revision