Des pixels et du code #11

Ce contenu a été rédigé il y a 12 ans. Il se peut qu'il ne soit plus à jour.

Les liens à ne pas manquer cette semaine sont une fois de plus très orientés mobilité, mais également UX et UI. Je vous ai également mis deux liens « behind the sceen », où des designers expliquent leurs projets pas à pas. Bonne lecture

Les tutoriels de la semaine

#Responsive

5 Useful CSS Tricks for Responsive Design  5 morceaux de code utiles pour créer des sites responsives

#Mobile

Creating a Mobile Web Application with Meta Tags, pour tout savoir sur les meta name= »viewport » , meta name= »apple-mobile-web-app-capable » et autres meta http-equiv= »X-UA-Compatible » qui permettent de créer des sites opitimisés mobiles

Des ressources  utiles

#Android
Android-app-patterns , une gallerie d’application 100% Android !!

#CSS3

Google Play’s minimal tabs with CSS3 & jQuery , un tutoriel pour recréer les onglets du Google Play (anciennement Google store) en CSS3 avec une pointe de jQuery.

Les outils  et plugins pour vous faciliter la vie

#Web

isitdownorjust.me , un petit site simple et efficace pour savoir si votre site est en panne pour tout le monde, ou juste pour vous. Plus d’excuse maintenant !

#SVG

Svg-to-canvas , un outil en ligne pour convertir ses fichiers SVG en canvas HTML5

#WordPress

Queryposts.co, un référenciel non officiel pour WordPress qui répertories des fonctions et bientot des hooks classés par version, ordre alphabetique, avec une fonction de recherche.

#Responsive

OnMediaQuery – Responsive Javascript, un petit script pour détecter le viewport  partir des media queries et l’utiliser en JavaScript à

Les articles à lire

#Responsive

Responsive images using CSS3 une technique de remplacement d’image (dans le HTML) en CSS3 combinant des media queries,  le contenu généré en CSS et la fonction attr[], l’idée est intéressante.

#UX #Ecommerce

Unbreakable Rules For E-Commerce Checkout Design, des règles de base simples à appliquer pour un site d’ e-commerce réussit.

#Pixelperfection

Pixel fitting, une explication sur l’antialiasing automatique des logiciels, et sur pourquoi il vaut mieux ajuster soit même ses images lorsque l’on transforme un vecteur en pixel que laisser le soin à Photoshop de s’occuper des calculs.

#UI #UX

7 Basic Best Practices for Buttons, un petit rappel des bonnes pratiques à suivre en matière de boutons dans des interfaces web

#Icons #Webdesign

Icon Designs In Websites: 12 Tips To Make The Most Of Them , une liste de conseils pour utiliser les icones sur le web à bon escient

#Icons

The Floppy Disk means Save, and 14 other old people Icons that don’t make sense anymore L’icone de diquette est utilisée pour symboliser le fait d’enregistrer, alors que toute une génération n’a jamais eut en main une seule disquette. Une collection de 14 icones qui n’ont plus vraiment leur sens premier expliqués à cette nouvelle génération

#How to #Behind the sceen

The Toolbox: From Idea to Launch in 10 Hours l’explication par Sacha Grief de la démarche derrière la création de Toolbox, comment lui est venue l’idée du site et surtout comment il l’a construit en 10h

#Behind the sceen

Circle, behind the sceen, un atricle très instructif qui explique les décisions et le processus du redesign de cette application

#Freelance #Tarifs

Getting pricing right, un e-book pleins de bons conseilles pour trouver le prix juste pour votre prochain projet WordPress

#Accessibilité

HTML5 Accessibility: aria-hidden and role=”presentation” : un test très complet sur l’utilisation de role=”presentation” et son comportement sur différents screenreaders

Et pour finir, un peu d’humour dans ce monde de brute : “My dick in a dropbox”  (pour ceux qui ne connaissent pas, il s’agit d’une référence d’une chanson parodique du Saturday Night Live “My dick in a box”)