CSS, responsive design et vh/vw

Bonsoir,

J’essaye depuis quelques jours de me remettre dans le CSS pour apprendre de nouvelles choses. Je suis actuellement intéressé par l’utilisation des unités vh et vf. J’ai fait quelques tests mais entre autres, je n’obtiens pas forcément les mêmes tailles en fonction des navigateurs.

Aussi, quand je rétrécie la page, je me demande comment faire pour que les différents éléments d’un menu horizontal se superposent pas forcément à la vertical. Est-ce l’utilisation d’une deuxième feuille de style utilisé quand la taille de la page est inférieur à x ?

Enfin, si vous avez des liens pour en apprendre d’avantage sur ce sujet, je suis vraiment preneur. (Je préfère du texte plutôt que des vidéos).

3 petits sites pour aider au responsive:

• Motherfucking website
• Better motherfucking website
• The best motherfucking website

Sinon, on préfèrera l’approche @media mobile-first, pour 2 cas:

1. Le navigateur ne supporte pas les media-queries: le site sera affiché correctement sur mobile. Vu que tous les major browsers supportent les media queries et que la question se pose encore pour les mobiles, on évite un problème épineux.
2. Le téléphone a une connexion lente: le site sera d’abord chargé avec un design adapté au format mobile, avant d’être éventuellement adapté au format desktop.

Tu peux expliquer ? De ce que je sache, les media-queries classiques sont supportées à peu près partout, y compris sur mobile…

C’est surtout ton deuxième point qui explique cette approche mobile-first, plus que le premier.

Je peux me tromper mais je trouve cette argumentation ne tient pas la route. Je trouve le mobile-first sans intérêt.

1. La conception n’est pas intuitive on a l’habitude de commencer/favoriser l’affichage desktop. Sinon on doit refactoriser le CSS ça prend du temps et souvent on inverse mal les règles CSS et ça bug (on le voit pas tout de suite) donc on perd encore plus de temps à corriger la modification.

2. Le CSS passe en cache. Donc c’est seulement la première requête qui sera importante.

3. Le CSS doit être de 50 à 250 Ko avec la compression en moyenne c’est négligeable.

4. Je ne pense pas qu’on verra la différence qu’on soit en wifi (via adsl), en 3G ou en 4G.

Autant virer une image ou compresser toutes les images aux formats jpg pour gagner en vitesse de chargement avec peu d’effort.

Je ne pense pas que le mobile first mérite une attention. Ça demande beaucoup de temps pour si peut. Et ça complique la vie à un débutant.

Alors :

1. C’est une question d’habitude, le mobile-first a l’avantage de ne demander que peu de styles spécifiques par défaut, avant d’introduire les media-queries. Il n’y a pas plus de perte de temps dans un contexte professionnel une fois qu’on a pris le pli, au contraire. Comme avec n’importe quelle outil…
2. Le CSS ne passe pas toujours en cache et le cache est invalidé. Et la première requête peut être importante, les gens ne retournant pas toujours sur les sites régulièrement. Quand on voit les stats d’abandon à cause des chargements trop longs, on voit vite qu’on a intérêt à optimiser pour TOUS
3. C’est déjà pas mal lourd. 50 ko sur un mauvaise connexion ça peut facilement prendre 5 secondes à charger. C’est énorme !
4. Oh que si, on voit très vite la différence. Entre du wifi (et encore, faut voir la connexion derrière) et de la 4G, la différence est pas toujours notable. Mais avec une 3G un peu faiblarde voire de la 2G (chose encore très courante par endroits, en France ou ailleurs) on sent tout de suite la différence, même sur des requêtes légères.

Le chargement des images est géré par le navigateur pour venir une fois le reste chargé, ce n’est pas bloquant. Le CSS si car le navigateur attend son chargement avant d’afficher quoi que ce soit.

À propos du mobile-first, je vous conseille cette vidéo. Le principal argument mit en avant est le point 1 de @viki53.

Sinon, ce lien explique bien le problème du web.

J’ai refait mon blog (pas encore en prod.) et ai atteint un traffic de 4KB incluant HTML + CSS, 7KB avec le Js (highlightjs) pour la coloration syntaxique.

Mon CSS est 100% responsive et compatible avec toutes les plateformes, est mobile-first, a été particulièrement facile à faire, et ne fait que 140 lignes en étendu.

Le problème n’est pas que le web est un domaine complexe ou lourd, mais que les développeurs le rendent très lourd/complexe.

Combien de blogs/sites utilisent des librairies js (jquery, preloader) voire des usines à gaz entières (react/angular/vue) pour desservir du contenu statique ? Beaucoup trop, et le fait que l’horrible projet Google AMP existe prouve à quel point ce phénomène est problématique.

(edit: sympa le timestamp d’edit !)

Tout d’abord, je tiens à tous vous remercier pour ces réponses. Je trouve ça intéressant d’avoir plusieurs visions.

Je ne connaissais pas l’existance de @media pour charger différents styles. Je vais me renseigner sur cette méthode.

Pour en revenir aux unités, quelles sont les unités conseillés pour du responsive design ? J’utilisais par le passé les pourcentages et quelques tailles fixes avec px pour les balises HTML de types blocs. J’utilisais em pour les polices. Dois-je continuer d’utiliser chez et vw mais passer de em à rem ?

Enfin, il y a la discussion avec plusieurs avis : le mobile first. Si j’ai bien compris, il s’agit de concevoir en premier le CSS à destination des petits écran en premier. Honnêtement, je ne sais pas du tout ce que je dois rendre de cela. Déjà que je ne comprends pas trop comment utiliser le mot-clé media.

Je vais me renseigner sur Internet à l’aide des mots-clés et des liens qui m’ont été donnés. Je lirai bien entendu d’autres réponses et avis ici.