Par dans

Les kiwis, c’est exquis !

24 juin 2015
Les kiwis, c'est exquis !

Vendredi dernier (le 19 juin 2015) se tenait à Strasbourg la Kiwi Party, une journée de conférences techniques sur la thématique du web en général. Quelques reymanniens ont eu la chance de s’inscrire à temps pour y assister. Rappelons que les places disponibles ont été écoulées en 31 secondes !

Kiwi_Party_2015-3

Au menu :

  • du design, avec des icônes vectorielles et des CSS,
  • du code (JavaScript),
  • des bonnes pratiques,
  • à boire et à manger (il ne faut pas négliger l’alimentation et l’hydratation !)

Voici un aperçu des différentes conférences. Bonne lecture !

Icon-fonts vs SVG sprites

Par Vincent de Oliveira

Photo 19-06-2015 09 06 32Sur le web, il existe plusieurs techniques pour afficher des icônes : du simple fichier image à la police de caractères spécifique, en passant par le SVG, Vincent nous démontre que le SVG est la meilleure des solutions car elle répond à la plupart des problématiques actuelles : compatibilité avec les navigateurs, affichage soigné sur les écrans haute densité (Retina), possibilité d’animations, … Seul petit bémol : la création des icônes au format SVG peut être relativement complexe, et il n’existe pas encore de « pack tout-en-un », comme avec les polices d’icônes. Mais gageons que ceci change rapidement ! En tout cas, chez Reymann, du SVG on est fans !


Les personas : comment les concevoir et les utiliser

Gwennola Pierre

Un Persona est un personnage fictif qui représente la cible de votre projet. Il a un nom, une photo, une situation, une histoire, des besoins et des contraintes. Ces informations détaillées sont regroupées dans une fiche bien visible tout au long de l’élaboration du projet. Afin de s’assurer que le projet répondra le plus possible aux attentes de vos clients, il convient alors de se mettre à la place de ce Persona. Bien évidemment, il peut y avoir plusieurs Personas par projet, mais leur nombre doit être limité.


Le debug d’applications web simplifié

Etienne Margraff et David Rousset

Photo 19-06-2015 10 02 38Etienne et David, de chez Microsoft, nous présentent vorlon.js, un tout nouveau projet open source destiné aux développeurs de sites web. Le but est de fournir une manière simple et efficace pour adapter et corriger un site web pour les appareils mobiles. Le gros avantage de l’outil est qu’il est entièrement agnostique à la plateforme et fonctionne avec tous les navigateurs mobiles du moment !
La démonstration en direct fut très convaincante, le projet est à suivre de près !


Le chasseur-cueilleur, Hannibal Lecter, et autres considérations ergonomiques.

Antonio Capobianco

Antonio nous parle de l’organisation de l’information : que ce soit sur un bureau (physique ou virtuel), ou bien sur un site web, le cerveau humain mémorise rapidement les différents éléments dans l’espace, afin de retrouver efficacement les informations voulues. Le respect des standards (position du logo, des menus, du contenu, …) favorise encore plus ce processus.

Les animations, quand elles sont bien utilisées, permettent d’encore mieux se situer dans l’espace et trouvent donc une véritable utilité en plus de l’effet visuel agréable qu’elles procurent.


Le pseudo-élément, c’est bon !

Matthieu Bué

Matthieu nous présente une conférence très technique sur l’utilisation avancée des pseudo-elements en CSS (:before et :after) : ombrages, bulles d’aide, menus… le tout avec de jolies animations, et sans aucune ligne de code JavaScript ! Simple et efficace, on aime !


Le web et ses sales caractères

Damien Senger

Damien nous parle de typographie, et de la compatibilité des polices sur les différents appareils mobiles du moment. Il nous présente aussi quelques techniques pour optimiser le temps de chargement des pages, en choisissant si possible des polices déjà présentes sur les smartphones. Mais bien évidemment, toutes les polices disponibles sur un OS mobile ne le sont pas sur les autres… Ce serait trop simple !


Faire passer un mammouth dans un tuyau d’arrosage (aka la performance sur mobile)

Jean-Pierre Vincent

Jean-Pierre nous présente plusieurs pistes d’optimisation pour les sites web sur les appareils mobiles. L’idée générale est d’afficher l’information pertinente (le texte) rapidement, sans que le navigateur n’ait besoin d’avoir terminé le chargement des autres resources (JavaScript et images, notamment). Le code JavaScript, une fois chargé, prend le contrôle de la page afin de fournir l’aspect dynamique : menus déroulants, animations, …

Concernant les images, il convient de les charger à la demande (lors du défilement). Si l’internaute a trouvé l’information qu’il cherchait en haut de la page, il est inutile de lui faire télécharger toutes les images. Techniquement, on appelle ce principe le lazy loading.

UX design & hackathon : un guide de survie

Laurence Vagner

Dans cette conférence, Laurence nous explique comment travailler sous la contrainte du temps, via ses différentes expériences de hackathon. Savoir prioriser les besoins, savoir dire non, savoir choisir et développer les fonctionnalités clés pour aller à l’essentiel, …

Le responsive côté serveur

Rémi Grumeau

On parle beaucoup de RWD, cette technique qui consiste à faire en sorte qu’un site web s’affiche harmonieusement sur les appareils mobiles, en offrant une expérience adaptée à la taille de l’écran. Tout se passe dans le navigateur qui, en fonction de règles définies dans les feuilles de styles (media queries), réarrange (déplace, affiche ou masque) les différents éléments de la page.

Rémi nous parle ici de « responsive côté serveur » : le serveur identifie le navigateur et lui fournit un contenu adapté. Il peut s’agir du code HTML, bien sûr, mais le plus évident concerne les images : il est en effet inutile de fournir une image très grande (et très lourde) à un navigateur mobile.


Et si on parlait productivité ?

Nicolas Birckel

Quoi qu’on en dise, le cerveau humain est mono-tâche. Du moins, c’est dans ce mode qu’il est le plus efficace : passer d’une tâche à l’autre demande un effort de recontextualisation qui faire perdre beaucoup de temps. Nicolas nous propose donc de traiter nos projets les uns après les autres, dans un environnement calme et sans distraction. Exit les notifications aujourd’hui omniprésentes, il faut se prévoir des plages horaires pour les traiter.

Vous avez une todo list ? Vous avez du mal à la maintenir à jour ? Essayez plutôt de faire une done list : vous verrez plus facilement l’avancement dans vos projets 😉


L’UX sans Utilisateur n’est que pornographie

Raphaël Yharrassarry

Petit rappel : UX est l’acronyme anglophone pour Expérience Utilisateur, ou ergonomie. Via ses expériences personnelles, Raphaël nous faire comprendre qu’il est important d’inclure les utilisateurs dans le processus de design ergonomique, afin d’avoir des retours en adéquation avec la réalité.


Quizz !

Pour terminer cette journée, les organisateurs proposent un quizz de 15 questions. Même si toutes sont liées au web, certaines touchent à des domaines très spécifiques et les réponses ne sont pas évidentes… Deux Reymanniens ont été parmi les meilleurs et sont rentrés avec de magnifiques cadeaux !


Pour conclure…

Après cette journée bien chargée, on se rend compte que les conférences se rejoignent presque toutes autour de la thématique du mobile et plus particulièrement l’optimisation des sites web pour les mobiles. Le mobile first est dans l’air du temps : on fait en sorte qu’un site web s’affiche parfaitement bien (et rapidement) sur les mobiles, et on enrichit l’expérience pour les ordinateurs de bureau.

Voici quelques photos de cette belle journée très enrichissante :

one response to Les kiwis, c’est exquis !

  • Jeremy says on 2 juillet 2015 at 17 h 13 min

    L’évènement avait l’air sympa, dommage que je l’ai loupé…

    Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>