Des pixels et du code #56

Malgré les poissons d’avril de début de semaine, encore une semaine riche en tutoriels CSS, ressources utiles notamment si vous êtes fans d’icônes et  de « launch icon » iOS, quelques outils pour vous faciliter le rythme vertical en typographie et action Photoshop et des articles de fond sur le vol d’article, la posture de vos collègues en réunion illustré par des peluches, de l’ergonomie, du responsive webdesign et une jolie vidéo d’inspiration pour la typographie. Bonne lecture.

Les tutoriels de la semaine

#SVG #Media queries

Media Queries in SVG images il est possible de mettre des media-queries à l’intérieur des SVG pour changer des couleurs, formes, etc. , avec une petite démo de Pascal pour mieux comprendre le concept.

#CSS3

CSS Masking un petit tutoriel sur l’utilisation de clip et clip-path en CSS pour créer des effets avec des formes.

Des ressources utiles

#Icônes

Skyicons un petite librairies d’icônes de météo animées en canvas HTML5 et JavaScript

20 Free Web Icon & Glyph Packs for Your UI Designs au cas où vous n’auriez pas encore trouvé de pack d’icône qui réponde à vos besoins, en voici 20 :)

iicns.com une galerie d’icônes iOS pour votre inspiration

Les outils  et plugins pour vous faciliter la vie

#Checkbox

iCheck un plugin jQuery très léger qui permet de styler les checkbox et boutons radio tout en gardant l’accessibilité au clavier

#Typography

Em Baseline Generator  un petit outil en ligne pour tester de manière “visuelle” différentes tailles de police et line-height et garder le rythme vertical de la page

#Photoshop

Photoshop action: Remove compositing artifacts & banding une petite action Photoshop pour nettoyer vos réalisations des artefacts et banding

Les articles à lire

#Meeting

How People Sit in Meetings and What it Really Means une petite liste illustrée et très drôle des postures de vos collaborateurs en réunion et leur signification

#Copyright

Vol d’article et contenu dupliqué un petit article qui rappelle quelques principes de base sur le contenu dupliqué (ou volé de votre site) et comment luter contre

#Ergonomie

Il ne faut pas prendre des gens pour des cons mais ne jamais oublier qu’ils en sont un petit article plein d’humour et pourtant très vrai sur nos utilisateurs, au final les “power user” et geek sont très peu nombreux sur les sites “classiques”. J’aime beaucoup la phrase “Oui, la notion de peur est importante. Les utilisateurs ont peur sur une machine. Ils sont stressés.” qui résume assez bien beaucoup d’utilisateurs.

#Responsive Webdesign

A Response to ‘Responsive Web Design is Not the Future’ Brad Forst répond à l’article sur Sixrevision “Responsive Web Design is Not the Future” point par point

#Compression

La compression d’images par les opérateurs un article qui m’a scotché, testé par Rémi (Hteumeuleu) sur l’envoie de newsletter, apparemment certains opérateurs compressent les images différemment. Les rendus sur le GIF est édifiant.

#Responsive

8 Guidelines and 1 Rule for Responsive Images bonnes pratiques et conseils utiles pour une stratégie d’images responsive pour les sites optimisés mobile et tablette

#Navigateur

Blink: A rendering engine for the Chromium project vous avez difficilement pu passer à côté cette semaine, Chrome fork webkit pour créer un nouveau moteur de rendu appelé « blink »

Inspiration

#Typographie

Urban Type Collection une collection de photos de lettres prises dans la rue sur différents panneaux, affiches, etc

#Café

rainycafe.com des études montrent que que le bruits ambiants boostent la créativité, ce petit site propose des bruits de pluie et de café

#Comic Book

Comic Book Illustrations Into the Real World des illustrations géantes qui interagissent avec leur dessinateur, visuellement très sympa

Les démos sympas et impressionnantes

#Typographie

Sketchbook Inspiration une très jolie vidéo de traçage de lettres à l’encre

#CSS

distancetomars.com la distance de la terre à mars en pixel, une petite expérience très sympa

Et s’il devait n’en rester qu’un ?

Poisson d’avril oblige cette semaine le lien qu’il ne fallait pas manquer est un clin d’oeil nostalgique aux débuts du web avec un thème Bootstrap Geocity like.