{"id":4834,"date":"2016-01-08T08:34:47","date_gmt":"2016-01-08T07:34:47","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=4834"},"modified":"2017-10-12T13:46:56","modified_gmt":"2017-10-12T11:46:56","slug":"la-semaine-en-pixels-6-janvier-2016","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-6-janvier-2016\/","title":{"rendered":"La semaine en pixels \u2013 6 janvier 2016"},"content":{"rendered":"
Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 9 ans. Il se peut qu'il ne soit plus \u00e0 jour.<\/div>

Comme chaque semaine, \u00a0je vous propose un condens\u00e9 de mes lectures et ma veille Web Design et graphisme, exp\u00e9rience utilisateurs, design d’interface et mobilit\u00e9, mais aussi des outils et ressources pour le webdesign et inspiration en tout genre (illustrations, photos, sites web, etc.).<\/p>\n

Au programme cette semaine : plusieurs r\u00e9flexions sur le m\u00e9tier de designer, la fa\u00e7on de construire le responsive et le code, un peu d’UX, de mobile et d’onboarding, de la jolie typographie et des couleurs du c\u00f4t\u00e9 de l’inspiration et surtout des tutoriels CSS et SVG cette semaine et des outils pour Flexbox, OpenType, cr\u00e9er un style guide \u00e0 partir du CSS d’un site ainsi qu’un petit menu responsive.<\/p>\n

Pour plus de liens vous pouvez me suivre sur twitter<\/a>. Bonne lecture :)<\/p>\n

tl;dnr, s’il devait n’en rester qu’un ?<\/h2>\n

#Responsive #Design<\/p>\n

Content Display Patterns<\/a>, un excellent article sur l’organisation\u00a0du code HTML d’un composant en fonction de\u00a0la r\u00e9utilisabilit\u00e9 des \u00e9l\u00e9ments d’une page et non pas forcement par rapport \u00e0 leur design<\/p>\n

\"\"<\/p>\n

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

#Design<\/p>\n

I\u2019m Not a Talented Designer<\/a>, le design ce n\u2019est pas de la magie ou de l\u2019art mais des r\u00e8gles et des principes pour rendre le monde et les interfaces attractives \u00e0 l\u2019oeil humain, et tout cela, \u00e7a s\u2019apprend.<\/p>\n

\"\"<\/p>\n

#T-shirt<\/h2>\n

How to Optimize Your T-Shirt Designs for Max Wearability<\/a>, article int\u00e9ressant surtout si vous finissez pas devoir faire des t-shirts pour les conf\u00e9rences par exemple :)<\/p>\n

\"\"<\/p>\n

#CSS<\/p>\n

Feeew: CSS STILL SUCKS 2015 – And How We Try To Work Around It<\/a>, les slides d\u2019une pr\u00e9sentation tr\u00e8s compl\u00e8te sur diff\u00e9rentes m\u00e9thodes pour am\u00e9liorer l\u2019\u00e9criture du CSS<\/p>\n

\"\"<\/p>\n

#Mobile<\/p>\n

Small is Beautiful<\/a>, les points o\u00f9 l’exp\u00e9rience utilisateur sur mobile doit encore s\u2019am\u00e9liorer pour arriver au niveau du desktop<\/p>\n

\"\"<\/p>\n

#UX<\/p>\n

Fight for UX<\/a>, une introduction \u00e0 5 principes d\u2019exp\u00e9rience utilisateur sous forme de posters<\/p>\n

\"\"<\/p>\n

#Onboarding<\/p>\n

The 21-Step Checklist for Bulletproof Mobile User Onboarding<\/a>, une checklist en 21 points sur l\u2019onboarding (la premi\u00e8re utilisation) mobile<\/p>\n

\"\"<\/p>\n

#Demission<\/span><\/p>\n

Shields Down<\/span><\/a>, une excellente r\u00e9flexion sur la d\u00e9mission et \u00e0 quel moment on commence \u00e0 se dire qu\u2019on va accepter les propositions re\u00e7ues ailleurs<\/span><\/p>\n

De l\u2019inspiration et de jolies id\u00e9es<\/h2>\n

#Cute<\/p>\n

Le truc le plus choupi et triste \u00e0 la fois que vous verrez cette semaine<\/a><\/p>\n

\"\"<\/p>\n

#Robot<\/p>\n

Comment ai-je pu louper ce site avec des robots boooogiie<\/a> ??<\/p>\n

\"\"<\/p>\n

#CSS #Typographie<\/p>\n

Swissincss.com<\/a> un hommage tout en CSS au Style Typographique International (ou Style Suisse) et c\u2019est tr\u00e8s joli<\/p>\n

\"\"<\/p>\n

#Color #Tea<\/p>\n

Paletteforyourpalate<\/a> : un th\u00e9, un pantone et une humeur, pour inspiration, m\u00e9langez le tout et vous obtenez cette superbe exp\u00e9rience culinaire colorim\u00e9trique<\/p>\n

\"\"<\/p>\n

#Vid\u00e9o<\/p>\n

22 Inspirational Videos for Designers<\/a><\/p>\n

\"\"<\/p>\n

#CSS<\/p>\n

Inspiration pour des menus horizontaux<\/a><\/p>\n

\"\"<\/p>\n

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

#CSS<\/p>\n

Blending Modes Demystified<\/a>, les Blend Modes de CSS d\u00e9smystifi\u00e9s<\/p>\n

\"\"<\/p>\n

#CSS<\/p>\n

An Introduction to CSS\u2019s @supports Rule (Feature Queries)<\/a> une introduction \u00e0 @supports pour tester le support d\u2019une propri\u00e9t\u00e9 CSS et proposer le cas \u00e9ch\u00e9ant une alternative<\/p>\n

\"\"<\/p>\n

 <\/p>\n

#SVG<\/p>\n

Optimiser les SVGs pour le web, Partie 1<\/a> et Partie 2<\/a><\/p>\n

Des ressources utiles, outils et plugins pour vous faciliter la vie<\/h2>\n

#CSS #Opentype<\/p>\n

Utility OpenType<\/a>, un petit starter CSS avec les fonctionnalit\u00e9s OpenType avanc\u00e9es expliqu\u00e9es et des fallbacks<\/p>\n

\"\"<\/p>\n

#HTML5<\/p>\n

L\u2019attribut HTML5 inputmode<\/a> a l\u2019air prometteur pour proposer des claviers personnalis\u00e9s en fonction du type d\u2019input, dommage qu\u2019il soit si peu support\u00e9 :(<\/p>\n

\"\"<\/p>\n

#Menu #Mobile<\/p>\n

Paradeiser<\/a> – un menu (et le script qui va avec) pour le site responsive et mobile, pour peu que votre architecture d\u2019information ne comporte qu\u2019un niveau et peu d\u2019\u00e9l\u00e9ments<\/p>\n

\"\"<\/p>\n

#Flexbox<\/p>\n

Layout-editor<\/a> un \u00e9diteur en ligne pour construire des mises en page avec flexbox<\/p>\n

\"\"<\/p>\n

#CSS #Chrome<\/p>\n

Snatchr<\/a>, une petite extension Chrome bien pratique qui vous montre la couleur de fond, de texte et les polices utilis\u00e9es avec leur taille sur un site.<\/p>\n

\"\"<\/p>\n","protected":false},"excerpt":{"rendered":"

Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 9 ans. Il se peut qu’il ne soit plus \u00e0 jour.Comme chaque semaine, \u00a0je vous propose un condens\u00e9 de mes lectures et ma veille Web Design et graphisme, exp\u00e9rience utilisateurs, design d’interface et mobilit\u00e9, mais aussi des outils et ressources pour le webdesign et inspiration en tout genre (illustrations, photos, sites web, etc.). Au programme cette semaine : plusieurs r\u00e9flexions sur le m\u00e9tier de designer, la fa\u00e7on de construire le responsive et …<\/p>\n","protected":false},"author":3,"featured_media":4842,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"link","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[],"class_list":["post-4834","post","type-post","status-publish","format-link","has-post-thumbnail","hentry","category-veille-liens-utiles","post_format-post-format-link"],"yoast_head":"\nLa semaine en pixels \u2013 6 janvier 2016 - par St\u00e9phanie Walter - UX Researcher & Designer<\/title>\n<meta name=\"description\" content=\"R\u00e9flexions sur le m\u00e9tier de designer,mobile et d'onboarding, tutoriels CSS et SVG et des outils pour Flexbox, OpentType, cr\u00e9er un style guide \u00e0 partir du CSS d'un site ainsi qu'un petit menu responsive.\" \/>\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\/la-semaine-en-pixels-6-janvier-2016\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"La semaine en pixels \u2013 6 janvier 2016 - par St\u00e9phanie Walter - UX Researcher & Designer\" \/>\n<meta property=\"og:description\" content=\"R\u00e9flexions sur le m\u00e9tier de designer,mobile et d'onboarding, tutoriels CSS et SVG et des outils pour Flexbox, OpentType, cr\u00e9er un style guide \u00e0 partir du CSS d'un site ainsi qu'un petit menu responsive.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-6-janvier-2016\/\" \/>\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=\"2016-01-08T07:34:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-10-12T11:46:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/01\/liensemaine-8janvier2016.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"850\" \/>\n\t<meta property=\"og:image:height\" content=\"350\" \/>\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\/la-semaine-en-pixels-6-janvier-2016\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-6-janvier-2016\/\",\"name\":\"La semaine en pixels \u2013 6 janvier 2016 - par St\u00e9phanie Walter - UX Researcher & Designer\",\"isPartOf\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-6-janvier-2016\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-6-janvier-2016\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/01\/liensemaine-8janvier2016.jpg\",\"datePublished\":\"2016-01-08T07:34:47+00:00\",\"dateModified\":\"2017-10-12T11:46:56+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"R\u00e9flexions sur le m\u00e9tier de designer,mobile et d'onboarding, tutoriels CSS et SVG et des outils pour Flexbox, OpentType, cr\u00e9er un style guide \u00e0 partir du CSS d'un site ainsi qu'un petit menu responsive.\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-6-janvier-2016\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-6-janvier-2016\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/01\/liensemaine-8janvier2016.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/01\/liensemaine-8janvier2016.jpg\",\"width\":850,\"height\":350,\"caption\":\"La semaine en pixels \u2013 6 janvier 2016\"},{\"@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":"La semaine en pixels \u2013 6 janvier 2016 - par St\u00e9phanie Walter - UX Researcher & Designer","description":"R\u00e9flexions sur le m\u00e9tier de designer,mobile et d'onboarding, tutoriels CSS et SVG et des outils pour Flexbox, OpentType, cr\u00e9er un style guide \u00e0 partir du CSS d'un site ainsi qu'un petit menu responsive.","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\/la-semaine-en-pixels-6-janvier-2016\/","og_locale":"fr_FR","og_type":"article","og_title":"La semaine en pixels \u2013 6 janvier 2016 - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"R\u00e9flexions sur le m\u00e9tier de designer,mobile et d'onboarding, tutoriels CSS et SVG et des outils pour Flexbox, OpentType, cr\u00e9er un style guide \u00e0 partir du CSS d'un site ainsi qu'un petit menu responsive.","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-6-janvier-2016\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2016-01-08T07:34:47+00:00","article_modified_time":"2017-10-12T11:46:56+00:00","og_image":[{"width":850,"height":350,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/01\/liensemaine-8janvier2016.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\/la-semaine-en-pixels-6-janvier-2016\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-6-janvier-2016\/","name":"La semaine en pixels \u2013 6 janvier 2016 - par St\u00e9phanie Walter - UX Researcher & Designer","isPartOf":{"@id":"https:\/\/stephaniewalter.design\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-6-janvier-2016\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-6-janvier-2016\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2016\/01\/liensemaine-8janvier2016.jpg","datePublished":"2016-01-08T07:34:47+00:00","dateModified":"2017-10-12T11:46:56+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"R\u00e9flexions sur le m\u00e9tier de designer,mobile et d'onboarding, tutoriels CSS et SVG et des outils pour Flexbox, OpentType, cr\u00e9er un style guide \u00e0 partir du CSS d'un site ainsi qu'un petit menu responsive.","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-6-janvier-2016\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-6-janvier-2016\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2016\/01\/liensemaine-8janvier2016.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2016\/01\/liensemaine-8janvier2016.jpg","width":850,"height":350,"caption":"La semaine en pixels \u2013 6 janvier 2016"},{"@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\/4834","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=4834"}],"version-history":[{"count":0,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/4834\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/4842"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=4834"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=4834"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=4834"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}