Est-ce qu'après cette vidéo le responsive vous paraît être moins angoissant et compliqué ? Est-ce que vous aviez connaissance du fluide design ? Vous y faisiez gaff jusque là ?
En formation, on nous dit de coder mobile first, mais on où en avait pas forcément expliquer l'intérêt, c'est beaucoup plus clair maintenant. Et c'est quoi ce designer qui fait pas de responsive avec une maquette Figma :D
@@kaeduss494 un feignasse lol ^^ bon après figma ça reste figmou quoi on ns l'a dit cash mais selon les formations ça va être plus ou moins approfondi je pense
Yo ! Je dois admettre que ta vidéo est grave intéressante, étant développeur junior front les breakpoints je connaissais. En revanche la méthode du mobile-first m'étais inconnu et honnêtement c'est vraiment pas con :D. Je tacherais d'y pensais la prochaine fois merci !!
Super vidéo comme d'hab ! Je te suis depuis longtemps et dernièrement je trouve vraiment que la forme et le fond de tes formats fait vraiment le taff ! J'ai le doux rêve de t'entendre parler un jour d'accessibilité. Un sujet ô combien négligé et inconnu pour une majorité de dev front (et pourtant essentiel, utile pour un tas de gens et pas si compliqué)
Très bonne suggestion ! Je n'en suis pas moi même un expert car je n'ai jamais digger des formations sur le sujet mais je pense avoir développer par mal d'automatisme et de bonnes pratiques qui rendent mon travail accessible. J'ai pas mal de tuyaux à partager mais une chose est sûre, il va ne falloir bûcher le sujet si je veux pouvoir l'aborder sans dire de conneries !
Pour le coup, c'est tellement agréable de voir quelqu'un mettre des mots sur ce qu'on fait au quotidien et qu'on peut avoir du mal à expliquer le pourquoi du comment. Le responsive, c'est une question d'habitude et de bonnes pratiques ! À force de concevoir des structures qui seront agréable en mobile & en desktop, vous finirez par développer des mécanismes et ça n'en deviendra que des plus agréable. N'ayez pas peur, c'est génial.
Hey, merci pour ta vidéo :) Pendant ma formation j'étais tombé sur un article qui expliquait la différence entre "Responsive Design" et "Adaptive Design". Apparemment ces termes font consensus. Je cite l'article: "A website created with responsive design serves up the same site to every device, but that site is fluid and will change its layout and appearance based on the size and orientation of the device. ... In adaptive design, a different website layout is created for each device’s screen. As it loads, the site recognizes the size of the screen and serves up the layout that was made for that viewport." (Source: "Responsive vs. Adaptive Design" sur CareerFoundry) En gros ce que tu appelles "Fluid design" j'imagine que c'est ce qu'ils appellent "Responsive", et "Adaptive design" c'est un site qui utilise des breakpoints pour modifier le layout. Du coup un site a besoin d'un mélange d'adaptive ET de responsive pour garantir une bonne utilisabilité sur tous les supports.
Pas vraiment en fait, l'adaptive design voit plutot ça comme un front entièrement différent en fonction du device. Souvent on fait un mixe entre les 2, il y a un site mobile et un site desktop distinct qui ont chacun des elements responsive en fonction da taille d'écran.
Salut! Je connaissais le mobile first mais plus dans le sens: "il faut penser au format téléphone au début car on est sûr du comportement voulut", alors qu'avec ton explication ça me semble tellement plus logique maintenant, ça me motive pour m'y mettre. Pour le fluide design, je le faisais déjà avant l'apparition des flexbox en utilisant des pourcentages pour séparer mes éléments, ça rendait plutôt pas mal mais il y avait souvent des comportements chaotiques. Maintenant avec les flexbox c'est tellement plus simple et ça rend tout de suite bien!
J'ai même pas fini la vidéo et je peux déjà dire : tu fais du boulot très propre. Je te suis depuis pas mal d'années et j'ai l'impression que cette chaîne a fait un pas en avant sur la qualité du contenu. Bravo !
J'ai eu la chance d'avoir était guider par un super mentor quand j'ai commencé le dev frontend il y a 2 ans, il m'a montré tout ces petits trucs au tout début de mon auto formation, mon mentor ne fait que me montrer comment faire et il me laisse seul avec la maquette après ... je m'attendais a voir une surprise super cool à la fin de ta vidéo mais bof c'était juste une vidéo qui me montre à quel point mon mentor était super 🙈 Cette vidéo va sûrement m'aider à guider un junior dans son apprentissage du métier intégrateur .. merci mec
Ouuuii une vidéo sur la fluidité ce serait top !!! Je commente jamais mais u m'as fait découvrir le code et maintenant et je suis dev depuis 1 an et je me suis jamais senti aussi bien dans un métier ! Merci pour tes vidéos elles sont vraiment cool !
Au début quand je faisais le responsive, je me prenais pour un génie du responsive parce que ça marchait sur tous les écrans, alors que je plaçais 30 000 breakpoints. PS: 7:11 à propos de cet événement, les historiens de l'époque (qui étaient pas vraiment des historiens au sens scientifique actuel, mais plutôt des idéologues) rapportent que César était tellement snob qu'il aurait prononcé "Toi aussi mon fils" en Grec avant de mourir en regardant Brutus
@Fragment 5 Oui selon l'historien Suétone, parler ou écrire en Grec ancien était une marque d'éducation raffinée. Par exemple Marc-Aurèle empereur et philosophe romain écrivait en Grec ancien
D'ailleurs, c'est rigolo, mais dans différentes langues, la "citation" en latin qu'on a retenue n'est pas la même. Les francophones ont "tu quoque, mi fili", qui nous viendrait de l'abbé Lhomond, qui a rédigé un manuel pour l'enseignement du latin au XVIIIe siècle ; les italiens ont retenu "Tu quoque, Brute, fili mi", je ne sais pas d'où ça sort, mais vu que la page Wikipedia en italien mentionne que la phrase sert de moyen mnémotechnique pour retenir des vocatifs irréguliers, c'est pas impossible qu'elle aie aussi été crée par un prof de latin à un moment ; les anglophones ont "Et tu, Brute", qui leur vient de Britannicus, une pièce de Shakespeare.
Je plussoie tous ces précieux conseils Benjamin, je rajouterai qu'il ne faut pas se bloquer dans ''mobile first'' ou ''desktop first'' mais que celà dépend du besoin... Une app tournée ''utilitaire'' pour une boite etc -> desk first car ca va être très majoritairement consulté sur ordi, pareil pour une ADMIN par exemple... Merci pour cette vidéo intéressante qui permet de conforter nous points de vue de devs 😉
Mec je fais mon premier site avec nodejs. J suis dev webdev de base (oui je sais) et grace a tes vidéos je prends les bonnes habitudes. J ai commencé mon site avec bootstrap, bim je suis finalement pur css (less css) Et maintenant je refais pes style en mobile first. Merci tes vidéos sont de l or
Tailwing, bootstrap ou comment violer les principes même du CSS aussi violement qu'en utilisant des balises style dans l'HTML. J'ai vraiment des haut le cœur quand je vois des trucs genre 5:37 Honnêtement maitriser les flexboxes et les media queries et surtout les appliquer dès le début, c'est pas si compliqué. J'ai hâte que les containers queries arrivent pour faire des choses encore plus folles.
Je suis plus back que front mais bon avec le temps j'ai forcément acquis quelques compétences en CSS ;-) et le principal problème pour moi avec les framework c'est que ça pourrit le html... J'ai tenté des trucs en n'utilisant les class que pour définir le rôle de l'élément au sein de la page et j'essaye au max d'utiliser tous les types de tags dispo au sein des éléments pour les cibler en css. Si je dois utiliser un framework (bootstrap, tailwind, etc...) alors j'étend mes propres class (@extend) avec... Bon je ne dis pas que c'est le top mais c'est mon approche... Quand je mets 50 class dans un élément j'ai l'impression de détourner la fonction première des feuilles de styles... Mon approche permet plus simplement de changer tout le l'aspect du site juste en modifiant la feuille de style. Vous allez me dire que ça pourrit le css !!, ba peut-être oui mais je préfère que ça soit le css plutôt que le html... il faut peut-être imaginer un meilleurs processeur que sass ou less dans ce cas.... Quand au mobile first, je suis mitigé... car c'est juste déplacer du code d'un endroit à un autre car quand on fait un site qui s'adapte à plusieurs tailles de devices il faut tout le temps prendre en compte toutes les tailles... tu ne peux pas en laisser une de côté de temps en temps... et c'est ça à mon avis ça le plus chiant dans le responsive.. Framework ou pas ;-) Donc j'ai envie de dire "Faites comme vous le sentez 🙂" Merci pout tes vidéos et conseils au top !!
J'y avais jamais pensé !!! 🤪 Mobile first, first tip ever front. Je ne suis pas juste "front" mais j'y penserai quand j'en ferais de nouveau 👍 Thank you SO much !
Super vidéo comme dab merci. Pour ma part j’ai toujours parlé d’adaptative design et de responsive design. J’ai l’impression qu’on fait plus d’adaptative avec des blocks qui s’adaptent à la taille que du responsive qui va modifier le contenu en fonction de la taille. Sûrement plus simple de faire de l’adaptative que du responsive. Continues comme ça c’est un bonheur de suivre tes vidéos
j'ai dû dans le cadre de mon diplôme développer mon portfolio. Que j'ai développé en React (car je voulais découvrir la techno). Et justement j'ai découvert le responsive, que je détestais ! Et en fait on se prend au jeu à vouloir tout ajuster pour tous les formats ! Si on réfléchis bien en amont à comment sera fait notre html, on arrive facilement à faire un responsive, sans devoir faire grand chose... simplement changer le display, des trucs simples quoi.
Hello, je suis UI Designer et du coup c'est très plaisant de voir quelqu'un qui prend vraiment en compte les idées qu'on a eu, dans ta partie Fluid Design, souvent je me retrouve à batailler avec les dev pour avoir quelque chose qui ressemblait à ma maquette de base, même si je sais que toutes les idées ne sont pas simples à réaliser. Le coup du menu ça arrive souvent mais je t'avoue que moi même je ne remarque pas étant donné que je ne m'amuse pas à passer entre chaque breakpoint, si le site est joli et utilisable ça me convient. Mais c'est un vrai plus ce que tu soulèves et j'essayerais de m'en rappeler.
Le vrai problème du responsive, c'est dans des contextes un peu plus spécifiques que juste des blocs simples et des boutons (genre animations, illustrations, présentations avec des offsets et des absolutes dans tous les sens, etc.). Les breakpoints standardisés aujourd'hui ne sont même plus vraiment fiables, surtout quand ça concerne le format smartphone, car les producteurs n'arrivent pas à standardiser leurs appareils ils sont toujours obligés de mettre un demi-pouce de plus ou de moins, avoir un écran plus haut, un écran qui déborde sur la caméra, et maintenant même des écrans pliables... Des concepts soit-disant vendeurs (spoiler: non) pour les market, mais un bagne collectif pour les développeurs front-end, qui ne cesse de s'agrandir au fil du temps.
Benjamin code a de nouveau une place dans mon cœur ! ❤️ avec cette video, tu reviens à la base, c'est à dire expliquer le code et donner les bonnes pratiques ! On veut une vidéo sur le Fluide Design !!! :D
J'ai eu la chance d'apprendre à coder directement en mobile first. Donc pas d'angoisse de mon côté. Par contre vu ma formation (reconversion professionnel par le biais OpenClassRooms), J'ai vraiment beaucoup de mal à commenter mon code. Je ne sais pas ce que je dois commenter et comment. Si tu souhaites faire une vidéo sur ce sujet, je trouverai ça vraiment très intéressant. Merci pour ton travail comme d'habitude.
Si ton seul problème est de savoir comment commenter ton code, alors tu n'as pas de problème ... ; ) Jette un coup d'œil au bouquin "Clean Code", c'est un des chapitres abordés. En gros, ne pas faire des commentaires évidents qui vont polluer la lecture du code. Les commentaires doivent être très spartiates. Uniquement commenter le code qui est très optimisé et condensé, par des infos courtes...
Coucou! Je suis en pleine réflexion de reconversion également (je suis prof de physique dans le privé), et j'ai justement commencé les cours libres d'openclassrooms y'a 3 jours, je viens de voir le cours sur flex. Et du coup je me demandais si tu avais juste suivi les cours libres comme moi ou si tu avais suivi une réelle formation? Et surtout qu'est-ce que tu as fait ensuite? Je me demande vraiment quel est le chemin à suivre pour se former proprement en reconversion. Merci d'avance!
Bonjour, tu n’as pas à commenter ton code dans 99% des cas. Dans l’absolu tu ne vas commenter que quand tu dois donner une info sur quelque chose qui ne s’exprime pas par le code car ça vient d’un facteur extérieur, par exemple un hack css un peu niqué parce que safari se comporte bizarrement
si tu dois bosser en equipe fais des coms du style " barre de navigation " " le footer " etc pour que le prochain lise ton code plus vite ou des hacks chelous aussi à mettre en avant ou expliquer
@@niang46 salut, aujourd'hui il est possible de ce former seul sur internet mais il existe un problème à ça. Sur internet tu as la ressource pour apprendre l'ensemble des notions voulu dans un domaine (web, appli mobile, ... ). Mais souvent le plus dur c'est de trouver une structure sur le long terme. Je pense que dans un premier temps il faut que tu regardes les branches du dev qui t'intéresses web, mobile, logiciel, réseau. Dans ces grandes branches il y a plein de métiers, ex: dans le web c'est encore 2 grandes catégories le front et le back (c'est plus complexe que ça en réalité t'as une super vidéo sur la chaîne concernant le front). Après en fonction de ce que tu veux tu peux trouver des map qui retracent l'ensemble des notions nécessaires pour commencer à faire ses propres projets perso. Par exemple pour le front end tu as la vidéo de la youtubeuse coder coder qui détaille pas si mal le parcours pour faire du front. Et concernant les ressources je peux te conseiller : freecodecamp, graphikart et openclassrooms (un peu vieux sur le PHP par exemple), coder coder, code with mosh, dev simplified, code ninja pour les vidéos. En bouquin t'as la collection de the pragmatic programmers qui est génial pour tout les langages et le livre de refactoring guru sur les design patterns pour maîtriser la OOP. Bonne chance !
Merci pour cette vidéo ! c'est quali' comme d'habitude. Point important tout de même : peut-être connais-tu déjà every-layout, c'est un ebook super sympa (en anglais) pour travailler de façon fluide en pure CSS, ce sans utiliser de media queries. Aussi, j'ai remarqué que tu utilise margin-bottom/top etc., pour que ton site soit adapté au sens de lecture RTL sans toucher ton CSS, les propriétés margin-end, margin-start et consorts sont vraiment sympas à utiliser.
Salut Benjamin ! Je suis tout jeune développeur et j'adore tes vidéos ! Comme beaucoup je pense, le responsive me faisait peur avant de voir ta vidéo (oui je suis passé par Bootstrap, je n'ai pas honte de le dire...enfin...un peu quand même...). Petite question, est-ce une extension que tu utilises notamment entre 1:15 et 1:26 pour voir les breakpoints ? Je suis sur Chrome et j'utilise Window reziser, mais je trouve pas ça fou... Aurais-tu des conseils sur quoi utiliser pour mieux visualiser le côté responsive quand on code ? Merci beaucoup pour ta réponse, et pour l'ensemble du contenu que tu produis !!
Hello, je trouve que tes explications sont très clair ! Je ne comprendrai jamais pourquoi des gens pour gagner du temps qui perdront par la suite, réduisent la qualité de leurs codes pour implanter du bootstrap. Ce même import que je trouve horrible et que le CSS pur est beaucoup mieux et plus flexible ! Après tu m'auras appris le Mobile-First car j'ai toujours dev Desktop-First ... Pour les breakpoint j'ai toujours mis des transitions simple pour ne pas perdre en fluidité ! Voilà continue je kiff ton travail !
Tu peux importer que "grid" de bootstrap et pas tout bootstrap, la grid est bien foutue de base pas besoin de refaire à la main avec ses variables, et si tu fais du sass les mixins sont déjà présentes et très simple à utiliser. J'utilise uniquement bootstrap pour ça et non pour les composants, très simple à surcharger également en sass si on veut changer des variables. Sans ça, à termes tu refais tes règles, mixins, variables, media queries... et donc ça revient au même
Très intéressant encore une fois! C'est assez étonnant de voir le nombre de personnes qui ne connaissaient pas le principe du Mobile First.. Je viens de finir une formation en web design (de 10mois) et c'est clairement ce qu'on apprends au tout début, notamment aussi pour le code DRY ! Etant très intéressée par le code et aussi par le design, une vidéo sur le Fluide Design serait la bienvenue :D Merci pour tout ce que tu fais! :)
Oui une vidéo sur la fluidité m'intéresse please 🤓 Merci pour tes vidéos, elles sont inspirantes et sont une grande source de connaissances, et toujours avec ta bonne humeur ça fait plaisir :)
Si c'est l'ouverture des demandes, je vais en faire une sur d'autres points : la gestion des user stories en front. Tu ne bosses que sur maquette ou bien il y a des demandes spécifiques ? Deuxième demande : tu as dit que l'intégration, c'était pas la majeure partie du dev front mais qu'il fallait aussi faire attention à l'opti, etc. Tu pourrai faire une vidéo là dessus ? C'est super intéressant mais on trouve souvent que des trucs "visuels" sur les chaines YT de code, car plus impressionnant. Merci bien :)
J'avoue que je me foutais pas mal du mobile first...je me suis totalement retrouvé quand tu parlais d'overwrite un tas de propriétés😅😅, et c'est parfois la galère de devoir inspecter la page pour détecter les margins et autres pour combattre le Scroll... En tout cas merci pour cette vidéo, maintenant c'est du mobile first😎
Bonjour Benjamin, je suis un ancien dev frontend. ce que j'aimais bien faire quand je travaillais en agence, c'était de coder mes sites responsive en ne compilant qu'une seul foix. Mon but étais de réaliser le site de de a à z et de découvrir le site coder complètement avec une seul compile et de faire un perfect. Je sais pas si tu as déjà fait ce challenge mais je trouve ça sympa !
Votre dernière partie exprime très bien ce qu’est le responsive web design aujourd’hui et demain. Les breakpoints deviennent un outils de dernier recours presque. En tout cas c’est ainsi que j’aborde les problématiques aujourd’hui avec grid et flex, les unités relatives liées à la taille du viewport et autres. ❤
Bonjour merci pour cette vidéo=) je serais intéressé sur une vidéo sur le fluide design! Perso j'ai vu le mobile-first en cours mais en stage on m'avais tjrs fournis des maquettes du site en mode "pc" et non mobile à réalisé. Ce qui fait que je ne sais donc pas si en pratique il faudrait demandé d'abord une version mobile à la graphiste ou a la personne qui s'en occupe avant de travaillé sur celle "pc" ?
Bonjour, Tout d'abord, merci pour tes vidéo, qui sont toujours très intéressantes. 2 remarques où je ne comprends pas les développeurs web : 1- les breakpoints se font toujours à un nombre de pixels sur la largeur ou la hauteur. Pourquoi ? on peut également mettre des cm (pouces ou mm) et on parle alors de la taille physique de l'écran (ou de la fenêtre) et non du nombre de pixels qui ne nous donne pas vraiment l'information de la taille physique de l'écran (trinité cm / résolution / nombre de pixels). Les écrans de smartphones contiennent maintenant bien plus de pixels que certains écrans ! Du coup cela ne me semble plus être la bonne information. 2- Pour la fluidité j'utilise pour les dimensions les unités vmin,vmax, vw et vh. Cela marche aussi pour la taille des fontes de caractères, et cela augmente nettement la fluidité (notamment quand je change la taille de la fenêtre ). Et dans la média queries, pour mes fameux breakponts (si je je change la valeur 5 / 6 vmin en mobile first, 2 / 3 sur grand écran. Ce sont 2 façons de faire que je vois rarement dans les conseils. Est-ce que je suis si loin de la vérité ?
Pour la question 1 : En faite le pixel est aussi une unité de mesure physique comme tu dis, un pixel peut très bien se traduire en centimètre. Les breakpoints communs comme 1024 pixels sont donc une taille commune où les écrans ne passe rarement en dessous. 2 : vh et vw sont des unités utilisés par tout le monde car elles s'adapte à toute les tailles d'écrans, 100vh est la hauteur de ton navigateur et 100 vw est la largueur, quel que soit l'écran. Cela peut être utile par exemple si tu as une section sur ta page (la première section par exemple) qui doit faire tout pile toute la hauteur de l'écran, alors tu pourras utiliser cette valeur adaptative. Pour vmin et vmax le problème c'est que quand tu intègres une maquette, ces valeurs ne seront jamais les mêmes affichés pour tout les écrans si par exemple tu veux une font d'une certaine taille. Pour avoir une certaine uniformité entre les écrans en intégration, il est souvent recommandé d'utiliser des tailles fixes (comme les px).
Salut, juste une note sur 100vh : sur mobile ça représente la hauteur totale d'affichage. Lorsque la barre de navigation du browser est présente en haut de l'écran, 100vh fera déscendre plus bas que l'écran. Préférer 100% sur html + body.
@@antoinebayard4484 euh, en fait non, le pixel n'est pas une unité physique. La taille d'un pixel dépend de l'écran dont on parle. Par exemple, un écran de téléphone peut faire 1024 pixel, et celui d'un écran d'ordinateur de bureau aussi. Et les deux n'ont pas la même taille physique. Ainsi, dans le css on parle de deux pixels qui n'ont pas la même taille physique. Et donc, utiliser les pixels pour déterminer la taille physique est problématique. Pour le faire, il faut également prendre en compte la résolution qui nous donne le nombre de pixels par pouce.
@@laurentdupont8318 Salut, merci pour ta première remarque car je pensais être le seul à penser ça étant donné que personne n'en parle. C'est d'ailleurs la raison principale qui m'empêche de me mettre au dev web car je trouve que c'est illogique de toujours parler en pixel, je ne saurai donc pas moi même comment faire. Par exemple étant donné que sur la plupart des sites tout est toujours défini en pixel le site rendra bien par exemple sur un 27" FHD, mais sur un 27" 4K qu'en sera-t-il ? Les éléments seront tous 2x plus petit ? ça n'a aucun sens
Super video. En vrai, tous les créas avec qui j'ai bossé sont soit à la ramasse, soit ne prennent pas le temps de bien penser le responsive... Du coup en temps que dev comme tu le dis, c'est à nous d'anticiper. Je crois que c'est ça qui stress les devs aussi. Sans parler des safe-area sur mobile...
Je pense que c'est mieux d'utiliser les rem au lieu des pixels comme unité.on pourra agir sur le font size de base pour que tous les elements en rem suivent automatiquement
Je suis dev back et la plupart du temps sans dev front sur le projet. Difficile de savoir pour la fluidité par exemple, le designer devrait également le souligner puisqu'on n'a pas forcément l'habitude de travailler de la même manière. Après aujourd'hui il y a de bons outils comme Figma (coucou BastiUI) et je pense que ça doit bien aider aussi à comprendre la vision du designer.
Pour la communication designer/dev concernant les sizes et autres espaces, j'ai imposé à mon équipe de product designer via notre design system une nomenclature. Exemple, les espaces fonctionnent par nom "space XS" "space S" space M" etc... et pour chaque space on à des valeurs correspondante suivant des breakpoints. (exemple : Space L = 32px sur un breakpoint 1440 et au delà, mais sur un breakpoint de 375 il sera de 24px... Les sizes intermédiaires se calculent seule ensuite.
Alors comment on peut détester bootstrap et utiliser tailwind css ? Après tout on ne devrait pas charger des tonnes et des tonnes de styles juste pour du responsive non ? Ou j'ai raté quelque chose ?
Merci, super vidéo et très intéressant la partie sur le mobile first, j'en avais déjà entendu parler mais sans savoir pourquoi c'était la bonne manière de faire. 💪💪👍
Merci pour ta vidéo Benjamin ! Je sais que ça sort du cadre « front-end » mais pour la création d’une maquette, est-il plus logique de partir sur du mobile first également ou de commencer avec la version desktop ? J’aurai plus tendance à dire de commencer par desktop car j’ai l’impression que c’est plus simple de le transposer en mobile. Qu’est-ce que vous en pensez ?
Superbe vidéo comme toujours ! carrément une vidéo sur la fluidité serait intéressante ! je vote POUR ! Je commente rarement les vidéos en générale mais j'avais une question sur comment bien travaillé en mobile first ? Y'a t'il de bonne pratique à avoir, ou de bon outils qui pourrait aidez ? Pour faire un retour de mon expérience rapide.. (attention monologue) Je sort de formation assez intense (dev web & web mobile de chez O'clock) on a vue un peu de tout en 6 mois c'était fun, (git, terminal, html, css, js, php, laravel, wordpress, react) et j'ai eu un énorme coup de cœur pour React. Ayant fini y'a quelque semaine la j'attaque des projets en solo histoire de garnir mon gitHub et de mon construire un porte-folio mais c'est pas évident car comme tu le dit on perd pas mal de temps quand on a pas les bonnes pratiques et je pense qu'une vidéo sur des outils pour les débutants en dev serait pertinente également (bon je vais quand même zieuter ta chaine si ça n'a pas été déjà fait ^^') En tout cas merci pour tes vidéos c'est toujours une source d'inspiration et d'ailleurs c'est de ta faute (ou plutôt grâce à toi :D ) que j'ai tout lâcher pour me reconvertir dans le dev y'a 1 ans. eh j'en très heureux même si stressé que la formation ait fini et que maintenant c'est le grand bain !
Et concernant le mobile first, je suis d'accord avec toi dans la majorité des cas ça évite d'avoir à remettre des propriétés a leur état initial. Mais des fois il peut arriver l'inverse. C'est en desktop que les propriétés sont a leur état initial. Du coup le mieux selon moi et de définir par défaut les règles communes et dans les breakpoints min ou max les règles spécifiques et fessant en sorte de ne pas remettre les valeurs initiales : display:block; margin:0; position:static...
Est-ce qu'après cette vidéo le responsive vous paraît être moins angoissant et compliqué ?
Est-ce que vous aviez connaissance du fluide design ? Vous y faisiez gaff jusque là ?
je dirais qu'il faut .... le faire
mais bootstrap 😭😭😭😭😭
Oui fais nous une vidéo sur le fluide design avec des exemples
Merci
Il ne manque plus que l'italien et ça deviendra Davinci Code.
En formation, on nous dit de coder mobile first, mais on où en avait pas forcément expliquer l'intérêt, c'est beaucoup plus clair maintenant. Et c'est quoi ce designer qui fait pas de responsive avec une maquette Figma :D
@@kaeduss494 un feignasse lol ^^
bon après figma ça reste figmou quoi
on ns l'a dit cash mais selon les formations ça va être plus ou moins approfondi je pense
Merci pour ce contenu de qualité! oui une video sur le " Design fluide" serait vraiment appréciée
Yo ! Je dois admettre que ta vidéo est grave intéressante, étant développeur junior front les breakpoints je connaissais. En revanche la méthode du mobile-first m'étais inconnu et honnêtement c'est vraiment pas con :D. Je tacherais d'y pensais la prochaine fois merci !!
Mobile first !!! Merci Grafikart !!!
Super vidéo comme d'hab ! Je te suis depuis longtemps et dernièrement je trouve vraiment que la forme et le fond de tes formats fait vraiment le taff ! J'ai le doux rêve de t'entendre parler un jour d'accessibilité. Un sujet ô combien négligé et inconnu pour une majorité de dev front (et pourtant essentiel, utile pour un tas de gens et pas si compliqué)
Très bonne suggestion ! Je n'en suis pas moi même un expert car je n'ai jamais digger des formations sur le sujet mais je pense avoir développer par mal d'automatisme et de bonnes pratiques qui rendent mon travail accessible. J'ai pas mal de tuyaux à partager mais une chose est sûre, il va ne falloir bûcher le sujet si je veux pouvoir l'aborder sans dire de conneries !
@@BenjaminCode très enthousiaste à l'idée que tu développes ce sujet également !
Oui une vidéo sur la fluidité
Pour le coup, c'est tellement agréable de voir quelqu'un mettre des mots sur ce qu'on fait au quotidien et qu'on peut avoir du mal à expliquer le pourquoi du comment.
Le responsive, c'est une question d'habitude et de bonnes pratiques ! À force de concevoir des structures qui seront agréable en mobile & en desktop, vous finirez par développer des mécanismes et ça n'en deviendra que des plus agréable.
N'ayez pas peur, c'est génial.
Hey, merci pour ta vidéo :)
Pendant ma formation j'étais tombé sur un article qui expliquait la différence entre "Responsive Design" et "Adaptive Design". Apparemment ces termes font consensus. Je cite l'article:
"A website created with responsive design serves up the same site to every device, but that site is fluid and will change its layout and appearance based on the size and orientation of the device.
...
In adaptive design, a different website layout is created for each device’s screen. As it loads, the site recognizes the size of the screen and serves up the layout that was made for that viewport."
(Source: "Responsive vs. Adaptive Design" sur CareerFoundry)
En gros ce que tu appelles "Fluid design" j'imagine que c'est ce qu'ils appellent "Responsive", et "Adaptive design" c'est un site qui utilise des breakpoints pour modifier le layout. Du coup un site a besoin d'un mélange d'adaptive ET de responsive pour garantir une bonne utilisabilité sur tous les supports.
Pas vraiment en fait, l'adaptive design voit plutot ça comme un front entièrement différent en fonction du device.
Souvent on fait un mixe entre les 2, il y a un site mobile et un site desktop distinct qui ont chacun des elements responsive en fonction da taille d'écran.
@@nebjil06 en général le site mobile n'est pas conçu pour desktop, mais l'inverse oui, vu qu'il existe des ordis avec des petits écrans
11:46 AMEN! merci merci merci de pointer ce point
Salut! Je connaissais le mobile first mais plus dans le sens: "il faut penser au format téléphone au début car on est sûr du comportement voulut", alors qu'avec ton explication ça me semble tellement plus logique maintenant, ça me motive pour m'y mettre.
Pour le fluide design, je le faisais déjà avant l'apparition des flexbox en utilisant des pourcentages pour séparer mes éléments, ça rendait plutôt pas mal mais il y avait souvent des comportements chaotiques. Maintenant avec les flexbox c'est tellement plus simple et ça rend tout de suite bien!
J'ai même pas fini la vidéo et je peux déjà dire : tu fais du boulot très propre. Je te suis depuis pas mal d'années et j'ai l'impression que cette chaîne a fait un pas en avant sur la qualité du contenu. Bravo !
Merci du soutien Raph !
Je connaissais déjà pas mal le sujet, mais l'affichage des breakpoints "visuels" dans chrome j'avais pas !!!! trop bien merci
7:14 tu m’as eu 🤣 très bonne vidéo !
Très bon vulgarisateur. Je regarde souvent sans pour autant savoir « coder » mais tu aides à beaucoup mieux comprendre cet univers
Merci!
Tjrs un plaisir de t’écouter! Merci
J'ai eu la chance d'avoir était guider par un super mentor quand j'ai commencé le dev frontend il y a 2 ans, il m'a montré tout ces petits trucs au tout début de mon auto formation, mon mentor ne fait que me montrer comment faire et il me laisse seul avec la maquette après ... je m'attendais a voir une surprise super cool à la fin de ta vidéo mais bof c'était juste une vidéo qui me montre à quel point mon mentor était super 🙈
Cette vidéo va sûrement m'aider à guider un junior dans son apprentissage du métier intégrateur .. merci mec
Ouuuii une vidéo sur la fluidité ce serait top !!! Je commente jamais mais u m'as fait découvrir le code et maintenant et je suis dev depuis 1 an et je me suis jamais senti aussi bien dans un métier ! Merci pour tes vidéos elles sont vraiment cool !
Merci pour ta sueur, ton sacrifice ne sera point vain. Let's go pour la vidéo sur la fluidité
Dev front depuis plus de 10 ans, j'ai bien apprécié ta vidéo. J'appelle également mes intés "fluides" ;)
Le "cette vidéo me coute" m'a fait m'abonner XD
Au début quand je faisais le responsive, je me prenais pour un génie du responsive parce que ça marchait sur tous les écrans, alors que je plaçais 30 000 breakpoints.
PS: 7:11 à propos de cet événement, les historiens de l'époque (qui étaient pas vraiment des historiens au sens scientifique actuel, mais plutôt des idéologues) rapportent que César était tellement snob qu'il aurait prononcé "Toi aussi mon fils" en Grec avant de mourir en regardant Brutus
@Fragment 5 Oui selon l'historien Suétone, parler ou écrire en Grec ancien était une marque d'éducation raffinée.
Par exemple Marc-Aurèle empereur et philosophe romain écrivait en Grec ancien
@Fragment 5 Non c'est du Latin, mais des historiens rapportent que César aurait dit en vrai "Καὶ σὺ τέκνον"
D'ailleurs, c'est rigolo, mais dans différentes langues, la "citation" en latin qu'on a retenue n'est pas la même. Les francophones ont "tu quoque, mi fili", qui nous viendrait de l'abbé Lhomond, qui a rédigé un manuel pour l'enseignement du latin au XVIIIe siècle ; les italiens ont retenu "Tu quoque, Brute, fili mi", je ne sais pas d'où ça sort, mais vu que la page Wikipedia en italien mentionne que la phrase sert de moyen mnémotechnique pour retenir des vocatifs irréguliers, c'est pas impossible qu'elle aie aussi été crée par un prof de latin à un moment ; les anglophones ont "Et tu, Brute", qui leur vient de Britannicus, une pièce de Shakespeare.
@@filiaaut Hahahahaha c'est marrant je savais pas. Merci pour l'info
Je regarde seulement la vidéo, elle est super intéressante pour tous mais personnellement étant débutant je l’ai beaucoup apprécié. J’en redemande ! 👍
Je plussoie tous ces précieux conseils Benjamin, je rajouterai qu'il ne faut pas se bloquer dans ''mobile first'' ou ''desktop first'' mais que celà dépend du besoin... Une app tournée ''utilitaire'' pour une boite etc -> desk first car ca va être très majoritairement consulté sur ordi, pareil pour une ADMIN par exemple...
Merci pour cette vidéo intéressante qui permet de conforter nous points de vue de devs 😉
Mec je fais mon premier site avec nodejs. J suis dev webdev de base (oui je sais) et grace a tes vidéos je prends les bonnes habitudes. J ai commencé mon site avec bootstrap, bim je suis finalement pur css (less css)
Et maintenant je refais pes style en mobile first. Merci tes vidéos sont de l or
Tailwing, bootstrap ou comment violer les principes même du CSS aussi violement qu'en utilisant des balises style dans l'HTML.
J'ai vraiment des haut le cœur quand je vois des trucs genre 5:37
Honnêtement maitriser les flexboxes et les media queries et surtout les appliquer dès le début, c'est pas si compliqué.
J'ai hâte que les containers queries arrivent pour faire des choses encore plus folles.
Je suis plus back que front mais bon avec le temps j'ai forcément acquis quelques compétences en CSS ;-) et le principal problème pour moi avec les framework c'est que ça pourrit le html... J'ai tenté des trucs en n'utilisant les class que pour définir le rôle de l'élément au sein de la page et j'essaye au max d'utiliser tous les types de tags dispo au sein des éléments pour les cibler en css. Si je dois utiliser un framework (bootstrap, tailwind, etc...) alors j'étend mes propres class (@extend) avec... Bon je ne dis pas que c'est le top mais c'est mon approche... Quand je mets 50 class dans un élément j'ai l'impression de détourner la fonction première des feuilles de styles... Mon approche permet plus simplement de changer tout le l'aspect du site juste en modifiant la feuille de style. Vous allez me dire que ça pourrit le css !!, ba peut-être oui mais je préfère que ça soit le css plutôt que le html... il faut peut-être imaginer un meilleurs processeur que sass ou less dans ce cas.... Quand au mobile first, je suis mitigé... car c'est juste déplacer du code d'un endroit à un autre car quand on fait un site qui s'adapte à plusieurs tailles de devices il faut tout le temps prendre en compte toutes les tailles... tu ne peux pas en laisser une de côté de temps en temps... et c'est ça à mon avis ça le plus chiant dans le responsive.. Framework ou pas ;-) Donc j'ai envie de dire "Faites comme vous le sentez 🙂"
Merci pout tes vidéos et conseils au top !!
Ayoye! Méchante vidéo! Je partage ça à mes collègues étudiants! Merci pour tes opinions pertinentes!
Trop bien la video 😃 carrément fluidifie ta commu!
Un grand oui pour une vidéo sur la fluidité ! Et top comme vidéo, comme d'hab :)
J'y avais jamais pensé !!! 🤪 Mobile first, first tip ever front.
Je ne suis pas juste "front" mais j'y penserai quand j'en ferais de nouveau 👍
Thank you SO much !
Super vidéo comme dab merci. Pour ma part j’ai toujours parlé d’adaptative design et de responsive design. J’ai l’impression qu’on fait plus d’adaptative avec des blocks qui s’adaptent à la taille que du responsive qui va modifier le contenu en fonction de la taille. Sûrement plus simple de faire de l’adaptative que du responsive. Continues comme ça c’est un bonheur de suivre tes vidéos
Toujours trop bien! Merci Benji!!
merci benjamin pour cette video une fois de plus captivante et simple a comprendre
j'ai dû dans le cadre de mon diplôme développer mon portfolio. Que j'ai développé en React (car je voulais découvrir la techno).
Et justement j'ai découvert le responsive, que je détestais ! Et en fait on se prend au jeu à vouloir tout ajuster pour tous les formats !
Si on réfléchis bien en amont à comment sera fait notre html, on arrive facilement à faire un responsive, sans devoir faire grand chose... simplement changer le display, des trucs simples quoi.
Vrai
Hello, je suis UI Designer et du coup c'est très plaisant de voir quelqu'un qui prend vraiment en compte les idées qu'on a eu, dans ta partie Fluid Design, souvent je me retrouve à batailler avec les dev pour avoir quelque chose qui ressemblait à ma maquette de base, même si je sais que toutes les idées ne sont pas simples à réaliser. Le coup du menu ça arrive souvent mais je t'avoue que moi même je ne remarque pas étant donné que je ne m'amuse pas à passer entre chaque breakpoint, si le site est joli et utilisable ça me convient. Mais c'est un vrai plus ce que tu soulèves et j'essayerais de m'en rappeler.
Je donnerais tout absolument tout pour une video sur la fluidité benjamin code.
Le vrai problème du responsive, c'est dans des contextes un peu plus spécifiques que juste des blocs simples et des boutons (genre animations, illustrations, présentations avec des offsets et des absolutes dans tous les sens, etc.). Les breakpoints standardisés aujourd'hui ne sont même plus vraiment fiables, surtout quand ça concerne le format smartphone, car les producteurs n'arrivent pas à standardiser leurs appareils ils sont toujours obligés de mettre un demi-pouce de plus ou de moins, avoir un écran plus haut, un écran qui déborde sur la caméra, et maintenant même des écrans pliables... Des concepts soit-disant vendeurs (spoiler: non) pour les market, mais un bagne collectif pour les développeurs front-end, qui ne cesse de s'agrandir au fil du temps.
Ta manière de traiter les sujets très amusante 😊
Super video. Vas y j'attends direct la prochaine video sur la fluidité
OUI ! Je le veux !
Benjamin code a de nouveau une place dans mon cœur ! ❤️ avec cette video, tu reviens à la base, c'est à dire expliquer le code et donner les bonnes pratiques ! On veut une vidéo sur le Fluide Design !!! :D
Après j'ai pas une liste infinie de conseils à donner donc faut bien que je diversifie mes vidéos !
Ouiii ! :) Une vidéo sur le Fluide design 🙏🔥🔥
@@BenjaminCode Je ne connais personne d'autre qui a ton style sur DevTube ! C'est super que tu tentes de nouveaux concepts !
Gg pour la musique de Godevain le vilain, et Tailwind CSS magnifique :)
J'ai eu la chance d'apprendre à coder directement en mobile first. Donc pas d'angoisse de mon côté. Par contre vu ma formation (reconversion professionnel par le biais OpenClassRooms), J'ai vraiment beaucoup de mal à commenter mon code. Je ne sais pas ce que je dois commenter et comment. Si tu souhaites faire une vidéo sur ce sujet, je trouverai ça vraiment très intéressant.
Merci pour ton travail comme d'habitude.
Si ton seul problème est de savoir comment commenter ton code, alors tu n'as pas de problème ... ; )
Jette un coup d'œil au bouquin "Clean Code", c'est un des chapitres abordés. En gros, ne pas faire des commentaires évidents qui vont polluer la lecture du code. Les commentaires doivent être très spartiates. Uniquement commenter le code qui est très optimisé et condensé, par des infos courtes...
Coucou! Je suis en pleine réflexion de reconversion également (je suis prof de physique dans le privé), et j'ai justement commencé les cours libres d'openclassrooms y'a 3 jours, je viens de voir le cours sur flex.
Et du coup je me demandais si tu avais juste suivi les cours libres comme moi ou si tu avais suivi une réelle formation? Et surtout qu'est-ce que tu as fait ensuite? Je me demande vraiment quel est le chemin à suivre pour se former proprement en reconversion.
Merci d'avance!
Bonjour, tu n’as pas à commenter ton code dans 99% des cas. Dans l’absolu tu ne vas commenter que quand tu dois donner une info sur quelque chose qui ne s’exprime pas par le code car ça vient d’un facteur extérieur, par exemple un hack css un peu niqué parce que safari se comporte bizarrement
si tu dois bosser en equipe fais des coms du style " barre de navigation " " le footer " etc pour que le prochain lise ton code plus vite
ou des hacks chelous aussi à mettre en avant ou expliquer
@@niang46 salut, aujourd'hui il est possible de ce former seul sur internet mais il existe un problème à ça. Sur internet tu as la ressource pour apprendre l'ensemble des notions voulu dans un domaine (web, appli mobile, ... ). Mais souvent le plus dur c'est de trouver une structure sur le long terme. Je pense que dans un premier temps il faut que tu regardes les branches du dev qui t'intéresses web, mobile, logiciel, réseau. Dans ces grandes branches il y a plein de métiers, ex: dans le web c'est encore 2 grandes catégories le front et le back (c'est plus complexe que ça en réalité t'as une super vidéo sur la chaîne concernant le front). Après en fonction de ce que tu veux tu peux trouver des map qui retracent l'ensemble des notions nécessaires pour commencer à faire ses propres projets perso. Par exemple pour le front end tu as la vidéo de la youtubeuse coder coder qui détaille pas si mal le parcours pour faire du front.
Et concernant les ressources je peux te conseiller : freecodecamp, graphikart et openclassrooms (un peu vieux sur le PHP par exemple), coder coder, code with mosh, dev simplified, code ninja pour les vidéos.
En bouquin t'as la collection de the pragmatic programmers qui est génial pour tout les langages et le livre de refactoring guru sur les design patterns pour maîtriser la OOP.
Bonne chance !
Merci pour cette vidéo ! c'est quali' comme d'habitude. Point important tout de même : peut-être connais-tu déjà every-layout, c'est un ebook super sympa (en anglais) pour travailler de façon fluide en pure CSS, ce sans utiliser de media queries. Aussi, j'ai remarqué que tu utilise margin-bottom/top etc., pour que ton site soit adapté au sens de lecture RTL sans toucher ton CSS, les propriétés margin-end, margin-start et consorts sont vraiment sympas à utiliser.
Salut Benjamin !
Je suis tout jeune développeur et j'adore tes vidéos ! Comme beaucoup je pense, le responsive me faisait peur avant de voir ta vidéo (oui je suis passé par Bootstrap, je n'ai pas honte de le dire...enfin...un peu quand même...). Petite question, est-ce une extension que tu utilises notamment entre 1:15 et 1:26 pour voir les breakpoints ? Je suis sur Chrome et j'utilise Window reziser, mais je trouve pas ça fou... Aurais-tu des conseils sur quoi utiliser pour mieux visualiser le côté responsive quand on code ?
Merci beaucoup pour ta réponse, et pour l'ensemble du contenu que tu produis !!
Hello, je trouve que tes explications sont très clair !
Je ne comprendrai jamais pourquoi des gens pour gagner du temps qui perdront par la suite, réduisent la qualité de leurs codes pour implanter du bootstrap. Ce même import que je trouve horrible et que le CSS pur est beaucoup mieux et plus flexible !
Après tu m'auras appris le Mobile-First car j'ai toujours dev Desktop-First ...
Pour les breakpoint j'ai toujours mis des transitions simple pour ne pas perdre en fluidité !
Voilà continue je kiff ton travail !
Tu peux importer que "grid" de bootstrap et pas tout bootstrap, la grid est bien foutue de base pas besoin de refaire à la main avec ses variables, et si tu fais du sass les mixins sont déjà présentes et très simple à utiliser. J'utilise uniquement bootstrap pour ça et non pour les composants, très simple à surcharger également en sass si on veut changer des variables.
Sans ça, à termes tu refais tes règles, mixins, variables, media queries... et donc ça revient au même
Très intéressant encore une fois!
C'est assez étonnant de voir le nombre de personnes qui ne connaissaient pas le principe du Mobile First..
Je viens de finir une formation en web design (de 10mois) et c'est clairement ce qu'on apprends au tout début, notamment aussi pour le code DRY !
Etant très intéressée par le code et aussi par le design, une vidéo sur le Fluide Design serait la bienvenue :D
Merci pour tout ce que tu fais! :)
oui une vidéo sur la fluidité stp... la qualité des informations de tes vidéos, c'est top🙌🥺
Benjamin : Cette vidéo me coûte....
Moi, un intellect : Pouce Bleu pour te rafraichir.
Ouiii une vidéo sur le fluid design, j'aimerai bien voir ce que ça donne techniquement, ça à l'air un peu angoissant aussi
Super, hâte de voir la vidéo sur la fluidité, entre les blocs et des tailles de police fluide 😉
Super vidéo! On attends la vidéo sur la fluidité
Oui une vidéo sur la fluidité m'intéresse please 🤓
Merci pour tes vidéos, elles sont inspirantes et sont une grande source de connaissances, et toujours avec ta bonne humeur ça fait plaisir :)
Si c'est l'ouverture des demandes, je vais en faire une sur d'autres points : la gestion des user stories en front. Tu ne bosses que sur maquette ou bien il y a des demandes spécifiques ?
Deuxième demande : tu as dit que l'intégration, c'était pas la majeure partie du dev front mais qu'il fallait aussi faire attention à l'opti, etc. Tu pourrai faire une vidéo là dessus ? C'est super intéressant mais on trouve souvent que des trucs "visuels" sur les chaines YT de code, car plus impressionnant.
Merci bien :)
J'avoue que je me foutais pas mal du mobile first...je me suis totalement retrouvé quand tu parlais d'overwrite un tas de propriétés😅😅, et c'est parfois la galère de devoir inspecter la page pour détecter les margins et autres pour combattre le Scroll...
En tout cas merci pour cette vidéo, maintenant c'est du mobile first😎
Vidéo extrêmement intéressante et riche, merci beaucoup
Merci pour tes vidéos, toujours des pépites d’infos 👏
Bonjour Benjamin, je suis un ancien dev frontend. ce que j'aimais bien faire quand je travaillais en agence, c'était de coder mes sites responsive en ne compilant qu'une seul foix. Mon but étais de réaliser le site de de a à z et de découvrir le site coder complètement avec une seul compile et de faire un perfect. Je sais pas si tu as déjà fait ce challenge mais je trouve ça sympa !
Super ta vidéo avec toujours cette pointe d'humour ! Je suis chaud pour la fluidité !
Votre dernière partie exprime très bien ce qu’est le responsive web design aujourd’hui et demain. Les breakpoints deviennent un outils de dernier recours presque. En tout cas c’est ainsi que j’aborde les problématiques aujourd’hui avec grid et flex, les unités relatives liées à la taille du viewport et autres. ❤
Super vidéo! Flexbox est vraiment à bien maîtriser de nos jours!
Je te lefeleuh savoir que je veux une vidéo sur la fluidité ! Coeur sur toi ❤
Bonjour merci pour cette vidéo=) je serais intéressé sur une vidéo sur le fluide design!
Perso j'ai vu le mobile-first en cours mais en stage on m'avais tjrs fournis des maquettes du site en mode "pc" et non mobile à réalisé. Ce qui fait que je ne sais donc pas si en pratique il faudrait demandé d'abord une version mobile à la graphiste ou a la personne qui s'en occupe avant de travaillé sur celle "pc" ?
oui stp une vidéo sur la fluidité ca serait insane
Très bonne vidéo et oui j'aimerais bien une vidéo sur la fluidité !
Super vidéo, ce sérait vraiment cool une vidéo sur la fluidité. Je débute alors ça m'intéresse énormément
Merci Benjamin
Hello super vidéo 🤘 question tu n'utilise pas du scss ? Je trouve ça très utile
Bonjour,
Tout d'abord, merci pour tes vidéo, qui sont toujours très intéressantes.
2 remarques où je ne comprends pas les développeurs web :
1- les breakpoints se font toujours à un nombre de pixels sur la largeur ou la hauteur. Pourquoi ? on peut également mettre des cm (pouces ou mm) et on parle alors de la taille physique de l'écran (ou de la fenêtre) et non du nombre de pixels qui ne nous donne pas vraiment l'information de la taille physique de l'écran (trinité cm / résolution / nombre de pixels). Les écrans de smartphones contiennent maintenant bien plus de pixels que certains écrans ! Du coup cela ne me semble plus être la bonne information.
2- Pour la fluidité j'utilise pour les dimensions les unités vmin,vmax, vw et vh. Cela marche aussi pour la taille des fontes de caractères, et cela augmente nettement la fluidité (notamment quand je change la taille de la fenêtre ). Et dans la média queries, pour mes fameux breakponts (si je je change la valeur 5 / 6 vmin en mobile first, 2 / 3 sur grand écran.
Ce sont 2 façons de faire que je vois rarement dans les conseils. Est-ce que je suis si loin de la vérité ?
Intéressant, mais je commente juste pour être prévenu des réponses, faites pas attention a moi ^^
Pour la question 1 : En faite le pixel est aussi une unité de mesure physique comme tu dis, un pixel peut très bien se traduire en centimètre. Les breakpoints communs comme 1024 pixels sont donc une taille commune où les écrans ne passe rarement en dessous.
2 : vh et vw sont des unités utilisés par tout le monde car elles s'adapte à toute les tailles d'écrans, 100vh est la hauteur de ton navigateur et 100 vw est la largueur, quel que soit l'écran. Cela peut être utile par exemple si tu as une section sur ta page (la première section par exemple) qui doit faire tout pile toute la hauteur de l'écran, alors tu pourras utiliser cette valeur adaptative. Pour vmin et vmax le problème c'est que quand tu intègres une maquette, ces valeurs ne seront jamais les mêmes affichés pour tout les écrans si par exemple tu veux une font d'une certaine taille. Pour avoir une certaine uniformité entre les écrans en intégration, il est souvent recommandé d'utiliser des tailles fixes (comme les px).
Salut, juste une note sur 100vh : sur mobile ça représente la hauteur totale d'affichage. Lorsque la barre de navigation du browser est présente en haut de l'écran, 100vh fera déscendre plus bas que l'écran. Préférer 100% sur html + body.
@@antoinebayard4484 euh, en fait non, le pixel n'est pas une unité physique. La taille d'un pixel dépend de l'écran dont on parle. Par exemple, un écran de téléphone peut faire 1024 pixel, et celui d'un écran d'ordinateur de bureau aussi. Et les deux n'ont pas la même taille physique. Ainsi, dans le css on parle de deux pixels qui n'ont pas la même taille physique. Et donc, utiliser les pixels pour déterminer la taille physique est problématique. Pour le faire, il faut également prendre en compte la résolution qui nous donne le nombre de pixels par pouce.
@@laurentdupont8318 Salut, merci pour ta première remarque car je pensais être le seul à penser ça étant donné que personne n'en parle. C'est d'ailleurs la raison principale qui m'empêche de me mettre au dev web car je trouve que c'est illogique de toujours parler en pixel, je ne saurai donc pas moi même comment faire.
Par exemple étant donné que sur la plupart des sites tout est toujours défini en pixel le site rendra bien par exemple sur un 27" FHD, mais sur un 27" 4K qu'en sera-t-il ? Les éléments seront tous 2x plus petit ? ça n'a aucun sens
Salut benjamin,
Toujours aussi instructives tes vidéos 😊
Ça serait vraiment sympa une vidéo sur la fluidité dans les sites web 😊 stp
Je me suis pris de passion pour tes vidéos ! elles sont vraiment bien , continue sur le thème du responsive j'adore ♥
Oui, je veux bien une vidéo sur le fluid 😉👍👌
Déjà simplement merci pour ce contenu très intéressant et oui pour une vidéo sur la fluidité. Il existe effectivement un terme mais aucun souvenir 😭😂
Bonjour Benjamin, oui on voudrait bien une vidéo sur le fluid design 🤔🤔
Video sur la fluidité top! on l'attends! Ciao de l'Italie
J'ai encore appris de toi. Thanks
Super video. En vrai, tous les créas avec qui j'ai bossé sont soit à la ramasse, soit ne prennent pas le temps de bien penser le responsive... Du coup en temps que dev comme tu le dis, c'est à nous d'anticiper. Je crois que c'est ça qui stress les devs aussi. Sans parler des safe-area sur mobile...
Très très intéressant, ça a clarifié pas mal e choses pour moi qui suit plutôt dev back !
Merci pour la vulgarisation. Est-ce que tu pourrais expliquer Angular à l'urbaniste API que je suis?
Ouiiii pour la fluidité, oui oui et encore ouiiiiiiiiiiii :)
Hello Benji, que penses tu du système de clamp() en css qu'on peut utiliser sur pas mal de props? Cela évite d'abuser de médiaqueries? THX
super vidéo comme dab
qu'est ce que tu penses de dart && flutter ?
Très intéressant, merci !
C'est dit avec quel voix ?
😂
fluidité fluidité fluidité, oui oui oui on veut.
J'ai pas encore regardé la vidéo mais la miniature me fait tellement rire 😂🤣🤣
C'est une bonne vid mais dommage que ta pas parler du media query hover en CSS
ca pourra en aider plus un pour un design (responsive/adaptative)
Super vidéo merci Benjamin, pour ma part j'ai juste appris tailwind pour échapper au responsive..
Je pense que c'est mieux d'utiliser les rem au lieu des pixels comme unité.on pourra agir sur le font size de base pour que tous les elements en rem suivent automatiquement
Je suis dev back et la plupart du temps sans dev front sur le projet.
Difficile de savoir pour la fluidité par exemple, le designer devrait également le souligner puisqu'on n'a pas forcément l'habitude de travailler de la même manière.
Après aujourd'hui il y a de bons outils comme Figma (coucou BastiUI) et je pense que ça doit bien aider aussi à comprendre la vision du designer.
J'adore vous ecouter Mr Benjamin Code
Pour la communication designer/dev concernant les sizes et autres espaces, j'ai imposé à mon équipe de product designer via notre design system une nomenclature. Exemple, les espaces fonctionnent par nom "space XS" "space S" space M" etc... et pour chaque space on à des valeurs correspondante suivant des breakpoints. (exemple : Space L = 32px sur un breakpoint 1440 et au delà, mais sur un breakpoint de 375 il sera de 24px... Les sizes intermédiaires se calculent seule ensuite.
Je suis pour une vidéo dédié au fluide design !
Comme à chaque fois vidéo au top 👌
Let’s go sur la vidéo de la fluidité
Alors comment on peut détester bootstrap et utiliser tailwind css ? Après tout on ne devrait pas charger des tonnes et des tonnes de styles juste pour du responsive non ? Ou j'ai raté quelque chose ?
Merci, super vidéo et très intéressant la partie sur le mobile first, j'en avais déjà entendu parler mais sans savoir pourquoi c'était la bonne manière de faire.
💪💪👍
Merci pour ta vidéo Benjamin !
Je sais que ça sort du cadre « front-end » mais pour la création d’une maquette, est-il plus logique de partir sur du mobile first également ou de commencer avec la version desktop ?
J’aurai plus tendance à dire de commencer par desktop car j’ai l’impression que c’est plus simple de le transposer en mobile.
Qu’est-ce que vous en pensez ?
Hello un grand plaisir de suivre tes vidéos comme toujours, ce que tu nome Fluide design, ne serai-ce pas communément désigné comme atomique design ?
Merci pour cet aparthé latin, tu gères. Interessé par ta fluidité.
Superbe vidéo comme toujours !
carrément une vidéo sur la fluidité serait intéressante ! je vote POUR !
Je commente rarement les vidéos en générale mais j'avais une question sur comment bien travaillé en mobile first ? Y'a t'il de bonne pratique à avoir, ou de bon outils qui pourrait aidez ?
Pour faire un retour de mon expérience rapide..
(attention monologue)
Je sort de formation assez intense (dev web & web mobile de chez O'clock) on a vue un peu de tout en 6 mois c'était fun, (git, terminal, html, css, js, php, laravel, wordpress, react) et j'ai eu un énorme coup de cœur pour React. Ayant fini y'a quelque semaine la j'attaque des projets en solo histoire de garnir mon gitHub et de mon construire un porte-folio mais c'est pas évident car comme tu le dit on perd pas mal de temps quand on a pas les bonnes pratiques et je pense qu'une vidéo sur des outils pour les débutants en dev serait pertinente également (bon je vais quand même zieuter ta chaine si ça n'a pas été déjà fait ^^')
En tout cas merci pour tes vidéos c'est toujours une source d'inspiration et d'ailleurs c'est de ta faute (ou plutôt grâce à toi :D ) que j'ai tout lâcher pour me reconvertir dans le dev y'a 1 ans. eh j'en très heureux même si stressé que la formation ait fini et que maintenant c'est le grand bain !
Et concernant le mobile first, je suis d'accord avec toi dans la majorité des cas ça évite d'avoir à remettre des propriétés a leur état initial.
Mais des fois il peut arriver l'inverse. C'est en desktop que les propriétés sont a leur état initial.
Du coup le mieux selon moi et de définir par défaut les règles communes et dans les breakpoints min ou max les règles spécifiques et fessant en sorte de ne pas remettre les valeurs initiales : display:block; margin:0; position:static...