mozilla

Revision 302207 of Site Compatibility Testing for Firefox for Android

  • Revision slug: Mozilla/Firefox_for_Android/Compatibility_Testing
  • Revision title: Testing Top Sites for Mobile Gecko Compatibility
  • Revision id: 302207
  • Created:
  • Creator: lmandel
  • Is current revision? No
  • Comment

Revision Content

Overview

Many Web sites serve Firefox for Android different content than that served to other mobile browsers. This content is may be:

  • basic mobile site
  • traditional desktop site
  • WAP (Wireless Application Protocol) site designed for a feature phone
  • touch optimized mobile site that is broken visibly or functionally

This different content is often the result of:

  • Sniffing the target browser’s user agent to send differing content to Firefox for Android
  • Use of non standard (typically Webkit specific) CSS and DOM properties (used within JavaScript)

The mobile Web is like the sea - vast. Our goal, is to open up the mobile Web to all mobile browsers via promotion of standards and best practices.

We need your help to identify sites that do not work well in Firefox by reporting the specific issues that you find in your investigation.

Outlined below are steps that you can follow to identify and report site issues.

Setup Steps

The following steps tell one what you need 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.
  2. Install Firefox for Android from Google Play.
  3. Install the Phony Add-on (a user-agent switcher) for Firefox on Android; this lets Firefox for Android pretend to be another browser.
  4. Set up an account on bugzilla.

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 help you further explore issues with differing sites.

Testing Steps

The following steps illustrates how you might test a site after you complete the setup instructions:

  1. Select a site to test from the list of sites that are flagged for investigation.
  2. Visit the selected website in Firefox for Android and begin exploring. 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 URLs 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 you see on an Android device.
  3. Visit the same website using the device’s Android Browser, using 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 you saw on Firefox for Android?
  4. On Firefox for Android, switch the user agent string 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 you saw 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?

Note: Firefox for Android sends the following user agent strings 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

Reporting Results

If you find out that the Android Browser or iPhone user agent appears to have been served better mobile optimized content with fewer 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
Summarize problem you found on a certain site
Description
Describe the problem, including details such as what you saw in Firefox for Android, what you saw in the Android Browser, and lastly what you saw with the IPhone user agent string. Please also include a summary of the underlying problems.

It is also valuable to attach to the bug a screen capture that identifies and exposes the problem in Firefox for Android from your Android device. Read about creating Android screen captures.

Contact Information

If you have any questions on how to test, want to become involved 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

<h2 id="Overview">Overview</h2>
<p>Many Web sites serve Firefox for Android different content than that served to other mobile browsers. This content is may be:</p>
<ul>
  <li>basic mobile site</li>
  <li>traditional desktop site</li>
  <li>WAP (Wireless Application Protocol) site designed for a feature phone</li>
  <li>touch optimized mobile site that is broken visibly or functionally</li>
</ul>
<p>This different content is often the result of:</p>
<ul>
  <li>Sniffing the target browser’s user agent to send differing content to Firefox for Android</li>
  <li>Use of non standard (typically Webkit specific) CSS and DOM properties (used within JavaScript)</li>
</ul>
<p>The mobile Web is like the sea - vast. Our goal, is to open up the mobile Web to all mobile browsers via promotion of standards and best practices.</p>
<p>We need your help to identify sites that do not work well in Firefox by reporting the specific issues that you find in your investigation.</p>
<p>Outlined below are steps that you can follow to identify and report site issues.</p>
<h2 id="Setup_Steps">Setup Steps</h2>
<p>The following steps tell one what you need in order to help test top sites for mobile-oriented Gecko compatibility:</p>
<ol>
  <li>Own a phone that is in our <a href="http://www.mozilla.org/firefox/mobile/platforms/" title="http://www.mozilla.org/firefox/mobile/platforms/">list of supported devices for Firefox for Android</a>.</li>
  <li>Install <a href="https://play.google.com/store/apps/details?id=org.mozilla.firefox" title="https://play.google.com/store/apps/details?id=org.mozilla.firefox">Firefox for Android from Google Play</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; this lets Firefox for Android pretend to be another browser.</li>
  <li><a href="https://bugzilla.mozilla.org/createaccount.cgi" title="https://bugzilla.mozilla.org/createaccount.cgi">Set up an account on bugzilla</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 help you further explore issues with differing sites.</p>
<h2 id="Testing_Steps">Testing Steps</h2>
<p>The following steps illustrates how you might test a site after you complete the setup instructions:</p>
<ol>
  <li>Select a site to test from the <a href="http://lmandel.github.com/mobilewebcompat/" title="http://lmandel.github.com/mobilewebcompat/">list of sites that are flagged for investigation</a>.</li>
  <li>Visit the selected website in Firefox for Android and begin exploring. 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 URLs 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 you see on an Android device.</li>
    </ol>
  </li>
  <li>Visit the same website using the device’s Android Browser, using 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 you saw on Firefox for Android?</li>
    </ol>
  </li>
  <li>On Firefox for Android, switch the user agent string 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 you saw 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>
<div class="note style-wrap">
  <p><strong>Note:</strong> Firefox for Android sends the following user agent strings to sites:</p>
  <ul>
    <li>
      <p>Phone: Mozilla/5.0 (Android; Mobile; rv:14.0) Gecko/14.0 Firefox/14.0:</p>
    </li>
    <li>
      <p>Tablet: Mozilla/5.0 (Android; Tablet; rv:14.0) Gecko/14.0 Firefox/14.0</p>
    </li>
  </ul>
</div>
<h2 id="Reporting_Results">Reporting Results</h2>
<p>If you find out that the Android Browser or iPhone user agent appears to have been served better mobile optimized content with fewer 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>
<dl>
  <dt>
    Component</dt>
  <dd>
    Set this to Evangelism</dd>
  <dt>
    Summary</dt>
  <dd>
    Summarize problem you found on a certain site</dd>
  <dt>
    Description</dt>
  <dd>
    Describe the problem, including details such as what you saw in Firefox for Android, what you saw in the Android Browser, and lastly what you saw with the IPhone user agent string. Please also include a summary of the underlying problems.</dd>
</dl>
<ul>
</ul>
<p>It is also valuable to attach to the bug a screen capture that identifies and exposes the problem in Firefox for Android from your Android device. Read about <a href="http://developer.android.com/tools/debugging/ddms.html" title="http://developer.android.com/tools/debugging/ddms.html">creating Android screen captures</a>.</p>
<h2 id="Contact_Information">Contact Information</h2>
<p>If you have any questions on how to test, want to become involved in our evangelism process, or comment and question on anything about Mozilla’s mobile website compatibility efforts, feel free to send an email to: <a href="mailto:compatibility@lists.mozilla.org">compatibility@lists.mozilla.org</a>.</p>
Revert to this revision