{"id":996,"date":"2012-11-22T20:00:35","date_gmt":"2012-11-22T18:00:35","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=996"},"modified":"2019-04-28T11:24:59","modified_gmt":"2019-04-28T09:24:59","slug":"des-pixels-et-du-code-37","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-37\/","title":{"rendered":"Des pixels et du code #37"},"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>

Un tutoriel sur comment cr\u00e9er des images en retina pour le web, des outils pour g\u00e9n\u00e9rer les ic\u00f4nes des applications, pour encoder vos images en base64, tester des sites responsives et un template response WordPress, des freebies et d’excellentes r\u00e9flexions sur l’UX des boutons slider, le prix d’une prestation d’UX, le CSS maintenable et la mesure des performances mobiles dans les liens \u00e0 ne pas manquer cette semaine.<\/p>\n

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

#Retina<\/p>\n

How to Create Retina Graphics for your Web Designs<\/a> pour cr\u00e9er des images retina, commencer par la taille normale puis agrandir pour \u00e9viter la pixellisation.<\/p>\n

Des ressources utiles<\/h2>\n

#freebies<\/p>\n

psddd.co<\/a> un petit site qui rassemble des PSD \u00e0 t\u00e9l\u00e9charger distribu\u00e9s sur dribbble<\/p>\n

#Android #iOS<\/p>\n

makeappicon.com<\/a> un g\u00e9n\u00e9rateur d\u2019icones pour Android et iOS<\/p>\n

#Mozilla OS<\/p>\n

Gaia,<\/a> les guidelines de design et PSD pour l\u2019interface de l\u2019OS de mozilla<\/p>\n

#WordPress #Theme<\/p>\n

Versatile HTML5 Responsive WordPress Framework based on the Power of Foundation.<\/a> un theme HTML5 pour WordPress qui se base sur le Framwork Foundation de Zurb, avec des fonctionnalit\u00e9s responsive, que demander de plus ?<\/p>\n

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

#jQuery<\/p>\n

jquery-gravity\u00a0<\/a> un plugin jQuery pour donner une impression de retrait de la gravit\u00e9 sur une page, m\u00eame si je n\u2019en vois pas l\u2019utilit\u00e9 sur un site en prod \u00e7a reste assez sympa quand on joue avec les \u00e9l\u00e9ments.<\/p>\n

#RWD<\/p>\n

ish<\/a> RWD resizer en ligne par Brad Frost<\/p>\n

#Base64<\/p>\n

duri.me<\/a> un outil en ligne simple et efficace pour g\u00e9n\u00e9rer du base64 \u00e0 partir d\u2019image : drag, drop, copier, coller. En plus l\u2019UI est vraiment sympa.<\/p>\n

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

#CSS<\/p>\n

CSS Things That Don\u2019t Occupy Space <\/a>un petit rappel de propri\u00e9t\u00e9s CSS qui ne prennent plus d\u2019espace dans le flux une fois appliqu\u00e9es<\/p>\n

#UI<\/p>\n

Invention: Multiple-Choice \u201cWindowed Slider\u201d UI<\/a> une reflexion de design sur les \u201cslider\u201d, ces boutons on\/off inspir\u00e9s de l\u2019interface iOS et comment les am\u00e9liorer pour qu\u2019il soient plus compr\u00e9hensibles par un utilisateur.<\/p>\n

#Wireframe<\/p>\n

Early sketches from the web\u2019s finest <\/a>du wireframe au site final, quelques sites web dans leur version wireframe, puis finale.<\/p>\n

#UX #prix<\/p>\n

How I went from $100-an-hour programming to $X0,000-a-week consulting<\/a>, un article qui r\u00e9sume l\u2019id\u00e9e qu\u2019il ne faut pas faire payer le nombre d\u2019heures, mais la valeur du travail en terme d\u2019expertise et ce que \u00e7a peut rapporter au client ainis que les avantages de facturer \u00e0 la semaine et non \u00e0 l\u2019heure.<\/p>\n

#CSS<\/p>\n

Code smells in CSS<\/a> une liste non exhaustive de ces petits d\u00e9tails qui font la diff\u00e9rence entre un code CSS propre et efficace ou non<\/p>\n

#Performances<\/p>\n

Measuring connection speed, ctd.<\/a> une r\u00e9flexion de ppk sur la mesure de la bande passante et connexion de l\u2019utilisation qui va acc\u00e9der au site web<\/p>\n

 <\/p>\n

Et pour finir un bonus geek de la semaine, le blog yodablog.net <\/a>un blog BD tr\u00e8s dr\u00f4le qui parodie l’univers de Star Wars.<\/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.Un tutoriel sur comment cr\u00e9er des images en retina pour le web, des outils pour g\u00e9n\u00e9rer les ic\u00f4nes des applications, pour encoder vos images en base64, tester des sites responsives et un template response WordPress, des freebies et d’excellentes r\u00e9flexions sur l’UX des boutons slider, le prix d’une prestation d’UX, le CSS maintenable et la mesure des performances mobiles dans les liens …<\/p>\n","protected":false},"author":3,"featured_media":997,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[],"class_list":["post-996","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-veille-liens-utiles"],"yoast_head":"\nDes pixels et du code #37 - par St\u00e9phanie Walter - UX Researcher & Designer<\/title>\n<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack --> <meta name=\"description\" content=\"Cr\u00e9er des images retina, g\u00e9n\u00e9rer les ic\u00f4nes des applications, encoder vos images en base64, tester des sites responsives ainsi que des r\u00e9flexions sur l'UX\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=_-3931.html \/>\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 #37 - par St\u00e9phanie Walter - UX Researcher & Designer\" \/>\n<meta property=\"og:description\" content=\"Cr\u00e9er des images retina, g\u00e9n\u00e9rer les ic\u00f4nes des applications, encoder vos images en base64, tester des sites responsives ainsi que des r\u00e9flexions sur l'UX\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-37\/\" \/>\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-22T18:00:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-04-28T09:24:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2012\/11\/pixelcode37.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=\"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-37\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-37\/\",\"name\":\"Des pixels et du code #37 - 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-37\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-37\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/11\/pixelcode37.jpg\",\"datePublished\":\"2012-11-22T18:00:35+00:00\",\"dateModified\":\"2019-04-28T09:24:59+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"Cr\u00e9er des images retina, g\u00e9n\u00e9rer les ic\u00f4nes des applications, encoder vos images en base64, tester des sites responsives ainsi que des r\u00e9flexions sur l'UX\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-37\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-37\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/11\/pixelcode37.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/11\/pixelcode37.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\":\"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 #37 - par St\u00e9phanie Walter - UX Researcher & Designer","description":"Cr\u00e9er des images retina, g\u00e9n\u00e9rer les ic\u00f4nes des applications, encoder vos images en base64, tester des sites responsives ainsi que des r\u00e9flexions sur l'UX","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-37\/","og_locale":"fr_FR","og_type":"article","og_title":"Des pixels et du code #37 - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"Cr\u00e9er des images retina, g\u00e9n\u00e9rer les ic\u00f4nes des applications, encoder vos images en base64, tester des sites responsives ainsi que des r\u00e9flexions sur l'UX","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-37\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2012-11-22T18:00:35+00:00","article_modified_time":"2019-04-28T09:24:59+00:00","og_image":[{"width":700,"height":200,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2012\/11\/pixelcode37.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":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-37\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-37\/","name":"Des pixels et du code #37 - 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-37\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-37\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/11\/pixelcode37.jpg","datePublished":"2012-11-22T18:00:35+00:00","dateModified":"2019-04-28T09:24:59+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"Cr\u00e9er des images retina, g\u00e9n\u00e9rer les ic\u00f4nes des applications, encoder vos images en base64, tester des sites responsives ainsi que des r\u00e9flexions sur l'UX","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-37\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-37\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/11\/pixelcode37.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/11\/pixelcode37.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":"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\/996"}],"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=996"}],"version-history":[{"count":0,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/996\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/997"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=996"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=996"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}