Compatibility/Guide: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
(updating prose and links)
 
(27 intermediate revisions by 5 users not shown)
Line 13: Line 13:


The '''work and the effort of the community''' is key to the success of the open Web. These efforts have to be considered in the constraints of the business requirements of each contacted Web site. We are not here to blame, we are here to make the Web open to anyone. The [[Compatibility|Web compatibility]] effort is driven by two projects [[Compatibility/Mobile|mobile Web compatibility]] and [[Compatibility/Desktop|desktop Web compatibility]].
The '''work and the effort of the community''' is key to the success of the open Web. These efforts have to be considered in the constraints of the business requirements of each contacted Web site. We are not here to blame, we are here to make the Web open to anyone. The [[Compatibility|Web compatibility]] effort is driven by two projects [[Compatibility/Mobile|mobile Web compatibility]] and [[Compatibility/Desktop|desktop Web compatibility]].
== Collecting Information And Surveys ==
Once a mobile device has been introduced in a new country, some Web sites will exhibit issues of Web compatibility. Every country has popular Web sites which are related to their local market (for example well known press and magazines sites).
=== Steps to follow ===
# Create a page with a list of top Web sites. See for example [https://etherpad.mozilla.org/top-brazilian-sites Brazil], [https://etherpad.mozilla.org/top-indian-sites India] or [https://etherpad.mozilla.org/top-german-sites Germany]
# Start small, grow it little by little
# For each Web site, test the site with Firefox OS, Firefox Android (and Opera Mobile, IEMobile, Chrome Mobile, Android, etc.)
# Note differences and open individual bugs for each individual issue (see below)


== Reporting a Web compatibility issue ==
== Reporting a Web compatibility issue ==
Line 29: Line 18:
=== What? ===
=== What? ===


# Enter the Web site URI
# You visit a webpage.
# You have not been able to use it with your Web browsers of choice
# Something about the experience is broken: layout is messed up, video doesn't play, buttons don't work, etc.
# Check with on other browsers. Are there any differences making the site unusable.
# '''Check in another browser'''. Is it working there but not in Firefox?


'''You can help'''!
'''You can help'''!


This guide is focused on Mozilla browsers but you can also help other browser vendors. If you have an issue with Opera ([https://bugs.opera.com/wizarddesktop/ Bug Wizard]), Chrome ([http://code.google.com/p/chromium/issues/entry Bug]), Safari ([https://bugs.webkit.org/ Bug]) or Internet Explorer ([https://connect.microsoft.com/IE Bug]).
Note: We try to avoid working on fixing Web sites which are working badly everywhere. We focus first our energy on Web sites which are broken in one browser and not others. Issues caused by add-ons or ad blockers are also not considered web compatibility issues.
 
PS: We try to avoid to fix Web sites which are working badly everywhere. We focus first our energy on Web sites which are broken in one browser and not the others.


=== Requirements ===
=== Requirements ===


You will need a Mozilla bugzilla account. If not [https://bugzilla.mozilla.org/createaccount.cgi create a new account].
You will need a GitHub account. If you don't have one, [https://github.com/ you can create a new account] (it's free). You can also file bugs anonymously, but that makes it hard to follow up— filing with an account is preferred!


=== Steps to follow ===
=== Steps to follow ===


The person (volunteer or Mozilla engineer) will need to know which steps you have followed to reach the issue. The more details you give, the better chance the issue will be properly addressed. If, for example, one must log in to see the issue, it is important to say so.
A good bug report includes steps to reproduce an issue, and what the expected outcome was. The more details you give, the better chance the issue will be properly addressed. If, for example, one must log in to see the issue, it is important to say so. Screenshots can also be very helpful!


# Create a [https://bugzilla.mozilla.org/form.mobile.compat new bug in Bugzilla]
# Create a [https://webcompat.com/?open=1 new bug on webcompat.com] (if you have the [https://addons.mozilla.org/en-US/firefox/addon/webcompatcom-reporter/ webcompat reporter add-on] installed, just click on the icon to open this for you with some of the info pre-filled).
## Describe the steps you have been doing for reaching the point where you have an issue: '''[https://bugzilla.mozilla.org/show_bug.cgi?id=901569#c0 Example of steps]'''
## Include the URL'''
## Describe what is happening
## Include the steps to perform to see the problem after opening that URL
## Describe what you were expecting
## Describe the expected behavior
## Give information about your device and your browser
## Describe the actual behavior
# (Bonus) Test in one or more browsers to understand the differences: [https://bugzilla.mozilla.org/show_bug.cgi?id=843165#c1 Example of tests in different browsers]
## Give relevant information about your device and your browser
# (Bonus) Test in one or more browsers to understand the differences


Someone might ask further questions in the bug report to better understand the issue.  
Someone might ask further questions in the bug report to better understand the issue. This is why it's important to report issues with a GitHub account — you'll be able to get notifications about questions and progress.


Do not forget: '''Be nice'''. It is our collective effort.
Do not forget: '''Be nice'''. It is our collective effort.


== Analyzing for Web Compatibility Issues ==
== Diagnose a Web Compatibility Issue ==


There are many ways of analyzing a Web site for Web Compatibility issues. We could write an entire book with the types of issues and techniques used to find them.
Analysis is broken down into two processes: triage and diagnosis.
The [[Compatibility/Guide/Triage|triage process]] involves testing the reported issue to validate if the issue:
* Can be reproduced
* Is considered a valid Web Compatibility bug
* Has been reported previously (a duplicate)


=== Mozilla Bugzilla Process for Analysis ===
There are many ways of diagnosing a web site for Web Compatibility issues. We could write an entire book with the types of issues and techniques used to find them.


You might want help analyzing [https://bugzilla.mozilla.org/buglist.cgi?product=Tech%20Evangelism&component=Mobile&resolution=---&list_id=7757638 Mobile Web Compatibility bugs]. A bug which has the status '''NEW''' or '''ASSIGNED''' are basically the same.
=== Diagnosis Process and Tools ===


# When analyzing the bug, take it (assign yourself).
The work is based on a [[Compatibility/Diagnosis|diagnosis process]]. You may want to read this. It gives useful hints on how to organize the work. [[Compatibility/Tools|some tools and techniques]] for investigating bugs have also  been described.
# Once you've discovered the type of issue affecting the site:
## document in a comment
## flag it with a whiteboard keyword for example [serversniff] if it's related to server side user agent detection.
# If you do not plan to work further on the bug, such as contacting the Web site, '''Unassign yourself'''
 
You may use [[Compatibility/Tools|some tools and techniques]] for investigating bugs.


== Finding The Right Contact on a Web site ==
== Finding The Right Contact on a Web site ==
Line 115: Line 101:
== Bugzilla Conventions for Web Compatibility Issues ==
== Bugzilla Conventions for Web Compatibility Issues ==


=== Status ===
We are using a [[Compatibility/BugsGuide|list of conventions]] in the Web Compatibility activity.


This is a short explanation of the bug status in [https://bugzilla.mozilla.org/describecomponents.cgi?product=Tech%20Evangelism Web Compatibility Area].
== Mobile Web Compatibility Issues By Countries ==


* UNCONFIRMED: This bug has been opened, probably through [https://bugzilla.mozilla.org/form.mobile.compat Mobile Web Compat form]
Web Compatibility often requires to communicate with the Web site developer or owner in his/her own language. We try to keep a [[Compatibility/Countries|list of countries]] for people with specific language skills can get easily involved in the work.
* NEW:        The bug has been confirmed and probably analyzed. Whiteboard flags are added. It's free for everyone to work on it.
* ASSIGN:    A person has been assigned on the bug. It has been taken.
* FIXED:      A site was fixed in response to a request made by volunteers through Mozilla.
* WORKSFORME: If the problem is no longer there but we haven't asked for any fixes (yet)
* INVALID:    If a bug is not a valid Tech Evangelism bug in the first place


=== whiteboard keywords for categorizing the issues ===
== Collecting Information And Surveys ==


We are using a set of keywords in the whiteboard field to help us figuring out priorities, languages, etc.
Once a mobile device has been introduced in a new country, some Web sites will exhibit issues of Web compatibility. Every country has popular Web sites which are related to their local market (for example well known press and magazines sites).


* '''[contactready]''': Once the Web site has been analyzed for Web compatibility issues. Someone can take the bug and contact the Web site for achieving a resolution. [http://mzl.la/1awGwHK List of Web sites to contact]
=== Steps to follow ===
* '''[sitewait]''': Once the Web site has been contacted for Web compatibility issues. This helps to not have two separate persons contacting the same Web site. Leave also a comment with the date when you contacted the site. [http://mzl.la/1aHrRNA list of contacted Web sites]
* '''[country-ISOCODE]''': Some websites are dedicated to a specific country. For example, a French Web site can be classified as [country-fr], a japanese Web site as [country-jp], for international Web sites you can use [country-all]
* '''[uaoverride]''': When the current bug is about the UA override list added on to [[Fennec|Firefox for Android]] or [[Gaia|Firefox OS]]
* '''[clientsniff]''':  When the sniffing is happening on the client-side such as HTML or JS
* '''[serversniff]''': When the sniffing is happening on the server-side such as HTTP redirection and/or different content being served on the same domain
* '''[lib-foo]''': When related to a specific JS lib being used. Example [lib-yui] [lib-jquery] [lib-mootools]
* '''[tier1]''': When the issue is about a site not giving the nicest experience that some other browsers get. For example, getting the low-end mobile version instead of the shiny touch version.
 
=== Dependencies bugs ===
 
* bug 739832 for dependencies on Webkit CSS prefixes for Firefox Android.
 
== Mobile Web Compatibility Issues By Countries ==


# Create a page with a list of top Web sites. See for example [https://etherpad.mozilla.org/top-brazilian-sites Brazil], [https://etherpad.mozilla.org/top-indian-sites India] or [https://etherpad.mozilla.org/top-german-sites Germany]
# Start small, grow it little by little
# For each Web site, test the site with Firefox Android (and Opera Mobile, IEMobile, Chrome Mobile, Android, etc.). You can get help by having a [https://air.mozilla.org/compcast-1-reviewing-screenshots-reporting-bugs/ pre-generation of screenshots for your Web site list].
# Note differences and open individual bugs for each individual issue (see below)


* [[Compatibility/Mobile/Brazil|Brazil]]
* [[Compatibility/Mobile/Colombia|Colombia]]
* [[Compatibility/Mobile/Germany|Germany]]
* [[Compatibility/Mobile/Greece|Greece]]
* [[Compatibility/Mobile/India|India]]
* [[Compatibility/Mobile/Mexico|Mexico]]
* [[Compatibility/Mobile/Poland|Poland]]
* [[Compatibility/Mobile/Spain|Spain]]
* [[Compatibility/Mobile/Venezuela|Venezuela]]


[[Category:Web Compatibility]]
[[Category:Web Compatibility|Guide]]

Latest revision as of 00:26, 16 May 2019

Working on Web Compatibility Issues

As said on Web Compatibility page:

A person should be able to use the Web from which ever device and browser they are using.

There are many ways we, Web users, can help make the Web a better place:

  • Collect information about well-known sites in your own country.
  • Report the issues in a useful way.
  • Analyze the Web sites so that the bugs contain useful information.
  • Contact Web sites owners (or developers) for fixing Web compatibility issues.

The work and the effort of the community is key to the success of the open Web. These efforts have to be considered in the constraints of the business requirements of each contacted Web site. We are not here to blame, we are here to make the Web open to anyone. The Web compatibility effort is driven by two projects mobile Web compatibility and desktop Web compatibility.

Reporting a Web compatibility issue

What?

  1. You visit a webpage.
  2. Something about the experience is broken: layout is messed up, video doesn't play, buttons don't work, etc.
  3. Check in another browser. Is it working there but not in Firefox?

You can help!

Note: We try to avoid working on fixing Web sites which are working badly everywhere. We focus first our energy on Web sites which are broken in one browser and not others. Issues caused by add-ons or ad blockers are also not considered web compatibility issues.

Requirements

You will need a GitHub account. If you don't have one, you can create a new account (it's free). You can also file bugs anonymously, but that makes it hard to follow up— filing with an account is preferred!

Steps to follow

A good bug report includes steps to reproduce an issue, and what the expected outcome was. The more details you give, the better chance the issue will be properly addressed. If, for example, one must log in to see the issue, it is important to say so. Screenshots can also be very helpful!

  1. Create a new bug on webcompat.com (if you have the webcompat reporter add-on installed, just click on the icon to open this for you with some of the info pre-filled).
    1. Include the URL
    2. Include the steps to perform to see the problem after opening that URL
    3. Describe the expected behavior
    4. Describe the actual behavior
    5. Give relevant information about your device and your browser
  2. (Bonus) Test in one or more browsers to understand the differences

Someone might ask further questions in the bug report to better understand the issue. This is why it's important to report issues with a GitHub account — you'll be able to get notifications about questions and progress.

Do not forget: Be nice. It is our collective effort.

Diagnose a Web Compatibility Issue

Analysis is broken down into two processes: triage and diagnosis. The triage process involves testing the reported issue to validate if the issue:

  • Can be reproduced
  • Is considered a valid Web Compatibility bug
  • Has been reported previously (a duplicate)

There are many ways of diagnosing a web site for Web Compatibility issues. We could write an entire book with the types of issues and techniques used to find them.

Diagnosis Process and Tools

The work is based on a diagnosis process. You may want to read this. It gives useful hints on how to organize the work. some tools and techniques for investigating bugs have also been described.

Finding The Right Contact on a Web site

For solving the issues, we often need to find the right person on the Web site. It is often the hardest part of the job, but it's where you can really make a difference. Some Web sites are written in a language that you are mastering. Some Web sites are in country where we do not have much context on how to contact the right person. You can help. The open Web is the work of everyone. Here is a concrete example. If you have more tips, share them here.

There is more than one strategy for finding a person related to a Web compatibility issue. Here are a few:

  • Does the company have a developer relations department?
  • Is there a support email address or Web form on the Web site?
  • Is there an email address for the Communications department?
  • Is there an email address for the Technical department?
  • If the company has an organigram of their management, search for people who are CTO, Marketing, or Communications related, then check online if you can find them either on Twitter or Linkedin. But, be careful. If the person is obviously only using the account for personal stuff, do not bother them.
  • Does the company have a Twitter account?
  • Does the company have a Github, Bitbucket or Google code account?
  • As a last resort, you may try through their Press relations address which is usually open.
  • Call a phone number of the company, though you may be bounced around.
  • You might want to check the WHOIS record for the domain name. In some rare cases, it is possible to find useful information about the owner of the site.

Before contacting, read the next section.

Negotiating with the Web site for fixing a Web compatibility issue

First of all, this is a negotiation process. People you will try to contact have their own set of constraints and that might be difficult for them to understand, fix the issue. So be nice.

  • Never ever be aggressive with the persons you are trying to reach out. We want a better Web, not an angry Web ;).
  • Never assume you are contacting the right person.
  • Do not harass people with a lot of emails (even if they are nice to you). A good rule of thumb is to wait one week between contacts. Then a month for the third contact. If nothing has happened during the 5 weeks, give up.
  • Never share publicly the emails or names of people in the bug report if they have not decided to reveal themselves. Sometimes people will be willing to help fix a Web site without necessarily telling their management. Exposing them would make their work more difficult.
  • Invite people to participate to the bugzilla themselves.
  • If someone doesn't want to open a bugzilla account but is willing to share his/her comments in the bug report, help them to publish it (but only if they agree).


There is no perfect email for contacting Web site, but if you think you are not necessarilyy contacting the right person it helps to write shorter emails. We created some templates in different languages. They are very simple, straight to the point and asking for better contact information. It is just an example. Some countries require more formalism, etc. Adjust depending on the local culture in your own language.

On twitter, it could be straightforward. For example

   @example Hi, would you know who I should contact 
   for Web site issues? 
   See https://bugzilla.mozilla.org/show_bug.cgi?id=<issue_number>

Bugzilla Conventions for Web Compatibility Issues

We are using a list of conventions in the Web Compatibility activity.

Mobile Web Compatibility Issues By Countries

Web Compatibility often requires to communicate with the Web site developer or owner in his/her own language. We try to keep a list of countries for people with specific language skills can get easily involved in the work.

Collecting Information And Surveys

Once a mobile device has been introduced in a new country, some Web sites will exhibit issues of Web compatibility. Every country has popular Web sites which are related to their local market (for example well known press and magazines sites).

Steps to follow

  1. Create a page with a list of top Web sites. See for example Brazil, India or Germany
  2. Start small, grow it little by little
  3. For each Web site, test the site with Firefox Android (and Opera Mobile, IEMobile, Chrome Mobile, Android, etc.). You can get help by having a pre-generation of screenshots for your Web site list.
  4. Note differences and open individual bugs for each individual issue (see below)