Quels livres/sites/articles pour apprendre le CSS responsive ?

Bonjour à tous et à toutes,

Etant autodidacte, je souhaiterais me former au design responsive.

Pour cela, je suis à la recherche de livres/articles/sites (pas trop anciens (< 3-4 ans) pour être "à la page" et de préférence "in french please") qui répertorient toutes les bonnes pratiques, toutes les propriétés CSS pour créer/refondre un site et qu'il soit responsive.

Quels livres/articles/sites traitant du CSS 3 pouvez-vous me conseiller SVP ?

J'ai emprunté à la bibliothèque "CSS3 Flexbox" mais même s'il est très bien, je suis frustré car il n'y a que quelques dizaines de propriétés.

Par exemple, je ne sais pas :
Combien de points de rupture je dois mettre ? à combien ?
Pour la taille de police et des div (si ça s'appelle encore comme ça d'ailleurs), quelle unité privilégier (px, %, em, rem...) ? dans quels cas ?
Toujours pour les polices, est ce qu'il vaut mieux choisir des fonts de Google, des fonts internes...?

Est-ce qu'il vaut mieux passer par Grid layout, Bootstrap, Flexbox... ?

Comme vous pouvez le voir, je suis un peu perdu ; c'est pour ça que j'aurais besoin de bouquins pour éclairer ma lanterne et me remettre à niveau et à la page.

Je vous remercie par avance pour vos réponses et vos conseils.

Bonne journée ????

@spip93

Hello,

Je comprends ta demande mais elle regroupe tellement de questions au final que ce ne sera pas super facile de te répondre.

Un livre, dès qu'il est publié, il n'est plus à la page. Je te conseille de t'orienter plutôt vers les booklets style memento. Mais d'un côté, il existe des bons livres que tu pourrais acheter si vraiment tu veux en posséder. De mémoire, j'en connais pas concernant le responsive design. Je préfère les vidéos (beaucoup plus parlant). J'aime beaucoup ce site pour les bonnes pratiques CSS (mais c'est en anglais, il faudra s'y mettre à l'anglais). Il y a aussi Mozilla MDN Web Docs. Tu peux y apprendre pleins de choses. Même site pour apprendre Flexbox.

Concernant les points de rupture, j'ai entendu plusieurs avis à ce sujet. Certains préconisent une grille (bootstrap ou "from scratch" adaptée au site) avec des points de ruptures définis selon les envies ou les plus utilisés (ça dépends). Certains se basent sur le design et les définie au moment ou le design casse (adaptative responsive je crois) en jouant avec la largeur de la fenêtre. Au final, je ne suis moi-même pas sûr des bonnes pratiques à ce sujet. Bootstrap peut alourdir le site pour rien et ne pas être adapté selon le design. Un grille maison pourrait être une meilleure solution. Au moins avec une grille, le design ne casse jamais.

La taille de la police le plus souvent en "em" ou "rem" de façon à ce que le site soit accessible, si l'utilisateur veut modifier la taille du texte. Pour les "div" tout dépend de la tâche/du design en question. Lorsque la taille doit être modulable on utilisera des unités relative (em, rem, %) sinon on reste sur des pixels. Par défaut les éléments de type blocs font 100% de leur conteneur, sauf si tu modifies en CSS.

Une discussion intéressante ici par rapport à Google Font avec l'intervention d'un employé Google: ici. Ce n'est pas un sujet que j'ai creusé...

J'ai moi-même besoin d'approfondir mes connaissance sur le responsive design. Cette page me semble un bon point de départ. Concernant ta refonte, comment comptes tu t'y prendre ? Refaire tout le site depuis zéro ou l'adapter donc de faire du desktop first ? Avec des média queries (max-width) du coup ? Les tutoriels de Grafikart pourraient t'aider...

Au final, ta demande regoupe plusieurs problèmatiques et cette refonte pourrait s'avérer un énorme challenge surtout si tu es débutant. Mais ça reste possible avec de la détermination, de la recherche et la patience. Je te conseille les vidéos pour apprendre le responsive design. Utilise youTube. Parler du CSS et lire un livre, c'est bien mais au final, je pense que c'est mieux de voir une video pour bien comprendre.

A +

spip93 a écrit :
Bonjour à tous et à toutes,

Etant autodidacte, je souhaiterais me former au design responsive.

Pour cela, je suis à la recherche de livres/articles/sites (pas trop anciens (&lt; 3-4 ans) pour être "à la page" et de préférence "in french please") qui répertorient toutes les bonnes pratiques, toutes les propriétés CSS pour créer/refondre un site et qu'il soit responsive.

Quels livres/articles/sites traitant du CSS 3 pouvez-vous me conseiller SVP ?

J'ai emprunté à la bibliothèque "CSS3 Flexbox" mais même s'il est très bien, je suis frustré car il n'y a que quelques dizaines de propriétés.

Par exemple, je ne sais pas :
Combien de points de rupture je dois mettre ? à combien ?
Pour la taille de police et des div (si ça s'appelle encore comme ça d'ailleurs), quelle unité privilégier (px, %, em, rem...) ? dans quels cas ?
Toujours pour les polices, est ce qu'il vaut mieux choisir des fonts de Google, des fonts internes...?

Est-ce qu'il vaut mieux passer par Grid layout, Bootstrap, Flexbox... ?

Comme vous pouvez le voir, je suis un peu perdu ; c'est pour ça que j'aurais besoin de bouquins pour éclairer ma lanterne et me remettre à niveau et à la page.

Je vous remercie par avance pour vos réponses et vos conseils.

Bonne journée ????

Deux bouquins que j'ai utilisés pour mes développements :

"Responsive Web Design" par Ethan Marcotte (ISBN 978-2-212-13331-8)

et

"Responsive Web Design avec HTML et CSS 3" par Bain Frain (ISBN 978-2-7440-2567-9)

Tous deux en français.

Bonjour,

concernant les points de ruptures, sauf pour les cas particuliers, il vaut mieux utiliser des points fixes.

Ceci car il est trop difficile de tester et comprendre la css d'un site avec trop de points de ruptures. En gros cela signifie qu'il faut réduire sa fenêtre et scroller dans son navigateur pour trouver d’hypothétiques règles css ce qui pour un site avec beaucoup de gabarits devient impossible a vérifier convenablement.

Aussi le code ressemble très vite à ça :

@media screen and (max-width: 1043px) {
}
@media screen and (max-width: 958px) {
}
@media screen and (max-width: 578px) {
}
@media screen and (max-width: 445px) {
}
@media screen and (max-width: 228px) {
}

à multiplier par les milliers de règles d'une css et autant de point de ruptures particuliers.

D'autre part si on a beaucoup de points de rupture c'est sûrement qu'il y a un problème dans la façon dont est codé le site car les éléments sont sensés être fluide. Souvent je suis tombé sur des choses comme ça :

@media screen and (max-width: 1043px) {
  .bloc {
    width : 500px;
  }
}
@media screen and (max-width: 958px) {
   .bloc {
    width : 430px;
  }
}
@media screen and (max-width: 578px) {
   .bloc {
    width : 500px;
  }
}
@media screen and (max-width: 445px) {
   .bloc {
    width : 440px;
  }
}
@media screen and (max-width: 228px) {
  .bloc {
    width : 210px;
  }
}

Généralement ce genre de code sur les petites résolutions ça pète dans tout les sens et cela vous impose de redéfinir tout les points de ruptures en cas de modification.

Autrement bootstrap ou knacss ou autre framework c'est un bon début pour commencer ainsi que de se mettre a flexbox et grid. Ce qu'il faut savoir pour le responsive c'est que c'est très loin d'être évident et qu'il faut faire pas mal de sites pour être à l'aise.

Merci à tous pour vos réponses que je viens de survoler (car je les lis sur mon téléphone) mais que je relirai plus attentivement sur mon ordi cette fois.
Pourquoi je préfère les "écrits" aux vidéos ? Parce quand j'apprends un langage de programmation (HTML, PHP, CSS...) je prends des notes (je retiens plus) et surtout je fais des copier/coller des lignes de code (j'évite comme ça les erreurs de syntaxe). Avec un tuto vidéo, aussi bien soit-il, vous comprendrez que ça n'est pas possible :-p
Et pourquoi plutôt en français ? Non pas que mon niveau d'anglais soit mauvais, mais c'est plutôt parce que quand j'apprends un langage c'est déjà parfois (souvent même) compliqué d'apprendre quand c'est en français, alors en anglais...
Après, c'est pas rare du tout que je lise des articles en anglais, donc quand j'ai pas le choix... je peux m'y mettre :-p
En tout cas merci beaucoup encore une fois
Modifié par spip93 (11 Aug 2019 - 18:37)

Sinon, j'ai jamais lu ses livres mais on peut au moins être sûr des compétences de l'auteur :
https://www.goetter.fr/
Modifié par bacasable (11 Aug 2019 - 20:15)