Comment différencier un affichage entre le mobile ou le desktop avec le CSS ? C’est le topic de ce jour.
Ce sujet, je l’ai déjà un petit peu mentionné avec d’autres vidéos, mais c’est vrai que c’était un peu noyé au milieu de la masse et je vois beaucoup de demandes à ce sujet.
En fait, je vais vous montrer ce réglage dans cette vidéo, je ne vais parler que de ça.
Je vais vous montrer différentes applications, parce que je vois qu’il y a un besoin.
Un souhait d’expérience client hyper-personnalisé
Il y a toujours eu cet intérêt de distinguer les deux expériences utilisateur.
C’est très important parce que ce ne sont pas les mêmes comportements.
En ordinateur, vous pouvez afficher plus d’éléments. Les sessions sont en général un peu plus longues parce que la personne est plus posée, elle a le temps de regarder en profondeur.
Une session sur mobile où la personne est dans le bus, elle n’a pas forcément une bonne connexion, elle va être très pressée, elle va être très facilement distraite.
Ce n’est pas du tout la même chose.
Du coup je vous invite à réfléchir avant tout à quelle expérience utilisateur vous voulez donner sur une version desktop et sur une version mobile tout en pensant qu’il faut avant tout privilégier une version sur mobile, parce que c’est ce qui prend le pas actuellement, c’est sur ça que vous pouvez vous différencier au mieux.
Si vous devez faire le choix avec un réglage entre est-ce que ça conviendra mieux au desktop ou est-ce que ça conviendra mieux mobile, privilégiez toujours le mobile.
Voire même si vous devez réaliser votre thème, prenez de plus en plus l’habitude de cliquer sur cet icône et de vérifier ce que ça donne en mobile à chaque instant, ou une fois que vous avez fait un réglage de mettre sur votre téléphone votre site, vous le mettez en favori, comme ça vous pouvez y accéder facilement et vous regardez immédiatement le réglage, ce que ça donne, parce que des fois entre l’éditeur et un téléphone, en vrai, vous pouvez avoir une surprise.
Comment utiliser Fastlane pour des réglages basiques
Avec Fastlane, il y a de plus en plus de manières de différencier l’affichage mobile et desktop.
Par exemple, dans la Header Band se trouve désormais un Mobile Text et un Text.
C’est plus simple à gérer.
Vous écrivez votre texte indépendamment de la résolution.
Il y a plein d’endroits comme ça où il y a cette séparation entre mobile et desktop ou parfois par exemple, je vous avais parlé du Card Header ici.
Autant en mobile, le choix était forcé sur le slide, parce que l’expérience mobile est faite d’une certaine manière qui ne convenait pas au réglage un peu en Dropdown, mais sur desktop, vous aviez le choix.
La demande qui revenait souvent, c’était : “Là, il y a ce bouton Montrer et Cacher. Mais est-ce qu’il serait possible d’avoir tout simplement une case pour cocher si ça va s’afficher en desktop et une case pour savoir si ça va s’afficher en mobile”.
C’est vrai que de cette manière, vous pourriez ensuite ajouter les sections de desktop et de mobile et ensuite cocher ou décocher à votre convenance pour que certains éléments s’affichent à la fois sur desktop et mobile, certains ne s’affichent qu’en desktop, certains autres qu’en mobile.
Du coup c’est vrai que cela donne une meilleure flexibilité parce qu’il y a des sections qui sont très intéressantes en desktop, par exemple les Images Slider Parallax, mais qui en mobile sont un petit peu moins pertinentes.
Des fois je vois des personnes qui préfèrent mettre les Images Slider en mobile, parce que l’image ne se rogne pas de la même façon.
Il y a vraiment plein de choses différentes.
Par exemple, moi en FAQ, des fois je mets juste des bénéfices clients et je mets une ligne ensuite pour détailler, parce que sur mobile c’est vrai que ça a tendance à se remplir assez facilement et comme ça se déploie comme ça, vous ne pouvez pas mettre des textes trop gros.
Par exemple, vous pouvez être tenté de vous dire : “En desktop, je vais la garder, je vais mettre beaucoup de textes ; mais en mobile, je vais la cacher”.
Après, vous avez plein de possibilités pour cacher des éléments.
Ça, par exemple, en mobile, vous voulez le cacher parce que vous trouvez que c’est trop long.
Il peut y avoir plein de raisons et du coup vous ré-affichez le Footer First Row où il y a seulement les deux icônes pour la version mobile.
Les possibilités sont infinies, vous pouvez faire vraiment tout ce que vous voulez.
Cacher un élément avec le CSS
Donc, je vais rentrer dans le vif du sujet : Comment on fait pour cacher ça en desktop et cacher ça en mobile ?
Pour l’exemple, je vais prendre un élément complètement au pif : exemple cette vidéo.
Déjà, je vais juste commencer par la cacher.
Je vais vous donner les codes pour cacher un élément, ensuite je vais vous montrer comment distinguer ça entre le mobile et le desktop.
Là par exemple, je vais bien sélectionner l’élément.
Je vais essayer de prendre une section, comme ça vous pouvez refaire l’exemple avec une section.
Je remonte, je suis allé prendre la section.
Là, vous voyez, le nom s’est affiché, donc on voit l’identifiant.
Sinon, il me suffit de le prendre juste ici.
Comme c’est une section avec un identifiant, je dois mettre un # avant.
Là, je mets le petit, disons, paragraphe, là ensuite le code en CSS.
Le CSS, ce n’est que de l’anglais, je vous le rappelle.
C’est display: none, ça veut dire l’affichage: non.
C’est très simple à retenir.
Même pas besoin de sauvegarder, il le prend en compte dynamiquement.
Vous voyez que j’ai réussi à le cacher.
Sauf que là, je l’ai caché sur ordinateur, mais je l’ai caché également sur mobile.
Admettons que je voulais le garder pour la version mobile mais que je veuille le cacher pour ordinateur uniquement.
Le code, voici lequel c’est : C’est celui-ci.
Je trichote un peu, je le copie-colle puisque je l’avais déjà.
Là, ici, je l’ai caché pour mobile, mais du coup je vais le cacher sur ordinateur.
Vous voyez, ce code-là, ça dit pour mediascreen, en gros là, il prend en compte la résolution de l’écran de votre ordinateur.
Là, min-width 768, ça veut dire, il prend les résolutions supérieures à 768px.
Et si vous mettez max, il prend les résolutions inférieures à 768px.
Donc, les résolutions au maximum supérieures à 768, c’est tout ce qui est le mobile ; donc tout ce qui est en dessous de 768 pixels, c’est considéré comme résolution mobile.
Utiliser les fonctions de votre navigateur
Vous pouvez faire d’ailleurs un essai directement avec votre navigateur.
Ici, vous pouvez glisser là la largeur et vous allez voir qu’au bout d’un moment, il y a une cassure nette qui se fait entre desktop et mobile.
Là, en plus, vous avez la largeur qui s’affiche ici et qui diminue petit à petit.
Et là, vous allez voir qu’à 768, on va vraiment basculer vers un autre.
Là, je ne suis pas encore passé complètement.
Là, non plus.
Voilà, 774. Vous voyez, le menu a complètement changé, ça s’est fait juste ici, aux alentours de 768.
Comme vous le voyez, le menu a complètement changé et c’est un affichage complètement différent.
Donc, ça se fait bien, 768.
Aussi, si vous voulez imiter, sans passer par votre mobile, vous pouvez faire ça : Toggle Device Toolbar.
Vous pouvez choisir votre responsive, vous pouvez choisir par exemple un Iphone.
Du coup immédiatement, vous imitez une section comme ça.
Je vais revenir juste ici.
Là, vous n’avez pas vu. Là, vous voyez.
Sur ordinateur, je l’ai bien caché, la vidéo n’apparaît pas.
Mais si je passe en mobile, la section vidéo apparaît.
Autres personnalisations avec les classes
J’ai bien distingué un affichage différent suivant la résolution sur laquelle je suis.
Là, le min-width, ça va cacher tout ce qui est sur ordinateur ; et avec le max, ça va cacher tout ce qui est sur mobile.
Des fois, pour d’autres réglages comme du texte, j’ai tendance à définir des classes pour le texte et de dire : “S’il a une classe mobile, il ne va s’afficher que pour mobile et s’il a une classe desktop il ne va s’afficher que pour le desktop”.
Là, on ne parle plus d’une section avec des éléments etc. mais comment ça s’écrirait, tout ça ?
Ça s’écrirait comme ceci : Là, ça serait P comme paragraphe.
Là, on a dit qu’on cachait pour desktop, du coup ça va s’afficher sur mobile.
Là, c’est p.mobile.
Du coup ça va bloquer l’affichage pour toutes les résolutions qui sont supérieures à 768px.
Et sinon p.desktop, donc c’est le paragraphe qui va s’afficher en desktop et qui va être caché en mobile, du coup là, vous mettez un max.
Ensuite, vous n’avez même pas besoin de mettre un “p”, parce que par exemple si vous avez une liste, une liste c’est « li », etc.
Dans le footer, par exemple dans la newsletter, vous avez des « spans ».
Du coup pour que ça prenne en compte tous les éléments, vous enlevez le P et là vous avez ce code.
Et finalement, ce code, c’est tout ce que vous devez savoir.
Si vous avez compris ça, vraiment vous avez tout compris.
Au pire, admettons, vous avez confondu les deux, vous faites des essais, là vous voyez directement.
Si ça ne s’affiche pas comme vous le voulez, c’est l’inverse, vous remplacez min et max, ne vous prenez pas la tête.
Après, vous allez avoir l’habitude, ça va aller tout seul.
En fait, ce réglage, il est tout simple.
Je comprends les besoins de certaines personnes qui voulaient que dans certaines sections, il y a directement des cases etc.
C’est vrai que ça fluidifie et c’est vrai que c’est quand même un réglage, à mon sens, important.
Si un jour Ulrich ajoute ceci et qu’un jour Fastlane arrive à gérer complètement avec son interface utilisateur le distingo entre les deux supports, ce sera génial.
Je ne peux qu’être d’accord.
L’intérêt de se former en HTML et CSS
Mais n’oubliez pas que si vous savez un tout petit peu bidouiller en HTML et en CSS, vous savez complètement tout faire.
Au final, vous pouvez attendre des fois six mois, un an, qu’un réglage arrive hypothétiquement parlant, sachant qu’encore avec Fastlane vous avez eu de la chance, parce que c’est quand même un thème qui évolue très vite et très bien, à chaque fois il y a des choses qui arrivent et c’est génial.
Mais sur beaucoup d’autres outils, vous pouvez être certain qu’ils ont atteint leurs versions matures depuis longtemps, qu’ils n’ont pas évolué plus que ça et que c’est mort.
Donc vraiment, faites l’effort de bidouiller un tout petit peu en HTML et en CSS.
Là, c’est votre code de base, mais après rajoutez ces deux lignes, donc ça pour ouvrir là avec ce petit symbole ouvrant et ensuite on ferme ici.
Ensuite, moi, j’aime bien mettre les alinéas.
Ici, c’est pour voir l’indentation du thème, bien comprendre que si ça s’ouvre ici, ça se ferme ici et ensuite celui-ci concerne celui-ci.
Si vous voulez l’aérer un peu, vous pouvez présenter comme vous voulez.
En CSS, vous pouvez également mettre des petites annotations. Ici, j’ai mis /*.
Ensuite, vous pouvez mettre du texte ici et */.
En fait, ce texte, ça peut être une annotation.
Il ne sera pas pris en compte par le code, le code comprend que c’est une annotation.
Idem, si vous mettez un Notepad++, si je me mets dans langage CSS juste ici, je vous conseille une fois de plus de vous y mettre.
Là, vous voyez directement qu’ici ça apparaît en vert, c’est une annotation.
C’est toujours sympa d’avoir ce Notepad puisque le code couleur aide beaucoup.
Ici, en texte annotation, on peut dire : “Afficher mobile ou Cacher desktop” et ici, vous pouvez mettre, si vous pensez n’avoir pas compris, “Afficher desktop et Cacher mobile”.
Comme ça, vous êtes sûr que c’est clair, vous ne pouvez plus vous tromper.
Vous avez retenu que ça, ça affiche en desktop et ça cache en mobile, c’est surtout ça cache en mobile et l’affichage ne se fera qu’en desktop et là ici, vice versa.
Du coup, ici, comme on a un min, on affiche en mobile seulement et on cache en desktop.
Ce code, je vais le mettre dans un petit fichier texte et je vais vous le laisser à télécharger pour vous directement sur mon messenger comme d’habitude.
Vous allez sur facebook.com/pascalfastlane et vous m’envoyez un message avec le mot “responsive“.
Je le mettrai dans la description si jamais je change d’avis.
Pour le messenger, c’est encore plus simple si vous passez par là : m.me/pascal/fastlane.
Vous écrivez “responsive” ici et vous aurez le code.
Je vais vous l’ajouter juste après cette vidéo.
Je vous remercie pour avoir écouté cette vidéo jusqu’à la fin.
Le message du jour, c’est le HTML, le CSS, pas besoin d’en savoir des caisses mais des petites notions comme ça, ça fait tellement du bien.
Après, vous pouvez faire ce que vous voulez.
Vous n’allez pas sur le groupe commencer à demander des choses qui sont compliquées etc. juste vous connaissez ces notions et basta.
En deux-trois minutes, c’est corrigé.
Conclusion
Mettez un like, abonnez-vous à la chaîne si cela vous a plu.
N’hésitez pas à laisser des commentaires sur des vidéos que vous aimeriez bien avoir.
Là, par exemple, je fais cette vidéo parce que j’ai vu qu’elle revenait souvent en question malgré le fait de l’avoir déjà traitée.
Donc, j’ai vraiment souhaité aller en profondeur et vraiment traiter, tout contextualiser etc. pour que ce soit compris et que si jamais il y a une demande qui revient, je mets le lien de cette vidéo tout simplement.
Si vous avez d’autres questions qui vous empêchent de faire avec votre thème Fastlane, le site que vous voudriez, dites le moi.
Si c’est à portée, que c’est avec quelque chose d’aussi simple que ça, que ça peut être résolu, je le prendrai en compte.
Donc, ça dépend de vous, je suis là pour donner.
Plus vous saurez être acteur de cette chaîne, plus je saurai vous donner un contenu de qualité et qui est adapté à vous.
Et si vous pensez que ça va se mettre sur une liste d’attente, ce n’est vraiment pas le cas.
Des fois, il y a juste deux ou trois personnes qui me posent au final les mêmes choses, donc je le mets pour la semaine à venir.
Des fois même, il n’y a aucune personne, et là je pioche dans ma liste à idée.
J’en ai encore pas mal, il n’y a aucun souci.
Mais en tout cas, si vous avez un besoin, n’hésitez pas à la partager et si je pense que ça peut aider la communauté, je le traiterai.
Sur ce, je vous souhaite une excellente semaine.
À bientôt.
