Des pixels et du code #46
Que vous soyez graphiste, designer, intégrateur, développeur ou expert accessibilité, vous devriez trouver votre bonheur dans les ressources et outils de la semaine qui ont été très nombres : images de fond pour e-mail, icônes, site dédié à l’accessibilité et au test des contrastes, patterns HTML et présentation de maquettes aux clients, etc. Sans oublier les articles de fond sur les performances, le z-index, et l’expérience utilisateur des carrousels et listes déroulantes.
Les tutoriels de la semaine
#CSS3
Animating the new parse about page une petite explication sur le fonctionnement de l’animation CSS3 de la page “about” de parse
Un e-mail en HTML responsive multi-clients mon article sur alsacréations sur l’intégration d’e-mail et newsletter pour un support optimal sur différents navigateurs
Des ressources utiles
#A11Y
A11yproject.com un projet qui vise à mettre en avant l’accessibilité sur le web
#E-mailing
Bulletproof Email Background Images un petit outil qui prépare le code pour des images de fond en CSS compatibles avec les principaux clients mail même Outlook
#Icônes
Maki des icônes pour mettre sur des plans et des cartes
#UX
Empty States un tumblr qui rassemble des designs de “page vide”, cette page qui apparait avant que l’utilisateur ai entré des données
#Mobile
How Long Does it Take to Build a Mobile App? une infographie qui montre le temps nécessaire pour créer une application mobile (après consultation avec plus de 100 devs). Spoiler : 18 semaines.
#Emmet
Cheat-sheet un récapitulatif de la syntaxe pour utiliser Emmet (anciennement Zen-Coding)
#jQuery UI
jQuery UI Touch Punch permet d’ajouter le support pour le touch sur les éléments jQueryUI
Les outils et plugins pour vous faciliter la vie
#Webdesign
Flatsi.es un outil en ligne pour présenter les maquettes d’un projet à un client pour qu’il puisse y laisser des commentaires
#HTML
Kawwa.atosworldline.com un condensé de 50 patterns HTML et code prêts à être utilisés, très utile pour commencer rapidement un projet ou si vous cherchez du code “placeholder” pour une démo
#A11Y
Checkmycolours.com un outil qui vous permet de tester le contraste de tous les éléments d’un site sur leur fond d’un coup
#Mobile
Mobiscroll.com un plugin jQuery qui propose plusieurs types de picker qui imitent les pickers natifs. Même si je ne vois pas trop l’intérêt d’imiter un picker natif avec du JavaScript, ça peut servir sur certains projets. J’aime beaucoup la démo “diablo”.
Les articles à lire
#Développement Recrutement
If Carpenters Were Hired Like Programmers, une métaphore qui se joue des demandes farfelues de certains recruteurs lors des entretiens d’embauche et de la sur-spécification demandée pour certains postes
#CSS
What No One Told You About Z-Index une petite clarification sur cette propriété que beaucoup utilisent mais dont les specs ne sont au final pas si simples que ça
#Performances
Front-end performance for web designers and front-end developers , un article très complet quoi qu’un peu technique sur les performances des sites web côté navigateur
#Photoshop
Strokes in Photoshop CS6 une comparaison de rendu de nouvel outil de Photoshop qui permet d’ajouter des bordures face aux bordures dans les calques d’effets
#SASS
The Absolute Beginner’s Guide to Sass un petit guide du débutant SASS, même si je n’ai pas encore vraiment eut le temps de me pencher totalement sur le sujet, l’article présente les principes de base de ce préprocesseur CSS.
#Webdesign
The Post-PSD Era un article de Brad Frost qui sousligne les avantages et surtout lacunes de Photoshop dans notre processus de design moderne
Almost Flat Design un juste milieu entre le “flat design” (modern UI style chez Windows) et le skeumorphism (Apple) est-il possible ? Quelques exemples et réflexions sur le sujet
#Typographie
Fontosaure.tumblr.com un petit tumblr plein d’inspiration pour les graphistes fans de typographie
#UX
Stop Misusing Select Menus un article qui explique quand utiliser ou ne pas utiliser la balise <select>
Carousels l’avis de Brad Frost sur l’utilisation des carousels sur un site web et quelques conseils pour les rendre plus efficaces et utilisables si vraiment vous voulez les utiliser
Et le lien fun de la semaine, un petit générateur de bonnes excuses pour développeurs : http://dex.creakiwi.com/
