Merge pull request #2328 from /issues/2216-2

Fixes #2216 - add screenshots

Author: Mike Taylor

webcompat/templates/contributors/report-bug.html

@@ -26,14 +26,12 @@ <h2 id="how" class="headline-1 highlight">How To Report An Issue?</h2>
           </p>
 
           <p>
-            @@insert here form screenshot@@
-            <img src="/img/contributors/report-bug_1-form-empty.png" style="max-height: 75vh; max-width: 100%;" alt="">
+            <img src="/img/contributors/report-bug_1-form-empty.png" style="max-height: 75vh; max-width: 100%;" alt="Image of an empty bug report form" />
             When reporting an issue directly on webcompat.com or through external tools, you will always end up on the <a href="/issues/new">webcompat form</a>. Some of the fields in this form are mandatory. Take time to be precise and to guide us through the steps that will make it possible to reproduce the issue.
           </p>
 
           <p>
-            @@Show a screenshot example of a form with the correct information@@
-            <img src="/img/contributors/report-bug_2-form_filled.png" style="max-height: 75vh; max-width: 100%;" alt="">
+            <img src="/img/contributors/report-bug_2-form_filled.png" style="max-height: 75vh; max-width: 100%;" alt="Image of a fully filled out bug report form" />
           </p>
 
           <ol>
@@ -61,6 +59,9 @@ <h2 id="tools" class="headline-1 highlight">Tools To Report An Issue</h2>
           </p>
 
           <h3 id="form" class="headline-2">The Form</h3>
+          <p>
+            <img src="/img/contributors/report-bug_3-report-site-issue.gif" style="max-height: 75vh; max-width: 100%;" alt="Screenshot of three dot menu in Firefox browser" />
+          </p>
           <p>
             The <a href="/issues/new">webcompat report form</a> is the main avenue to report an issue.
           </p>
@@ -71,7 +72,6 @@ <h3 id="web-extensions" class="headline-2">Web Extensions</h3>
           </p>
 
           <p>
-            @@find the links for Safari and Chrome@@
             <a href="https://chrome.google.com/webstore/detail/webcompatcom-reporter/ffnnhckjcpbbjlmgfjigknkoffakclol" target="_blank">Webcompat.com Reporter</a> for Chrome
           </p>
 
@@ -89,17 +89,15 @@ <h3 id="in-browser" class="headline-2">In Browser</h3>
           </p>
 
           <p>
-            @@insert here report-dsk-dot-menu.png@@
-            <img src="/img/contributors/report-bug_4-desktop-arrow.png" style="max-height: 75vh; max-width: 100%;" alt="">
+            <img src="/img/contributors/report-bug_4-desktop-arrow.png" style="max-height: 75vh; max-width: 100%;" alt="Screenshot of three dot menu in Firefox browser" />
           </p>
 
           <p>
             On Firefox Android, you can use the menu button and scroll down to the Report Site Issue option.
           </p>
 
           <p>
-            @@insert here android menu reporting@@
-            <img src="/img/contributors/report-bug_5-fennec-report-menu.png" style="max-height: 75vh; max-width: 100%;" alt="">
+            <img src="/img/contributors/report-bug_5-fennec-report-menu.png" style="max-height: 75vh; max-width: 100%;" alt="Screenshot of three dot menu in mobile Firefox browser on Android" />
           </p>
 
           <p>

webcompat/templates/contributors/site-outreach.html

@@ -102,7 +102,7 @@ <h2 id="website-issue" class="headline-1 highlight">Website issues</h2>
               This is a simple one, but there's no guarantee that your request will be addressed.  Most of the time the responses are automatic but it's better than nothing. If in return you get an ID and/or a URI, put it in the issue comments.
           </p>
           <figure>
-            <img src="../img/2lastbullet_comment.jpg" alt="GitHub Comment Screenshot" />
+            <img src="../img/contributors/site-outreach_1-lastbullet_comment.jpg" style="max-height: 75vh; max-width: 100%;" alt="Github last comment Screenshot" />
             <figcaption>Leave a comment on the GitHub issue.</figcaption>
           </figure>
         </div>
@@ -128,7 +128,7 @@ <h2 id="human" class="headline-1 highlight">Search for a human working there</h2
               <strong class="bold">SlideShare:</strong> <br />
               When you can't find the information about a developer, you might want to try to search something such as $COMPANY_NAME site:slideshare.net or any appropriate keywords that will make you closer to a contact. Some companies have their developers speaking at conferences about issues with performances, etc. Be careful of talks related to sales or marketing. In the slides, there is often the contact information of the developer.
               <figure>
-                <img src="../img/slideshare.jpg" alt="SlideShare Screenshot" />
+                <img src="../img/contributors/site-outreach_2-slideshare.png" style="max-height: 75vh; max-width: 100%;" alt="Slideshare Screenshot" />
                 <figcaption>Slideshare Interface</figcaption>
               </figure>
             </p>
@@ -140,7 +140,7 @@ <h2 id="human" class="headline-1 highlight">Search for a human working there</h2
               <strong class="bold">Web designer:</strong> <br />
               Sometimes when you can't reach a web developer, you may try to reach web designers who have also their own type of social networks such as <a title="dribbble.com" href="https://dribbble.com/" target="_blank">dribbble.com</a>. Usually they have contacts with web developers and may be able to give an introduction. In some web agencies, the web designer will be a good initial contact. Again, be tactful and don't make the life of the web designer harder in his/her own company.
               <figure>
-                <img src="../img/webdesigner.jpg" alt="Dribble Screenshot" />
+                <img src="../img/contributors/site-outreach_3-dribbble.png" style="max-height: 75vh; max-width: 100%;" alt="Dribble Screenshot" />
                 <figcaption>Dribble Interface</figcaption>
               </figure>
             </p>