Design 11: Programming the Figure Image Response

dieUX cartoon strip, User Testing created 26th January, 2019 by Pat Godfrey

Planning

[Assistant] The Director wants your plan for the information architecture.
[Our Designer] Says nothing.
[Assistant] I'll tell him you are at lunch.

Note

Design 11: The following list summarises work to date:

What remains is as follows:

Video

Skip video to and

HTML

<figure>
  <picture>
    <source media="(min-width: 760px)" srcset="../img/dieux-by-pat-godfrey-user-testing.png">
	<source media="(min-width: 100px)" srcset="../img/dieux-by-pat-godfrey-user-testing-v.png">
	<img aria-labelledby="heading" class="dieux__img" src="../img/dieux-by-pat-godfrey-user-testing.png" alt="dieUX cartoon strip, User Testing created 26th January, 2019 by Pat Godfrey">
  </picture>
  <button id="button" aria-controls="caption" aria-pressed="false" aria-expanded="false" aria-hidden="true">Toggle Caption</button>
  <figcaption id="caption" aria-labelledby="heading" class="hidden" role="region">
	<h2 id="heading">Planning</h2>
    <p>[Assistant] The Director wants your plan for the information architecture. <br>
    [Our Designer] Says nothing. <br>
    [Assistant] I'll tell him you are at lunch.</p>
	</figcaption>
</figure>