Des pixels et du code #14
Avec la sortie d’iOs6, une semaine chargée en liens iOS, mobilité et responsive design, retina et high resolution, de la transposition de jeux HTML5 vers le natif et des scripts pour capturer les touch events, mais également quelques articles qui traient de SVG, Fireworks et WordPress.
Les tutoriels de la semaine
#Fireworks
Developing A Design Workflow In Adobe Fireworks du wireframe paper au design sur Fireworks, un article qui met en avant les possibilités de Fireworks pour le design et wireframing de site web
#jQuery
Building a List/Grid View Switcher with jQuery un tutoriel pour créer une liste d’article qui se transforme en grille et vice versa avec du jQuery
#Mustache #RWD
Templating with Detector & Mustache Tutorial
Des ressources utiles
#RWD #mobilefirst
Harvey: A Second Face for Your JavaScript , un retour d’experience sur le mobile first et la méthodologie et scripts utilisés pour le site walkaboutnyc.com avec en cadeau Harvey, un script pour executer certains JavaScript en fonction du type d’appareil, de la taille de l’écran, la résolution, l’orientation, etc
#Touch
11 Multi touch and touch events javascript libraries : un article qui rassemble une collection de 11 librairies prêtes à l’emploi pour gérer les évènements de touch en mobilité
#Densite #Mobile
Designing (and converting) for multiple mobile densities, une très belle explication du retina, xhdpi, de la densité sur les écrans, ainsi qu’un outil et un diagram pour comprendre et passer facilement d’une densité à une autre.
#Retina
Mobile Web in High Resolution utiliser la propriété spear radius de box-shadow pour créer des “faux” bords pour créer de boutons dont le bord reste de 1px sur écran retina comme écran normal.
Les outils et plugins pour vous faciliter la vie
#jQuery
Scrollpath, un plugin jQuery pour définir un chemin personnalisé lorsque l’utilisateur scroll sur la page. La démo est plus parlante que mon explication.
#Placeholder
Fixiejs , un script qui parse le document et va automatiquement ajouter du faux texte dans vos documents HTML, fini le copier/coller de Lorem Ipsum.
#HTML5 game #Application native
Cocoon.js , une librairie pour transformer les jeux HTML5 en applications natives Android et iOs
Les articles à lire
#Android
Android’s one killer feature that trumps the iPhone , iOs6 sors cette semaine, mais Android a toujours une longueur d’avance pour ce qui est des notifications utilisateur, notament celles directement embarquées dans la barre de statut de l’appareil.
#UX
Focus on the right-hand side, ou pourquoi les sites ont tendance à placer les barres latérales, le panier, ou encore les boutons d’ajout au panier du côté droit de l’écran/du site web pour un utilisateur
#SVG
SVG, l’ami du Responsive Web Design, un article qui détaille l’utilisation du SVG pour faciliter les sites responsive, ainsi que des bonnes pratiques pour les générer facilement avec Illustrator
#iOs
What iOS 6 Mobile Safari Offers Front End Devs , les nouveautés d’iOs6 qui vont avoir un impact sur les webdesigners et intégrateurs : support de <input type = submit>, du debug à distance, des filtes CSS et autres joyeusetés !
#Webdesign
30 Common Mistakes In Web Design 30 erreurs souvent commises en Webdesign et illustrées
#HigResolution
How to Prepare for The High-Resolution Web retina, font-icon, canvas, responsive, vecteurs, autant de façons pour se préparer au web en haute résolution expliqués dans cet article.
#Images
Product Graphics: 6 Techniques To Make Images More Informative , 6 exemples illustrés pour enrichir les images d’un site web et les rendre plus informatives et utiles à l’utilisateur
#WordPress
An in depth understanding of wordpress-hooks/ , un article pour comprendre la différence entre les actions et les filtres, savoir où les trouver et comment les utiliser correctement
Un dernier clique ? Pourquoi pas mon conseil Adobe Photoshop CS6 pour fusionner des tracés et des formes comme sur Illustrator ?
