{"id":1442,"date":"2013-04-26T07:50:57","date_gmt":"2013-04-26T06:50:57","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=1442"},"modified":"2013-04-26T07:50:57","modified_gmt":"2013-04-26T06:50:57","slug":"des-pixels-et-du-code-59","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-59\/","title":{"rendered":"Des pixels et du code #59"},"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>

Une semaine de lien qui devrait ravir les designer mobile puisque l’on y parle beaucoup d’exp\u00e9rience utilisateur au niveau des tab bars, de responsive webdesign et de l’utilisation des <select>\u00e0 la place des menus. Vous trouverez \u00e9galement d’excellente ressources d’inspiration graphique, les photographes et fans de typographie devraient y trouver leur bonheur. Au niveau des tutoriels je vous encourage vraiment \u00e0 jeter un coup d’oeil au PDF qui r\u00e9sume l’utilisation des font-icon, en fran\u00e7ais. Enfin quelques outils pour Photoshop et cheklists de d\u00e9veloppement et d’utilisabilit\u00e9 devraient faciliter votre travail \u00e0 l’avenir. Bonne lecture !<\/p>\n

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

#Performance #Font<\/p>\n

Preventing the Performance Hit from Custom Fonts<\/a> quelques solutions pour am\u00e9liorer la performance lors d\u2019utilisation de polices \u201cexotiques\u201d que le navigateur doit t\u00e9l\u00e9charger.<\/p>\n

#Gestion de projet<\/p>\n

Never Say WordPress When Selling a Web Design Project<\/a> comprendre les besoins du client, savoir pourquoi il veut absolument une fonctionnalit\u00e9 et tout remettre en question, pour au final ne plus vendre une technologie mais un service sur mesure<\/p>\n

#Mobile UX<\/p>\n

The iPhone Tab Bar – Lessons From Reality<\/a> au del\u00e0 des guidelines d\u2019Apple, 6 le\u00e7ons apprise en cr\u00e9ant de vrais applications iOS<\/p>\n

Mixing Responsive Design and Mobile Templates <\/a>site responsive ou site d\u00e9di\u00e9 ? Il est tout a fait possible de m\u00e9langer les deux, Chris Coyier l\u2019illustre \u00e0 travers l\u2019exemple de la \u201cversion mobile\u201d de codepen.<\/p>\n

#Concours #Webdesign<\/p>\n

Killing the Designer <\/a>ou les probl\u00e8mes des sites de concours de design comme 99Designs et ses amis<\/p>\n

\u00a0Inspiration<\/h2>\n

#Streetart<\/p>\n

Madc.tv<\/a>\u00a0est une\u00a0galerie\u00a0consacr\u00e9e aux photos de street-art<\/p>\n

#Photographie<\/p>\n

Found-film-vintage-kodak<\/a>\u00a0un photographe r\u00e9cup\u00e8re de tr\u00e8s vieux appareils photo avec les pellicules toujours dedans et les d\u00e9veloppe, de tr\u00e8s jolies images<\/p>\n

#UX<\/p>\n

Hoverstat.es<\/a> une s\u00e9lection et collection d’interactions avec l\u2019utilisateur (effets au survol, parallaxe, etc.) sous forme de petites vid\u00e9os qui tournent en boucle<\/p>\n

#Icons<\/p>\n

Iconsbyhour<\/a>\u00a0une icone par heure et m\u00eame minute de la journ\u00e9e<\/p>\n

#Typographie<\/p>\n

Typography by Cory Say<\/a> un tr\u00e8s joli travail de typographie et de letterine<\/p>\n

Thebeautyofletterpress.com<\/a>\u00a0du letterpress et de la typo, bref que du bonheur #Moustache #Packaging<\/p>\n

HungaroFood-Brand-Packaging<\/a>un joli exemple de packaging \u00a0d nourriture avec de la typo et des moustaches <3<\/p>\n

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

#CSS<\/p>\n

Responsive Multi-Level Menu <\/a>un petit tutoriel sur Codrops pour faire un sous menu multi niveau Responsive.<\/p>\n

#font-icon<\/p>\n

Keynote-font-icon.pdf<\/a> une super pr\u00e9sentation sur la fabrication et l\u2019utilisation de font-icon en fran\u00e7ais :)<\/p>\n

Des ressources utiles<\/h2>\n

#Font<\/p>\n

Shop.fontyou.com<\/a>\u00a0 une fonderie qui propose des polices d\u2019\u00e9critures cr\u00e9\u00e9es de mani\u00e8re collaborative<\/p>\n

#Freebies<\/p>\n

Dajzafree.net<\/a>\u00a0une jolie collection de freebies, illustrations et PSD \u00e0 t\u00e9l\u00e9charger<\/p>\n

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

#Photoshop<\/p>\n

Set Action to enable\/disable pixel snapping <\/a>une \u201caction\u201d (script en fran\u00e7ais) Photoshop \u00e0 t\u00e9l\u00e9charger pour attribuer un raccourci clavier \u00e0 l\u2019option \u201csnap to pixel\u201d des trac\u00e9s<\/p>\n

#Markdown<\/p>\n

Heckyesmarkdown.com<\/a>\u00a0un petit outil en ligne qui convertis vos pages web (en lui donnant l\u2019url) en markdown<\/p>\n

#Flexbox<\/p>\n

Flexyboxes<\/a>\u00a0un outil pour jouer avec du flexbox, tester et g\u00e9n\u00e9rer le code<\/p>\n

#Checklist<\/p>\n

Mon site est-il pr\u00eat pour \u00eatre lanc\u00e9 ? Webdevchecklist.com<\/a>\u00a0 propose une checklist de quelques points \u00e0 v\u00e9rifier avant<\/p>\n

\u00a0<\/b><\/b>Usability Checklist <\/a>une autre check-list qui permet de v\u00e9rifier diff\u00e9rents points d\u2019exp\u00e9rience utilisateur et utilisabilit\u00e9 du site<\/p>\n

#Webdesign<\/p>\n

Designerstoolbox.com<\/a>\u00a0une boite \u00e0 outil pour le designer avec des\u00a0gabarits\u00a0type (enveloppe, flyer, etc) \u00e0 t\u00e9l\u00e9charger avec leur taille indiqu\u00e9e pour diff\u00e9rents formats<\/p>\n

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

#Responsive<\/p>\n

Garmoshka<\/a>\u00a0un accord\u00e9on responsive, jouez avec la fen\u00eatre pour faire de la musique, inutile mais totalement g\u00e9nial !<\/p>\n

\u00a0<\/b><\/b>#Flash<\/p>\n

Tokyocitysymphony.com<\/a>\u00a0propose de cr\u00e9er une symphonie avec un miniature de la ville de Tokyo en 3D. Tr\u00e8s fun m\u00eame si je n’arrive pas \u00e0 cr\u00e9er une m\u00e9lodie qui ressemble \u00e0 quelque chose :\/<\/p>\n

 <\/p>\n

Et s’il devait n’en rester qu’un ?<\/h2>\n

Mobile: Never Use Native Drop-Downs for Navigation<\/a>\u00a0un article bas\u00e9 sur les \u00e9tudes de Baymard Institue qui montre qu\u2019utiliser une liste de s\u00e9lection (balise <select>) pour la navigation mobile n\u2019est au final pas une bonne id\u00e9e en terme d\u2019exp\u00e9rience utilisateur. #Responsive #Mobilit\u00e9<\/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.Une semaine de lien qui devrait ravir les designer mobile puisque l’on y parle beaucoup d’exp\u00e9rience utilisateur au niveau des tab bars, de responsive webdesign et de l’utilisation des <select>\u00e0 la place des menus. Vous trouverez \u00e9galement d’excellente ressources d’inspiration graphique, les photographes et fans de typographie devraient y trouver leur bonheur. Au niveau des tutoriels je vous encourage vraiment \u00e0 jeter …<\/p>\n","protected":false},"author":3,"featured_media":1443,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[],"class_list":["post-1442","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-veille-liens-utiles"],"yoast_head":"\nDes pixels et du code #59 - par St\u00e9phanie Walter - UX Researcher & Designer<\/title>\n<meta name=\"description\" content=\"Freebies, et fonts, letterpress, checklist accessibilit\u00e9, ergonomie et exp\u00e9rience utilisateur mobile, menu multi niveau responsive et utilisation des font-icons,\" \/>\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-59\/\" \/>\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 #59 - par St\u00e9phanie Walter - UX Researcher & Designer\" \/>\n<meta property=\"og:description\" content=\"Freebies, et fonts, letterpress, checklist accessibilit\u00e9, ergonomie et exp\u00e9rience utilisateur mobile, menu multi niveau responsive et utilisation des font-icons,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-59\/\" \/>\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-04-26T06:50:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2013\/04\/pixelcode59.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=\"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-59\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-59\/\",\"name\":\"Des pixels et du code #59 - 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-59\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-59\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/04\/pixelcode59.jpg\",\"datePublished\":\"2013-04-26T06:50:57+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"Freebies, et fonts, letterpress, checklist accessibilit\u00e9, ergonomie et exp\u00e9rience utilisateur mobile, menu multi niveau responsive et utilisation des font-icons,\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-59\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-59\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/04\/pixelcode59.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/04\/pixelcode59.jpg\",\"width\":700,\"height\":200,\"caption\":\"Des pixels et du code #59\"},{\"@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\/2bc37c927707e853de94250cad44e4ffc13bee34ad9eda7a69651ca5ee19948b?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2bc37c927707e853de94250cad44e4ffc13bee34ad9eda7a69651ca5ee19948b?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 #59 - par St\u00e9phanie Walter - UX Researcher & Designer","description":"Freebies, et fonts, letterpress, checklist accessibilit\u00e9, ergonomie et exp\u00e9rience utilisateur mobile, menu multi niveau responsive et utilisation des font-icons,","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-59\/","og_locale":"fr_FR","og_type":"article","og_title":"Des pixels et du code #59 - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"Freebies, et fonts, letterpress, checklist accessibilit\u00e9, ergonomie et exp\u00e9rience utilisateur mobile, menu multi niveau responsive et utilisation des font-icons,","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-59\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2013-04-26T06:50:57+00:00","og_image":[{"width":700,"height":200,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2013\/04\/pixelcode59.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":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-59\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-59\/","name":"Des pixels et du code #59 - 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-59\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-59\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/04\/pixelcode59.jpg","datePublished":"2013-04-26T06:50:57+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"Freebies, et fonts, letterpress, checklist accessibilit\u00e9, ergonomie et exp\u00e9rience utilisateur mobile, menu multi niveau responsive et utilisation des font-icons,","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-59\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-59\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/04\/pixelcode59.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/04\/pixelcode59.jpg","width":700,"height":200,"caption":"Des pixels et du code #59"},{"@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\/2bc37c927707e853de94250cad44e4ffc13bee34ad9eda7a69651ca5ee19948b?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2bc37c927707e853de94250cad44e4ffc13bee34ad9eda7a69651ca5ee19948b?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\/1442","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=1442"}],"version-history":[{"count":0,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/1442\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/1443"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=1442"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=1442"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=1442"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}