Des pixels et du code #38
Beaucoup de lecture puisque la majorité de mes liens de la semaine sont des articles à lire : UX et interface mobile, border-radius, typographie et le prix d’un site web, sans oublier des icônes gratuites, des templates pour faire du wireframe et quelques tutoriels sympas.
Les tutoriels de la semaine
#jQuery
jQuery Mouseover Effect Using Parallax Style Tutorial un tutoriel pour faire de la parallaxe au mousehover, je m’étais souvent demandée comment certains sites arrivent à ce résultat
#Image Retina
Du Retina et HD pour votre site web : image-set, picture et srcset un résumé de plusieurs techniques possible pour placer des images retina dans le CSS ou la balise img de votre site
#Canva Sprites
DOM Sprites: A Viable Alternative to Canvas un petit rappel sur le fait qu’il est possible de créer des jeux avec des sprites et des divs sans utiliser des canvas, technique qui parfois apporte de meilleurs performance que les canvas.
Des ressources utiles
#Icons
batch 300 icônes gratuites pour vos projets.
iconbench.com un générateur en ligne qui permet de choisir le style, la couleur des icones, les icones puis les télécharger avec une démo et une option sprites
#ressources
Agiledesigners.com des ressources pour webdesigner : freebies mais aussi outils en lignes et ressources utiles
#Newsletter iOS
Two ways to ensure that your entire email is rendered by default in the iPhone & iPad ou comment résoudre le problème présent sur les clients iPhone et iPad d’email chargé partiellement, avec le bouton “il reste xxx bytes” sous la ligne de flotaison.
#Sketches
interfacesketch.tumblr.com une collection de templates gratuites pour faire du sketch d’interface mobile ou desktop
#CSS
20 Mobile/Desktop Browser bugs and tricks any Senior Frontend Web Developer should know , ou 20 astuces CSS pour les mobiles, le desktop (même IE5.5 bien que je ne vois plus trop l’intérêt) qui pourraient vous être utiles.
Les outils et plugins pour vous faciliter la vie
#Sublime Text
Colour-schemes, des thèmes de couleur supplémentaires pour Sublime text
#Script Illustrator
Scripts for Adobe Illustrator CS une liste de scripts en JavaScript pour faciliter le travail sur Illustrator, j’aime beaucoup le “adjust dashes” qui permet de faire de jolis pointillés reliés aux coins
Les articles à lire
#Webdesign
Combien cela coûte de faire designer son site web? , un article en Français une fois n’est pas coutume pour expliquer le prix d’un webdesign
#Ergonomie
Ergonomie web : les mythes et légendes ont la vie dure… 12 mythes et légendes dans le domaine de l’ergonomie
#IE10
IE10 CSS Hacks , les hacks CSS c’est pas génial, mais c’est toujours intéressant de voir ce que les gens ont trouvé pour ne cibler que IE10
#Webdesign
Using Transparency in Web Design: Dos and Don’ts des conseils, astuces et exemples pour utiliser la transparence avec parcimonie dans vos designs
#UX
Hamburgers & Basements: Why Not to Use Left Nav Flyouts l’avis d’un designer d’interface sur ce système de navigation venue de Facebook ou Path qui consiste en un panneau caché à gauche, et pourquoi il pense que ce n’est pas une bonne idée.
Bad, outdated UX will be rejected by users : ou comment expliquer que la nouvelle application Outlook soit aussi mal notée sur le market Android
#mobile input
Collecting Payment Information Within a Single Input l’idée de “masques d’input” dans les champs pour les données segmentées (comme les dates ou informations bancaires de carte de crédit) pour que l’utilisateur soit guidé et ne se trompe pas lorsqu’il rempli.
#border-radius
Getting Inner Border Radius Just Right une explication mathématique accompagnée d’un outil de calcule pour des bords arrondis cohérents
Les démos sympas et impressionnantes
#Webapp
Une démonstration en vidéo d’un application utilisant le framework famous, ça a l’air fluide et très prometteur
Pour finir le projet www.coloradd.net qui propose 5 symboles pour identifier les couleurs et aider les personnes daltoniennes au quotidien.
