{"id":1733,"date":"2013-07-26T08:49:04","date_gmt":"2013-07-26T06:49:04","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=1733"},"modified":"2013-07-26T09:46:40","modified_gmt":"2013-07-26T07:46:40","slug":"des-pixels-et-du-code-72","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-72\/","title":{"rendered":"Des pixels et du code #72"},"content":{"rendered":"
Exp\u00e9rience utilisateur et Responsive Webdesign sont les deux grand th\u00e9matiques de la semaine : dark patterns illustr\u00e9es par des exemples de vrais sites, am\u00e9lioration de l’exp\u00e9rience utilisateur par de petites modifications de l’interface, tester des sites responsive sur Chrome et Firefox sans plugins, outils pour cr\u00e9er une navigation responsive ou encore une newsletter responsive, vous aurez de quoi lire. Sans oublier les autres ressources, de l\u2019inspiration, articles sur les bonnes pratiques pour les liens hypertextes et de contraste de site et les d\u00e9monstrations HTML\/CSS impressionnantes. Bonne lecture :)<\/p>\n
#UX<\/p>\n
Step-by-Step UX Improvement<\/a> l\u2019auteur explique de cet article comment il a am\u00e9lior\u00e9 l\u2019UX de la page \u201cprojet\u201d de son application pas \u00e0 pas<\/p>\n The slippery slope<\/a> un article sur les \u201cdark patterns\u201d en exp\u00e9rience utilisateur illustr\u00e9 par des vrais exemples de sites.<\/p>\n Careful with Those Cards!<\/a> on voit de plus en plus de sites adopter le design en \u201ccartes\u201d ou briques (Pinterest) avec une collection impressionnante de plugins jQuery pour le cr\u00e9er facilement, mais est-il adapt\u00e9 \u00e0 mon projet? \u00c7a d\u00e9pend ..<\/p>\n Manipulation and Design<\/a> pr\u00e9sente et analyse deux exemples de designs qui manipulent l\u2019utilisateur \u00e0 ses d\u00e9pends et au profite du service en questions. J\u2019aime beaucoup la phrase de conclusion \u201c Fundamentally, it\u2019s about taking responsibility for the things we unleash in the world.\u201d<\/p>\n #Trademark #URL<\/p>\n Trademark symbols in URLs<\/a>\u00a0 il est apparement possible d\u2019encoder les symboles \u00a0\u2122 (Trademark) et \u00ae (Registered Trademark) dans les urls (test\u00e9 sous Chrome et Firefox, ne passe pas sous Internet Explorer 10)<\/p>\n #Case study<\/p>\n \u201cThis Is How We Built It\u201d Case Studies<\/a> si comme moi vous \u00eates fans d\u2019\u00e9tudes de cas et retours d\u2019exp\u00e9rience, vous allez adorer cet article qui en ressemble plus d\u2019une trentaine<\/p>\n #Liens Hypertext<\/p>\n Signal\u00e9tique des hyperliens<\/a> un r\u00e9sum\u00e9 de l\u2019histoire de la couleur des liens et un r\u00e9sum\u00e9 de bonnes pratiques pour cr\u00e9er des liens hypertextes dont l\u2019apparence sera compr\u00e9hensible par le maximum d\u2019utilisateurs<\/p>\n #Navigation responsive<\/p>\n Progresponsive<\/a> cr\u00e9er quelque chose de simple, puis l\u2019am\u00e9liorer progressivement, \u00a0Jeremy Keith met en avant l\u2019am\u00e9lioration progressive pour cr\u00e9er des navigations responsive simples qui fonctionnent dans le plus de configurations possibles<\/p>\n #Publicit\u00e9<\/p>\n Virgin Megastore : les 12 prints de l\u2019ultime campagne publicitaire ! <\/a>une campagne de publicit\u00e9 qui allie \u00e0 chaque fois un livre et un film dans d’audacieux m\u00e9langes pour certains tr\u00e8s os\u00e9s et sarcastiques<\/p>\n #Contrast<\/p>\n Contrastrebellion.com<\/a>\u00a0en plus d\u2019\u00eatre visuellement tr\u00e8s sympa, explique en quoi le contraste des textes d\u2019un site c\u2019est ce qui va au final le rendre lisible ou non<\/p>\n #SVG #Illustrator<\/p>\n Export Illustrator Layers to SVG files<\/a> \u00a0est une am\u00e9lioration du script Multiexport<\/a> qui permet d\u00e9sormais d\u2019exporter les artboards et les calques en fichiers .SVG individuels<\/p>\n #Application #Ic\u00f4ne<\/p>\n Appicontempate.com<\/a>\u00a0vous propose des templates .PSD pour cr\u00e9er les ic\u00f4nes pour des applications iOS et Android<\/p>\n #Responsive #Navigation<\/p>\n Responsivenavigation.net<\/a>\u00a0rassemble diff\u00e9rents types de navigation responsive avec le code en exemple. Vous pouvez \u00e9galement en retrouver quelques uns sur Mobile Nav <\/a>(par Rapha\u00ebl Goetter)<\/p>\n #Firefox #Responsive<\/p>\n Am\u00e9liorer le mode \u00ab Vue adaptative \u00bb de Firefox <\/a>une astuce pour ajouter des pr\u00e9s\u00e9lection \u00e0 la liste de vues adaptatives de Firefox, avec une liste d\u2019appareils pr\u00e9-remplie \u00e0 copier\/coller. Et si vous pr\u00e9f\u00e9rez Chrome :\u00a0Tester du responsive sous Chrome sans plugin : 2 astuces<\/a><\/p>\n #Data URI #Performance<\/p>\n On Mobile, Data URIs are 6x Slower than Source Linking (New Research)<\/a> le chargement d\u2019images en Data URI (encodage en base64 d\u2019images) serait jusqu\u2019\u00e0 6 fois plus lent sur mobile que celui d\u2019une mage classique, \u00e0 utiliser donc avec parcimonie<\/p>\n #Typographie<\/p>\n Practicaltypography.com<\/a>\u00a0une liste d\u2019articles pour tout savoir sur la typographie et ses r\u00e8gles (attention de la langue anglaise, certaines r\u00e8gles changent en fran\u00e7ais)<\/p>\n #Framework\u00a0CSS<\/p>\n Getuikit.com<\/a> un framework HTML\/CSS\/JS pour d\u00e9buter un projet qui propose directement un syst\u00e8me de personnalisation basique des templates :\u00a0Customizer<\/a><\/p>\n #Template<\/p>\n Schnaps.it<\/a>\u00a0un g\u00e9n\u00e9rateur de template HTML pour d\u00e9buter un projet web r\u00e9alis\u00e9 par notre super stagiaire !<\/p>\n #Email responsive<\/p>\n Our Favorite Responsive And Mobile Email Resources<\/a> un ensemble de ressources, articles, templates et exemples pour cr\u00e9er des campagnes d\u2019emailing responsive<\/p>\n #Police anim\u00e9e<\/p>\n Franchise<\/a> est une version \u00ab\u00a0anim\u00e9e\u00a0\u00bb de la police d’\u00e9criture Franchise \u00e0 utiliser pour vos cr\u00e9ations vid\u00e9o sous After Effect<\/p>\n #iOS7<\/p>\n Ios7-wireframe-kit<\/a>\u00a0un kit de wireframe pout iOS7 sur Illustrator, logiciel dont je me sers de plus en plus pour cr\u00e9er ce genre de vues pour les clients<\/p>\n #Responsive #Iframe<\/p>\n Embedresponsively.com\u00a0<\/a>un outil en ligne qui vous g\u00e9n\u00e8re le code HTML\/CSS pour des iframes responsive (Youtube, Vimeo, Googlemaps, etc.)<\/p>\n #Preprocesseur<\/p>\n Koala-app.com<\/a>\u00a0un compilateur GUI (avec une interface sans devoir passer par la ligne de code) pour LESS, Sass et Coffeescript<\/p>\n #Jeu #HTML<\/p>\n Play-dot-to.com<\/a>\u00a0un joli petit jeu o\u00f9 il faut relier des points dans le navigateur pour faire une petite image<\/p>\n #Carte<\/p>\n Firebus<\/a>, une carte qui montre en direct la position approximative en temps r\u00e9el des bus \u00e0 San Fransisco<\/p>\n #Checkbox<\/p>\n Ctjdv<\/a> une check-box styl\u00e9e avec un petit \u201cMario\u201d, le clin d\u2019oeil est tr\u00e8s sympa<\/p>\n #Temp\u00e9rature<\/p>\nInspiration<\/h2>\n
Des ressources utiles<\/h2>\n
Des ressources gratuites<\/h2>\n
Les outils \u00a0et plugins pour vous faciliter la vie<\/h2>\n
Les d\u00e9mos sympas et impressionnantes<\/h2>\n