{"id":3335,"date":"2014-11-14T07:00:16","date_gmt":"2014-11-14T06:00:16","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=3335"},"modified":"2025-02-13T21:17:51","modified_gmt":"2025-02-13T20:17:51","slug":"semaine-en-pixels-14-novembre-2014","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-en-pixels-14-novembre-2014\/","title":{"rendered":"La semaine en pixels \u2013 14 novembre 2014"},"content":{"rendered":"
Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 11 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 : des GIFs pour mieux comprendre et expliquer les principes du responsive, du test utilisateur chez Yelp, l’histoire du fameux Burger Icon, des images responsive en pratique avec les nouvelles syntaxes et du comparatif d’UX iOS\/Android\/Windows Phone, un retour \u00e0 mon enfance avec un jeu de spirographe en ligne, des menus CSS, du SVG, un outil pour choisir des combinaisons de police d’\u00e9criture, des guidelines iOS et un jeu avec les couleurs pour procrastiner en fin de semaine.<\/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 Web Design<\/p>\n

9 basic principles of responsive web design<\/a> – une utilisation astucieuse des GIFs anim\u00e9s pour expliquer les principes fondamentaux du responsive webdesign.<\/p>\n

\"9<\/p>\n

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

#Burger<\/p>\n

A Brief History of the Hamburger Icon<\/a>, ou l\u2019histoire du burger icon en image. Vous vous souveniez de ces anciens designs de Facebook ?<\/p>\n

\"A<\/p>\n

#UX<\/p>\n

User Testing & Design: 6 Quantitative Insights Into Yelp<\/a>, des tests utilisateurs pour am\u00e9liorer l’interface de Yelp<\/p>\n

\"User<\/p>\n

#Responsive<\/p>\n

How They Did It: Shopify – It\u2019s All About the Details<\/a> le nouveau site de Shopify d\u00e9cortiqu\u00e9, de jolies id\u00e9es et astuces<\/p>\n

\"How<\/p>\n

#Responsive Image<\/p>\n

Responsive Images in Practice<\/a> explication et cas pratique d\u2019images responsive avec la syntaxe srcset et picture si vraiment vous \u00eates des petits fous. J\u2019ai h\u00e2te de voir comment on va g\u00e9rer \u00e7a avec nos CMSs (sachant que tu peux coller des media queries dans l\u2019attribut size et que \u00e7a m\u00e9lange all\u00e8grement largeur CSS et descripteurs dans le HTML) et surtout comment on va expliquer \u00e7a \u00e0 nos clients pour qu\u2019ils remplissent eux m\u00eame leurs sites.<\/p>\n

\"Responsive<\/p>\n

#UX #Mobile<\/p>\n

The UX of Mobile Settings<\/a> une comparaison des param\u00e8tres d\u2019Android, iOS et Windows Phone<\/p>\n

\"The<\/p>\n

#Mobile #Conf<\/p>\n

Gu\u00e9rrilla design en milieu hostile : responsive et mobilit\u00e9 \u2013 DevFest Nantes<\/a>, les slidesde ma conf\u00e9rence la semaine derni\u00e8re \u00e0 Nantes<\/p>\n

\"Gu\u00e9rrilla<\/p>\n

Les Nouveaut\u00e9s webdesign<\/h2>\n

#Internet Explorer<\/p>\n

Announcing RemoteIE: Test the latest IE on Windows, Mac OS X, iOS and Android<\/a><\/p>\n

#Calendar<\/p>\n

Google Agenda<\/a> va changer de design et c\u2019est pas mal du tout<\/p>\n

\"Google<\/p>\n

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

#Chargeur<\/p>\n

20 Portable Smartphone Chargers to Keep Your Device Powered<\/a> de quoi ne plus jamais \u00eatre en rad de batterie, et avec style :)<\/p>\n

#Spirographe<\/p>\n

\u00c7a vous rappel des souvenirs :\u00a0un spirographe en ligne<\/a><\/p>\n

\"spirographe\"<\/p>\n

#Typography<\/p>\n

ABCdicks<\/a>, bah oui pourquoi pas ?<\/p>\n

\"ABCdicks\"<\/p>\n

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

#Menu<\/p>\n

Si vous cherchez de l\u2019inspiration pour des menus off-canvas : Creative Full Screen CSS3 Menu<\/a><\/p>\n

\"Creative<\/p>\n

#SVG<\/p>\n

A lire si vous \u00eates ne serait-ce qu\u2019un tout petit peu interess\u00e9s par le SVG: Styling And Animating SVGs With CSS<\/a><\/p>\n

Des ressources utiles<\/h2>\n

#SVG<\/p>\n

Pocket Guide to Writing SVG<\/a> : un livre en ligne pour apprendre le SVG<\/p>\n

\"Pocket<\/p>\n

#iOS<\/p>\n

The iOS Design Guidelines<\/a> : r\u00e9capitulatif tr\u00e8s utile de ce qu\u2019il faut savoir pour designer pour iOS<\/p>\n

\"The<\/p>\n

#SVG #Animation<\/p>\n

Vivus<\/a>, une librairie JavaScript pour animer les SVG<\/p>\n

\"Vivus\"<\/p>\n

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

#Font<\/p>\n

Typegenius<\/a>, un outil en ligne pour vous aider \u00e0 trouver des combinaisons de police d\u2019\u00e9criture<\/p>\n

\"Typegenius\"<\/p>\n

Pour le fun: jeux et d\u00e9mos sympas et impressionnantes<\/h2>\n

#Color<\/p>\n

Colorrun.pl<\/a> \u00e7a procrastine dure ce matin avec un jeu o\u00f9 il vous faudra cliquer sur la couleur la plus claire<\/p>\n

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

Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 11 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 : des GIFs pour mieux comprendre et expliquer les principes du responsive, du test utilisateur chez Yelp, …<\/p>\n","protected":false},"author":3,"featured_media":3340,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"link","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[],"class_list":["post-3335","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 14 novembre 2014 - par St\u00e9phanie Walter - UX Researcher & Designer<\/title>\n<meta name=\"description\" content=\"A ne pas manquer : test utilisateur chez Yelp, images responsive en pratique, menus CSS, du SVG, un outil pour choisir des combinaisons de police d'\u00e9criture, des guidelines iOS\" \/>\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\/semaine-en-pixels-14-novembre-2014\/\" \/>\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 14 novembre 2014 - par St\u00e9phanie Walter - UX Researcher & Designer\" \/>\n<meta property=\"og:description\" content=\"A ne pas manquer : test utilisateur chez Yelp, images responsive en pratique, menus CSS, du SVG, un outil pour choisir des combinaisons de police d'\u00e9criture, des guidelines iOS\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-en-pixels-14-novembre-2014\/\" \/>\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=\"2014-11-14T06:00:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-13T20:17:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2014\/11\/lienssemaine13novembre.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\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=\"@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\/semaine-en-pixels-14-novembre-2014\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-en-pixels-14-novembre-2014\/\",\"name\":\"La semaine en pixels \u2013 14 novembre 2014 - par St\u00e9phanie Walter - UX Researcher & Designer\",\"isPartOf\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-en-pixels-14-novembre-2014\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-en-pixels-14-novembre-2014\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2014\/11\/lienssemaine13novembre.jpg\",\"datePublished\":\"2014-11-14T06:00:16+00:00\",\"dateModified\":\"2025-02-13T20:17:51+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"A ne pas manquer : test utilisateur chez Yelp, images responsive en pratique, menus CSS, du SVG, un outil pour choisir des combinaisons de police d'\u00e9criture, des guidelines iOS\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-en-pixels-14-novembre-2014\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-en-pixels-14-novembre-2014\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2014\/11\/lienssemaine13novembre.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2014\/11\/lienssemaine13novembre.jpg\",\"width\":800,\"height\":350,\"caption\":\"La semaine en pixels \u2013 14 novembre 2014\"},{\"@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":"La semaine en pixels \u2013 14 novembre 2014 - par St\u00e9phanie Walter - UX Researcher & Designer","description":"A ne pas manquer : test utilisateur chez Yelp, images responsive en pratique, menus CSS, du SVG, un outil pour choisir des combinaisons de police d'\u00e9criture, des guidelines iOS","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\/semaine-en-pixels-14-novembre-2014\/","og_locale":"fr_FR","og_type":"article","og_title":"La semaine en pixels \u2013 14 novembre 2014 - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"A ne pas manquer : test utilisateur chez Yelp, images responsive en pratique, menus CSS, du SVG, un outil pour choisir des combinaisons de police d'\u00e9criture, des guidelines iOS","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-en-pixels-14-novembre-2014\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2014-11-14T06:00:16+00:00","article_modified_time":"2025-02-13T20:17:51+00:00","og_image":[{"width":800,"height":350,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2014\/11\/lienssemaine13novembre.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\/semaine-en-pixels-14-novembre-2014\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-en-pixels-14-novembre-2014\/","name":"La semaine en pixels \u2013 14 novembre 2014 - par St\u00e9phanie Walter - UX Researcher & Designer","isPartOf":{"@id":"https:\/\/stephaniewalter.design\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-en-pixels-14-novembre-2014\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-en-pixels-14-novembre-2014\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2014\/11\/lienssemaine13novembre.jpg","datePublished":"2014-11-14T06:00:16+00:00","dateModified":"2025-02-13T20:17:51+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"A ne pas manquer : test utilisateur chez Yelp, images responsive en pratique, menus CSS, du SVG, un outil pour choisir des combinaisons de police d'\u00e9criture, des guidelines iOS","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/semaine-en-pixels-14-novembre-2014\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-en-pixels-14-novembre-2014\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2014\/11\/lienssemaine13novembre.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2014\/11\/lienssemaine13novembre.jpg","width":800,"height":350,"caption":"La semaine en pixels \u2013 14 novembre 2014"},{"@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\/3335","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=3335"}],"version-history":[{"count":1,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/3335\/revisions"}],"predecessor-version":[{"id":8600,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/3335\/revisions\/8600"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/3340"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=3335"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=3335"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=3335"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}