davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533
							<!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>Projectors don’t lie. (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://medium.com/salesforce-ux/projectors-dont-lie-b85ef628b04">

<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>
  Projectors don’t lie. (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="https://medium.com/salesforce-ux/projectors-dont-lie-b85ef628b04">Source originale du contenu</a></h3>
    <div class="section-inner sectionLayout--insetColumn"><p name="c5f2" id="c5f2" class="graf graf--p graf-after--h2">If you’re a designer at a tech company, you’re probably equipped with state-of-the-art pixel-pushing technology. I’m typing this now on a MacBook Pro with Retina display, where I use Sketch and Adobe Creative Suite (I’m still clinging to Fireworks like a life preserver) for all my design tasks. Our team’s mockups look beautiful and crisp on my Retina screen’s vast landscape of perfect pixels. That is, of course, until we congregate in a meeting room, plug a VGA adapter into my laptop, and see these designs projected onto a fuzzy, washed-out, low-resolution screen. <strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">The worst!</em></strong></p><figure name="7810" id="7810" class="graf graf--figure graf--layoutInsetLeft graf-after--p"><figcaption class="imageCaption">My team spending the first half of a meeting adjusting the projector settings</figcaption></figure><p name="9665" id="9665" class="graf graf--p graf-after--figure">How many times have you been in a meeting where a design looked strange but was waved away with “Oh, that’s just the projector”? I personally have lost count. Just yesterday, sitting eight feet away from a fairly high-quality projector screen, I felt like I was at the optometrist’s office getting my annual eye exam. Surely, it’s the projector’s fault, right? Yes and no.</p><p name="4174" id="4174" class="graf graf--p graf-after--p">In my experience, projectors don’t lie. They just exaggerate a little. Their screen resolutions, color matching, and general quality vary wildly, but so do those of the devices with which people view your website. Projectors’ tiny exaggerations can help you identify potential issues with your designs before users encounter them. When projecting a user interface onto a big screen, you probably run into the same two problems over and over again. Don’t dismiss them! For each of these problems, there’s a solution that can improve the legibility and usability of your UI.</p><h3 name="3d30" id="3d30" class="graf graf--h3 graf-after--p"><strong class="markup--strong markup--h3-strong">Problem 1:</strong> All the colors are washed out and it’s difficult to see some stuff!</h3><p name="e199" id="e199" class="graf graf--p graf-after--h3"><strong class="markup--strong markup--p-strong">What you might say:</strong> Don’t worry, it’s pretty clear on my laptop.</p><p name="2687" id="2687" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">What’s actually going on:</strong> You’re right, the contrast is higher on your Mac! But if you’re having trouble differentiating elements on the projector screen, chances are many of your users with vision impairments or lower quality monitors will also struggle with this. They don’t have all the context you do, so they won’t know how to fill in the gaps when they can’t see everything on the screen.</p><p name="1651" id="1651" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">What to do next: </strong>Ask yourself, are the main calls to action still prominent on the projector screen? Can you read all the text on the page, even the text that you consider less important? If your answer is “sort of,” amp up your color contrast. Try going for extreme clarity and then slowly dialing it back to a solution that has great contrast and also meets your aesthetic goals. Run your foreground and background colors through <a href="http://webaim.org/resources/contrastchecker/" data-href="http://webaim.org/resources/contrastchecker/" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">WebAIM’s Color Contrast Checker</a> and ensure that they meet <a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" data-href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">WCAG 2.0 AA standards</a> (WCAG = Web Content Accessibility Guidelines). The contrast ratio between text and background should be at least 4.5:1 for normal-sized text and 3:1 for large text. If you want to be extra sure everything reads well, test your design out in grayscale and with color blindness emulators. Photoshop has color blindness filters built into its “View &gt; Proof Setup” menu.</p><figure name="edae" id="edae" class="graf graf--figure graf-after--p graf--trailing"><figcaption class="imageCaption">Some examples of large text and normal-sized text at different shades of grey on a white background. Alas, depending on how you’re viewing this, the large text examples may not be large at all!</figcaption></figure></div>

<div class="section-divider"><hr class="section-divider"></div>

<div class="section-content"><div class="section-inner sectionLayout--insetColumn"><h3 name="402d" id="402d" class="graf graf--h3 graf--leading"><strong class="markup--strong markup--h3-strong">Problem 2:</strong> The functional prototype looks bloated! Everything is <em class="markup--em markup--h3-em">enormous and smushed together!</em></h3><p name="2f48" id="2f48" class="graf graf--p graf-after--h3"><strong class="markup--strong markup--p-strong">What you might say:</strong> Oh, this screen resolution is really low. Let me just press Command-Minus to make this look the way it should.</p><p name="df9c" id="df9c" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">What’s actually going on:</strong> Your website isn’t responsive enough and you should consider a wider variety of viewport sizes. Many of your users will be looking at it with a lower screen resolution. Multi-taskers with larger monitors may have several windows open on their screen at once and will squeeze your site as small as they can in order to interact with your content while doing a bunch of other things. For example, I frequently send my laptop into fan overdrive mode by watching Hulu while editing large PNGs. It’s a minor inconvenience to have to switch to Hulu’s “pop-out” player in order to scale the video down to be 1/3rd the width of my laptop screen. I’d love to see the regular video pages scale down gracefully instead of introducing a horizontal scroll bar. But I digress!</p><p name="52ab" id="52ab" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">What to do next:</strong> Go on site visits, set up website analytics, and/or send out user surveys to learn more about your user bases’ most common screen resolutions. If you can’t get information about your users specifically, read more general studies like “<a href="http://www.hobo-web.co.uk/best-screen-size/" data-href="http://www.hobo-web.co.uk/best-screen-size/" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Best Screen Resolution to Design Websites</a>.” You can try these out by adjusting your computer’s display settings or using <a href="https://developer.chrome.com/devtools/docs/device-mode" data-href="https://developer.chrome.com/devtools/docs/device-mode" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Device Mode</a> in Google Chrome’s Developer Tools to emulate specific dimensions, pixel ratios, etc.</p><figure name="eb80" id="eb80" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 544px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 77.7%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="1*jlRVYg4U_WpMZ8BlUtcSfQ.png" data-width="1304" data-height="1013" data-action="zoom" data-action-value="1*jlRVYg4U_WpMZ8BlUtcSfQ.png"><img src="https://cdn-images-1.medium.com/freeze/max/60/1*jlRVYg4U_WpMZ8BlUtcSfQ.png?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><img class="progressiveMedia-image js-progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/1600/1*jlRVYg4U_WpMZ8BlUtcSfQ.png"><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1600/1*jlRVYg4U_WpMZ8BlUtcSfQ.png"></noscript></div></div><figcaption class="imageCaption">In Google Chrome Developer Tools, you can easily type in pixel dimensions with which to view your website. In this example, I’m viewing our <a href="http://sfdc-styleguide.herokuapp.com" data-href="http://sfdc-styleguide.herokuapp.com" class="markup--anchor markup--figure-anchor" rel="nofollow noopener" target="_blank">Style Guide</a> at 800 x 600.</figcaption></figure><p name="fa58" id="fa58" class="graf graf--p graf-after--figure">Once you have a better idea of the variety of screen sizes at play, adjust your designs accordingly. You might want to try a <a href="https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/" data-href="https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">responsive layout</a>, which takes advantage of relative measurements as much as possible. Consider giving the user more control and allowing secondary panels to be collapsible. In a more structured layout, you can shave off pixels by adjusting padding and reevaluating the sizes you’ve chosen for fixed-width elements. For example, one of my latest projects, the <a href="https://www.youtube.com/watch?v=8WsU0_ghZ_Q" data-href="https://www.youtube.com/watch?v=8WsU0_ghZ_Q" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Lightning App Builder</a>, is a WYSIWYG editor with fixed left and right sidebars. Looking at it on a projector screen helped my team realize that the sidebars were a lot wider than they needed to be. We trimmed them down by 80 pixels to make more room for the canvas in the middle. We also made several color adjustments based on projector testing alone.</p><figure name="1ec1" id="1ec1" class="graf graf--figure graf-after--p graf--trailing"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 430px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 61.4%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="1*AW9JScNbHQf5jSKXONN9gw.png" data-width="1304" data-height="801" data-action="zoom" data-action-value="1*AW9JScNbHQf5jSKXONN9gw.png"><img src="https://cdn-images-1.medium.com/freeze/max/60/1*AW9JScNbHQf5jSKXONN9gw.png?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><img class="progressiveMedia-image js-progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/1600/1*AW9JScNbHQf5jSKXONN9gw.png"><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1600/1*AW9JScNbHQf5jSKXONN9gw.png"></noscript></div></div><figcaption class="imageCaption">We reduced the Lightning App Builder’s total sidebar width by 80 pixels after seeing how much space the sidebars took up on a smaller projector screen. Users can toggle between “100% View” and “Fit to View” to adjust how large the canvas appears in the builder’s interface.</figcaption></figure></div></div>

<div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="e7bb" id="e7bb" class="graf graf--p graf--leading graf--trailing">The Projector Test is my favorite “gut check” manual UI test, and I encourage you to use it early, often, and especially when ironing out final visual specs. It doesn’t substitute for testing out a functional version of your site in a variety of environments — browsers, form factors, screen resolutions, operating systems, screen orientations, screen readers, etc. — but it’s a good place to start. Embrace your conference room’s projector and challenge yourself to make your designs look stellar on even the fuzziest, most washed-out of screens.</p></div></div>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="https://medium.com/salesforce-ux/projectors-dont-lie-b85ef628b04">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>