Revision 647741 of picture element documentation plan

  • Revision slug: MDN/Plans/picture
  • Revision title: picture element documentation plan
  • Revision id: 647741
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment draft

Revision Content

The new HTML {{HTMLElement("picture")}} element can be used to offer multiple possible images for an {{HTMLElement("img")}} element to select based on the results of media queries or size sets. {{HTMLElement("picture")}} is a very powerful feature, and this documentation project will produce content explaining its use and updating existing articles on MDN to reference it as appropriate.

Team

{{UserLink("teoli")}}
Primary writer.

Other MDN contributors may of course participate as well!

Goals

  • Provide thorough documentation and sample code for {{HTMLElement("picture")}}.
  • Update existing docs as needed.

Target milestones

User stories

Documents needed

The lists here detail specific types of content that need to be produced, as well as precise pages that we know need to be produced or updated.

Types of pages

The following types of pages will need to be produced.

  • Reference
    • Interfaces
    • Properties
    • Methods
    • Events
  • Landing pages
  • Guides/tutorials
  • Sample apps and web content

Reference page work needed

  • Create {{HTMLElement("picture")}}
  • Update {{HTMLElement("img")}} and {{HTMLElement("source")}} element pages with the changes in the spec to support <picture>.
  • Ensure that the srcset attribute is well documented
  • ???

User guide work needed

  • Update existing image presentation samples as needed to additionally talk about {{HTMLElement("picture")}}.
  • Guide to updating content to support multiple resolutions of imagery.
  • ???

References

Existing content

Other notes

None at this time.

Revision Source

<p>The new HTML {{HTMLElement("picture")}} element can be used to offer multiple possible images for an {{HTMLElement("img")}} element to select based on the results of media queries or size sets. {{HTMLElement("picture")}} is a very powerful feature, and this documentation project will produce content explaining its use and updating existing articles on MDN to reference it as appropriate.</p>
<h2 id="Team">Team</h2>
<dl>
 <dt>
  {{UserLink("teoli")}}</dt>
 <dd>
  Primary writer.</dd>
</dl>
<p>Other MDN contributors may of course participate as well!</p>
<h2 id="Goals">Goals</h2>
<ul>
 <li>Provide thorough documentation and sample code for {{HTMLElement("picture")}}.</li>
 <li>Update existing docs as needed.</li>
</ul>
<h2 id="Target_milestones">Target milestones</h2>
<h2 id="User_stories">User stories</h2>
<h2 id="Documents_needed">Documents needed</h2>
<p>The lists here detail specific types of content that need to be produced, as well as precise pages that we know need to be produced or updated.</p>
<h3 id="Types_of_pages">Types of pages</h3>
<p>The following types of pages will need to be produced.</p>
<ul>
 <li>Reference
  <ul>
   <li>Interfaces</li>
   <li>Properties</li>
   <li>Methods</li>
   <li>Events</li>
  </ul>
 </li>
 <li>Landing pages</li>
 <li>Guides/tutorials</li>
 <li>Sample apps and web content</li>
</ul>
<h3>Reference page work needed</h3>
<ul>
 <li>Create {{HTMLElement("picture")}}</li>
 <li>Update {{HTMLElement("img")}} and {{HTMLElement("source")}} element pages with the changes in the spec to support <code>&lt;picture&gt;</code>.</li>
 <li>Ensure that the <code>srcset</code> attribute is well documented</li>
 <li>???</li>
</ul>
<h3>User guide work needed</h3>
<ul>
 <li>Update existing image presentation samples as needed to additionally talk about {{HTMLElement("picture")}}.</li>
 <li>Guide to updating content to support multiple resolutions of imagery.</li>
 <li>???</li>
</ul>
<h2 id="References">References</h2>
<ul>
 <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content.html#the-picture-element">Specification</a></li>
</ul>
<h2 id="Existing_content">Existing content</h2>
<h2 id="Other_notes">Other notes</h2>
<p>None at this time.</p>
Revert to this revision