Préparez-vous pour la révolution CSS Grid

Une grille 4x4 représentant une disposition de grille CSS hypothétique.
(Crédit d'image: Future)

CSS Grid est tout simplement la plus grande histoire de la conception Web à l'heure actuelle. Donnant aux développeurs les outils nécessaires pour créer des mises en page complexes avec relativement peu de code, il représente une avancée révolutionnaire dans le contrôle du comportement de la mise en page, dans un monde réactif (voir notre site Web adaptatif tutoriels et, il vaut la peine de vous assurer que votre hébergement Web répond aux besoins de votre site).

Il y a, bien sûr, une courbe d'apprentissage impliquée. C'est pourquoi nous devions avoir Michelle Barker comme l'un des principaux orateurs de notre prochain Générer du CSS conférence (le 26 septembre à Shoreditch, Londres). Vous n'avez pas le savoir-faire ni le temps? Utiliser un Générateur de site Web .

Un Mozilla Tech Speaker, auteur du CSS {dans la vraie vie} blog et défenseur passionné de CSS Grid, l'exposé de Barker identifiera les problèmes les plus courants auxquels les concepteurs sont confrontés pour l'adopter et comment les surmonter. (Vous rencontrez un problème de stockage? Voir notre top stockage en ligne options).



Continuez à lire, alors qu'elle révèle comment elle est tombée amoureuse de CSS, discute de son travail chez Mud and Ordoo et partage ses prédictions sur l'évolution de la conception Web dans les années 2020.

Dites-nous en plus sur ce que vous faites

Je suis un développeur de frontend créatif avec une forte orientation UX et une expérience en conception et en illustration qui informe une grande partie de mon travail. Pour mon travail quotidien, je suis développeur frontend chez Ordoo , une startup de commande mobile.

Ma passion principale est le CSS et j'adore expérimenter et rédiger des articles pour mon blog, CSS {In Real Life}. J’ai toujours aimé écrire et mon blog me donne l’excuse parfaite pour réunir toutes mes passions en un seul endroit.

D'où vient cette passion?

Depuis que j'ai appris le développement Web, je m'intéresse à la mise en page CSS - c'était tellement différent de l'impression. Il y a quelques années, j'ai assisté à un atelier de Rachel Andrew et c'est là que j'ai découvert CSS Grid. Je suis devenu accro depuis et je me suis donné pour mission d’exciter d’autres personnes comme moi.

Je suis vraiment enthousiasmé par la rapidité avec laquelle CSS évolue en ce moment - il devient de plus en plus puissant de jour en jour et il y a des spécifications encore plus intéressantes juste au coin de la rue!

Pourquoi aimez-vous parler lors d'événements?

Je suis un Mozilla Tech Speaker et je parle de CSS Grid lors de conférences et de rencontres. Participer à des rencontres est un excellent moyen de rencontrer de nouveaux amis, d'établir des contacts et de s'impliquer dans la communauté Web.

Je recommanderais vraiment de prendre la parole lors de rencontres car, d'après mon expérience, la communauté est chaleureuse, accueillante et douée pour donner des commentaires constructifs. Trouver le courage de le faire pour la première fois est assez angoissant, mais cela en vaut la peine à 100%. Parler a ouvert tant de portes pour moi.

La page d

(Crédit d'image: Warner Bros. Studios Leavesden)

En 2016, vous avez commencé à travailler chez Mud à plein temps. Pouvez-vous nous parler du travail que vous avez fait pour Warner Bros là-bas?

Le site Web pour Warner Bros Studios Leavesden était l'un des plus gros projets sur lesquels j'ai travaillé chez Mud. La conception était par Détruire et nous, chez Mud, étions responsables du développement. Mon rôle était d'écrire la plupart du HTML et du CSS.

La conception présentait des défis de mise en page intéressants et était l'occasion idéale d'utiliser CSS Grid pour la première fois. Tant de mises en page n'auraient pas été possibles sans Grid ou auraient été extrêmement difficiles à mettre en œuvre de manière réactive de manière à donner aux créateurs de contenu une liberté suffisante. Nous devions autoriser un contenu de longueur indéterminée, des images pouvant être de n'importe quel rapport hauteur / largeur tout en conservant une bonne présentation.

Il n’y avait pas beaucoup de didacticiels et d’exemples CSS Grid à l’époque, à part l’excellent site Grid By Example de Rachel Andrew. L'un des principaux défis consistait à construire une grille flexible qui permettrait à certains éléments de s'aligner sur une grille centrale à 24 colonnes, tout en permettant à d'autres de saigner jusqu'au bord de la fenêtre.

Grâce à l'expérimentation et aux essais et erreurs, j'ai réussi à trouver des moyens de résoudre ces défis. Plusieurs articles sur CSS {In Real Life} ont été directement informés par des choses que j'ai découvertes sur ce projet.

Quelle est l'importance de CSS Grid pour l'avenir de la conception Web?

Il existe une idée fausse selon laquelle certaines fonctionnalités CSS ne devraient pas être utilisées tant que la prise en charge du navigateur n'est pas à 100%. Il est probable que ce ne sera jamais le cas - il y aura toujours des navigateurs plus anciens à gérer et nous devons nous assurer que ces utilisateurs bénéficient d'une expérience acceptable. L'amélioration progressive est votre ami ici! Il existe différentes stratégies pour prendre en charge (ou non) Grid dans les navigateurs plus anciens: IE10 et IE11 prennent en charge l'ancienne syntaxe de Grid, c'est donc une solution possible.

Le temps et le coût perçus de la formation peuvent également être un obstacle pour certains. Comme toute nouvelle technologie, il y a beaucoup d'apprentissage impliqué et, malheureusement, je ne vois pas trop d'entreprises crier sur la façon dont elles aiment investir dans les compétences CSS. Il joue souvent le second rôle de JavaScript.

Cela dit, je pense que Grid fera partie intégrante de l'avenir de la conception Web. Jen Simmons a inventé le terme «conception Web intrinsèque» pour décrire la prochaine ère évolutive de la mise en page Web dans laquelle nous entrons et nous commençons tout juste à voir émerger certaines des possibilités créatives.

J'espère qu'il y aura bientôt un tournant, quand suffisamment de gens cesseront de penser à la conception Web comme une extension de l'impression et commenceront à l'adopter comme son propre support. Dans quelques années, Grid deviendra l'outil naturel à atteindre pour [en ce qui concerne] la mise en page Web.

Une image de Michelle Barker.

(Crédit d'image: Michelle Barker)

Quoi d'autre est passionnant dans le monde du CSS?

Il y en a tellement! Les propriétés personnalisées sont assez étonnantes et commencent à captiver l’imagination des gens. La prise en charge de la sous-grille, qui fait partie de la spécification CSS Grid Level 2, a récemment atterri dans Firefox Nightly et est prévue pour la prochaine version générale de Firefox. J'ai hâte de jouer un peu avec et de découvrir les possibilités créatives! J'ai également hâte d'expérimenter beaucoup plus avec polices variables . Mandy Michael et Jason Pamental font un excellent travail en créant des démonstrations et en en discutant.

Comment voyez-vous le rôle du développeur frontend évoluer dans les années 2020?

Le rôle d'un développeur frontend est devenu tellement vaste et il est rare que vous trouviez quelqu'un d'aussi fort dans tous les domaines. Je pense qu'il est inévitable que nous finissions par voir une division des rôles entre les développeurs d'interface utilisateur qui écrivent du HTML, du CSS et du JavaScript pour les interactions et ceux qui relèvent davantage de la catégorie «ingénieur».

C’est intéressant: j’ai l’impression que la question «les concepteurs devraient-ils coder?» Est posée beaucoup moins souvent ces jours-ci, car le code frontal est devenu beaucoup plus complexe. Le simple démarrage d'un projet peut sembler être un énorme défi, avec toute une suite d'outils de construction à configurer avant même de pouvoir commencer.

C'est pourquoi j'ai décidé d'essayer de créer mon site personnel avec uniquement du HTML, du CSS et rien d'autre - pour voir si c'était trop irréaliste en 2019. Mais c'est un moyen tout à fait valable de créer un site simple. La façon dont CSS se développe actuellement, ces compétences vont bientôt devenir extrêmement précieuses.

De quoi parlerez-vous chez Generate CSS?

Si vous êtes intéressé par CSS Grid mais que vous n'avez pas encore commencé à l'utiliser en production, celui-ci est pour vous. J'ai aidé suffisamment de personnes à démarrer avec Grid pour identifier certains problèmes courants que beaucoup d'entre eux rencontrent. Mon exposé aidera les gens à identifier ce qui pourrait leur causer des problèmes avec leur mise en page et comment les déboguer. J'espère qu'il y aura quelque chose à apprendre, quel que soit votre niveau d'expérience Grid.

J'adore le fait que nous voyons maintenant des événements axés sur les CSS tels que Générer du CSS surgissant. Souvent, CSS est regroupé avec le frontend en général et vous pouvez assister à une conférence frontend mais ne voir qu'une seule discussion sur CSS!

Cet article a été initialement publié dans le numéro 324 de net, le magazine le plus vendu au monde pour les concepteurs et développeurs Web. Acheter le numéro 324 ou abonnez-vous au net .

En savoir plus sur CSS Grid sur Generate CSS

Une image faisant la promotion de Michelle Barker

(Crédit d'image: Getty / Michelle Barker / Future)

Dans son discours à Generate CSS, la conférence CSS ciblée pour les concepteurs Web qui a lieu le 26 septembre 2019 à Rich Mix, Londres, Michelle Barker explorera comment Grid fonctionne en harmonie avec (et non contre!) D'autres méthodes de mise en page pour construire le robuste, Web flexible du futur.

Si vous voulez assister à ceci et à d'autres excellentes discussions, assurez-vous achetez votre billet maintenant !

Articles Liés: