davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang=fr>
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset=utf-8>
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
<!-- Required to make a valid HTML5 document. -->
<title>Responsive day out 3: the final breakpoint (archive) — David Larlet</title>
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/static/david/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="David Larlet">
<meta name="application-name" content="David Larlet">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- That good ol' feed, subscribe :p. -->
<link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://hiddedevries.nl/en/blog/2015-06-20-responsive-day-out-3-the-final-breakpoint/">

<style>
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* http://practicaltypography.com/equity.html */
/* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
/* https://www.filamentgroup.com/lab/js-web-fonts.html */
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ConcourseT3';
  src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
       url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
body {
  /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  font-family: "EquityTextB", Palatino, serif;
  background-color: #f0f0ea;
  color: #07486c;
  font-kerning: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern", "liga", "clig", "calt";
}
pre, code, kbd, samp, var, tt {
  font-family: 'TriplicateT4c', monospace;
}
em {
  font-style: italic;
  color: #323a45;
}
strong {
  font-weight: bold;
  color: black;
}
nav {
  background-color: #323a45;
  color: #f0f0ea;
  display: flex;
  justify-content: space-around;
  padding: 1rem .5rem;
}
  nav:last-child {
    border-bottom: 1vh solid #2d7474;
  }
  nav a {
    color: #f0f0ea;
  }
  nav abbr {
    border-bottom: 1px dotted white;
  }

h1 {
  border-top: 1vh solid #2d7474;
  border-bottom: .2vh dotted #2d7474;
  background-color: #e3e1e1;
  color: #323a45;
  text-align: center;
  padding: 5rem 0 4rem 0;
  width: 100%;
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
}
  h1.single {
    padding-bottom: 10rem;
  }
  h1 span {
    position: absolute;
    top: 1vh;
    left: 20%;
    line-height: 0;
  }
    h1 span a {
      line-height: 1.7;
      padding: 1rem 1.2rem .6rem 1.2rem;
      border-radius: 0 0 6% 6%;
      background: #2d7474;
      font-size: 1.3rem;
      color: white;
      text-decoration: none;
    }
h2 {
  margin: 4rem 0 1rem;
  border-top: .2vh solid #2d7474;
  padding-top: 1vh;
}
h3 {
  text-align: center;
  margin: 3rem 0 .75em;
}
hr {
  height: .4rem;
  width: .4rem;
  border-radius: .4rem;
  background: #07486c;
  margin: 2.5rem auto;
}
time {
  display: bloc;
  margin-left: 0 !important;
}
ul, ol {
  margin: 2rem;
}
ul {
  list-style-type: square;
}
a {
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.09em;
}
article {
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  margin: 2rem auto;
}
  article.single {
    border-top: .2vh dotted #2d7474;
    margin: -6rem auto 1rem auto;
    background: #f0f0ea;
    padding: 2rem;
  }
  article p:last-child {
    margin-bottom: 1rem;
  }
p {
  padding: 0 .5rem;
  margin-left: 3rem;
}
  p + p,
  figure + p {
    margin-top: 2rem;
  }

blockquote {
  background-color: #e3e1e1;
  border-left: .5vw solid #2d7474;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  margin: 1.5rem;
}
  blockquote cite {
    font-style: italic;
  }
  blockquote p {
    margin-left: 0;
  }

figure {
  border-top: .2vh solid #2d7474;
  background-color: #e3e1e1;
  text-align: center;
  padding: 1.5rem 0;
  margin: 1rem 0 0;
  font-size: 1.5rem;
  width: 100%;
}
  figure img {
    max-width: 250px;
    max-height: 250px;
    border: .5vw solid #323a45;
    padding: 1px;
  }
figcaption {
  padding: 1rem;
  line-height: 1.4;
}
aside {
  display: flex;
  flex-direction: column;
  background-color: #e3e1e1;
  padding: 1rem 0;
  border-bottom: .2vh solid #07486c;
}
  aside p {
    max-width: 50rem;
    margin: 0 auto;
  }

/* https://fvsch.com/code/css-locks/ */
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  font-size: 1rem;
  line-height: calc( 1.5em + 0.2 * 1rem );
}
h1 {
  font-size: 1.9rem;
  line-height: calc( 1.2em + 0.2 * 1rem );
}
h2 {
  font-size: 1.6rem;
  line-height: calc( 1.3em + 0.2 * 1rem );
}
h3 {
  font-size: 1.35rem;
  line-height: calc( 1.4em + 0.2 * 1rem );
}
@media (min-width: 20em) {
  /* The (100vw - 20rem) / (50 - 20) part
     resolves to 0-1rem, depending on the
     viewport width (between 20em and 50em). */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
    margin-left: 0;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
}
@media (min-width: 50em) {
  /* The right part of the addition *must* be a
     rem value. In this example we *could* change
     the whole declaration to font-size:2.5rem,
     but if our baseline value was not expressed
     in rem we would have to use calc. */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * 1rem );
    line-height: 1.5em;
  }
  p, li, pre, details {
    margin-left: 3rem;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * 1rem );
    line-height: 1.2em;
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * 1rem );
    line-height: 1.3em;
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * 1rem );
    line-height: 1.4em;
  }
  figure img {
    max-width: 500px;
    max-height: 500px;
  }
}

figure.unsquared {
  margin-bottom: 1.5rem;
}
  figure.unsquared img {
    height: inherit;
  }


@media print {
  body { font-size: 100%; }
  a:after { content: " (" attr(href) ")"; }
  a, a:link, a:visited, a:after {
    text-decoration: underline;
    text-shadow: none !important;
    background-image: none !important;
    background: white;
    color: black;
  }
  abbr[title] { border-bottom: 0; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  img { page-break-inside: avoid; }
  @page { margin: 2cm .5cm; }
  h1, h2, h3 { page-break-after: avoid; }
  p3 { orphans: 3; widows: 3; }
  img {
    max-width: 250px !important;
    max-height: 250px !important;
  }
  nav, aside { display: none; }
}

ul.with_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_columns {
    column-count: 2;
  }
}
@media (min-width: 50em) {
  ul.with_columns {
    column-count: 3;
  }
}
ul.with_two_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_two_columns {
    column-count: 1;
  }
}
@media (min-width: 50em) {
  ul.with_two_columns {
    column-count: 2;
  }
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
  .gallery figure img {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .gallery figure figcaption {
    font-family: 'ConcourseT3'
  }

footer {
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
  border-top: 3px solid white;
  padding: 4rem 0;
  background-color: #07486c;
  color: white;
}
  footer > * {
    max-width: 50rem;
    margin: 0 auto;
  }
  footer a {
    color: #f1c40f;
  }
  footer .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
    margin-right: 2rem;
    padding: 2px 5px 5px 2px;
    background: white;
    border-left: 1px solid #f1c40f;
    border-top: 1px solid #f1c40f;
    border-right: 5px solid #f1c40f;
    border-bottom: 5px solid #f1c40f;
  }
</style>

<h1>
  <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  Responsive day out 3: the final breakpoint (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="https://hiddedevries.nl/en/blog/2015-06-20-responsive-day-out-3-the-final-breakpoint/">Source originale du contenu</a></h3>
    <p><img alt="" height="407" src="https://hiddedevries.nl/perch/resources/opening-.jpg" width="700" /> <em>Jeremy Keith opening Responsive Day Out 3</em> </p>

<p>Yesterday I attended the third (and hopefully not final) edition of Responsive Day Out, Clearleft&#8217;s one day conference about all things responsive web design. </p>

<p>The talks were very varied this year. There were practical talks about improvements to the web with features like Web Components, Service Workers and flexbox. There were also conceptual talks, which looked at meta issues surrounding responsive web design: how web designers and developers adopt new ways of working or choose not to do so, and how to work together.</p>

<p>Like <a href="/en/blog/2014-06-29-responsive-day-out-2-the-squishening">last year</a>, the conference was hosted by Jeremy Keith, talks were divided into four segments, with three short talks in each segment, followed by a short interview-like discussion.</p>

<h2>Part 1: Alice Bartlett, Rachel Shillcock and Alla Kholmatova</h2>

<p class="intro">In the first segment, Alice Bartlett looked at whether and how we might be able to come up with a business case for accessibility, Rachel Shillcock looked at the relationship between web design and accessibility and Alla Kholmatova did a fantastic talk about (libraries of) patterns and, amongst other things, how to name them.</p>

<h3>The business case for accessibility</h3>

<blockquote>
    <p>Coming up with a business case may be a much shorter route to getting everyone on board with accessibility</p>
</blockquote>

<p><a href="http://alicebartlett.co.uk">Alice Bartlett</a> from the <a href="https://www.gov.uk/government/organisations/government-digital-service">Government Digital Service</a> opened with a convincing talk about how to sell accessibility. Designing and building websites accessibly is a no-brainer to web designers and web developers who are convinced by the moral case for accessibility. But to some, that argument won&#8217;t cut it. There may be people in your organisation that want to learn more about the return on investment, and instead of trying to make the moral case, coming up with a business case may be ‘a much shorter route’ to getting everyone on board with accessibility,  Alice said.</p>

<p>A business case is a document that proves that you have a problem and shows how you can solve it in the most cost effective manner. For accessibility this is hard, as there is not much evidence to show that accessibility solves the problems that we assume it solves. Sites that are accessible may be more maintainable, better for <span class="caps">SEO</span> or beneficial to usability, but, said Alice, there is hardly any evidence supporting such claims. See also Karl Groves&#8217; <a href="http://www.karlgroves.com/category/accessibility-business-case/">series of blog posts</a> about this, and the <a href="http://www.karlgroves.com/2012/01/27/chasing-the-accessibility-business-case-conclusion/">conclusion of that series</a>.</p>

<p>Litigation may prove to be a way out: if non-accessibility is something one can be sued for, accessibility may be the result of a strategy avoiding being sued. The problem with that approach, is that whereas the risk of being sued is likely to be substantial for <em>high profile</em> companies, it is unlikely to be big enough to make a case for <em>low profile</em> companies. This should not stop us from making low profile companies&#8217; sites accessible, but it does show that coming up with a business case for accessibility is problematic.</p>

<h3>Accessibility and web design</h3>

<p><a href="https://www.rachilli.com">Rachel Shillcock</a> is a web designer and talked about how she integrates accessibility in her web design workflow. She gave practical tips and discussed tools like Lea Verou&#8217;s <a href="https://leaverou.github.io/contrast-ratio/">Contrast Ratio</a> for determining <span class="caps">WCAG</span> colour compliance, <a href="http://squizlabs.github.io/HTML_CodeSniffer/"><span class="caps">HTML</span> Code Sniffer</a> that checks your front-end code for potential problems in web accessibility guidelines compliance, and <a href="http://khan.github.io/tota11y/">tota11y</a>, a similar tool that was recently launched by Khan Academy. Rachel made the moral case for accessibility: she emphasised that accessibility is a responsibility and that improving it can hugely improve your users&#8217; lives.</p>

<h3>Pattern libraries and shared language</h3>

<p><a href="http://www.craftui.com">Alla Kholmatova</a> talked about the pattern library she works on at <a href="https://www.futurelearn.com">Future Learn</a>. One of the problems she highlighted, is the boundary between a component being just something on its own, and it having enough similarities to something else to form a shared component. Like in language, interpretations may vary. I may see two separate components, you may see one component and one variation. “Naming is hard”, Alla explained. Visual names like ‘pink button’ are easy, but will quickly become limiting and burdensome (to the project). Functional names may be better, but then you might end up with two components that have different functions, but are visually the same. Higher level functions could be the basis for better names. </p>

<p>Alla emphasised that language is incredibly important here, shared language in particular. Pattern libraries and frameworks for modular design like <a href="http://bradfrost.com/blog/post/atomic-web-design/">atomic design</a> and <a href="http://www.google.com/design/">material design</a> are ‘examples of controlled vocabularies’, she said. Naming is the method teams use to establish such frameworks. The framework will be used by the team, therefore the naming should be done by the team that will use it. The language that is established should remain in use to stay ‘alive’ and keep its meaning. Because a name like ‘billboard’, one of Alla&#8217;s examples, is quite broad. By using it in daily conversations, it remains meaningful. It made me think of Wittgenstein, who <a href="https://en.wikipedia.org/wiki/Private_language_argument">held</a> that language only has meaning in virtue of the group / community it is used in.</p>

<blockquote>
    <p>Many of their naming conversations […] are done with everyone involved: not just designers or developers, but also content producers and users.</p>
</blockquote>

<p>She explained how the team at Future Learn work on their shared language: they have a wall with all the (printed out) bits of design of their website for reference and overview. Many of their naming conversation takes place on Slack, and are done with everyone involved: not just designers or developers, but also content producers and users. They look at terminology of architecture and printing press for inspiration.</p>

<h2>Part 2: Peter Gasston, Jason Grigsby and Heydon Pickering</h2>

<p class="intro">In the second part, Peter Gasston talked about the state of web components, Jason Grigsby explained some of the puzzles of responsive images and Heydon Pickering showed how when viewing <span class="caps">CSS</span> as (<span class="caps">DOM</span>) pattern matches, clever <span class="caps">CSS</span> systems can be built.</p>

<h3>Web Components</h3>

<p><a href="http://www.broken-links.com">Peter Gasston</a> gave an overview of Web Components, which provides a way for web developers to create widgets or modular components, that can have their own styles and behaviour (as in: not inherited from the page, but really their own). React and <span class="caps">BEM</span> have provided ways to do that with existing tech, Web Components brings it to the browsers. </p>

<p>There are four key modules to Web Components: templates, <span class="caps">HTML</span> imports, custom elements and Shadow <span class="caps">DOM</span>. </p>

<ul>
    <li>Templates offer a way to declare reusable bits of markup in a <code>&lt;template&gt;</code> element. Works everywhere but IE.</li>
    <li><span class="caps">HTML</span> imports lets you import bits of <span class="caps">HTML</span>. Major problem: these imports block rendering (the imported file can link to stylesheets or scripts, which will need to be fetched). This may be replaced altogether by ES6 Modules.</li>
    <li>Custom elements let you have meaningful markup with custom properties. You create them in JS. The custom element names have a hyphen in them, because standard <span class="caps">HTML</span> elements will never have those, so browsers know which ones are custom. ES6 also offers a way to do this, possibly better, ES6 Classes.</li>
    <li>Shadow <span class="caps">DOM</span>: hide complex markup inside an element. This works by creating a shadow root (createShadowRoot()). Little agreement amongst browser vendors about other features than the createShadowRoot function. Still a lot to be defined.</li>
</ul>

<p>Custom elements in Web Components bring a lot of responsibility, as they are empty in terms of accessibility, <span class="caps">SEO</span> and usability. With standard <span class="caps">HTML</span> elements, browsers have those things built in. With custom elements, they <a href="https://hiddedevries.nl/en/blog/2015-05-26-the-accessibility-tree">become the developer&#8217;s responsibility</a>, Peter stressed. Potentially, there will be a lot of badly built Web Components once people start playing with them (like there are a lot of badly built jQuery plug-ins). The <a href="https://github.com/webcomponents/gold-standard/wiki">Gold Standard</a> Peter mentioned may be a helpful checklist for how to build a Web Component and do it well. Peter also said we should use the <span class="caps">UNIX</span> philosophy: ‘every component does one job [and does it really well]’.</p>

<p>Peter said Web Components are good enough to be used now (but not for a business to depend on). He recommended using a library like <a href="https://www.polymer-project.org/1.0/">Polymer</a> for those who want to explore Web Components in more detail.</p>

<h3>Responsive images</h3>

<p><a href="http://blog.cloudfour.com/author/jason-grigsby/">Jason Grigsby</a> discussed Responsive Images, which has now shipped in most browsers and will work in others (IE and Safari) soon. His talk was about the why of responsive images. It has been designed to serve two use cases: resolution switching (best quality image for each resolution) and art direction (different image in different circumstances).</p>

<p>One of the puzzles around responsive images, Jason explained, is when to add image breakpoints. What dictates when to add an image breakpoint? Art direction might dictate breakpoints; this can be figured out and is mostly a design/art direction concern. Resolution might also dictate breakpoints, but this is much harder to figure out. How do we figure out how many breakpoints to use? In many companies, three breakpoints would to mind (phone-tablet-desktop), but that&#8217;s pretty artificial. </p>

<p>The ideal image width is the width it will have as it is displayed on the page. But in many responsive websites, images are sized with a percentage and can have many, many different widths, so often, some bytes will be ‘wasted’. So the question is: what is a sensible jump in file size? Maybe we should use performance budgets to make our choices about image resolutions? Important to note here, is that the larger the image, the larger the potential number of bytes wasted. That means we should have more breakpoints at larger sizes, as at larger sizes, differences are more expensive in bytes. </p>

<p>We can distinguish between methods that tell the browser exactly which image to use when, and methods that let the browser choose what is best. In most cases, Jason recommended, the latter is probably best: we just let the browser figure out which image to use. </p>

<h3>Solving problems with <span class="caps">CSS</span> selectors</h3>

<p><a href="http://www.heydonworks.com">Heydon Pickering</a> looked at making use of some powerful features of <span class="caps">CSS</span> (<a href="http://slides.com/heydon/solving-problems-with-selectors">slides</a>). He disagrees with those that say <span class="caps">CSS</span> is badly designed and should be recreated in JavaScript (‘pointless’) and showed in his talk how we can use the very design of <span class="caps">CSS</span> to our own benefit. <span class="caps">CSS</span> is indeed very well designed.</p>

<blockquote>
    <p>Most grid systems are not grid systems, they are grid prescriptions</p>
</blockquote>

<p>Most grid systems out there, Heydon argued, aren&#8217;t much of a system. As they are not self-governing, they are more like grid <em>prescriptions</em>. Automatic systems can be done, using the power of <span class="caps">CSS</span>. Heydon suggested to look at <span class="caps">CSS</span> selectors as pattern matches. Matching containers full of content, we can look at how many bits of content we have, and let the browser come up with the best grid to display our content in. In other words: <a href="http://alistapart.com/article/quantity-queries-for-css">quantity queries</a>. With <code>nth-child</code> selectors, Heydon showed how we can create a ‘divisibility grid’: looking at what your total amount of columns is divisible by, we can set column widths accordingly. </p>

<p><span class="caps">BEM</span>-like conventions create order and control, but they throw out the baby with the bathwater by not using the cascade. The divisibility grid and quantity queries that Heydon create chaos,  one might say, but as he rightly pointed out, this is in fact a ‘controllable chaos’.</p>

<h2>Part 3: Jake Archibald, Ruth John and Zoe Mickley Gillenwater</h2>

<p class="intro">The third segment started off with Jake Archibald, who talked about progressive enhancement in ‘apps’, followed by Ruth John who discussed a number of so-called Web <span class="caps">API</span>s and lastly Zoe Mickley Gillenwater, with a talk about the many uses of flexbox on Booking.com.</p>

<h3>Offline first</h3>

<blockquote>
    <p>“A splash screen is an admission of failure”</p>
</blockquote>

<p><a href="http://jakearchibald.com">Jake Archibald</a> looked at progressive enhancement on the web, and showed how progressive enhancement and web apps are a false dichotomy. He emphasised it is indeed a great feature of the web that web pages show content as soon as they can, as opposed to last decade&#8217;s native apps, that often show a loading screen until everything you will ever need has loaded. On the web, we don&#8217;t need loading screens, yet some web apps have mimicked this behaviour. Jake argued this is a mistake and we can do better: ‘a splash screen is an admission of failure’. On the web, we can actually have users play level 1, even when the rest of the game is still loading in the background.</p>

<p><img alt="Jake Archibald on stage" height="340" src="https://hiddedevries.nl/perch/resources/progressive1-.jpg" title="Jake Archibald on stage" width="700" /> <em>Jake Archibald making the case for progressive enhancement</em> </p>

<p>Some web app slowness exists because all the required JavaScript is requested as one big lump, with a relatively big file size. Not a huge problem in ideal, fast WiFi situations, but quite a <span class="caps">PITA</span> for those with two bars of 3G on the go. Or for those accessing the web on what Jake referred to as Lie-Fi. </p>

<p>People may say all the JavaScript should download first, as it is a ‘web app’, and that this is how ‘web apps’ work, but that will not impress users. We can actually load the essential bits of JavaScript first and others later. Although this will decrease total loading time, it can hugely increase the time to first interaction. This is more important than overall load time: people will likely want to use your thing as soon as possible. </p>

<blockquote>
    <p>A Service Worker can be put in place to make sure users can always access the cached version first, even when offline</p>
</blockquote>

<p>After the first load, assets can be stored in cache. A Service Worker can be put in place to make sure users can always access the cached version first, even when offline. Whilst the cached version is being displayed, everything else else can be taken care of in the background, you can notify the user when it is ready. I felt this is a bit like offering your restaurant guests a table and some bread and wine, whilst you prepare their starter. You don&#8217;t have to let them stand outside until everything is ready, that would get them unnecessarily annoyed.</p>

<p>Service Workers, that allow for taking over the network management of the browser and thus for serving cache/offline first, can be used now. Not because they have support across all browsers ever made, but because they are pretty much an extra layer on top of your existing application. If your browser doesn&#8217;t understand this mechanism to get the app served from cache first, that&#8217;s okay, it will just be served a fresh version (as it would have been without a Service Worker). If it does, you can save your users from Lie-Fi.</p>

<p>Link: <a href="https://jakearchibald.github.io/svgomg/"><span class="caps">SVG</span> <span class="caps">OMG</span></a> (load it, turn WiFi off, load it again, it still works!)</p>

<h3>Web <span class="caps">API</span>s</h3>

<p><a href="http://rumyrashead.com">Ruth John</a> talked us through various different Web <span class="caps">API</span>s, or as she likes to call them: client side web <span class="caps">API</span>s. She showed interesting demoes of Geolocation, which gives access to a user&#8217;s location if they give permission, including a ‘watch’ function that can update so that you could build a sat nav application, Web Animation, which offers the animation properties from <span class="caps">CSS</span> in JavaScript, the Web Audio <span class="caps">API</span>, that lets one manipulate audio amongst other things, and finally the Ambient Light <span class="caps">API</span>, that gives us the tools to do useful little improvements for our users.</p>

<h3>Flexbox</h3>

<p><a href="http://zomigi.com">Zoe Mickley Gillenwater</a> works at hotel booking website Booking.com, which is a hugely flexible website, as it is served in many different languages and on many different screen sizes and browsers.</p>

<p>When designing for the web, Zoe explained, we can used fixed units like <code>px</code>, or relative units, like <code>em</code>, <code>rem</code> or <code>vw</code>. Relative units can be a useful ‘best guess’, let you be close to an ideal, <em>and</em> work in many different circumstances. Even better than flexible units, is designing without units at all. Flexbox allows you to do exactly this. It lets you tell the browser an element&#8217;s starting size and whether it can grow/shrink, and lets the browser figure out the math.</p>

<blockquote>
    <p>[Flexbox] does responsive lay-outs without media queries</p>
</blockquote>

<p>Flexbox, Zoe showed, is great for improving whitespace and wrapping for better coherency in lay-out. It often does this better than floats, <code>inline-block</code> or <code>table-cell</code>, but can (and probably should) be used in conjunction with those, as they provide a usable feedback. It is also great for reordering: with its ‘order’ property, you can achieve visual improvements by setting an element to display in another place than your source order. Lastly, it does responsive lay-outs without media queries, as it will display within your constraints and figure out its ‘breakpoints’ all by itself.</p>

<p>Zoe pointed out that the interesting difference between flexbox and other <span class="caps">CSS</span> features, is not really code, but our way of thinking about lay-out. It requires a bit of a mental shift. Responsiveness, Zoe concluded, is not binary, it is a continuum, and flexbox can help making your site more responsive. You can make lots of small minor changes to your site, each of which can make it more flexible. Browsers will make use of those improvements if they understand them, devices will make use of them if they are smaller or bigger than usual (most of them are, but all in different ways).</p>

<h2>Part 4: Rosie Campbell, Lyza Gardner and Aaron Gustafson</h2>

<p class="intro">In the final part, Rosie Campbell looked at the future of web design beyond the screens as we know them, Lyza Gardner pleaded for generalists in the web industry and Aaron Gustafson presented his idea of what we should expect next.</p>

<h3>Beyond the screen</h3>

<p><a href="https://medium.com/@RosieCampbell">Rosie Campbell</a> from the <span class="caps">BBC</span> talked us through some of the experiments she was involved with at the <span class="caps">BBC</span> Research lab. She noted that screens will only get weirder, and urged us to think about designing for such screens that don&#8217;t even exist yet. How? Stay agnostic to underlying hardware, she recommended. And reconsider assumptions: we are used to designing with rectangles, but future screens may be round, or indeed have completely different sizes. We should not be afraid of constraints, but embrace them as they can fuel creativity.</p>

<h3>Skillsets</h3>

<p><a href="http://www.lyza.com">Lyza Gardner</a> talked about how the web designer/developer job has changed in recent years, and what that does to us as people that just try to work in the web industry.</p>

<p>The web used to be much simpler, Lyza explained. In the beginning there was no JavaScript, there were no stylesheets, even images hardly had browser support. These constraints made working on the web interesting. This has changed hugely, as we now have a daily influx of new frameworks, tools and methodologies to learn about, consider adopting and perhaps specialise in. Because there is now so much information about so many different things we can do with the web, working on the web has become quite complex. There is more than anyone can possibly keep up with. This, Lyza said, can make us feel down and unsure.</p>

<blockquote>
    <p>[Generalists] think and talk about the web with nuance</p>
</blockquote>

<p>The web industry celebrates specialists, we adore single subject rock stars, but we should be careful not to dismiss people that don&#8217;t specialise, but generalise. Generalists, unlike specialists, cannot show off their specialisms on their CV, and may not be great at fizzbuzz, but they have other things to offer. They can think and talk about the web with nuance. They synthesise and when combining synthesis with their skills, show how valuable they are. When given a problem they have not seen before, they can synthesise and do it. Generalists are beginners over and over again.</p>

<p>We should be generalists, Lyza concluded, we should cultivate wisdom and share it.</p>

<h3>Where do we go from here?</h3>

<p>The day was concluded by <a href="http://www.aaron-gustafson.com">Aaron Gustafson</a>, who looked at what&#8217;s next. The A List Apart article <a href="http://alistapart.com/article/responsive-web-design">Responsive web design</a>, Aaron said, was the first to provide a concrete example of the principles of <a href="http://alistapart.com/article/dao">A Dao of Web Design</a> (speaking of how valuable generalists are…). That article goes into the flexible nature of  information on the web. Content created once, accessible anywhere, as it was envisioned by Tim Berners-Lee. </p>

<blockquote>
    <p>Accessibility is core to the web, and it goes hand in hand with the flexible approach John Allsopp and Ethan Marcotte describe in their articles.</p>
</blockquote>

<p>Accessibility is core to the web, and it goes hand in hand with the flexible approach John Allsopp and Ethan Marcotte describe in their articles. Don&#8217;t make assumptions about how people want to access your website, just let them access it in any way they want, by providing solid mark-up of well structured content.</p>

<p>Accessible websites have a benefit in the future of the web. There will be more controls and inputs, like gaze and eye/facial tracking. Voice will play a bigger role, too. You may have provided <span class="caps">CSS</span> with your content to display it beautifully across devices, but those users using voice will not see that. They will just be listening, so it is of utmost importance that your mark-up is well structured and the source order makes sense. That it is accessible. </p>

<p>Responsive web design, Aaron concluded, is all about accessibility. It is about making things accessible in the best possible way. </p>

<h2>Wrap-up</h2>

<p>As may have become clear from my notes above, Responsive Day Out 3 was a day full of variety. I had the feeling it could have easily been called Web Day Out, and I guess that makes sense, as responsive web design has naturally grown to be a pleonasm in the past few years. </p>

<p>I found a couple of common themes throughout the talks:</p>

<ul>
    <li><strong>Let the browser figure it out.</strong> Throw multiple image types/resolutions at it, and let the browser decide which one to display, as Jason explained. Or like Zoe demonstrated, tell the browser roughly how you want your element to be with flexbox, and let the browser figure out the maths. Give it some relatively simple <span class="caps">CSS</span> instructions, and let it grid your content for you, as Heydon did.</li>
    <li><strong>Soon, we will be given more responsibilities.</strong> As Peter noted, Web Components will let us define our own components, which makes us responsible for setting up their usability and accessibility. Service Workers, as Jake showed, put us in control of network handling, so that we can decide how to handle requests (and respond to them with offline/cached content first). If we use Web Components or Service Workers, we explicitly choose not to let the browser figure it out, and provide our own algorithms.</li>
    <li><strong>Responsive web design is all about accessibility</strong>. Although it is hard to make a business case for it, accessibility is very important, as it is a core concept of the web, as Aaron mentioned, and, being mostly device-agnostic, our best bet at future proofing content for screens that don&#8217;t even exist yet, as Rosie pointed out.</li>
    <li><strong>Make things as flexible as you can</strong>. Good responsive design makes things very flexible. Flexbox and the non-binary improvements it creates, as Zoe discussed, make sure things work in many places at the same time.</li>
</ul>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="https://hiddedevries.nl/en/blog/2015-06-20-responsive-day-out-3-the-final-breakpoint/">Source originale</a> |
    <a href="/david/stream/2019/">Accueil du flux</a>
  </p>
</nav>

<footer>
  <div>
    <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
    <p>
      Bonjour/Hi!
      Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
      Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
    </p>
    <p>
      Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
    </p>
    
    <p>
      Voici quelques articles choisis :
      <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
      <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
      <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
      <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
      <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
      <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
      <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
      <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
      <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
      <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
      <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
      <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
      <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
      <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
      <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
      et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
    </p>
    <p>
      On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
    </p>
    <p>
      Je ne traque pas ta navigation mais mon
      <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
      conserve des logs d’accès.
    </p>
  </div>
</footer>
<script type="text/javascript">
  ;(_ => {
    const jumper = document.getElementById('jumper')
    jumper.addEventListener('click', e => {
      e.preventDefault()
      const anchor = e.target.getAttribute('href')
      const targetEl = document.getElementById(anchor.substring(1))
      targetEl.scrollIntoView({behavior: 'smooth'})
    })
  })()
</script>