title: Illustration Stratégie Responsive vs Mobile First Responsive
url: http://blog.stephaniewalter.fr/freebies-illustration-strategie-responsive-mobile-first/
hash_url: 194c013e293e1c08db28b6c59918483e

<img width="850" height="350" src="http://blog.stephaniewalter.fr/wp-content/uploads/2015/12/retrofitting-FR.jpg" class="attachment-thumbnail-archive wp-post-image" alt="[Freebies] Illustration Stratégie Responsive vs Mobile First Responsive" />
<p>Le mot ” Responsive ” veut aujourd’hui dire beaucoup de choses. Dans son article <a href="http://bradfrost.com/blog/post/responsive-strategy/">Responsive Strategy</a>, Brad Frost nous explique la différence entre un site qu’il appelle ” <strong>Responsive Retrofitting</strong> ” et un site ” <strong>Mobile First Responsive Design</strong> “.</p><p>Dans le premier cas, il s’agit de prendre un site conçu dans sa structure, son code et son ergonomie pour des grands appareils et de le ” rendre ” responsive après coup (en supprimant les largeurs fixes, utilisant des grilles fluides, etc.). Entendez pas là que l’on essaie de faire entrer au chausse pied 150L d’eau dans un dé à coudre. Forcément à un moment donné ça débord.</p><p>Dans le second cas, il s’agit de penser la mobilité dès le début du projet en créant une interface qui s’adapte aux contraintes du mobile et dont on va progressivement enrichir la présentation des contenus et l’expérience utilisateur en fonction de l’espace disponible sur cette interface.</p><p>J’aime beaucoup les allégories qu’il utilise dans son article et j’ai donc décidé de les illustrer pour mes cours et mes formations. Vous pouvez télécharger les illustrations au format .JPG :</p><p><strong><p class="download"><a class="dl_code" title="Illustration Stratégie Responsive - Mobile First" href="http://blog.stephaniewalter.fr/wp-content/plugins/download-monitor/download.php?id=17"><svg class="icon icon-arrow-down" viewbox="0 0 32 32"><use xlink:href="#icon-arrow-down"/></svg>Illustration Stratégie Responsive - Mobile First</a></p></strong></p><p><small>L’ illustration Strétégie Responsive – Mobile first par <a href="http://www.stephaniewalter.fr" rel="cc:attributionURL">Walter Stéphanie</a> est mis à disposition selon les termes de la <a href="http://creativecommons.org/licenses/by-sa/4.0/" rel="license">licence Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)</a>.</small></p><p><small>Vous êtes autorisé à : Partager — copier, distribuer et communiquer le matériel par tous moyens et sous tous formats, Adapter — remixer, transformer et créer à partir du matérie pour toute utilisation, y compris commerciale. <strong>Attribution</strong> — Vous devez <a href="http://creativecommons.org/licenses/by-sa/3.0/fr/#">créditer</a> l’Œuvre, intégrer un lien vers la licence et <a href="http://creativecommons.org/licenses/by-sa/3.0/fr/#">indiquer</a> si des modifications ont été effectuées à l’Oeuvre.</small></p><div class="juiz_sps_links  counters_both juiz_sps_displayed_bottom"><p class="screen-reader-text juiz_sps_maybe_hidden_text">Partager la publication "[Freebies] Illustration Stratégie Responsive vs Mobile First Responsive"</p></div><div class="travail-ensemble"><p> Besoin d'un design de site, d'interface ou d'application mobile ? De conseils en ergonomie ou en expérience utilisateur ? Envie de travailler ensemble ? N'hésitez pas à consulter </p><a href="http://www.inpixelitrust.fr/realisations/">mes réalisations</a><p> et  à </p><a href="http://www.inpixelitrust.fr/me-contacter/">me contacter directement</a><p>.</p></div>
