7 min. de lecture | 02 octobre 2014

Compte rendu de la Smashing Conference 2014

Il y a deux semaines, nous avons eu la chance d’assister à la Smashing Conference organisée dans la jolie ville de Freiburg les 15 et 16 septembre. Dès notre arrivée dans la magnifique salle de la Maison Historique des Marchands nous avons été éblouis par l’endroit, ainsi que par le groupe de jazz qui nous a accueillis comme par le soin apporté à chaque détail de l'organisation.

Car à la SmashingConf, tout est prévu pour qu’on se sente bien: café et bretzels disponibles à volonté, équipe technique qui veille à la bonne santé du wifi malgré 300 geeks connectés en permanence, concours de photos sur Twitter et Instagram… Mais surtout, 17 intervenants passionnants et des sujets de conférences très variés qui ont traité aussi bien de design pur que de problèmes techniques, de gestion du contenu, de relation avec le client et de développement personnel.

Parmi les conférences qui nous ont le plus intéressées, quatre thèmes sont apparus de manière récurrente:

  • La performance doit être considérée comme un des points centraux de la conception d’un site, et doit être prise en compte dès les premières étapes du design.
  • La collaboration entre les différents acteurs d’un projet est primordiale: entre les chefs de projets, les équipes technique et design, mais aussi avec les clients qu’il faut impliquer le plus tôt possible dans la conception de leur site.
  • Savoir choisir ses batailles: quand se battre et quand accepter des concessions.
  • Enfin, à titre plus personnel: savoir maintenir l’équilibre entre vie personnelle et professionnelle, consacrer du temps à ses passions et aux personnes qui nous entourent.

Voici quelques notes plus détaillées concernant certaines conférences:

Good is the enemy of great: 
On designing, and then undesigning, a perfect link underline

Marcin Wichary - @mwichary

La première journée a démarré très fort avec une conférence passionnante de Marchin Wichary à propos du soulignement parfait qu’il a voulu créer pour les textes de la plateforme de publication Medium.

A travers cet exemple, il a évoqué non seulement son amour pour la typographie, mais surtout l’importance des détails en webdesign, ainsi que le moment où il faut accepter de faire des concessions dans la recherche de la perfection. Dans son cas, les multiples text shadows qu’il utilisait pour parvenir à un effet où les jambes des lettres coupaient idéalement le soulignement coûtaient trop cher en terme de performance, il a donc choisi d’y renoncer et d’accepter une version « moins parfaite ».

« Sometimes you're trying to go to the moon, but you end up on Mars and that's ok, because you still left Earth. »

Design Decisions Through The Lens Of a Performance Budget

Yesenia Perez-Cruz - @yeseniaa

Ce dernier point amène parfaitement au sujet de la conférence de Yesenia Perez-Cruz à propos de performance et de design. Elle nous a parlé d’une époque où elle n’hésitait pas à utiliser des textures, des webfonts et des carousels à ne plus savoir qu’en faire. C’était très beau, mais un design parfait est-il bien utile si la page met 2 minutes avant d’être complètement chargée ?

Elle propose donc de considérer la performance du site comme un point fondamental, et d’en tenir compte dès l'amorce du projet en élaborant un « budget de performance » sur lequel on se basera pour décider quelles fonctionnalités « lourdes » (grandes images, webfonts, pubs, etc.) sont ou non indispensables. Si la création d’un site rapide fait partie des objectifs de base du projet, il sera plus facile pour le client d’accepter qu’il doit faire des choix.

« Performance is a design feature, not a technical concern. »

Design Consistency for the Responsive Web: 
How we define and deliver

Patty Toland - @pattytoland

Plus tard dans la journée, Patty Toland a également abordé la question de la performance, en plaçant la rapidité comme élément indispensable pour optimiser l’accès au contenu sur le plus de plateformes possibles.

Elle s’inspire de la pyramide des besoins d’Abraham Maslow pour mettre en avant le fait qu’un design responsive ne peut être efficace que s'il est construit sur des fondations solides. Elle place ainsi la vitesse à la base de la pyramide; on cherchera à construire avant tout des pages optimisées pour un chargement le plus rapide possible. Vient ensuite le contenu, qui doit être accessible et fonctionnel. C’est uniquement après avoir mis ces éléments en place qu’on devrait s’occuper de ceux qui sont souvent considérés en premier lieu dans le processus de design, à savoir la grille, les breakpoints, l’organisation du contenu, la charte graphique, les animations…

« Great responsive design is achievable only with a stable foundation in place. »

pyramide maslow

Co-design Not Redesign

Kevin M. Hoffman - @kevinmhoffman

Kevin M. Hoffman nous a présenté son approche de « co-design », une méthodologie de travail basée sur la collaboration entre les différents acteurs d’un projet (chefs de projets, équipes, utilisateurs). Il encourage à travailler ensemble dès le début du projet, à organiser des réunions participatives où chaque personne qui ajoute de la valeur au projet est impliquée de manière active. Le but est d’écouter les idées de chacun, puis d’en dégager des décisions COMMUNES qui permettront de faire avancer le projet sans créer de frustrations.

« Collaboration happens when the whole is greater than the sum. »

co-design méthodologie de travail basée sur la collaboration entre les différents acteurs d’un projet

It’s about time

Christopher Murphy - @fehler

La dernière conférence de cette première journée à Freiburg est certainement celle qui poussait le plus à la réflexion personnelle. Après avoir évoqué le burn-out et la dépression dont il a été victime il y a un an, Christopher Murphy nous a parlé de l’importance de se recentrer sur ce qui compte vraiment. Dans notre travail, en établissant des priorités, en apprenant à dire non et en acceptant l’idée qu’on ne peut pas TOUT faire. Mais aussi d’une manière plus générale, en nous interrogeant sur nos passions et sur la place que nous souhaitons leur accorder dans notre vie.

Smashing Conference 2014

Rolling your own CSS architecture

Dave Shea - @mezzoblue

La deuxième journée a commencé par l’annonce très attendue de l’identité du Mystery Speaker: nous avons eu la chance immense d’écouter Dave Shae – le créateur de l’incontournable CSS Zen Garden – nous parler de la conception d’Argon, un framework qui répond aux besoins spécifiques de l’entreprise pour laquelle il travaille.

Confrontés à des feuilles de style toujours plus chargées, illisibles et difficiles à maintenir pour une équipe croissante, ils ont pris la décision de laisser tomber Bootstrap, de limiter l'utilisation de SASS et de construire leur propre architecture CSS en se basant sur quelques principes fondamentaux:

  • La prévisibilité du code;
  • Les éléments doivent être réutilisables et modulables;
  • Eviter les problèmes de spécificité en choisissant bien ses sélecteurs;
  • La cohérence du code entre tous les membres de l’équipe.
« It’s not the syntax, it’s the discipline. »

Be All In Without Checking Out

Phil Coffman - @philcoffman

Phil Coffman nous a ensuite parlé d’équilibre entre vie professionnelle et personnelle, de savoir poser des limites et les communiquer clairement pour éviter de se retrouver « noyé » sous les demandes, d’essayer d’être le meilleur dans son travail et d’apprendre en permanence, tout en conservant du temps consacré à soi-même (loisirs, famille, amis).

Orchestrating Content

Sara W.-Boettcher - @sara_ann_marie

La conférence de Sara Wachter-Boettcher portait sur la planification du contenu, qui doit être faite dès le tout début du projet. Il est important d’impliquer les différents utilisateurs du site (rédacteurs, équipe commerciale, etc), de les inviter à collaborer avec les designers et développeurs pour organiser et hiérarchiser le contenu. Trop souvent, chacun estime que sa partie est la plus importante et souhaite qu’elle soit mise en avant. Il en résulte des pages et une navigation trop chargées et sans hiérarchie claire.

Elle conseille également d’éduquer les clients à la création du contenu de leur site tôt dans le projet, leur donner des exemples concrets du travail qui devra être effectuer de leur côté.

« Discord is why we can’t have nice things. »

Typefaces for screens

Gerry Leonidas - @gerryleonidas

Gerry Leonidas, professeur de typographie à l’Université de Reading, a commencé sa conférence par un peu de théorie typographique qu’il est toujours utile de se remettre en tête, pour aborder ensuite la question de la lisibilité des fonts à l’écran. Selon lui, la plupart des polices auront un rendu acceptable, mais certaines spécificités en rendront certaines plus agréables à lire que d’autres:

    • Un rythme régulier;
    • Des contre-formes ouvertes;
    • Des jointures bien marquées entre les différentes parties de la lettre.

Il démontre ainsi pourquoi Helvetica n’est clairement pas une police adaptée à l’écran et propose quelques alternatives qui répondent à ces critères:

Typefaces for screens

The Future of the Web?

Peter Smart - @petewsmart

La dernière conférence à laquelle nous avons pu assister avant de devoir prendre le chemin du retour fut celle de Peter Smart, qui nous a emmené dans le futur, à la découverte du web de demain. Un web tangible, où l’expérience tactile sera poussée plus loin grâce à la manipulation électrostatique qui nous permettra de sentir les matières ou la profondeur. Un web adaptatif, qui interagira davantage avec notre environnement. Un web invisible, disponible partout et parfaitement intégré dans notre quotidien.

 

Nouveau call-to-action