Que choisir comme type de layout pour dév un site aujourd'hui ?

Bonjour,

Je redécouvre le HTML et les CSS, et je m'étais arrêtée il y a quelques années au positionnement div float. Chose que j'ai toujours eu du mal à intégrer, notamment le clear...

Je suis un cours sur les CSS grid, que je trouve génial ! J'ai envie de faire tous mes futurs sites avec ! Mais voilà, je me pose pas mal de questions.
Déjà celle de la compatibilité avec tous les navigateurs (qui à l'air d'augmenter petit à petit), est-ce raisonnable de l'utiliser dès aujourd'hui ?
Je précise que c'est uniquement sur des sites personnels afin de m'entraîner et de développer mes compétences.
Il y a aussi le système Flexbox, sur lequel j'ai suivi un tuto, mais j'ai besoin d'approfondir.
Il reste toujours nos fameuses div float, doit-on toujours les utiliser ? (En tout cas en dehors d'un cas d'image flottante classique)

Utilisez-vous des Framework obligatoirement ? Ou peut-on tout faire soi-même ?
Connaissez-vous un super tuto qui explique de façon claire les div float (les clear ?) ?
Que me conseillez-vous dans l'optique de développer mes compétences et me faire un portfolio sympa ?

J'ai besoin d'une petite route à suivre pour bien démarrer ! Merci d'avance !

Bonjour,

alors la boîte à outil de l'intégrateur s'est considérablement améliorée aujourd'hui.

Pour ce qui concerne la mise en page générale du site, on dispose de:

- display: table
- display: inline-block
- display: flex
- display: grid*

On a suffisamment de bon outils pour ranger float dans un coin et de le ressortir de temps en temps pour quelques cas spécifiques ou complexes.

Pour grid et la compatibilité, je dirais: ça dépend. Mais si c'est pour s'entraîner, oui à fond.

a écrit :
Utilisez-vous des Framework obligatoirement ? Ou peut-on tout faire soi-même ?

J'en n'utilise pas, certains tout le temps. Il y a plusieurs écoles. Mais pour apprendre, je dirais de maîtriser les concepts clés sans pour commencer.

a écrit :
J'ai besoin d'une petite route à suivre pour bien démarrer !

Les quatre modes que j'ai cité s'utilisent selon les situations mais sont incontournables aujourd'hui. Commencer par les comprendre, leurs forces et faiblesses, identifier lesquels serviront dans quels situation est un peu la clé du succès.

Bonjour,

Ça vaudra ce que ça vaut - je ne suis pas dans le circuit pro - mais voici mon avis sur la question.

Septembre a écrit :
Je suis un cours sur les CSS grid, que je trouve génial ! J'ai envie de faire tous mes futurs sites avec ! Mais voilà, je me pose pas mal de questions.
Déjà celle de la compatibilité avec tous les navigateurs (qui à l'air d'augmenter petit à petit), est-ce raisonnable de l'utiliser dès aujourd'hui ?

En production il me semble encore optimiste de l'envisager à moins de vouloir s'enquiquiner à coder une alternative pour les navigateurs ne le supportant pas.
Gardez en mémoire qu'il existe encore des irréductibles - non pas forcément gaulois - qui ne mettent pas à jour leur système ou qui tourne sur des configurations relativement anciennes pour cette techno.

Mais dans la mesure où

Septembre a écrit :
Je précise que c'est uniquement sur des sites personnels afin de m'entraîner et de développer mes compétences.

Foncez !!! C'est l'avenir de la mise en page web !

Septembre a écrit :
Il y a aussi le système Flexbox, sur lequel j'ai suivi un tuto, mais j'ai besoin d'approfondir.

Flexbox et Grid c'est l'assurance d'un mariage d'avenir avec plein d'enfants, de petits-enfants [...], une grande lignée pour l'avenir.

Septembre a écrit :
Il reste toujours nos fameuses div float, doit-on toujours les utiliser ? (En tout cas en dehors d'un cas d'image flottante classique)

Ce qui me gêne c'est le "devoir utiliser". Non ! Vous n'êtes pas obligé de coder non plus. Rien ne nous oblige à rien.
Néanmoins je dois avouer utiliser encore un peu les flottants pour des présentations à la va vite. Probablement car le clearfix n'est plus un problème pour moi.
Mais la réalité vous montrera que ce layout n'est plus indispensable.

Septembre a écrit :
Utilisez-vous des Framework obligatoirement ? Ou peut-on tout faire soi-même ?

Pour ma part je suis "anti-framework" ; je préfère apprendre l'essence du code qu'un outil mais je me le permets car j'ai la flamme et le temps de coder à la main sasn délai à respecter.
Pour le monde pro - comme professionnel et productivité - les frameworks sont incontournables parce que quand ton chef de projet te dit :
"hé Gaston, pond moi un méga menu avec 78 liens et 3 profondeurs de champs qui soit responsive avec effet hamburger et tout un tas de gadget comme j'aime."
Puis qui finit par un magistral "dans 3 heures c'est bon ? on a rdv avec le client"
Sans frameworks, pfui bon courage !

Septembre a écrit :
Connaissez-vous un super tuto qui explique de façon claire les div float (les clear ?) ?

A brûle pourpoint non, ça date. Mais si je trouve ça... (voir PS). Ce qu'il faut c'est surtout bien piger le contexte que les flottants créés après, c'est du billard.

Septembre a écrit :
Que me conseillez-vous dans l'optique de développer mes compétences et me faire un portfolio sympa ?

2 choses - très généralistes mais toujours vraies : pratiquez et interrogez-vous régulièrement (sur le code, les choix technologiques etc etc).

Septembre a écrit :
J'ai besoin d'une petite route à suivre pour bien démarrer !

Commencez par ce qui vous botte le plus. Sans passion vous ne ferez pas ça longtemps ; en ce cas autant arrêter de suite et acheter un ticket de cinéma.


PS: Pour de l'apprentissage en ligne je ne peux que vous conseiller, en dehors d'Alsa bien sûr, développez.com, w3schools, creativejuice, open classroom, openstacks et... Google, votre dévoué serviteur, capable du pire comme du meilleur. Mais vos meilleurs alliés, vos bras, resteront toujours votre motivation et votre capacité au discernement.

Bonjour,

pareil que kustolovic et à peu près pareil que Greg_Lumiere

CSS Grid layout est supporté dans sa version moderne par Edge 16 (celui de l'automne 2017), par Chrome et Firefox depuis 1 an et Safari entre les 2 je crois. Le site de référence c'est caniuse.com
Ah et sur mobile en plus de Chrome / Safari par Samsung Internet dernière version mais pas UC Browser (sachant que Samsung vend quelques smartphones chaque année et a donc des parts de marché conséquentes).
IE10, IE 11 et Edge 12 à 15 supportent la première version de CSS Grid, un peu plus rustre où il faut tout caler à la main. On y arrive, surtout pour du layour de page mais il faut repasser sur tout.

J'utilise un framework – KNACSS – mais comme il a été fait par Raphaël, je coche aussi la case "fait soi-même"
Dans sa dernière version, sa grille utilise Grid (pas encore utilisé pour un client). La version précédente c'était avec Flexbox. Les 2 peuvent être utilisés pour le layout d'une page ; les 2 peuvent être utilisés pour agencer des composants dans le contenu ou le contenu de composants : ça dépend en premier lieu du support requis par le client et celui qu'on lui a annoncé. Quand tu refonds un site de service public qui te demande d'être vigilant parce qu'une crue va t'emmener 2m d'eau dans ta baraque sans étage et que tu veux pas y rester, tu t'arranges pour que le site fonctionne sur IE11. Pour un portfolio nan.
tl;dr ne fais l'impasse sur aucun des 2

clear (et clearfix, souvent mélangés) : je dirais l'article de Romy http://romy.tetue.net/clearfix qui cite l'article de Florens ici-même.
Un point qui me semble important : clear est une propriété CSS tandis que clearfix est un concept (qu'on applique concrètement en ajoutant une classe .clearfix ou .cf préalablement définie - voir le micro clearfix hack de N. Gallagher).
Pour aller beaucoup plus loin, il faut aborder le concept du BFC – Block Formatting Context – chez T. Koblentz : http://www.cssmojo.com/tags/bfc.html et par Raphaël https://www.alsacreations.com/astuce/lire/1543-le-contexte-de-formatage-block-en-css.htm (codepen) (articles sponsos par Efferalgan®)

Hello

Un peu de complément de mon regard de pro
Le visuel n'est pas mon domaine, moi je viens du dev mais dans mon métier pas le choix
Je confirme les avis précédents et OUI c'est une évidence il faut un framework pour des raisons de rentabilité et de productivité Cela n’empêche pas de savoir comment ça marche.
Les Intégrateurs avec lesquels je travaille ou ais travaillé savent parfaitement faire tout à la main mais c'est plus simple d'utiliser bootstrap par exemple car plus rapide Et si on a le temps on s'autorise à faire des compléments à la main

Merci pour toutes ces réponses !

Je ne connaissais pas du tout display inline-block et table. Ça à l'air intéressant, il faut que j'essaie de faire quelques essais avec. C'est donc ce qui peut être utilisé en ce moment pour la mise en page si j'ai bien compris ? C'est surtout le inline-block j'imagine qu'on utilise pour positionner les div ?

En ce qui concerne les div float / clear, je vais pas me prendre plus la tête avec, mais peut-être qu'il serait bon alors que je regarde de plus près la propriété clear ?

Pour les Framework, j'ai un aperçu de Bootstrap 3, et je vais tenter de faire une page ou 2 avec le 4. Y en a-t-il d'autres à connaître ? J'ai vu Foundation, Bulma, semantic ui... En général on se cantonne à Bootstrap ou pas ? Qu'utilisez-vous ? (J'ai lu Knacss, je vais aller jeter un oeil )

Je continue bien sûr mes essais et tutos sur css grid et Flexbox !

Plus j'avance plus je m'aperçois qu'il y a de nombreuses choses à connaître et à comprendre ! Je rajoute à ma liste de liens tous les articles à lire et je me dis que je n'aurai pas assez d'une vie pour tout lire ! (Et ça n'est que la partie positionnement...)

a écrit :
Je ne connaissais pas du tout display inline-block et table. Ça à l'air intéressant, il faut que j'essaie de faire quelques essais avec. C'est donc ce qui peut être utilisé en ce moment pour la mise en page si j'ai bien compris ? C'est surtout le inline-block j'imagine qu'on utilise pour positionner les div ?

Aujourd'hui, pour la structure générale de la page, on utilise plutôt flex, grid si on peut, table si c'est nécessaire, ou juste des bon vieux blocks pour des mise-en-page simples.
inline-block, si je l'ai cité, est plus utilisé pour des mises en page de contenus, rarement pour l'architecture / structure de la page. Mais il reste très pratique et très utilisé pour cet usage.

D'accord, merci des précisions, je pensais qu'inline-block était utilisé pour la structure de la page. Donc je me concentre sur Flex déjà, et grid pour être prête à l'utiliser le moment venu.
Et Framework pour faire un site plus "rapidement".