Des pixels et du code #48

Une semaine de liens orienté UX  et mobile avec entre autres des articles de fond sur l’utilisation des carrousels Android, des labels dans les inputs, navigation off-canvas et bug d’animation Android, de l’accessibilité, des outils pour tester facilement des patterns de fond sur votre site et tester différentes version d’IE.

Les tutoriels de la semaine

#A11y

Advanced ARIA tip #1: Tabs in web apps  un article très détaillé  pour comprendre comment créer des onglets accessibles.

#SVG

Interactive infographic with SVG and CSS animations , comme souvent sur Codrops un petit tutoriel qui donne une bonne claque visuelle, cette semaine c’est une infographie interractive avec des animations SVG et CSS.

Des ressources utiles

#Tests navigateur

Cross-browser testing simplified, Microsoft fait beaucoup d’efforts pour redorer l’image de son navigateur en ce moment et vous propose 3 mois d’essais de browserstack, en plus de machines virtuelles pour tester les différentes versions.

Les outils  et plugins pour vous faciliter la vie

#CSS4

jQuery.cssParentSelector un script pour faire fonctionner la future syntaxe (attention elle risque de changer) du selecteur parent du module CSS lvl4, à grand renforts de jQuery. Je ne suis pas forcément fan de l’idée, mais si la spec n’évolue pas (peu de changes), on pourrait faire fonctionner ces lignes de CSS sans le polyfill JS un jour.

#Pattern

Subtle­Patterns un bookmarklet pour tester différents patterns sur son site web depuis http://subtlepatterns.com/ sans avoir à les changer manuellement.

#Lorem ipsum

Blokkfont.com est une font de remplissage pour vos wireframe pour les clients qui ont du mal à comprendre le latin :)

#Internet explorer

Virtualization-tools vous propose 3 mois d’essais avec le service BrowserStack pour tester vos sites sous IE, et plusieurs images pour différentes machines virtuelles.

Les articles à lire

#Font icon

Icomoon.io une astuce pour régler le problème de pixellisation des font-icon sur Windows Chrome.

#UX

No, I’m not going to download your bullshit app, un triste constat du web en situation de mobilité aujourd’hui et la tendance à essayer de forcer l’utilisateur “mobile” à télécharger une application à l’architecture d’information et au contenu trop différents du site pour qu’il puisse s’y retrouver.

Don’t Put Labels Inside Text Boxes (Unless You’re Luke W) un article de fond sur l’utilisation des labels à l’intérieur des champs de formulaire pour “gagner” de la place. Il sont  à ne pas utiliser sur un site web, par contre Luke Wroblewski argue que cette technique est moins gênante en mobilité, mais la mesure où les constructeurs d’OS le font dans les formulaires natifs et où l’utilisateur est donc habitué sur cette plateforme à avoir les labels dans les champs.

A Definitive Guide To The Android Carousel Design Pattern un guide pour comprendre le pattern de design qu’est le “carrousel” utilisé sur Android et l’utiliser à bon escient sur vos designs de site et applications.

#Actus

Google Drive now lets developers share hosted websites by storing HTML, JavaScript, and CSS files je n’ai pas encore testé, mais il semblerait désormais possible d’utiliser GoogleDrive pour partager des pages HTML avec JavaScript et CSS, pratique pour démo rapide pour un client.

#Webdesign

How to Get Hired As a Designer  quelques conseils pour poster à un emploi de webdesigner donnés par un des recruteurs sur etsy.

#Intégration

Beginner HTML5, JavaScript, jQuery, Backbone, and CSS3 Resources un excellent résumé des technologies à maitriser en tant qu’intégrateur web et surtout beaucoup de ressources et de documentations pour les apprendre.

#RWD

On Responsive Navigation and Rendering un retour d’expérience sur la navigation “off canvas” et les transformations CSS3#CSS3 Android.

Dispelling the Android CSS animation myths, sous Android 4.0, les animations CSS3 fonctionnent très bien sur Android tant que l’on n’anime qu’une propriété, pour plusieurs propriétés, il faut mettre chaque propriété dans sa propre déclaration keyframe (pas très flexible).

Inspiration et démos sympas et impressionnantes

#Parallax
Everylastdrop.co.uk un petit site très sympa sur le gaspillage d’eau dans la salle de bain avec un effet de parallaxe impressionnant.

Mon coup de cœur de la semaine, le site de l’agence de communication la-souris-verte.com avec son effet de parallaxe et le 5em slide de la page d’accueil “Attention ce site n’est pas un site sur le cyclisme !”.

Pour finir, je voulais vous faire découvrir le serveur tell-them.com qui vous permet de créer des cartes de voeux virtuelles sans aucune connaissance de langage web. Quelques exemples.