{"id":1597,"date":"2013-06-07T08:46:35","date_gmt":"2013-06-07T06:46:35","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=1597"},"modified":"2013-06-08T09:21:10","modified_gmt":"2013-06-08T07:21:10","slug":"des-pixels-et-du-code-65","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-65\/","title":{"rendered":"Des pixels et du code #65"},"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>

Mobilit\u00e9, mobilit\u00e9, et mobilit\u00e9 seront les ma\u00eetres mots de la semaine : des techniques d’images responsive tr\u00e8s pouss\u00e9es \u00e0 base de hack de SVG et un polyfill d’image responsive chez Zurb \u00e0 base de balise image pour les int\u00e9grateurs en passant par de l’inspiration de navigation optimis\u00e9e mobile pour les designer par \u00a0la coh\u00e9rences des zones d\u2019interaction sur mobile et sur bureau au petite dictionnaire en fran\u00e7ais pour \u00ab\u00a0vulgariser\u00a0\u00bb les termes pour les clients et n\u00e9ophytes. \u00a0Pour les autres, il reste des freebies ic\u00f4nes, templates, de l’inspiration, des images gratuites, des scripts Photoshop, bref de quoi occuper largement vos weekend, un verre de jus de fruit \u00e0 la main. Bonne lecture :)<\/p>\n

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

#UI<\/p>\n

Oh, my aching UI. <\/a>un exemple d\u2019interface d’ascenseur, loin du web, et comment le manque de coh\u00e9rence entre deux \u201cinterfaces\u201d qui se ressemble peut mener \u00e0 la confusion<\/p>\n

#UX #Mobile<\/p>\n

Mobile Product Lists Need Very Distinct Hit Areas <\/a>ou l\u2019importance en mobilit\u00e9 (mais \u00e9galement sur le web) d\u2019avoir des liens coh\u00e9rents, qui ressemblent \u00e0 des liens pour \u00e9viter la confusion des utilisateurs surtout si il y a plusieurs actions diff\u00e9rentes possibles sur une m\u00eame zone<\/p>\n

#Accessibilit\u00e9<\/p>\n

8 Myths About How Blind People Use the Internet <\/a>8 pr\u00e9jug\u00e9s que l\u2019on pourrait avoir sur la fa\u00e7on dont les utilisateurs en situation de d\u00e9ficience visuelle forte visitent un site web<\/p>\n

#Histoire du design<\/p>\n

Design in a nutshell<\/a> – 6 petites vid\u00e9os pour en apprendre plus sur 6 mouvements dans l\u2019histoire du design<\/p>\n

#Images Responsive<\/p>\n

Clown Car Technique: Solving Adaptive Images In Responsive Web Design<\/a> un proposition de hack de l\u2019\u00e9l\u00e9ment SVG pour y encapsuler diff\u00e9rentes images qui se chargeront en fonction des media queries. Il s\u2019agit l\u00e0 d\u2019une solution pas vraiment stable, mais l\u2019id\u00e9e et le cheminement de l\u2019auteur pour en arriver l\u00e0 n\u2019en restent pas moins int\u00e9ressants. Et en compl\u00e9ment, l\u2019article The Raster Image Paradox o\u00f9 David Bushell <\/a>explique sa position (que je partage) sur les images adaptives, \u00e0 savoir que toutes les solutions actuelles sont des hacks et qu\u2019au final ne rien faire pour proposer des images en haute r\u00e9solution n\u2019est peut-\u00eatre pas si mal que \u00e7a (en fonction du projet, budget, et contraintes du client)<\/p>\n

#Graphiste<\/p>\n

Free Graphic Design<\/a> \u00ab\u00a0I’m Jeff, I’m a graphic designer and I’m never sarcastic\u00a0\u00bb – le r\u00e9sum\u00e9 de la vie d’un graphiste dans une petite vid\u00e9o :)<\/p>\n

#Email<\/p>\n

HTML Email – The Biggest Mistake <\/a>la plus grosse erreur faite dans le design de newsletter selon l\u2019auteur est la sur-utilisation d\u2019images qui sont par d\u00e9faut d\u00e9sactiv\u00e9s dans beaucoup de clients mail.<\/p>\n

#Responsive Webdesign<\/p>\n

Responsive Webdesign \u2013 pr\u00e9sent et futur de l\u2019adaptation mobile\u00a0<\/a>\u00a0la traduction de mon article paru semaine derni\u00e8re sur Smashing Magazine traitant du future du responsive webdesign est disponible sur Alsacr\u00e9ations.<\/p>\n

Inspiration<\/h2>\n

#Mobile<\/p>\n

tallchess.com<\/a>\u00a0un jeu d\u2019\u00e9checs avec un design tr\u00e8s sympa<\/p>\n

#Navigation moblie<\/p>\n

20+ responsive mobile navigations<\/a> une s\u00e9lection d\u2019\u00e9l\u00e9gantes solutions d’optimisation de navigation sur petits \u00e9crans<\/p>\n

70 Stunning Responsive Sites for Your Inspiration\u00a0<\/a>\u00a0 la m\u00eame, mais cette fois avec 70 navigations<\/p>\n

#Site d\u2019agence<\/p>\n

mry.com<\/a>\u00a0un site d\u2019agence haut en couleur, acidul\u00e9 avec un peu d\u2019animation comme on les aimes<\/p>\n

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

#Emailing<\/p>\n

The Little Guide to HTML Email <\/a>un petit guide de bonnes pratiques pour vous faciliter la cr\u00e9ation de templates de mail en HTML<\/p>\n

Des ressources utiles<\/h2>\n

#Webdesign<\/p>\n

Web Design and Mobile Trends for 2013 eBook: download it for free! <\/a>un petit PDF \u00e0 t\u00e9l\u00e9charger sur les tendances du web et du mobile pour 2013<\/p>\n

#Images responsive<\/p>\n

Interchange <\/a>\u00a0une solution d\u2019images responsive propos\u00e9e par Zurb qui se base sur une seule balise <img> et la syntaxe des media-queries pour charger la bonne image en fonction de la taille du navigateur<\/p>\n

#Photos<\/p>\n

unsplash.com<\/a>\u00a0\u00a0tous les 10 jours, 10 photos en haute r\u00e9solution et libres de droits \u00e0 utiliser pour vos cr\u00e9as. Une bien belle id\u00e9e<\/p>\n

#Photoshop<\/p>\n

TemplateGen Beta (Script)<\/a> un script Photoshop pour d\u00e9marrer un projet \u00e0 partir d\u2019une template. Pour le moment sont disponibles les grilles 960, une template iOS d\u2019ic\u00f4nes et OSX mais il est possible d\u2019en ajouter. C\u2019est une beta, mais le script est tr\u00e8s prometteur<\/p>\n

#Freebies #WordPress<\/p>\n

Photomin – Responsive HTML Template <\/a>la template WordPress \u00e0 t\u00e9l\u00e9charger gratuitement ce mois sur Themeforest<\/p>\n

#Font<\/p>\n

mathlete<\/a>\u00a0une police d\u2019\u00e9criture \u00e9crite \u00e0 la main \u00e0 t\u00e9l\u00e9charger gratuitement<\/p>\n

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

#Icons<\/p>\n

ui-icons<\/a>\u00a0un pack de 704 ic\u00f4nes disponibles en couleur pleines et contour fin pour vos projets<\/p>\n

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

#CSS<\/p>\n

Reactive CSS transition <\/a>une petite d\u00e9mo de la possibilit\u00e9 des transitions, amusez vous \u00e0 cliquer sur les losanges et admirez le r\u00e9sultat<\/p>\n

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

#Vulgarisation #Mobilit\u00e9<\/p>\n

lesgrosmotsdumobile.com<\/a>\u00a0un dictionnaire pour expliquer les mots que l\u2019on utilise souvent dans le jargon de la mobilit\u00e9 qui peuvent para\u00eetre totalement abstraits \u00e0 un client ou utilisateur ext\u00e9rieur<\/p>\n

Et la d\u00e9mo woua de la semaine,\u00a0Brackets: From Design Comp to Code\u00a0<\/a>qui montre quelques futures possibilit\u00e9s de l’\u00e9diteur d’Adobe<\/p>\n

 <\/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.Mobilit\u00e9, mobilit\u00e9, et mobilit\u00e9 seront les ma\u00eetres mots de la semaine : des techniques d’images responsive tr\u00e8s pouss\u00e9es \u00e0 base de hack de SVG et un polyfill d’image responsive chez Zurb \u00e0 base de balise image pour les int\u00e9grateurs en passant par de l’inspiration de navigation optimis\u00e9e mobile pour les designer par \u00a0la coh\u00e9rences des zones d\u2019interaction sur mobile et sur bureau …<\/p>\n","protected":false},"author":3,"featured_media":1598,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[],"class_list":["post-1597","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-veille-liens-utiles"],"yoast_head":"\nDes pixels et du code #65 - par St\u00e9phanie Walter - UX Researcher & Designer<\/title>\n<meta name=\"description\" content=\"Solution d'images et inspirations de navigation responsive adapt\u00e9es au mobile, ic\u00f4nes, templates gratuites, scripts Photoshop et graphiste gratuit\" \/>\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-65\/\" \/>\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 #65 - par St\u00e9phanie Walter - UX Researcher & Designer\" \/>\n<meta property=\"og:description\" content=\"Solution d'images et inspirations de navigation responsive adapt\u00e9es au mobile, ic\u00f4nes, templates gratuites, scripts Photoshop et graphiste gratuit\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-65\/\" \/>\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-06-07T06:46:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-06-08T07:21:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2013\/06\/pixelcode65.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=\"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-65\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-65\/\",\"name\":\"Des pixels et du code #65 - 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-65\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-65\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/06\/pixelcode65.jpg\",\"datePublished\":\"2013-06-07T06:46:35+00:00\",\"dateModified\":\"2013-06-08T07:21:10+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"Solution d'images et inspirations de navigation responsive adapt\u00e9es au mobile, ic\u00f4nes, templates gratuites, scripts Photoshop et graphiste gratuit\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-65\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-65\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/06\/pixelcode65.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/06\/pixelcode65.jpg\",\"width\":700,\"height\":200,\"caption\":\"Des pixels et du code #65\"},{\"@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 #65 - par St\u00e9phanie Walter - UX Researcher & Designer","description":"Solution d'images et inspirations de navigation responsive adapt\u00e9es au mobile, ic\u00f4nes, templates gratuites, scripts Photoshop et graphiste gratuit","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-65\/","og_locale":"fr_FR","og_type":"article","og_title":"Des pixels et du code #65 - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"Solution d'images et inspirations de navigation responsive adapt\u00e9es au mobile, ic\u00f4nes, templates gratuites, scripts Photoshop et graphiste gratuit","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-65\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2013-06-07T06:46:35+00:00","article_modified_time":"2013-06-08T07:21:10+00:00","og_image":[{"width":700,"height":200,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2013\/06\/pixelcode65.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":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-65\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-65\/","name":"Des pixels et du code #65 - 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-65\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-65\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/06\/pixelcode65.jpg","datePublished":"2013-06-07T06:46:35+00:00","dateModified":"2013-06-08T07:21:10+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"Solution d'images et inspirations de navigation responsive adapt\u00e9es au mobile, ic\u00f4nes, templates gratuites, scripts Photoshop et graphiste gratuit","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-65\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-65\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/06\/pixelcode65.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/06\/pixelcode65.jpg","width":700,"height":200,"caption":"Des pixels et du code #65"},{"@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\/1597","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=1597"}],"version-history":[{"count":0,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/1597\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/1598"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=1597"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=1597"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=1597"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}