Des pixels et du code #72
Expérience utilisateur et Responsive Webdesign sont les deux grand thématiques de la semaine : dark patterns illustrées par des exemples de vrais sites, amélioration de l’expérience utilisateur par de petites modifications de l’interface, tester des sites responsive sur Chrome et Firefox sans plugins, outils pour créer une navigation responsive ou encore une newsletter responsive, vous aurez de quoi lire. Sans oublier les autres ressources, de l’inspiration, articles sur les bonnes pratiques pour les liens hypertextes et de contraste de site et les démonstrations HTML/CSS impressionnantes. Bonne lecture :)
Les articles à lire
#UX
Step-by-Step UX Improvement l’auteur explique de cet article comment il a amélioré l’UX de la page “projet” de son application pas à pas
The slippery slope un article sur les “dark patterns” en expérience utilisateur illustré par des vrais exemples de sites.
Careful with Those Cards! on voit de plus en plus de sites adopter le design en “cartes” ou briques (Pinterest) avec une collection impressionnante de plugins jQuery pour le créer facilement, mais est-il adapté à mon projet? Ça dépend ..
Manipulation and Design présente et analyse deux exemples de designs qui manipulent l’utilisateur à ses dépends et au profite du service en questions. J’aime beaucoup la phrase de conclusion “ Fundamentally, it’s about taking responsibility for the things we unleash in the world.”
#Trademark #URL
Trademark symbols in URLs il est apparement possible d’encoder les symboles ™ (Trademark) et ® (Registered Trademark) dans les urls (testé sous Chrome et Firefox, ne passe pas sous Internet Explorer 10)
#Case study
“This Is How We Built It” Case Studies si comme moi vous êtes fans d’études de cas et retours d’expérience, vous allez adorer cet article qui en ressemble plus d’une trentaine
#Liens Hypertext
Signalétique des hyperliens un résumé de l’histoire de la couleur des liens et un résumé de bonnes pratiques pour créer des liens hypertextes dont l’apparence sera compréhensible par le maximum d’utilisateurs
#Navigation responsive
Progresponsive créer quelque chose de simple, puis l’améliorer progressivement, Jeremy Keith met en avant l’amélioration progressive pour créer des navigations responsive simples qui fonctionnent dans le plus de configurations possibles
Inspiration
#Publicité
Virgin Megastore : les 12 prints de l’ultime campagne publicitaire ! une campagne de publicité qui allie à chaque fois un livre et un film dans d’audacieux mélanges pour certains très osés et sarcastiques
#Contrast
Contrastrebellion.com en plus d’être visuellement très sympa, explique en quoi le contraste des textes d’un site c’est ce qui va au final le rendre lisible ou non
Des ressources utiles
#SVG #Illustrator
Export Illustrator Layers to SVG files est une amélioration du script Multiexport qui permet désormais d’exporter les artboards et les calques en fichiers .SVG individuels
#Application #Icône
Appicontempate.com vous propose des templates .PSD pour créer les icônes pour des applications iOS et Android
#Responsive #Navigation
Responsivenavigation.net rassemble différents types de navigation responsive avec le code en exemple. Vous pouvez également en retrouver quelques uns sur Mobile Nav (par Raphaël Goetter)
#Firefox #Responsive
Améliorer le mode « Vue adaptative » de Firefox une astuce pour ajouter des présélection à la liste de vues adaptatives de Firefox, avec une liste d’appareils pré-remplie à copier/coller. Et si vous préférez Chrome : Tester du responsive sous Chrome sans plugin : 2 astuces
#Data URI #Performance
On Mobile, Data URIs are 6x Slower than Source Linking (New Research) le chargement d’images en Data URI (encodage en base64 d’images) serait jusqu’à 6 fois plus lent sur mobile que celui d’une mage classique, à utiliser donc avec parcimonie
#Typographie
Practicaltypography.com une liste d’articles pour tout savoir sur la typographie et ses règles (attention de la langue anglaise, certaines règles changent en français)
#Framework CSS
Getuikit.com un framework HTML/CSS/JS pour débuter un projet qui propose directement un système de personnalisation basique des templates : Customizer
#Template
Schnaps.it un générateur de template HTML pour débuter un projet web réalisé par notre super stagiaire !
#Email responsive
Our Favorite Responsive And Mobile Email Resources un ensemble de ressources, articles, templates et exemples pour créer des campagnes d’emailing responsive
Des ressources gratuites
#Police animée
Franchise est une version « animée » de la police d’écriture Franchise à utiliser pour vos créations vidéo sous After Effect
#iOS7
Ios7-wireframe-kit un kit de wireframe pout iOS7 sur Illustrator, logiciel dont je me sers de plus en plus pour créer ce genre de vues pour les clients
Les outils et plugins pour vous faciliter la vie
#Responsive #Iframe
Embedresponsively.com un outil en ligne qui vous génère le code HTML/CSS pour des iframes responsive (Youtube, Vimeo, Googlemaps, etc.)
#Preprocesseur
Koala-app.com un compilateur GUI (avec une interface sans devoir passer par la ligne de code) pour LESS, Sass et Coffeescript
Les démos sympas et impressionnantes
#Jeu #HTML
Play-dot-to.com un joli petit jeu où il faut relier des points dans le navigateur pour faire une petite image
#Carte
Firebus, une carte qui montre en direct la position approximative en temps réel des bus à San Fransisco
#Checkbox
Ctjdv une check-box stylée avec un petit “Mario”, le clin d’oeil est très sympa
#Température
Temperatures une carte interactive qui montre les températues du monde par mois et années
Et s’il devait n’en rester qu’un ?
Un graphiste, pourquoi c’est cher ? bried, analyse, processus créatif, droits d’auteurs, Christelle vous explique ce qui fait le prix d’une prestation graphique sur mesure
