{"id":5061,"date":"2016-03-04T08:26:11","date_gmt":"2016-03-04T07:26:11","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=5061"},"modified":"2016-03-04T09:26:53","modified_gmt":"2016-03-04T08:26:53","slug":"la-semaine-en-pixels-4-mars-2016","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-4-mars-2016\/","title":{"rendered":"La semaine en pixels \u2013 4 mars 2016"},"content":{"rendered":"<div class=\"juiz-outdated-message jodpm-top\">Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 10 ans. Il se peut qu'il ne soit plus \u00e0 jour.<\/div><p>Comme chaque semaine, \u00a0un condens\u00e9 de mes lectures et ma veille web design et graphisme, exp\u00e9rience utilisateurs, design d&rsquo;interface et mobilit\u00e9, mais aussi des outils et ressources pour le web design et de l&rsquo;inspiration en tout genre : illustrations, photos, sites web, etc.<\/p>\n<p>Au programme cette semaine : rythme vertical, moodboard, interfaces mobile, performance web, animations CSS3 et futur du web dans le navigateur mobile, des jolies photos, des tutoriels et astuces CSS (object-fit, etc.), un petit rappel sur les densit\u00e9s d&rsquo;\u00e9cran et une astuce pour cr\u00e9er une palette de couleur. Du c\u00f4t\u00e9 des outils, du prototypage, de la navigation responsive, un \u00e9diteur CSS, du burger menu anim\u00e9 et des filtres CSS. Ne manquez pas le d\u00e9mineur dans le navigateur si vous voulez tuer votre productivit\u00e9 du vendredi.<\/p>\n<p>Pour plus de liens vous pouvez <a href=\"https:\/\/twitter.com\/WalterStephanie\">me suivre sur twitter<\/a>. Bonne lecture :)<\/p>\n<h2>Conf\u00e9rences<\/h2>\n<p><a href=\"http:\/\/blog.stephaniewalter.fr\/le-futur-du-web-dans-le-navigateur-mobile-confoo-2016\/\">Le futur du web dans le navigateur mobile ? \u2013 Confoo 2016<\/a>, ma conf\u00e9rence sur tout ce que l&rsquo;on pourra (et peu d\u00e9j\u00e0 faire) dans un futur plus ou moins proche dans les navigateurs mobiles.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-5053\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/02\/futur-mobile.jpg\" alt=\"Le futur du web dans le navigateur mobile ? - Confoo 2016\" width=\"850\" height=\"350\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/02\/futur-mobile.jpg 850w, https:\/\/stephaniewalter.design\/fr\/files\/2016\/02\/futur-mobile-768x316.jpg 768w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><\/p>\n<p><a href=\"http:\/\/blog.stephaniewalter.fr\/ameliorer-lexperience-utilisateur-grace-aux-animations-css3-confoo-2016\/\">Am\u00e9liorer l\u2019exp\u00e9rience utilisateur gr\u00e2ce aux animations CSS3 \u2013 Confoo 2016<\/a>\u00a0exemples et cas concrets d&rsquo;animations CSS.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-5048\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/02\/ux-animations.jpg\" alt=\"Am\u00e9liorer l'exp\u00e9rience utilisateur gr\u00e2ce aux animations CSS3 - Confoo 2016\" width=\"850\" height=\"350\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/02\/ux-animations.jpg 850w, https:\/\/stephaniewalter.design\/fr\/files\/2016\/02\/ux-animations-768x316.jpg 768w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><\/p>\n<h2>tl;dnr, s&rsquo;il devait n&rsquo;en rester qu&rsquo;un ?<\/h2>\n<p>#Burger Menu<\/p>\n<p><a href=\"https:\/\/jonsuh.com\/hamburgers\/\">Tasty CSS-animated hamburgers<\/a>, des menus burger anim\u00e9s pour votre inspiration<img decoding=\"async\" class=\"aligncenter size-full wp-image-5064\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/03\/burger-menu.jpg\" alt=\"\" width=\"1040\" height=\"850\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/burger-menu.jpg 1040w, https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/burger-menu-768x628.jpg 768w\" sizes=\"(max-width: 1040px) 100vw, 1040px\" \/><\/p>\n<h2>Les articles de la semaine<\/h2>\n<p>#Moodboard<\/p>\n<p><a href=\"http:\/\/blog.crew.co\/mood-board\/\">How to mood board<\/a>, comment et pourquoi cr\u00e9er un moodboard<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-5073\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/03\/moodboard.jpg\" alt=\"\" width=\"1040\" height=\"850\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/moodboard.jpg 1040w, https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/moodboard-768x628.jpg 768w\" sizes=\"(max-width: 1040px) 100vw, 1040px\" \/><\/p>\n<p>#CSS<\/p>\n<p><a href=\"http:\/\/zellwk.com\/blog\/why-vertical-rhythms\/\">Why is Vertical Rhythm an Important Typography Practice?<\/a>, ou pourquoi le rythme vertical c\u2019est important<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-5083\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/03\/vertical-r.jpg\" alt=\"\" width=\"1040\" height=\"850\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/vertical-r.jpg 1040w, https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/vertical-r-768x628.jpg 768w\" sizes=\"(max-width: 1040px) 100vw, 1040px\" \/><\/p>\n<p>#Mobile<\/p>\n<p><a href=\"https:\/\/medium.com\/ux-planet\/empty-state-mobile-app-nice-to-have-essential-f11c29f01f3#.ce8d2p8nh\">Empty State: Mobile App \u201cNice-to-Have\u201d Essential<\/a>, un petit article sur le design d\u2019\u00e9l\u00e9ments \u201cvides\u201d dans les interfaces mobiles<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-5070\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/03\/empty-sates.jpg\" alt=\"\" width=\"1040\" height=\"850\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/empty-sates.jpg 1040w, https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/empty-sates-768x628.jpg 768w\" sizes=\"(max-width: 1040px) 100vw, 1040px\" \/><\/p>\n<p>#Performance<\/p>\n<p><a href=\"https:\/\/peterchamberlin.com\/fast.php\">Performance is a feature<\/a>, trop souvent la performance est trait\u00e9 comme une fonctionne sympa \u00e0 ajouter en fin de projet l\u00e0 o\u00f9 il faudrait la pr\u00e9voir d\u00e8s le d\u00e9but.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-5077\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/03\/performance.jpg\" alt=\"\" width=\"1040\" height=\"850\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/performance.jpg 1040w, https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/performance-768x628.jpg 768w\" sizes=\"(max-width: 1040px) 100vw, 1040px\" \/><\/p>\n<p>#UX<\/p>\n<p><a href=\"https:\/\/boagworld.com\/marketing\/users-will-always-choose-the-easiest-option-so-if-we-want-a-competitive-advantage-we-must-focus-on-simplicity\/\">Users always choose the path of least resistance<\/a>, les utilisateurs sont fain\u00e9ants par nature, si vous voulez que votre produit fasse la diff\u00e9rence, rendez le facile d\u2019utilisateur<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-5076\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/03\/path-resistance.jpg\" alt=\"\" width=\"1040\" height=\"850\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/path-resistance.jpg 1040w, https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/path-resistance-768x628.jpg 768w\" sizes=\"(max-width: 1040px) 100vw, 1040px\" \/><\/p>\n<h2>De l\u2019inspiration et de jolies id\u00e9es<\/h2>\n<p>#Photos<\/p>\n<p><a href=\"http:\/\/henryhargreaves.com\/food-of-the-rainbow-2\">Food of the rainbow<\/a>, \u00e9trangement \u00e7a ne me donne pas vraiment faim<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-5065\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/03\/color-food.jpg\" alt=\"\" width=\"1040\" height=\"850\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/color-food.jpg 1040w, https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/color-food-768x628.jpg 768w\" sizes=\"(max-width: 1040px) 100vw, 1040px\" \/><\/p>\n<p>#Photos<\/p>\n<p><a href=\"http:\/\/andie-bot.tumblr.com\/post\/4109352643\/just-two-horns-pathetic\">Just two horns ? Pathetic<\/a> et d\u2019autres images fun \u00e0 base de figurines en plastique. Si vous voulez toute la collection c\u2019est par ici et c\u2019est <a href=\"https:\/\/www.inprnt.com\/gallery\/aled\/\">Aled Lewi qui fait \u00e7a<\/a>.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-5081\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/03\/twho-horns.jpg\" alt=\"\" width=\"1040\" height=\"1027\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/twho-horns.jpg 1040w, https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/twho-horns-768x758.jpg 768w\" sizes=\"(max-width: 1040px) 100vw, 1040px\" \/><\/p>\n<h2>L\u2019actualit\u00e9 webdesign<\/h2>\n<p>#Icon #SVG<\/p>\n<p><a href=\"https:\/\/github.com\/blog\/2112-delivering-octicons-with-svg\">GitHub.com ne propose plus ses ic\u00f4nes via font-icon mais est pass\u00e9 au SVG.<\/a><\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-5080\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/03\/svg-fonticon.jpg\" alt=\"\" width=\"1040\" height=\"850\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/svg-fonticon.jpg 1040w, https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/svg-fonticon-768x628.jpg 768w\" sizes=\"(max-width: 1040px) 100vw, 1040px\" \/><\/p>\n<h2>Les tutoriels de la semaine<\/h2>\n<p>#CSS<\/p>\n<p><a href=\"https:\/\/github.com\/AllThingsSmitty\/css-protips\">Quelques astuces CSS<\/a><\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-5068\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/03\/csstips.jpg\" alt=\"\" width=\"1040\" height=\"850\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/csstips.jpg 1040w, https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/csstips-768x628.jpg 768w\" sizes=\"(max-width: 1040px) 100vw, 1040px\" \/><\/p>\n<p>#CSS<\/p>\n<p>Pratique pour g\u00e9rer les images responsive par exemple : <a href=\"https:\/\/css-tricks.com\/on-object-fit-and-object-position\/\">A Quick Overview of `object-fit` and `object-position`<\/a><\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-5074\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/03\/object-fit.jpg\" alt=\"\" width=\"1040\" height=\"850\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/object-fit.jpg 1040w, https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/object-fit-768x628.jpg 768w\" sizes=\"(max-width: 1040px) 100vw, 1040px\" \/><\/p>\n<p>#Design #Color<\/p>\n<p><a href=\"http:\/\/sketchtricks.com\/quickly-create-color-palettes\/\">A Simple Trick For Creating Color Palettes Quickly<\/a>, un petit tutoriel pour cr\u00e9er facilement des palettes de couleur<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-5066\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/03\/color-palette.jpg\" alt=\"\" width=\"1040\" height=\"850\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/color-palette.jpg 1040w, https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/color-palette-768x628.jpg 768w\" sizes=\"(max-width: 1040px) 100vw, 1040px\" \/><\/p>\n<p>#Design #DPI<\/p>\n<p>Le <a href=\"http:\/\/sebastien-gabriel.com\/designers-guide-to-dpi\/\">Designer&rsquo;s guide to DPI<\/a> par <a href=\"https:\/\/twitter.com\/KounterB\">@KounterB<\/a> a \u00e9t\u00e9 mis \u00e0 jours<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-5069\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/03\/design-dpi.jpg\" alt=\"\" width=\"1040\" height=\"850\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/design-dpi.jpg 1040w, https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/design-dpi-768x628.jpg 768w\" sizes=\"(max-width: 1040px) 100vw, 1040px\" \/><\/p>\n<h2>Des ressources utiles, outils et plugins pour vous faciliter la vie<\/h2>\n<p>#Prototyping<\/p>\n<p>Ow \u00e7a c\u2019est impressionnant, du prototypage cliquable directement dans Sketch : <a href=\"https:\/\/medium.com\/sketch-tricks\/unlock-prototyping-capabilities-right-within-sketch-with-silver-b1a236943ae#.vhwopdqy0\">Unlock Prototyping Capabilities Right Within Sketch With Silver<\/a><\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-5078\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/03\/sketch-silver.jpg\" alt=\"\" width=\"1040\" height=\"850\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/sketch-silver.jpg 1040w, https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/sketch-silver-768x628.jpg 768w\" sizes=\"(max-width: 1040px) 100vw, 1040px\" \/><\/p>\n<p>#Navigation<\/p>\n<p><a href=\"https:\/\/github.com\/VPenkov\/okayNav\">okayNav<\/a> un petit script pour cr\u00e9er une navigation dont les \u00e9l\u00e9ments disparaissent en fonction de la taille de l\u2019\u00e9cran<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-5075\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/03\/okay-nav.jpg\" alt=\"\" width=\"1040\" height=\"850\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/okay-nav.jpg 1040w, https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/okay-nav-768x628.jpg 768w\" sizes=\"(max-width: 1040px) 100vw, 1040px\" \/><\/p>\n<p>#CSS<\/p>\n<p><a href=\"http:\/\/livestyle.io\/\">LiveStyle<\/a>, un \u00e9diteur qui te permet de faire de la modification bidirectionnelle de LESS et SCSS<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-5072\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/03\/livestyle.jpg\" alt=\"\" width=\"1040\" height=\"850\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/livestyle.jpg 1040w, https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/livestyle-768x628.jpg 768w\" sizes=\"(max-width: 1040px) 100vw, 1040px\" \/><\/p>\n<p>#CSS #Filtres<\/p>\n<p>Au cas o\u00f9 vous n\u2019auriez toujours pas compris que l\u2019on peut faire des filtres sur des photos en CSS :\u00a0<a href=\"http:\/\/www.cssco.co\/\">www.cssco.co<\/a>\u00a0;)<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-5067\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/03\/cssfilter.jpg\" alt=\"\" width=\"1040\" height=\"850\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/cssfilter.jpg 1040w, https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/cssfilter-768x628.jpg 768w\" sizes=\"(max-width: 1040px) 100vw, 1040px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2>Pour le fun: jeux et d\u00e9mos sympas et impressionnantes<\/h2>\n<p>#Animations #Demos<\/p>\n<p><a href=\"http:\/\/tympanus.net\/Development\/Animocons\/\">Animated Icons with mo.js<\/a>, des d\u00e9mos funs<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-5062\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/03\/animated-icons.jpg\" alt=\"\" width=\"1040\" height=\"850\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/animated-icons.jpg 1040w, https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/animated-icons-768x628.jpg 768w\" sizes=\"(max-width: 1040px) 100vw, 1040px\" \/><\/p>\n<p>#Animation<\/p>\n<p>Mreouw, <a href=\"http:\/\/codepen.io\/eslam-nasser\/pen\/VexqvG\">SVG Animated Low Poly Tiger<\/a><\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-5079\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/03\/svg-animation.jpg\" alt=\"\" width=\"1040\" height=\"850\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/svg-animation.jpg 1040w, https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/svg-animation-768x628.jpg 768w\" sizes=\"(max-width: 1040px) 100vw, 1040px\" \/><\/p>\n<p>#Jeu<\/p>\n<p><a href=\"http:\/\/mienfield.com\">Minefield<\/a>, un jeu de d\u00e9mineur multijoueur en HTML5<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-5063\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/03\/bomb-fire.jpg\" alt=\"\" width=\"1040\" height=\"850\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/bomb-fire.jpg 1040w, https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/bomb-fire-768x628.jpg 768w\" sizes=\"(max-width: 1040px) 100vw, 1040px\" \/><\/p>\n<p>#UX<\/p>\n<p><a href=\"http:\/\/shittyuiuxanalogies.tumblr.com\/\">shittyuiuxanalogies.tumblr.com<\/a>, tout est dans l\u2019URL<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-5082\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/03\/ux-ui.jpg\" alt=\"\" width=\"1040\" height=\"850\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/ux-ui.jpg 1040w, https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/ux-ui-768x628.jpg 768w\" sizes=\"(max-width: 1040px) 100vw, 1040px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 10 ans. Il se peut qu&rsquo;il ne soit plus \u00e0 jour.Comme chaque semaine, \u00a0un condens\u00e9 de mes lectures et ma veille web design et graphisme, exp\u00e9rience utilisateurs, design d&rsquo;interface et mobilit\u00e9, mais aussi des outils et ressources pour le web design et de l&rsquo;inspiration en tout genre : illustrations, photos, sites web, etc. Au programme cette semaine : rythme vertical, moodboard, interfaces mobile, performance web, animations CSS3 et futur du web dans &hellip;<\/p>\n","protected":false},"author":3,"featured_media":5071,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"link","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[],"class_list":["post-5061","post","type-post","status-publish","format-link","has-post-thumbnail","hentry","category-veille-liens-utiles","post_format-post-format-link"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>La semaine en pixels \u2013 4 mars 2016 - par St\u00e9phanie Walter - UX Researcher &amp; Designer<\/title>\n<meta name=\"description\" content=\"\u00a0A ne pas manquer :\u00a0 rythme vertical, performance web, CSS object-fit, etc., rappel sur les densit\u00e9s d&#039;\u00e9cran,\u00a0astuce pour cr\u00e9er une palette de couleur, navigation responsive, burger menu anim\u00e9 et filtres CSS.\u00a0\" \/>\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\/la-semaine-en-pixels-4-mars-2016\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"La semaine en pixels \u2013 4 mars 2016 - par St\u00e9phanie Walter - UX Researcher &amp; Designer\" \/>\n<meta property=\"og:description\" content=\"\u00a0A ne pas manquer :\u00a0 rythme vertical, performance web, CSS object-fit, etc., rappel sur les densit\u00e9s d&#039;\u00e9cran,\u00a0astuce pour cr\u00e9er une palette de couleur, navigation responsive, burger menu anim\u00e9 et filtres CSS.\u00a0\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-4-mars-2016\/\" \/>\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=\"2016-03-04T07:26:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-03-04T08:26:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/03\/liensemaine-4av.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=\"@https:\/\/bsky.app\/profile\/stephaniewalter.bsky.social\" \/>\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=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-4-mars-2016\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-4-mars-2016\/\",\"name\":\"La semaine en pixels \u2013 4 mars 2016 - par St\u00e9phanie Walter - UX Researcher & Designer\",\"isPartOf\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-4-mars-2016\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-4-mars-2016\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/liensemaine-4av.jpg\",\"datePublished\":\"2016-03-04T07:26:11+00:00\",\"dateModified\":\"2016-03-04T08:26:53+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"\u00a0A ne pas manquer :\u00a0 rythme vertical, performance web, CSS object-fit, etc., rappel sur les densit\u00e9s d'\u00e9cran,\u00a0astuce pour cr\u00e9er une palette de couleur, navigation responsive, burger menu anim\u00e9 et filtres CSS.\u00a0\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-4-mars-2016\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-4-mars-2016\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/liensemaine-4av.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/liensemaine-4av.jpg\",\"width\":850,\"height\":350,\"caption\":\"La semaine en pixels \u2013 4 avril 2016\"},{\"@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\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"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\/3311148a94caa2e5ae146ff1cdf9aaf3a0127a7db0337d8c8cbbfc4a425cab0e?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3311148a94caa2e5ae146ff1cdf9aaf3a0127a7db0337d8c8cbbfc4a425cab0e?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:\/\/x.com\/https:\/\/bsky.app\/profile\/stephaniewalter.bsky.social\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"La semaine en pixels \u2013 4 mars 2016 - par St\u00e9phanie Walter - UX Researcher & Designer","description":"\u00a0A ne pas manquer :\u00a0 rythme vertical, performance web, CSS object-fit, etc., rappel sur les densit\u00e9s d'\u00e9cran,\u00a0astuce pour cr\u00e9er une palette de couleur, navigation responsive, burger menu anim\u00e9 et filtres CSS.\u00a0","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\/la-semaine-en-pixels-4-mars-2016\/","og_locale":"fr_FR","og_type":"article","og_title":"La semaine en pixels \u2013 4 mars 2016 - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"\u00a0A ne pas manquer :\u00a0 rythme vertical, performance web, CSS object-fit, etc., rappel sur les densit\u00e9s d'\u00e9cran,\u00a0astuce pour cr\u00e9er une palette de couleur, navigation responsive, burger menu anim\u00e9 et filtres CSS.\u00a0","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-4-mars-2016\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2016-03-04T07:26:11+00:00","article_modified_time":"2016-03-04T08:26:53+00:00","og_image":[{"width":850,"height":350,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/03\/liensemaine-4av.jpg","type":"image\/jpeg"}],"author":"St\u00e9phanie Walter","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/bsky.app\/profile\/stephaniewalter.bsky.social","twitter_site":"@walterstephanie","twitter_misc":{"\u00c9crit par":"St\u00e9phanie Walter","Dur\u00e9e de lecture estim\u00e9e":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-4-mars-2016\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-4-mars-2016\/","name":"La semaine en pixels \u2013 4 mars 2016 - par St\u00e9phanie Walter - UX Researcher & Designer","isPartOf":{"@id":"https:\/\/stephaniewalter.design\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-4-mars-2016\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-4-mars-2016\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/liensemaine-4av.jpg","datePublished":"2016-03-04T07:26:11+00:00","dateModified":"2016-03-04T08:26:53+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"\u00a0A ne pas manquer :\u00a0 rythme vertical, performance web, CSS object-fit, etc., rappel sur les densit\u00e9s d'\u00e9cran,\u00a0astuce pour cr\u00e9er une palette de couleur, navigation responsive, burger menu anim\u00e9 et filtres CSS.\u00a0","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-4-mars-2016\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-4-mars-2016\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/liensemaine-4av.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/liensemaine-4av.jpg","width":850,"height":350,"caption":"La semaine en pixels \u2013 4 avril 2016"},{"@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":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"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\/3311148a94caa2e5ae146ff1cdf9aaf3a0127a7db0337d8c8cbbfc4a425cab0e?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3311148a94caa2e5ae146ff1cdf9aaf3a0127a7db0337d8c8cbbfc4a425cab0e?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:\/\/x.com\/https:\/\/bsky.app\/profile\/stephaniewalter.bsky.social"]}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/5061","targetHints":{"allow":["GET"]}}],"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=5061"}],"version-history":[{"count":0,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/5061\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/5071"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=5061"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=5061"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=5061"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}