{"id":1411,"date":"2013-03-29T09:52:55","date_gmt":"2013-03-29T08:52:55","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=1411"},"modified":"2013-03-29T10:54:53","modified_gmt":"2013-03-29T09:54:53","slug":"des-pixels-et-du-code-55","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-55\/","title":{"rendered":"Des pixels et du code #55"},"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>

Une semaine de liens qui devraient beaucoup plaire aux graphistes et webdesigner puisque beaucoup de tutoriels et d’outils en rapport avec Illustrator, la typographie ainsi que des r\u00e9flexions sur le m\u00e9tier de designer en g\u00e9n\u00e9ral et l’ergonomie. Des tutotoriels CSS et des d\u00e9monstrations impressionnantes ne laisseront pas nos amis int\u00e9grateurs en reste et toujours autant de ressources utiles sur le responsive webdesign, difficile de passer \u00e0 cot\u00e9 de l’optimisation des sites pour mobile aujourd’hui. Bonne lecture et fin de semaine \u00e0 tous :)<\/p>\n

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

#CSS<\/p>\n

Increasing the Clickable Area of Inline Links<\/a> une petite astuce CSS \u00e0 base de padding et position relative pour agrandir les zones cliquables des liens pour le \u201ctouch\u201d<\/p>\n

#Icon<\/p>\n

Combining icon font glyphs to create complex mega-icons.<\/a> \u00a0l\u2019id\u00e9e int\u00e9ressante de combiner plusieurs ic\u00f4nes d\u2019une font-icon pour ajouter de la couleur, mais c\u2019est peut-\u00eatre pousser un peu loin l\u2019id\u00e9e l\u00e0 sachant que background-clip: text; n\u2019est que peu support\u00e9, des sprites SVG seraient peut-\u00eatre plus efficaces ici.<\/p>\n

#Illustrator<\/p>\n

How-to-make-a-repeatable-pattern-in-illustrator<\/a> un petit tutoriel bien pratique pour r\u00e9aliser facilement des patterns de fond qui vont se r\u00e9p\u00e9ter sur Illustrator<\/p>\n

Des ressources utiles<\/h2>\n

#Veille<\/p>\n

staying current<\/a>, une liste de podcasts, blogs, sites et compte twitter \u00e0 suivre pour faire de la veille<\/p>\n

#Flat<\/p>\n

Fltdsgn.com<\/a> une galerie qui rassemble des design \u201cflat\u201d pour votre inspiration<\/p>\n

flat UI<\/a>, un kit d\u2019UI qui se gr\u00e8ffe sur Foundation de Zurb.<\/p>\n

#Typographie et #Mobile<\/p>\n

Tinytype<\/a> un tableau comparatif des polices disponibles sur chaque plateforme mobile<\/p>\n

#Typographie<\/p>\n

Fontseek.info<\/a> un ensemble de belles polices d\u2019\u00e9critures qui ne sont pas propos\u00e9es dans les fonderies classiques avec \u00e0 chaque fois le lien pour les t\u00e9l\u00e9charger ou les acheter<\/p>\n

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

#jQuery<\/p>\n

Jresponsive.is-great.net <\/a>un petit plugin jQuery qui ressemble \u00e0 mansonry et permet de r\u00e9-ordonner des blocs au redimensionnement de la page et de les placer de mani\u00e8re \u201coptimale\u201d en fonction de la place disponible<\/p>\n

#Illustrator<\/p>\n

Drawscript<\/a> est un plugin pour Illustrator qui permet de g\u00e9n\u00e9rer du script \u00e0 partir de formes vectorielles<\/p>\n

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

#Mobile #UX<\/p>\n

5 Ways to Handle Long Drop-Downs In Mobile Forms <\/a>une petite \u00e9tude de cas avec des exemples r\u00e9els de comment certains sites g\u00e8rent les longues listes d\u00e9roulantes (+15 entr\u00e9es dans la liste) sur mobile<\/p>\n

UX Techniques Bank <\/a>une liste de termes et techniques utilis\u00e9es en ergonomie et design d\u2019exp\u00e9rience utilisateur avec leurs d\u00e9finitions (en anglais) et quand elles sont utilis\u00e9es<\/p>\n

#Ergonomie<\/p>\n

Put the logo below the fold: Breaking design rules for profit.<\/a> placer le logo sous la ligne de flottaison, utiliser un bouton vert certes esth\u00e9tiquement horrible mais qui attire l\u2019attention, l\u2019auteur explique comment en allant \u00e0 l\u2019encontre des \u201cr\u00e8gles\u201d il essaie de monter le taux de conversion de la page. J\u2019aime beaucoup la phrase \u201cI don\u2019t care if Cascade wins design awards. It doesn\u2019t matter if other designers like the page. It\u2019s not for them. \u201c<\/p>\n

Two-Column Mobile Layouts Outperform Three-Columns by 29%<\/a> une petite \u00e9tude qui montre qu\u2019un design en colonnes est plus efficace que 3 colonnes (pour des listes de participants ici)<\/p>\n

#Responsive #E-commerce<\/p>\n

Web responsive & E-Commerce : un seul site pour tous les devices ?<\/a> une petite pr\u00e9sentation slideshare si vous vous int\u00e9ressez \u00e0 l\u2019e-commerce et au responsive webdesign<\/p>\n

#Webdesign<\/p>\n

Don’t be your own client (if you can afford it) <\/a>le retour d\u2019exp\u00e9rience sur un designer de logo qui a engag\u00e9 un autre designer pour faire son identit\u00e9 et ne regrette pas une seule seconde ce choix<\/p>\n

Nobody is an Expert<\/a> – \u201cNobody is an expert. There are some people that just shout a bit louder than other people.\u201d – \u201cPersonne n\u2019est un expert, il y a simplement des gens qui parlent plus fort que d\u2019autres.\u201d<\/p>\n

Inspiration<\/h2>\n

#Caf\u00e9\u00e9\u00e9<\/p>\n

Coffitivity.com<\/a> des \u00e9tudes ont montr\u00e9 que les bruits ambiants des caf\u00e9s aident \u00e0 la cr\u00e9ativit\u00e9, ce petit service propose un bruit de fond de caf\u00e9 \u00e0 mettre en plus de votre musique. A tester :)<\/p>\n

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

#CSS<\/p>\n

Andrevv.com<\/a> scrollez la page, et faites courir la panth\u00e8re, juste en CSS, impressionnant :)<\/p>\n

#Canvas<\/p>\n

Flat-surface-shader<\/a> une petite demo de formes g\u00e9om\u00e9triques qui bougent en canvas ou en SVG, \u00e0 vous de choisir. Vous pouvez aussi jouer avec le rendu et les couleurs.<\/p>\n

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

#Responsive Webdesign<\/p>\n

Optimisation mobile et responsive webdesign \u2013 mise \u00e0 jour 2013<\/a> un peut d’auto-promotion cette semaine pour finir avec la mise \u00e0 jour de mon cours sur l’optimisation mobile et le responsive webdesign<\/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.Une semaine de liens qui devraient beaucoup plaire aux graphistes et webdesigner puisque beaucoup de tutoriels et d’outils en rapport avec Illustrator, la typographie ainsi que des r\u00e9flexions sur le m\u00e9tier de designer en g\u00e9n\u00e9ral et l’ergonomie. Des tutotoriels CSS et des d\u00e9monstrations impressionnantes ne laisseront pas nos amis int\u00e9grateurs en reste et toujours autant de ressources utiles sur le responsive webdesign, …<\/p>\n","protected":false},"author":3,"featured_media":1412,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[],"class_list":["post-1411","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-veille-liens-utiles"],"yoast_head":"\nDes pixels et du code #55 - par St\u00e9phanie Walter - UX Researcher & Designer<\/title>\n<meta name=\"description\" content=\"UX mobile et ergonomie, polices gratuites, responsive webdesign dans le e-commerce et en g\u00e9n\u00e9ral, patterns sous Illustrator et conseilles sur la veille\" \/>\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-55\/\" \/>\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 #55 - par St\u00e9phanie Walter - UX Researcher & Designer\" \/>\n<meta property=\"og:description\" content=\"UX mobile et ergonomie, polices gratuites, responsive webdesign dans le e-commerce et en g\u00e9n\u00e9ral, patterns sous Illustrator et conseilles sur la veille\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-55\/\" \/>\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-03-29T08:52:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-03-29T09:54:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2013\/03\/pixeletcode55.png\" \/>\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\/png\" \/>\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-55\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-55\/\",\"name\":\"Des pixels et du code #55 - 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-55\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-55\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/03\/pixeletcode55.png\",\"datePublished\":\"2013-03-29T08:52:55+00:00\",\"dateModified\":\"2013-03-29T09:54:53+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"UX mobile et ergonomie, polices gratuites, responsive webdesign dans le e-commerce et en g\u00e9n\u00e9ral, patterns sous Illustrator et conseilles sur la veille\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-55\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-55\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/03\/pixeletcode55.png\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/03\/pixeletcode55.png\",\"width\":700,\"height\":200,\"caption\":\"Des pixels et du code #55\"},{\"@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 #55 - par St\u00e9phanie Walter - UX Researcher & Designer","description":"UX mobile et ergonomie, polices gratuites, responsive webdesign dans le e-commerce et en g\u00e9n\u00e9ral, patterns sous Illustrator et conseilles sur la veille","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-55\/","og_locale":"fr_FR","og_type":"article","og_title":"Des pixels et du code #55 - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"UX mobile et ergonomie, polices gratuites, responsive webdesign dans le e-commerce et en g\u00e9n\u00e9ral, patterns sous Illustrator et conseilles sur la veille","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-55\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2013-03-29T08:52:55+00:00","article_modified_time":"2013-03-29T09:54:53+00:00","og_image":[{"width":700,"height":200,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2013\/03\/pixeletcode55.png","type":"image\/png"}],"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-55\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-55\/","name":"Des pixels et du code #55 - 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-55\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-55\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/03\/pixeletcode55.png","datePublished":"2013-03-29T08:52:55+00:00","dateModified":"2013-03-29T09:54:53+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"UX mobile et ergonomie, polices gratuites, responsive webdesign dans le e-commerce et en g\u00e9n\u00e9ral, patterns sous Illustrator et conseilles sur la veille","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-55\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-55\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/03\/pixeletcode55.png","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/03\/pixeletcode55.png","width":700,"height":200,"caption":"Des pixels et du code #55"},{"@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\/1411","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=1411"}],"version-history":[{"count":0,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/1411\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/1412"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=1411"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=1411"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=1411"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}