{"id":4767,"date":"2015-12-16T23:26:19","date_gmt":"2015-12-16T22:26:19","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=4767"},"modified":"2021-03-13T18:12:02","modified_gmt":"2021-03-13T17:12:02","slug":"freebies-illustration-strategie-responsive-mobile-first","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/freebies-illustration-strategie-responsive-mobile-first\/","title":{"rendered":"[Freebies] Illustration Strat\u00e9gie Responsive vs Mobile First Responsive"},"content":{"rendered":"<div class=\"juiz-outdated-message jodpm-top\">Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 8 ans. Il se peut qu'il ne soit plus \u00e0 jour.<\/div><p>Le mot \u00a0\u00bb Responsive \u00a0\u00bb veut aujourd&rsquo;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\u00e9rence entre un site qu&rsquo;il appelle \u00a0\u00bb <strong>Responsive Retrofitting<\/strong> \u00a0\u00bb et un site \u00a0\u00bb <strong>Mobile First Responsive Design<\/strong> \u00ab\u00a0.<\/p>\n<p>Dans le premier cas, il s&rsquo;agit\u00a0de prendre un site con\u00e7u dans sa structure, son code et son ergonomie pour des grands appareils et de le \u00a0\u00bb rendre \u00a0\u00bb responsive apr\u00e8s coup (en supprimant les largeurs fixes, utilisant des grilles fluides, etc.). Entendez pas l\u00e0 que l&rsquo;on essaie de faire entrer au chausse pied 150L d&rsquo;eau dans un d\u00e9 \u00e0 coudre. Forc\u00e9ment \u00e0 un moment donn\u00e9 \u00e7a d\u00e9bord.<\/p>\n<p>Dans le second cas, il s&rsquo;agit de penser la mobilit\u00e9 d\u00e8s le d\u00e9but du projet en cr\u00e9ant une interface qui s&rsquo;adapte aux contraintes du mobile et dont on va progressivement enrichir la pr\u00e9sentation des contenus et l&rsquo;exp\u00e9rience utilisateur en fonction de l&rsquo;espace disponible sur cette interface.<\/p>\n<p>J&rsquo;aime beaucoup les all\u00e9gories qu&rsquo;il utilise dans son article et j&rsquo;ai donc d\u00e9cid\u00e9 de les illustrer pour mes cours et mes formations.\u00a0Vous pouvez t\u00e9l\u00e9charger les illustrations au format\u00a0.JPG\u00a0:<\/p>\n<p class=\"download\"><a href=\"https:\/\/stephaniewalter.design\/freebies\/responsive-retrofitting-mobilefirst-FR.zip\" id=\"freebies-responsive-retrofitting-mobilefirst-frzip\" class=\"button is-accentuated has-icon-left\"><svg aria-hidden=\"true\" role=\"presentation\" class=\"icon icon-download\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"32\" width=\"32\" viewBox=\"0 0 24 24\"><path d=\"M20.12,13.17a3.41,3.41,0,0,0-2.21-1.05,4.61,4.61,0,0,0-.22-4.63,3.82,3.82,0,0,0-1.63-1.31A3.73,3.73,0,0,0,11.53,7.5a6.79,6.79,0,0,0-.78,3.61v2.3L9.66,12.33a.62.62,0,0,0-1,0,.64.64,0,0,0,0,1L11,15.55a.59.59,0,0,0,.49.22.71.71,0,0,0,.51-.21l2.28-2.28a.62.62,0,0,0,0-1,.7.7,0,0,0-.47-.24.79.79,0,0,0-.51.26l-1.13,1.12V11.11a8.38,8.38,0,0,1,.18-1.9,2.43,2.43,0,0,1,.51-1.12,2.33,2.33,0,0,1,.67-.54,3.88,3.88,0,0,1,.79-.25,2.4,2.4,0,0,1,1.24.15,2.22,2.22,0,0,1,1.06.82c.74,1.05.6,2.5-.43,4.3a.63.63,0,0,0,.05.73.67.67,0,0,0,.68.26,5.28,5.28,0,0,1,.79-.07,2,2,0,0,1,1.47.63,2.07,2.07,0,0,1,.62,1.49,2.15,2.15,0,0,1-2.13,2.13H6.46a2.41,2.41,0,0,1-1.57-.91,2.72,2.72,0,0,1,0-3.53,2.55,2.55,0,0,1,1.66-.9L7,12.33a.63.63,0,0,0,.59-.69V11A4.11,4.11,0,0,1,8.44,8.5a3.15,3.15,0,0,1,2-1.27A.65.65,0,0,0,10.92,7a.63.63,0,0,0,.11-.5A.68.68,0,0,0,10.78,6a.72.72,0,0,0-.52-.13A4.39,4.39,0,0,0,7.38,7.61,5.46,5.46,0,0,0,6.25,11v0A3.76,3.76,0,0,0,3.87,12.4a4,4,0,0,0-1,2.65,4,4,0,0,0,1,2.68,3.9,3.9,0,0,0,2.53,1.38H17.62a3.48,3.48,0,0,0,3.5-3.5A3.36,3.36,0,0,0,20.12,13.17Z\"\/><\/svg><span>T\u00e9l\u00e9charger l&#039;illustration<\/span><\/a><\/p>\n<p><small>L&rsquo; illustration Str\u00e9t\u00e9gie Responsive &#8211; Mobile first par\u00a0<a href=\"http:\/\/www.stephaniewalter.fr\" rel=\"cc:attributionURL\">Walter St\u00e9phanie<\/a> est mis \u00e0 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>\n<p><small>Vous \u00eates autoris\u00e9 \u00e0 :\u00a0Partager \u2014 copier, distribuer et communiquer le mat\u00e9riel par tous moyens et sous tous formats,\u00a0Adapter \u2014 remixer, transformer et cr\u00e9er \u00e0 partir du mat\u00e9rie\u00a0pour toute utilisation, y compris commerciale.\u00a0<strong>Attribution<\/strong> \u2014 Vous devez <a href=\"http:\/\/creativecommons.org\/licenses\/by-sa\/3.0\/fr\/#\">cr\u00e9diter<\/a> l&rsquo;\u0152uvre, int\u00e9grer un lien vers la licence et <a href=\"http:\/\/creativecommons.org\/licenses\/by-sa\/3.0\/fr\/#\">indiquer<\/a> si des modifications ont \u00e9t\u00e9 effectu\u00e9es \u00e0 l&rsquo;Oeuvre.<\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 8 ans. Il se peut qu&rsquo;il ne soit plus \u00e0 jour.Le mot \u00a0\u00bb Responsive \u00a0\u00bb veut aujourd&rsquo;hui dire beaucoup de choses. Dans son article Responsive Strategy, Brad Frost nous explique la diff\u00e9rence entre un site qu&rsquo;il appelle \u00a0\u00bb Responsive Retrofitting \u00a0\u00bb et un site \u00a0\u00bb Mobile First Responsive Design \u00ab\u00a0. Dans le premier cas, il s&rsquo;agit\u00a0de prendre un site con\u00e7u dans sa structure, son code et son ergonomie pour des grands appareils &hellip;<\/p>\n","protected":false},"author":3,"featured_media":4772,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[61],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>[Freebies] Illustration Strat\u00e9gie Responsive vs Mobile First Responsive - par St\u00e9phanie Walter - UX Researcher &amp; Designer<\/title>\n<meta name=\"description\" content=\"T\u00e9l\u00e9charger l&#039;illustration de Strat\u00e9gie mobile : Responsive Retrofitting vs Mobile First Responsive Web Design sous licence Creative Commons\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/stephaniewalter.design\/fr\/blog\/freebies-illustration-strategie-responsive-mobile-first\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Freebies] Illustration Strat\u00e9gie Responsive vs Mobile First Responsive - par St\u00e9phanie Walter - UX Researcher &amp; Designer\" \/>\n<meta property=\"og:description\" content=\"T\u00e9l\u00e9charger l&#039;illustration de Strat\u00e9gie mobile : Responsive Retrofitting vs Mobile First Responsive Web Design sous licence Creative Commons\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/freebies-illustration-strategie-responsive-mobile-first\/\" \/>\n<meta property=\"og:site_name\" content=\"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.\" \/>\n<meta property=\"article:published_time\" content=\"2015-12-16T22:26:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-03-13T17:12:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2015\/12\/retrofitting-FR.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"850\" \/>\n\t<meta property=\"og:image:height\" content=\"350\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"St\u00e9phanie Walter\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@walterstephanie\" \/>\n<meta name=\"twitter:site\" content=\"@walterstephanie\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"St\u00e9phanie Walter\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/freebies-illustration-strategie-responsive-mobile-first\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/freebies-illustration-strategie-responsive-mobile-first\/\",\"name\":\"[Freebies] Illustration Strat\u00e9gie Responsive vs Mobile First Responsive - par St\u00e9phanie Walter - UX Researcher & Designer\",\"isPartOf\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/freebies-illustration-strategie-responsive-mobile-first\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/freebies-illustration-strategie-responsive-mobile-first\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2015\/12\/retrofitting-FR.jpg\",\"datePublished\":\"2015-12-16T22:26:19+00:00\",\"dateModified\":\"2021-03-13T17:12:02+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"T\u00e9l\u00e9charger l'illustration de Strat\u00e9gie mobile : Responsive Retrofitting vs Mobile First Responsive Web Design sous licence Creative Commons\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/freebies-illustration-strategie-responsive-mobile-first\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/freebies-illustration-strategie-responsive-mobile-first\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2015\/12\/retrofitting-FR.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2015\/12\/retrofitting-FR.jpg\",\"width\":850,\"height\":350,\"caption\":\"[Freebies] Illustration Strat\u00e9gie Responsive vs Mobile First Responsive\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/\",\"name\":\"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.\",\"description\":\"Je partage ici mes conseils, mes ressources et outils sur la conception centr\u00e9e utilisateur, la recherche et tests utilisateur, le design de produits, la strat\u00e9gie mobile, l&#039;utilisabilit\u00e9 et l&#039;accessibilit\u00e9.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/stephaniewalter.design\/fr\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\",\"name\":\"St\u00e9phanie Walter\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g\",\"caption\":\"St\u00e9phanie Walter\"},\"description\":\"UX Researcher &amp; Product Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Web Platform and Product Design (GDE)\",\"sameAs\":[\"https:\/\/stephaniewalter.design\/\",\"https:\/\/www.linkedin.com\/in\/stephaniewalterpro\/\",\"https:\/\/twitter.com\/walterstephanie\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Freebies] Illustration Strat\u00e9gie Responsive vs Mobile First Responsive - par St\u00e9phanie Walter - UX Researcher & Designer","description":"T\u00e9l\u00e9charger l'illustration de Strat\u00e9gie mobile : Responsive Retrofitting vs Mobile First Responsive Web Design sous licence Creative Commons","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/stephaniewalter.design\/fr\/blog\/freebies-illustration-strategie-responsive-mobile-first\/","og_locale":"fr_FR","og_type":"article","og_title":"[Freebies] Illustration Strat\u00e9gie Responsive vs Mobile First Responsive - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"T\u00e9l\u00e9charger l'illustration de Strat\u00e9gie mobile : Responsive Retrofitting vs Mobile First Responsive Web Design sous licence Creative Commons","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/freebies-illustration-strategie-responsive-mobile-first\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2015-12-16T22:26:19+00:00","article_modified_time":"2021-03-13T17:12:02+00:00","og_image":[{"width":850,"height":350,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2015\/12\/retrofitting-FR.jpg","type":"image\/jpeg"}],"author":"St\u00e9phanie Walter","twitter_card":"summary_large_image","twitter_creator":"@walterstephanie","twitter_site":"@walterstephanie","twitter_misc":{"\u00c9crit par":"St\u00e9phanie Walter","Dur\u00e9e de lecture estim\u00e9e":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/freebies-illustration-strategie-responsive-mobile-first\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/freebies-illustration-strategie-responsive-mobile-first\/","name":"[Freebies] Illustration Strat\u00e9gie Responsive vs Mobile First Responsive - par St\u00e9phanie Walter - UX Researcher & Designer","isPartOf":{"@id":"https:\/\/stephaniewalter.design\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/freebies-illustration-strategie-responsive-mobile-first\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/freebies-illustration-strategie-responsive-mobile-first\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2015\/12\/retrofitting-FR.jpg","datePublished":"2015-12-16T22:26:19+00:00","dateModified":"2021-03-13T17:12:02+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"T\u00e9l\u00e9charger l'illustration de Strat\u00e9gie mobile : Responsive Retrofitting vs Mobile First Responsive Web Design sous licence Creative Commons","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/freebies-illustration-strategie-responsive-mobile-first\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/freebies-illustration-strategie-responsive-mobile-first\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2015\/12\/retrofitting-FR.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2015\/12\/retrofitting-FR.jpg","width":850,"height":350,"caption":"[Freebies] Illustration Strat\u00e9gie Responsive vs Mobile First Responsive"},{"@type":"WebSite","@id":"https:\/\/stephaniewalter.design\/fr\/#website","url":"https:\/\/stephaniewalter.design\/fr\/","name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","description":"Je partage ici mes conseils, mes ressources et outils sur la conception centr\u00e9e utilisateur, la recherche et tests utilisateur, le design de produits, la strat\u00e9gie mobile, l&#039;utilisabilit\u00e9 et l&#039;accessibilit\u00e9.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/stephaniewalter.design\/fr\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf","name":"St\u00e9phanie Walter","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g","caption":"St\u00e9phanie Walter"},"description":"UX Researcher &amp; Product Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Web Platform and Product Design (GDE)","sameAs":["https:\/\/stephaniewalter.design\/","https:\/\/www.linkedin.com\/in\/stephaniewalterpro\/","https:\/\/twitter.com\/walterstephanie"]}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/4767"}],"collection":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/comments?post=4767"}],"version-history":[{"count":2,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/4767\/revisions"}],"predecessor-version":[{"id":7911,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/4767\/revisions\/7911"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/4772"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=4767"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=4767"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=4767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}