Mobile first, à la recherche de bonnes pratiques...

Bonjour,

je m'intéresse au mobile first, et j'aurai simplement aimé découvrir comment l'appliquer pratiquement.
L'idée me semble bonne, et devrait tendre à devenir de plus en plus pertinente.
Cela dit, au jour d'aujourd'hui, comment s'y prendre?

Si le navigateur ne prend pas en compte les media queries, et que le javascript est désactivé (je ne sais pas quel pourcentage cela peut représenter et si ça vaut vraiment la peine d'y refléchir) existe il un truc pratique pour savoir s'il faut un style mobile ou desktop?

Autre chose, un seul fichier css reprenant la base + les mediaqueries peut se considérer comme une bonne pratique? C'est mieux d'avoir un css complet (et plus lourd) qu'une deuxième css distincte? (qui serait d'autant plus chargée même sans en avoir l'utilité sur mobiles?)

Si vous avez des tuyaux ou exemples, le sujet m'intéresse fortement!

Bonjour,

Quelques suggestions...

a écrit :
Si le navigateur ne prend pas en compte les media queries, et que le javascript est désactivé (je ne sais pas quel pourcentage cela peut représenter et si ça vaut vraiment la peine d'y refléchir) existe il un truc pratique pour savoir s'il faut un style mobile ou desktop?

=> voir Detect mobile browsers en open source qui propose différentes possibilités (.htaccess, javascript...)

a écrit :
Autre chose, un seul fichier css reprenant la base + les mediaqueries peut se considérer comme une bonne pratique? C'est mieux d'avoir un css complet (et plus lourd) qu'une deuxième css distincte? (qui serait d'autant plus chargée même sans en avoir l'utilité sur mobiles?)

Il me semble que ça dépend ! Si on passe par une detection pour rediriger vers une version mobile, il faut séparer les css sinon je mettrais tout dans le même fichier en partant avec comme config de base la version mobile puis les media queries pour les tailles plus élevées.
C'est la démarche proposée par Ethan Marcotte dans son livre Responsive Web Design. Pour reprendre le premier point, il propose donc aux navigateurs ne gérant pas les medias queries la version mobile qui reste lisible (sinon... javascript !).

Bonjour,

Comme tu dois t'en douter, il n'y a pas une seule bonne pratique à suivre, mais plusieurs bonnes pratiques qui dépendent de tes besoins et contraintes.

Les contraintes sont en général de savoir où tu veux placer ton curseur de compatibilité navigateurs, et celui de la performance web.
Aucune technique ne pourra te garantir un curseur maximal partout.

Concernant la méthode la plus "compatible", je t'invite à cette lecture : http://blog.goetter.fr/post/19739602751/media-queries-et-performances-web-mobile

Et pour ce qui est des performances : http://wdfriday.com/blog/2012/04/introduction-a-la-performance-pour-le-web-mobile/

Bon week-end

Merci pour vos réponses, et merci pour les liens!
On est donc assez d'accord, il n'y a pas de solution unique, mais il faut bien trouver un compromis.
Si je me penche sur le sujet, c'est que dans ma situation actuelle, je pratique comme ceci:

1 css unique, bases (pour desktop) puis avec les media queries réduire et adapter progressivement.
(le css3 n'étant utilisé que dans la couche expérience utilisateur, pour limiter les dégats au cas ou elle n'est pas prise en compte pour les "vieux" browsers)
1 commentaire conditionnel pour aider les anciennes versions d'ie avec l'aide d'un js.
(si le js est désactivé, la base du css reste utilisable)
(un js dans un commentaire conditionnel n'est chargé que si la condition est remplie?)

Seulement je suis bien conscient que cette pratique n'est pas optimale du tout niveau mobile (disons que c'est déjà un début), car les éléments de bases ne lui sont tout simplement pas appropriés...

Donc après lecture:
soit je laisse cette pratique en excluant le "lourd" de la base de mon css pour le remettre dans le media query approprié. (ça pourrait bien être la solution, le compromis entre responsive et pas vraiment mobile first )
soit j'oriente la base de mon css pour le mobile, avec un js en conditionnel pour gérer les media queries. Mais dans ce cas ci, un navigateur tel qu'ie7 ayant le js désactivé ne pourra pas bénéficier d'une base appropriée.

La première solution est peut-être moins handicapante pour le mobile (format inadapté, mais poids adapté)
Alors que la deuxième est sans doute plus radicale malgré tout.

Dans l'idée le mobile first est vraiment une bonne façon de (re)penser, plus le temps va s'écouler plus ça va devenir nécessaire d'y passer. Mais pour la mise en pratique, pour l'instant, cette option semble être un peu moins accessible en fin de compte!

A l'inverse, Raphael, tes choix s'orientent vers un maximum d'accessibilité, un seul css et pas de js c'est le mieux que l'on puisse faire dans ce sens, ça c'est une certitude.
Cela dit je ne sais pas comment on va s'en sortir dans l'avenir, avec le parc qui ne cesse de se diversifier, et nos "outils" qui ne semble pas évoluer à la même vitesse.


ps: au fait les lectures m'ont appris 2 choses:
- les media queries pour les sons et videos, peut on l'espérer pour les images? Les images étant un problème habituel dans le responsive web design, ça serait une solution sans js, on peut rêver.
- les classes conditionnelles, c'est plus compatible qu'une feuille de style conditionnelle. (après on peut faire le choix d'alléger les bons élèves, et tant pi pour les mauvais) mais pour la bonne interprétation des balises html5, il sera toujours nécessaire de passer par un commentaire conditionnel et d'utiliser javascript non? Existe t il une solution sans js?
Modifié par #jim (01 Jul 2012 - 17:26)