Construire en mobile-first

Salut !

Bon alors, je suis actuellement étudiant à la WF3, et l'on nous apprend à faire du mobile first.
Ce qui me dérange dans cette méthode, c'est qu'une version mobile est forcément plus légère.
Du coup, si on commence par le mobile, je dois revenir à chaque fois sur la base pour mettre des

display: none;

etc... pour ce qui ne devrait pas être sur mobile.

Alors j'aimerai avoir votre avis, c'est une bonne méthode ? Réellement plus facile ?
Si c'est effectivement le mieux et le plus facile, j'aimerai en savoir plus sur vos méthodes, parce que pour moi, c'est loin d'être le top

Je confirme que "mobile first" est de loin la méthode de travail préférable. Ayant développé des sites avant qu’il existe de mobiles, j’ai en effet expérimenté la difficulté de commencer par un site pour PC puis de le modifier pour le faire fonctionner également sur mobile. Dans pas mal de pages j’ai recommencé à zéro en mobile first pour faire quelque chose d’acceptable.

"First" ça veut dire "en premier" Si tu dois cacher des choses qui existent dans ta page c’est parce que tu as prévu de les afficher, donc que tu as conçu ta page pour grand écran en premier.
Modifié par PapyJP (28 Nov 2020 - 15:06)

Bonjour,

Pourquoi cacher des trucs alors que la hauteur est infinie ?

Amicalement,

Bonjour Nelga,

Ta critique est parfaitement justifiée, mais elle concerne le responsive design et pas le mobile first. Le résultat visuel est le même, mais ce sont deux approches techniques complètement différentes.

Le responsive design part du modèle de bureau puis surcharge les règles pour faire disparaître les éléments au fur et à mesure en vue de la version mobile.

Le responsive design part du mobile puis surcharge les règles pour ajouter de nouveaux éléments en vue d'arriver à la version du bureau.

Historiquement, c'est la première technique qui était la plus utilisée au départ par les intégrateurs car elle correspondait plus au schéma de pensé de l'époque où le web était d'abord destiné aux ordinateurs de bureau. Mais il est dommage de devoir surcharger les styles pour supprimer des éléments (surtout pour cibler un media sur lequel on cherche à être performant), de plus il est plus verbeux de devoir réinitialiser des règles déjà écrites que de devoir simplement les écrire une seule et unique fois. Le monde de l'intégration comprit l'intérêt de cette dernière technique : le responsive design était né.
Modifié par Olivier C (29 Nov 2020 - 09:00)

Hi,
Point souvent négligé, mobile first en 2020 c'est aussi (et surtout) une page spécial mobile répondant aux critères AMP. Donc du HTML avec pas mal d'obligations et de restrictions.

Donc oui avoir une page qui fait les deux juste avec des medias query ce n'est pas une bonne chose au final si on vise la performance de chargement et le gain SEO lié aux impératifs des pages standardisées AMP.

@+

Oui enfin c'est une API fortement liée à Google quand-même.

Personnellement je n'aime pas du tout l'expérience utilisateur sur ce type de page, je recherche presque toujours la version html de la page lorsqu'elle est disponible.

Oui, je suis complètement d'accord avec toi, mais ce n’est pas le cas de madame Michu. Puis vu que ça correspond à 91,89% du marché des moteurs de recherche. Ignorer les spécificités de Google : c'est juste se suicider sur le plan du SEO.