{"id":885,"date":"2012-09-20T20:00:08","date_gmt":"2012-09-20T18:00:08","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=885"},"modified":"2014-03-09T11:58:07","modified_gmt":"2014-03-09T10:58:07","slug":"des-pixels-et-du-code-28","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-28\/","title":{"rendered":"Des pixels et du code #28"},"content":{"rendered":"<div class=\"juiz-outdated-message jodpm-top\">Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 14 ans. Il se peut qu'il ne soit plus \u00e0 jour.<\/div><p dir=\"ltr\">Et le mot de la semaine est&#8230; \u00ab\u00a0responsive webdesign\u00a0\u00bb ! Des tutoriels, des plugins, des sliders, des solutions pour les images ou pour d\u00e9tecter le User Agent de l&rsquo;appareil, tout pour vous aider \u00e0 afficher votre site correctement sur mobile. \u00c7a tombe bien, en plus des PSDs iPhone 5 sont diponibles.<\/p>\n<h2 dir=\"ltr\">Les tutoriels de la semaine<\/h2>\n<p>#WordPress<\/p>\n<p><a href=\"http:\/\/wplift.com\/make-wordpress-themes-retina-display-ready\">How To: Make Your WordPress Themes Retina Display Ready <\/a>quelques plugins utiles et th\u00e8mes pour avoir un WordPress dont les images sont en retina sur les appareils qui le supportent<\/p>\n<p>#RWD<\/p>\n<p><a href=\"http:\/\/webdesign.tutsplus.com\/tutorials\/site-elements\/big-menus-small-screens-responsive-multi-level-navigation\/\">Big Menus, Small Screens: Responsive, Multi-Level Navigation<\/a> un tutoriel qui propose une solution responsive pour un gros menu \u00e0 trois niveaux<\/p>\n<p>#Fireworks<\/p>\n<p><a href=\"http:\/\/www.netmagazine.com\/tutorials\/make-scalable-newsletter-fireworks\">Make a scalable newsletter with Fireworks un tutoriel pour cr\u00e9er le design d\u2019une newsleter dans Fireworks\u00a0<\/a><\/p>\n<p>#SVG<\/p>\n<p><a href=\"http:\/\/www.alsacreations.com\/tuto\/lire\/1482-un-logo-cliquable-svg-avec-alternatives.html\" target=\"_blank\">Un logo cliquable SVG avec alternatives<\/a>, la version fran\u00e7aise de mon article.<\/p>\n<h2 dir=\"ltr\">Des ressources utiles<\/h2>\n<p>#JS #SVG<\/p>\n<p><a href=\"http:\/\/bonsaijs.org\/\">Bonsaijs.org<\/a> une librairie JavaScript pour cr\u00e9e facilement des API graphiques avec un rendu SVG<br \/>\n#RWD<\/p>\n<p><a href=\"http:\/\/matthewhartman.github.com\/base\/\">Base<\/a> un framework responsive qui a l\u2019air tr\u00e8s l\u00e9ger<\/p>\n<p>#Bootstrap<\/p>\n<p><a href=\"http:\/\/bootsnipp.com\/\">Bootsnipp.com<\/a> un petit site qui r\u00e9pertorie des bouts de code HTML et CSS pour Bootstrap<\/p>\n<p>#Googlefont<\/p>\n<p><a href=\"http:\/\/www.igvita.com\/2012\/09\/12\/web-fonts-performance-making-pretty-fast\/\">Web Fonts Performance: Making Pretty, Fast<\/a>, des conseils et astuces pour optimiser le chargement de vos polices Google Font<\/p>\n<p>#CSS3<\/p>\n<p><a href=\"http:\/\/muddledramblings.com\/table-of-css3-border-radius-compliance\/\">Table of CSS3 border-radius Compliance<\/a>, un tableau des rendus de border-radius en CSS3 en fonction des navigateurs.<\/p>\n<p>#iPhone PSD<br \/>\n<a href=\"http:\/\/www.creativejuiz.fr\/blog\/ressources-telechargements\/ressources-vectorielles-psd-images-iphone5-smartphone\">Ressources vectorielles, PSD, images de l\u2019iPhone5 et autres smartphones<\/a> , tout est dans le titre, des PSD et ressources utiles pour le nouvel iPhone chez Creativ Juiz<\/p>\n<p><a href=\"http:\/\/dribbble.com\/shots\/727175-iPhone-5-Template\">iPhone-5-Template<\/a> une template d\u2019iPhone5 pour pr\u00e9senter vos applications sous un autre angle<\/p>\n<h2 dir=\"ltr\">Les outils \u00a0et plugins pour vous faciliter la vie<\/h2>\n<p>#jQuery<\/p>\n<p><a href=\"http:\/\/megaptery.com\/allofthelights\/\">Allofthelights.js<\/a>, un plugin jQuery pour \u201c\u2018\u00e9teindre la lumi\u00e8re\u201d autour des vid\u00e9os, entendez pas l\u00e0 mettre un arri\u00e8re plan noir.<\/p>\n<p><a href=\"http:\/\/tsvensen.github.com\/equalize.js\/\">Eualize.js<\/a> un plugin pour \u00e9galiser la hauteur ou largeur d\u2019\u00e9l\u00e9ments d\u2019une page web<\/p>\n<p>#RWD<\/p>\n<p><a href=\"http:\/\/jquerypicture.com\/\">Jquerypicture.com<\/a> un plugin jQuery qui utilise &lt;figure&gt; pour faciliter le chargement d\u2019images responsive sur des \u00e9crans et navigateurs plus petits<\/p>\n<p><a href=\"http:\/\/www.egrappler.com\/full-screen-responsive-jquery-image-and-content-sliderrslider\/\">Full-screen-responsive-jquery-image-and-content-sliderrslider <\/a>un slider responsive en plein \u00e9cran l\u00e9ger et facile \u00e0 impl\u00e9menter<\/p>\n<p><a href=\"http:\/\/www.frescojs.com\/\">Frescojs.com<\/a> un plugin de lightbox responsive<\/p>\n<p><a href=\"http:\/\/www.uxde.net\/2012\/09\/08\/responsive-jquery-image-slider-plugins\/\">Responsive jquery image slider plugins<\/a> au cas o\u00f9 vous n\u2019auriez toujours pas trouv\u00e9 de slider responsive qui vous plaise<\/p>\n<p>#Mobilit\u00e9<\/p>\n<p><a href=\"https:\/\/github.com\/matthewhudson\/device.js\/blob\/master\/device.js\">Device.js<\/a> un script qui d\u00e9tect le User Agent de votre mobile et ajoute \u00a0une classe au body en fonction.<\/p>\n<h2 dir=\"ltr\">Les articles \u00e0 lire<\/h2>\n<p>#UX<\/p>\n<p><a href=\"http:\/\/uxui.fr\/2012\/09\/au-dela-du-web-le-portant-de-piscine-ou-lexperience-utilisateur-au-quotidien\/\">Au del\u00e0 du web : le portant de piscine* ou l\u2019exp\u00e9rience utilisateur au quotidien<\/a> un chouette article qui nous rappelle que dans la vie courante, l\u2019exp\u00e9rience utilisateur de certains objets devrait \u00eatre revue, et il en va de m\u00eame pour certains sites webs<\/p>\n<p>#WordPress<\/p>\n<p><a href=\"http:\/\/www.boiteaweb.fr\/les-10-commandements-pour-bien-choisir-son-plugin-wordpress-3567.html\">Les 10 commandements pour bien choisir son plugin WordPress<\/a> , \u00e0 lire, \u00a0mettre en favoris et appliquer pour chaque choix de plugin.<\/p>\n<p>#Android<\/p>\n<p><a href=\"http:\/\/www.androidpolice.com\/2012\/09\/18\/ux-things-i-hate-about-android\/\">Stock Android Isn&rsquo;t Perfect: These Are The Things I Can&rsquo;t Stand About Jelly Bean <\/a>m\u00eame si l\u2019UI et UX d\u2019Android s\u2019am\u00e9liorent, il reste du boulot. Moi c\u2019est avec les icones copier\/coller que j\u2019ai le plus de mal :\/<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 14 ans. Il se peut qu&rsquo;il ne soit plus \u00e0 jour.Et le mot de la semaine est&#8230; \u00ab\u00a0responsive webdesign\u00a0\u00bb ! Des tutoriels, des plugins, des sliders, des solutions pour les images ou pour d\u00e9tecter le User Agent de l&rsquo;appareil, tout pour vous aider \u00e0 afficher votre site correctement sur mobile. \u00c7a tombe bien, en plus des PSDs iPhone 5 sont diponibles. Les tutoriels de la semaine #WordPress How To: Make Your WordPress &hellip;<\/p>\n","protected":false},"author":3,"featured_media":886,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[],"class_list":["post-885","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-veille-liens-utiles"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Des pixels et du code #28 - par St\u00e9phanie Walter - UX Researcher &amp; Designer<\/title>\n<meta name=\"description\" content=\"Rresponsive webdesign : des tutoriels, des plugins, des sliders, des solutions pour les images ou pour d\u00e9tecter le User Agent de l&#039;appareil, etc.\" \/>\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-28\/\" \/>\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 #28 - par St\u00e9phanie Walter - UX Researcher &amp; Designer\" \/>\n<meta property=\"og:description\" content=\"Rresponsive webdesign : des tutoriels, des plugins, des sliders, des solutions pour les images ou pour d\u00e9tecter le User Agent de l&#039;appareil, etc.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-28\/\" \/>\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=\"2012-09-20T18:00:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-03-09T10:58:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2012\/09\/pixeletcode28.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=\"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\/des-pixels-et-du-code-28\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-28\/\",\"name\":\"Des pixels et du code #28 - 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-28\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-28\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/09\/pixeletcode28.jpg\",\"datePublished\":\"2012-09-20T18:00:08+00:00\",\"dateModified\":\"2014-03-09T10:58:07+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"Rresponsive webdesign : des tutoriels, des plugins, des sliders, des solutions pour les images ou pour d\u00e9tecter le User Agent de l'appareil, etc.\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-28\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-28\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/09\/pixeletcode28.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/09\/pixeletcode28.jpg\",\"width\":700,\"height\":200},{\"@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&#039;utilisabilit\u00e9 et l&#039;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 &amp; 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 #28 - par St\u00e9phanie Walter - UX Researcher & Designer","description":"Rresponsive webdesign : des tutoriels, des plugins, des sliders, des solutions pour les images ou pour d\u00e9tecter le User Agent de l'appareil, etc.","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-28\/","og_locale":"fr_FR","og_type":"article","og_title":"Des pixels et du code #28 - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"Rresponsive webdesign : des tutoriels, des plugins, des sliders, des solutions pour les images ou pour d\u00e9tecter le User Agent de l'appareil, etc.","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-28\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2012-09-20T18:00:08+00:00","article_modified_time":"2014-03-09T10:58:07+00:00","og_image":[{"width":700,"height":200,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2012\/09\/pixeletcode28.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\/des-pixels-et-du-code-28\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-28\/","name":"Des pixels et du code #28 - 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-28\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-28\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/09\/pixeletcode28.jpg","datePublished":"2012-09-20T18:00:08+00:00","dateModified":"2014-03-09T10:58:07+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"Rresponsive webdesign : des tutoriels, des plugins, des sliders, des solutions pour les images ou pour d\u00e9tecter le User Agent de l'appareil, etc.","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-28\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-28\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/09\/pixeletcode28.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/09\/pixeletcode28.jpg","width":700,"height":200},{"@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&#039;utilisabilit\u00e9 et l&#039;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 &amp; 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\/885","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=885"}],"version-history":[{"count":0,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/885\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/886"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=885"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=885"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=885"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}