{"id":1001,"date":"2012-11-29T23:09:34","date_gmt":"2012-11-29T21:09:34","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=1001"},"modified":"2014-03-09T11:57:47","modified_gmt":"2014-03-09T10:57:47","slug":"des-pixels-et-du-code-38","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-38\/","title":{"rendered":"Des pixels et du code #38"},"content":{"rendered":"
Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 13 ans. Il se peut qu'il ne soit plus \u00e0 jour.<\/div>

Beaucoup de lecture puisque la majorit\u00e9 de mes liens de la semaine sont des articles \u00e0 lire : UX et interface mobile, border-radius, typographie et le prix d’un site web, sans oublier des ic\u00f4nes gratuites, des templates pour faire du wireframe et quelques tutoriels sympas.<\/p>\n

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

#jQuery
\njQuery Mouseover Effect Using Parallax Style Tutorial <\/a>un tutoriel pour faire de la parallaxe au mousehover, je m\u2019\u00e9tais souvent demand\u00e9e comment certains sites arrivent \u00e0 ce r\u00e9sultat<\/p>\n

#Image Retina
\nDu Retina et HD pour votre site web : image-set, picture et srcset<\/a> un r\u00e9sum\u00e9 de plusieurs techniques possible pour placer des images retina dans le CSS ou la balise img de votre site<\/p>\n

#Canva Sprites
\nDOM Sprites: A Viable Alternative to Canvas <\/a>un petit rappel sur le fait qu\u2019il est possible de cr\u00e9er des jeux avec des sprites et des divs sans utiliser des canvas, technique qui parfois apporte de meilleurs performance que les canvas.<\/p>\n

Des ressources utiles<\/h2>\n

#Icons
\nbatch<\/a> 300 ic\u00f4nes gratuites pour vos projets.
\niconbench.com<\/a> un g\u00e9n\u00e9rateur en ligne qui permet de choisir le style, la couleur des icones, les icones puis les t\u00e9l\u00e9charger avec une d\u00e9mo et une option sprites<\/p>\n

#ressources
\nAgiledesigners.com<\/a> des ressources pour webdesigner : freebies mais aussi outils en lignes et ressources utiles<\/p>\n

#Newsletter iOS
\nTwo ways to ensure that your entire email is rendered by default in the iPhone & iPad<\/a> ou comment r\u00e9soudre le probl\u00e8me pr\u00e9sent sur les clients iPhone et iPad d\u2019email charg\u00e9 partiellement, avec le bouton \u201cil reste xxx bytes\u201d sous la ligne de flotaison.<\/p>\n

#Sketches
\ninterfacesketch.tumblr.com<\/a> une collection de templates gratuites pour faire du sketch d\u2019interface mobile ou desktop<\/p>\n

#CSS
\n20 Mobile\/Desktop Browser bugs and tricks any Senior Frontend Web Developer should know<\/a> , ou 20 astuces CSS pour les mobiles, le desktop (m\u00eame IE5.5 bien que je ne vois plus trop l\u2019int\u00e9r\u00eat) qui pourraient vous \u00eatre utiles.<\/p>\n

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

#Sublime Text
\nColour-schemes<\/a>, des th\u00e8mes de couleur suppl\u00e9mentaires pour Sublime text<\/p>\n

#Script Illustrator
\nScripts for Adobe Illustrator CS<\/a> une liste de scripts en JavaScript pour faciliter le travail sur Illustrator, j\u2019aime beaucoup le \u201cadjust dashes\u201d qui permet de faire de jolis pointill\u00e9s reli\u00e9s aux coins<\/p>\n

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

#Webdesign
\nCombien cela co\u00fbte de faire designer son site web? <\/a>, un article en Fran\u00e7ais une fois n\u2019est pas coutume pour expliquer le prix d\u2019un webdesign<\/p>\n

#Ergonomie
\nErgonomie web : les mythes et l\u00e9gendes ont la vie dure\u2026<\/a> 12 mythes et l\u00e9gendes dans le domaine de l\u2019ergonomie<\/p>\n

#IE10
\nIE10 CSS Hacks<\/a> , les hacks CSS c\u2019est pas g\u00e9nial, mais c\u2019est toujours int\u00e9ressant de voir ce que les gens ont trouv\u00e9 pour ne cibler que IE10<\/p>\n

#Webdesign
\nUsing Transparency in Web Design: Dos and Don\u2019ts <\/a>\u00a0des conseils, astuces et exemples pour utiliser la transparence avec parcimonie dans vos designs<\/p>\n

#UX
\nHamburgers & Basements: Why Not to Use Left Nav Flyouts<\/a> l\u2019avis d\u2019un designer d\u2019interface sur ce syst\u00e8me de navigation venue de Facebook ou Path qui consiste en un panneau cach\u00e9 \u00e0 gauche, et pourquoi il pense que ce n\u2019est pas une bonne id\u00e9e.<\/p>\n

Bad, outdated UX will be rejected by users <\/a>: ou comment expliquer que la nouvelle application Outlook soit aussi mal not\u00e9e sur le market Android<\/p>\n

#mobile input
\nCollecting Payment Information Within a Single Input <\/a>\u00a0l\u2019id\u00e9e de \u201cmasques d\u2019input\u201d dans les champs pour les donn\u00e9es segment\u00e9es (comme les dates ou informations bancaires de carte de cr\u00e9dit) pour que l\u2019utilisateur soit guid\u00e9 et ne se trompe pas lorsqu\u2019il rempli.<\/p>\n

#border-radius
\nGetting Inner Border Radius Just Right <\/a>une explication math\u00e9matique accompagn\u00e9e d\u2019un outil de calcule<\/a> pour des bords arrondis coh\u00e9rents<\/p>\n

Les d\u00e9mos sympas et impressionnantes<\/h2>\n

#Webapp
\nUne d\u00e9monstration en vid\u00e9o<\/a> d\u2019un application utilisant le framework famous<\/a>, \u00e7a a l\u2019air fluide et tr\u00e8s prometteur<\/p>\n

Pour finir le projet www.coloradd.net<\/a> qui propose 5 symboles pour identifier les couleurs et aider les personnes daltoniennes au quotidien.<\/p>\n","protected":false},"excerpt":{"rendered":"

Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 13 ans. Il se peut qu’il ne soit plus \u00e0 jour.Beaucoup de lecture puisque la majorit\u00e9 de mes liens de la semaine sont des articles \u00e0 lire : UX et interface mobile, border-radius, typographie et le prix d’un site web, sans oublier des ic\u00f4nes gratuites, des templates pour faire du wireframe et quelques tutoriels sympas. Les tutoriels de la semaine #jQuery jQuery Mouseover Effect Using Parallax Style Tutorial un tutoriel pour faire …<\/p>\n","protected":false},"author":3,"featured_media":1003,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[],"class_list":["post-1001","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-veille-liens-utiles"],"yoast_head":"\nDes pixels et du code #38 - par St\u00e9phanie Walter - UX Researcher & Designer<\/title>\n<meta name=\"description\" content=\"UX et interface mobile, border-radius, typographie, mythes d'ergonomie et le prix d'un site web, mouseover en parallaxe, images retina et ic\u00f4nes gratuites.\" \/>\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-38\/\" \/>\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 #38 - par St\u00e9phanie Walter - UX Researcher & Designer\" \/>\n<meta property=\"og:description\" content=\"UX et interface mobile, border-radius, typographie, mythes d'ergonomie et le prix d'un site web, mouseover en parallaxe, images retina et ic\u00f4nes gratuites.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-38\/\" \/>\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=\"2012-11-29T21:09:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-03-09T10:57:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2012\/11\/ixelcode38.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=\"@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\/des-pixels-et-du-code-38\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-38\/\",\"name\":\"Des pixels et du code #38 - 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-38\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-38\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/11\/ixelcode38.jpg\",\"datePublished\":\"2012-11-29T21:09:34+00:00\",\"dateModified\":\"2014-03-09T10:57:47+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"UX et interface mobile, border-radius, typographie, mythes d'ergonomie et le prix d'un site web, mouseover en parallaxe, images retina et ic\u00f4nes gratuites.\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-38\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-38\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/11\/ixelcode38.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/11\/ixelcode38.jpg\",\"width\":700,\"height\":200},{\"@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\":{\"@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 & 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":"Des pixels et du code #38 - par St\u00e9phanie Walter - UX Researcher & Designer","description":"UX et interface mobile, border-radius, typographie, mythes d'ergonomie et le prix d'un site web, mouseover en parallaxe, images retina et ic\u00f4nes gratuites.","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-38\/","og_locale":"fr_FR","og_type":"article","og_title":"Des pixels et du code #38 - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"UX et interface mobile, border-radius, typographie, mythes d'ergonomie et le prix d'un site web, mouseover en parallaxe, images retina et ic\u00f4nes gratuites.","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-38\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2012-11-29T21:09:34+00:00","article_modified_time":"2014-03-09T10:57:47+00:00","og_image":[{"width":700,"height":200,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2012\/11\/ixelcode38.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\/des-pixels-et-du-code-38\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-38\/","name":"Des pixels et du code #38 - 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-38\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-38\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/11\/ixelcode38.jpg","datePublished":"2012-11-29T21:09:34+00:00","dateModified":"2014-03-09T10:57:47+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"UX et interface mobile, border-radius, typographie, mythes d'ergonomie et le prix d'un site web, mouseover en parallaxe, images retina et ic\u00f4nes gratuites.","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-38\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-38\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/11\/ixelcode38.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/11\/ixelcode38.jpg","width":700,"height":200},{"@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":{"@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 & 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\/1001","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=1001"}],"version-history":[{"count":0,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/1001\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/1003"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=1001"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=1001"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=1001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}