Smashing Case Study

Compte-rendu d'une conférenceonfé conférence de Sara Soueidan.

Sara Soueidan lors de la conférence.

Sara Soueidan, développeuse front-end indépendante et auteure publiée, a donné en avril une conférence portant sur son expérience concernant sa contribution à la création du nouveau site web “Smashing Magazine”. Diplômée en informatique et récompensée de 2 prix (développeuse de l’année 2015 et contributrice de l’année 2015), il lui arrive souvent de faire des workshops et des présentations. Pour l’occasion, elle s’est exprimée à la Smashing Conference de San Francisco, qui est une convention de webdesigner et développeur cherchant à “améliorer” la communauté web en partageant astuces et techniques. La jeune femme décide de partager ce qu’elle a appris lorsqu’on l’a chargé de développer le nouveau site du Smashing Magazine, et elle tient à raconter son expérience.

Sara Soueidan lors de la conférence.

Markup

Le markup est l’élément le plus important : c’est le contenu brut sans mise en page. Le markup est plus important que le CSS, car si jamais on retire ce dernier, il faut que l’information soit lisible. L’important est de se mettre à la place du lecteur, que l’on doit satisfaire : c’est le consommateur principal.

Layout

Le layout est le premier élément auquel Sara Soueidan s’est attaqué. Jugé assez difficile au premier regard, la jeune femme a reçu de l’aide de différents webdesigners (listés sur une autre page). Il est ici question d’échange, de partage d’informations et d’aide. Le layout de ce magazine est, selon elle, tout à fait nouveau. Mais cela ne l’empêche pas d’avoir des réserves et des critiques sur la présentation de cette page. Sarah divise la page en plusieurs sections d’information et déclare que certaines sections telles que, par exemple, la présentation de l’auteur ne devrait pas se trouver à l’endroit où on l’a placé. Pour le layout du site, elle a d’abord commencé par construire l’HTML et par après, elle a changé le design du site à l’aide du CSS. Dans ce domaine, il faut parfois sortir des sentiers battus au niveau du code pour arriver au résultat voulu, contourner le système et les règles de bases. Par exemple, Sara Soueidan a du légèrement tricher dans son code pour obtenir le résultat voulu.

“I’ve been challenged to come up with techniques I’d never come up with before, as well as use and modify existing ones that I also thought I’d never have to use.”

En ce qui concerne les généralités techniques, l’’ordre des éléments dans le DOM est logique et ne peut pas être modifié pour accommoder l’aspect visuel, le contenu de l’article dans le DOM ne peut être interrompu pour y mettre de la présentation, seulement pour y ajouter des intentions et Flexbox est un moyen récent de faire de la mise en page. Il permet de changer les éléments dans la page sans toucher au CSS (comme par exemple mettre plusieurs éléments à la même hauteur). C’est ce qu’elle a utilisé pour modifier l’ordre de base de sa page.

Sara Soueidan lors de la conférence.

Typography

En CSS, le texte souligné est fortement déconseillé car son rendu n’est pas visuellement beau. D’après Sara Soueidan, il vaut mieux faire un texte souligné en 3D, c’est à dire mettre un fond sous le mot de la même couleur que le background puis superposer le tout pour donner un meilleur effet. Sarah souligne aussi le fait que lorsqu’on réduit une page possédant un titre, la police de caractère rétrécit jusqu’au point qu’il est impossible de la lire. Un calcul peut être réalisé pour faire une mise à l’échelle parfaite en fonction de la taille de la page.

font-size: calc(Wpx + (X - W) * (100vw - Ypx) / (Z - Y));

W = taille minimale de la police d’écriture | X = taille maximale de la police d’écriture | Y = taille minimum de l’écran | Z = taille maximale de l’écran

Iconography

Le SVG est le format d’image le plus adéquat et le plus utilisé dans le site. Cependant, plus il y a de détails dans une image, moins on utilisera l’image vectorielle. Il faut alors favoriser le PNG au SVG, car le poids des fichiers vectoriels est bien plus lourd. Quand il s’agit d’inclure une image dans une page, que ce soit du SVG ou un tout autre format, il existe différentes techniques d’intégrations. Le tout est de savoir quelle technique utiliser dans quelle situation. Pour cela, il est important de se poser les questions suivantes:

Dans le premier cas, il faut bien se rappeler que toute image qui a une fonction doit être impérativement incluse dans le code HTML afin que l’on puisse lui soumettre une fonction, ce qui n’est pas le cas du CSS. Voilà pourquoi toute image qui n’a pas d'interaction et qui ne sert qu’à embellire la page doit être incluse en CSS afin de ne pas surcharger le code HTML. Dans le second et troisième cas, il est préférable d'inclure l’image en HTML sous forme “inline”. C’est à dire qu’on a l’image plus la fonction dans la même ligne.

Exemple de code utilisé lors de la création du site.
Gif d'animation.

Animation

L’animation doit être légère, tout comme le choix des images, pour pouvoir avoir un chargement moins long (exemple : dans le site, les avatars sont animés). Il faut utiliser Javascript pour les animations, car contrairement au CSS, il permet d’animer plus de choses et de manière plus rapide. Il est conseillé de limiter la hauteur maximum d’un élément animé.

Ce que l'on peut en retenir

Grâce au visionnage de cette vidéo, il y a quelques points qu’il nous a été important de noter. Premièrement, le rendu est plus important que le code. Le code doit rester bon, mais on peut le trafiquer un peu pour arriver au visuel souhaité. Et c’est le second point à retenir : il faut parfois avoir recours à des “hacks” pour arriver à ses fins. Parfois, on trouve l’idée seul, parfois, on reçoit de l’aide. Le troisième point à retenir est que quand on arrive dans une situation où le code écrit ne nous donne pas le résultat voulu, on peut décider d’abandonner, mais on peut décider de favoriser la demande d’aide ou on trafique un peu le code pour essayer de faire bouger les choses et arriver au résultat souhaité. Si on décide de trafiquer le code, il faut retenir que dans le CSS, on ne peut jamais ouvrir de liens dans un autre lien! Il faut le faire fonctionner en utilisant un objet non valide à l’intérieur, alors seulement, ce sera faisable.