Des pixels et du code #11
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”)
