Des pixels et du code #65
Mobilité, mobilité, et mobilité seront les maîtres mots de la semaine : des techniques d’images responsive très poussées à base de hack de SVG et un polyfill d’image responsive chez Zurb à base de balise image pour les intégrateurs en passant par de l’inspiration de navigation optimisée mobile pour les designer par la cohérences des zones d’interaction sur mobile et sur bureau au petite dictionnaire en français pour « vulgariser » les termes pour les clients et néophytes. Pour les autres, il reste des freebies icônes, templates, de l’inspiration, des images gratuites, des scripts Photoshop, bref de quoi occuper largement vos weekend, un verre de jus de fruit à la main. Bonne lecture :)
Les articles à lire
#UI
Oh, my aching UI. un exemple d’interface d’ascenseur, loin du web, et comment le manque de cohérence entre deux “interfaces” qui se ressemble peut mener à la confusion
#UX #Mobile
Mobile Product Lists Need Very Distinct Hit Areas ou l’importance en mobilité (mais également sur le web) d’avoir des liens cohérents, qui ressemblent à des liens pour éviter la confusion des utilisateurs surtout si il y a plusieurs actions différentes possibles sur une même zone
#Accessibilité
8 Myths About How Blind People Use the Internet 8 préjugés que l’on pourrait avoir sur la façon dont les utilisateurs en situation de déficience visuelle forte visitent un site web
#Histoire du design
Design in a nutshell – 6 petites vidéos pour en apprendre plus sur 6 mouvements dans l’histoire du design
#Images Responsive
Clown Car Technique: Solving Adaptive Images In Responsive Web Design un proposition de hack de l’élément SVG pour y encapsuler différentes images qui se chargeront en fonction des media queries. Il s’agit là d’une solution pas vraiment stable, mais l’idée et le cheminement de l’auteur pour en arriver là n’en restent pas moins intéressants. Et en complément, l’article The Raster Image Paradox où David Bushell explique sa position (que je partage) sur les images adaptives, à savoir que toutes les solutions actuelles sont des hacks et qu’au final ne rien faire pour proposer des images en haute résolution n’est peut-être pas si mal que ça (en fonction du projet, budget, et contraintes du client)
#Graphiste
Free Graphic Design « I’m Jeff, I’m a graphic designer and I’m never sarcastic » – le résumé de la vie d’un graphiste dans une petite vidéo :)
HTML Email – The Biggest Mistake la plus grosse erreur faite dans le design de newsletter selon l’auteur est la sur-utilisation d’images qui sont par défaut désactivés dans beaucoup de clients mail.
#Responsive Webdesign
Responsive Webdesign – présent et futur de l’adaptation mobile la traduction de mon article paru semaine dernière sur Smashing Magazine traitant du future du responsive webdesign est disponible sur Alsacréations.
Inspiration
#Mobile
tallchess.com un jeu d’échecs avec un design très sympa
#Navigation moblie
20+ responsive mobile navigations une sélection d’élégantes solutions d’optimisation de navigation sur petits écrans
70 Stunning Responsive Sites for Your Inspiration la même, mais cette fois avec 70 navigations
#Site d’agence
mry.com un site d’agence haut en couleur, acidulé avec un peu d’animation comme on les aimes
Les tutoriels de la semaine
#Emailing
The Little Guide to HTML Email un petit guide de bonnes pratiques pour vous faciliter la création de templates de mail en HTML
Des ressources utiles
#Webdesign
Web Design and Mobile Trends for 2013 eBook: download it for free! un petit PDF à télécharger sur les tendances du web et du mobile pour 2013
#Images responsive
Interchange une solution d’images responsive proposée 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
#Photos
unsplash.com tous les 10 jours, 10 photos en haute résolution et libres de droits à utiliser pour vos créas. Une bien belle idée
#Photoshop
TemplateGen Beta (Script) un script Photoshop pour démarrer un projet à partir d’une template. Pour le moment sont disponibles les grilles 960, une template iOS d’icônes et OSX mais il est possible d’en ajouter. C’est une beta, mais le script est très prometteur
#Freebies #WordPress
Photomin – Responsive HTML Template la template WordPress à télécharger gratuitement ce mois sur Themeforest
#Font
mathlete une police d’écriture écrite à la main à télécharger gratuitement
Les outils et plugins pour vous faciliter la vie
#Icons
ui-icons un pack de 704 icônes disponibles en couleur pleines et contour fin pour vos projets
Les démos sympas et impressionnantes
#CSS
Reactive CSS transition une petite démo de la possibilité des transitions, amusez vous à cliquer sur les losanges et admirez le résultat
Et s’il devait n’en rester qu’un ?
#Vulgarisation #Mobilité
lesgrosmotsdumobile.com un dictionnaire pour expliquer les mots que l’on utilise souvent dans le jargon de la mobilité qui peuvent paraître totalement abstraits à un client ou utilisateur extérieur
Et la démo woua de la semaine, Brackets: From Design Comp to Code qui montre quelques futures possibilités de l’éditeur d’Adobe
