{"id":1156,"date":"2013-01-24T20:00:55","date_gmt":"2013-01-24T18:00:55","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=1156"},"modified":"2013-01-25T10:06:10","modified_gmt":"2013-01-25T08:06:10","slug":"des-pixels-et-du-code-46","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-46\/","title":{"rendered":"Des pixels et du code #46"},"content":{"rendered":"
Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 12 ans. Il se peut qu'il ne soit plus \u00e0 jour.<\/div>

Que vous soyez graphiste, designer, int\u00e9grateur, d\u00e9veloppeur ou expert accessibilit\u00e9, vous devriez trouver votre bonheur dans les ressources et outils de la semaine qui ont \u00e9t\u00e9 tr\u00e8s nombres : images de fond pour e-mail, ic\u00f4nes, site d\u00e9di\u00e9 \u00e0 l\u2019accessibilit\u00e9 et au test des contrastes, patterns HTML et pr\u00e9sentation de maquettes aux clients, etc. Sans oublier les articles de fond sur les performances, le z-index, et l’exp\u00e9rience utilisateur des carrousels et listes d\u00e9roulantes.<\/p>\n

Les tutoriels de la semaine<\/h2>\n

#CSS3<\/p>\n

Animating the new parse\u00a0 about page\u00a0<\/a> une petite explication sur le fonctionnement de l\u2019animation CSS3 de la page \u201cabout\u201d de parse<\/a><\/p>\n

#E-mail<\/p>\n

Un e-mail en HTML responsive multi-clients<\/a> mon article sur alsacr\u00e9ations sur l\u2019int\u00e9gration d\u2019e-mail et newsletter pour un support optimal sur diff\u00e9rents navigateurs<\/p>\n

Des ressources utiles<\/h2>\n

#A11Y<\/p>\n

A11yproject.com <\/a>un projet qui vise \u00e0 mettre en avant l\u2019accessibilit\u00e9 sur le web<\/p>\n

#E-mailing<\/p>\n

Bulletproof Email Background Images<\/a> \u00a0un petit outil qui pr\u00e9pare le code pour des images de fond en CSS compatibles avec les principaux clients mail m\u00eame Outlook<\/p>\n

#Ic\u00f4nes<\/p>\n

Maki <\/a>des ic\u00f4nes pour mettre sur des plans et des cartes<\/p>\n

#UX<\/p>\n

Empty States<\/a> un tumblr qui rassemble des designs de \u201cpage vide\u201d, cette page qui apparait avant que l\u2019utilisateur ai entr\u00e9 des donn\u00e9es<\/p>\n

#Mobile<\/p>\n

How Long Does it Take to Build a Mobile App?<\/a> une infographie qui montre le temps n\u00e9cessaire pour cr\u00e9er une application mobile (apr\u00e8s consultation avec plus de 100 devs). Spoiler : 18 semaines.<\/p>\n

#Emmet<\/p>\n

Cheat-sheet<\/a> un r\u00e9capitulatif de la syntaxe pour utiliser Emmet (anciennement Zen-Coding)<\/p>\n

#jQuery UI<\/p>\n

jQuery UI Touch Punch<\/a> permet d\u2019ajouter le support pour le touch sur les \u00e9l\u00e9ments jQueryUI<\/p>\n

Les outils \u00a0et plugins pour vous faciliter la vie<\/h2>\n

#Webdesign<\/p>\n

Flatsi.es<\/a> un outil en ligne pour pr\u00e9senter les maquettes d\u2019un projet \u00e0 un client pour qu\u2019il puisse y laisser des commentaires<\/p>\n

#HTML<\/p>\n

Kawwa.atosworldline.com<\/a> un condens\u00e9 de 50 patterns HTML et code pr\u00eats \u00e0 \u00eatre utilis\u00e9s, tr\u00e8s utile pour commencer rapidement un projet ou si vous cherchez du code \u201cplaceholder\u201d pour une d\u00e9mo<\/p>\n

#A11Y<\/p>\n

Checkmycolours.com<\/a> un outil qui vous permet de tester le contraste de tous les \u00e9l\u00e9ments d\u2019un site sur leur fond d\u2019un coup<\/p>\n

#Mobile<\/p>\n

Mobiscroll.com<\/a> un plugin jQuery qui propose plusieurs types de picker qui imitent les pickers natifs. M\u00eame si je ne vois pas trop l\u2019int\u00e9r\u00eat d\u2019imiter un picker natif avec du JavaScript, \u00e7a peut servir sur certains projets. J\u2019aime beaucoup la d\u00e9mo \u201cdiablo\u201d<\/a>.<\/p>\n

Les articles \u00e0 lire<\/h2>\n

#D\u00e9veloppement Recrutement<\/p>\n

If Carpenters Were Hired Like Programmers<\/a>, une m\u00e9taphore qui se joue des demandes farfelues de certains recruteurs lors des entretiens d\u2019embauche et de la sur-sp\u00e9cification demand\u00e9e pour certains postes<\/p>\n

#CSS<\/p>\n

What No One Told You About Z-Index<\/a> une petite clarification sur cette propri\u00e9t\u00e9 que beaucoup utilisent mais dont les specs ne sont au final pas si simples que \u00e7a<\/p>\n

#Performances<\/p>\n

Front-end performance for web designers and front-end developers<\/a> , un article tr\u00e8s complet quoi qu\u2019un peu technique sur les performances des sites web c\u00f4t\u00e9 navigateur<\/p>\n

#Photoshop<\/p>\n

Strokes in Photoshop CS6<\/a> une comparaison de rendu de nouvel outil de Photoshop qui permet d\u2019ajouter des bordures face aux bordures dans les calques d\u2019effets<\/p>\n

#SASS<\/p>\n

The Absolute Beginner\u2019s Guide to Sass<\/a> un petit guide du d\u00e9butant SASS, m\u00eame si je n\u2019ai pas encore vraiment eut le temps de me pencher totalement sur le sujet, l\u2019article pr\u00e9sente les principes de base de ce pr\u00e9processeur CSS.<\/p>\n

#Webdesign<\/p>\n

The Post-PSD Era <\/a>un article de Brad Frost qui sousligne les avantages et surtout lacunes de Photoshop dans notre processus de design moderne<\/p>\n

Almost Flat Design <\/a>un juste milieu entre le \u201cflat design\u201d (modern UI style chez Windows) et le skeumorphism (Apple) est-il possible ? Quelques exemples et r\u00e9flexions sur le sujet<\/p>\n

#Typographie<\/p>\n

Fontosaure.tumblr.com<\/a> un petit tumblr plein d\u2019inspiration pour les graphistes fans de typographie<\/p>\n

#UX<\/p>\n

Stop Misusing Select Menus <\/a>un article qui explique quand utiliser ou ne pas utiliser la balise <select><\/p>\n

Carousels <\/a>l\u2019avis de Brad Frost sur l\u2019utilisation des carousels sur un site web et quelques conseils pour les rendre plus efficaces et utilisables si vraiment vous voulez les utiliser<\/p>\n

<\/h2>\n

Et le lien fun de la semaine, un petit g\u00e9n\u00e9rateur de bonnes excuses pour d\u00e9veloppeurs : http:\/\/dex.creakiwi.com\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 12 ans. Il se peut qu’il ne soit plus \u00e0 jour.Que vous soyez graphiste, designer, int\u00e9grateur, d\u00e9veloppeur ou expert accessibilit\u00e9, vous devriez trouver votre bonheur dans les ressources et outils de la semaine qui ont \u00e9t\u00e9 tr\u00e8s nombres : images de fond pour e-mail, ic\u00f4nes, site d\u00e9di\u00e9 \u00e0 l\u2019accessibilit\u00e9 et au test des contrastes, patterns HTML et pr\u00e9sentation de maquettes aux clients, etc. Sans oublier les articles de fond sur les performances, …<\/p>\n","protected":false},"author":3,"featured_media":1157,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[],"class_list":["post-1156","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-veille-liens-utiles"],"yoast_head":"\nDes pixels et du code #46 - par St\u00e9phanie Walter - UX Researcher & Designer<\/title>\n<meta name=\"description\" content=\"Graphiste, int\u00e9grateur, d\u00e9veloppeur ou expert accessibilit\u00e9 les liens utiles : images de fond pour e-mail, ic\u00f4nes, site d\u00e9di\u00e9 \u00e0 l\u2019accessibilit\u00e9 et au test des contrastes, patterns HTML\" \/>\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\/des-pixels-et-du-code-46\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Des pixels et du code #46 - par St\u00e9phanie Walter - UX Researcher & Designer\" \/>\n<meta property=\"og:description\" content=\"Graphiste, int\u00e9grateur, d\u00e9veloppeur ou expert accessibilit\u00e9 les liens utiles : images de fond pour e-mail, ic\u00f4nes, site d\u00e9di\u00e9 \u00e0 l\u2019accessibilit\u00e9 et au test des contrastes, patterns HTML\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-46\/\" \/>\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=\"2013-01-24T18:00:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-01-25T08:06:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2013\/01\/pixelcode46.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\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=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-46\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-46\/\",\"name\":\"Des pixels et du code #46 - par St\u00e9phanie Walter - UX Researcher & Designer\",\"isPartOf\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-46\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-46\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/01\/pixelcode46.jpg\",\"datePublished\":\"2013-01-24T18:00:55+00:00\",\"dateModified\":\"2013-01-25T08:06:10+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"Graphiste, int\u00e9grateur, d\u00e9veloppeur ou expert accessibilit\u00e9 les liens utiles : images de fond pour e-mail, ic\u00f4nes, site d\u00e9di\u00e9 \u00e0 l\u2019accessibilit\u00e9 et au test des contrastes, patterns HTML\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-46\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-46\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/01\/pixelcode46.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/01\/pixelcode46.jpg\",\"width\":700,\"height\":200,\"caption\":\"Des pixels et du code #46\"},{\"@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'utilisabilit\u00e9 et l'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 & 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\/walterstephanie\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Des pixels et du code #46 - par St\u00e9phanie Walter - UX Researcher & Designer","description":"Graphiste, int\u00e9grateur, d\u00e9veloppeur ou expert accessibilit\u00e9 les liens utiles : images de fond pour e-mail, ic\u00f4nes, site d\u00e9di\u00e9 \u00e0 l\u2019accessibilit\u00e9 et au test des contrastes, patterns HTML","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\/des-pixels-et-du-code-46\/","og_locale":"fr_FR","og_type":"article","og_title":"Des pixels et du code #46 - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"Graphiste, int\u00e9grateur, d\u00e9veloppeur ou expert accessibilit\u00e9 les liens utiles : images de fond pour e-mail, ic\u00f4nes, site d\u00e9di\u00e9 \u00e0 l\u2019accessibilit\u00e9 et au test des contrastes, patterns HTML","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-46\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2013-01-24T18:00:55+00:00","article_modified_time":"2013-01-25T08:06:10+00:00","og_image":[{"width":700,"height":200,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2013\/01\/pixelcode46.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":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-46\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-46\/","name":"Des pixels et du code #46 - par St\u00e9phanie Walter - UX Researcher & Designer","isPartOf":{"@id":"https:\/\/stephaniewalter.design\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-46\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-46\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/01\/pixelcode46.jpg","datePublished":"2013-01-24T18:00:55+00:00","dateModified":"2013-01-25T08:06:10+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"Graphiste, int\u00e9grateur, d\u00e9veloppeur ou expert accessibilit\u00e9 les liens utiles : images de fond pour e-mail, ic\u00f4nes, site d\u00e9di\u00e9 \u00e0 l\u2019accessibilit\u00e9 et au test des contrastes, patterns HTML","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-46\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-46\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/01\/pixelcode46.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/01\/pixelcode46.jpg","width":700,"height":200,"caption":"Des pixels et du code #46"},{"@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'utilisabilit\u00e9 et l'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 & 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\/walterstephanie"]}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/1156"}],"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=1156"}],"version-history":[{"count":0,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/1156\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/1157"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=1156"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=1156"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=1156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}