[Résolu] Display d'un fichier php

Bonjour,

Sur l'une des pages de mon site, il y a beaucoup de texte, ce qui rend la lecture sur mobile inconfortable.

Je vais donc me baser sur un menu en accordéon qui ne sera afficher que sur mobile. Jusque là, tout va bien mais je sais qu'en utilisant la fonction "display :none;" le contenu dans le bloc est juste masqué c'est à dire qu'il sera malgré tout chargé mais non visible pour le visiteur.

J'ai l'idée de placer le contenu dans deux fichiers séparés (un pour le mobile et l'autre pour le bureau) que j'appellerais avec la fonction include toujours en utilisant la fonction display mais est-ce que cela fonctionnera ? Est-ce que juste masqué un include empêchera le chargement de la page associé ?

Merci.

Bonjour,

La problématique essentielle sera de distinguer la taille du viewport.
Impossible en php.
Par contre c'est faisable en Ajax, en manipulant le DOM et en chargeant le contenu désiré suivant la circonstance.

Par contre, même si cela est techniquement faisable, je trouve la démarche peu pertinente dans la mesure où vous allez au devant de multiples problématiques à résoudre comme prévoir ce qui se passe en cas de changement d'orientation du device, à combien de pixel fixer la valeur pivot pour passer du modèle "mobile" au "desktop", une maintenance complexifiée, la prévision d'un fallback au cas où le JS est désactivé [...] le tout pour un gain négligeable. Et là encore, je réduis mes dires au point de vue développement mais qu'en est-il de l'aspect SEO qui en découle ?!
Sachez que charger du texte, aussi long soit-il, se fait très rapidement. Un texte est facilement compressé et ne nécessite que peu de calcul. Perso, j'opterais plus pour une gestion astucieuse à coup de CSS et de requêtes sur le média.

Du côté CSS et les media queries, pas de soucis. J'ai compris le principe et je m'en sert sur le site pour l'affichage.

Le soucis n'est pas vraiment au niveau du chargement de la page mais plutôt d'éviter d'agresser le visiteur mobile d'entrée avec de gros pavés. D'où l'utilité de me baser sur un menu déroulant (ou accordéon).

Si j'ai parlé du chargement de contenu non utile, c'est dû a mon côté perfectionniste car j'aime avoir un code propre et optimiser.

Je comprends le questionnement et j'ai ce même soucis : ne fournir que l'essentiel. Toutefois, nous sommes souvent amenés à faire des choix draconiens.

Et si vous envisagiez la chose sous un autre angle ?! Pourquoi ne pas structurer votre contenu dans une vision "mobile first" et de vous appuyer sur le Css pour dilater l'affichage sur desktop ?

Une autre piste serait de paginer votre contenu. La page de garde qui conserve l'information essentielle et une page secondaire (à une autre url) qui elle contiendrait plus de détails sur le sujet traité.

Bien sûr je ne fais qu'émettre des hypothèses dans la mesure où je n'ai aucune idée du type de contenu que vous proposez.

Il est entendu que si malgré tout vous souhaitez persister dans votre idée première, vous trouverez de l'aide ici bas.

Greg_Lumiere a écrit :
Pourquoi ne pas structurer votre contenu dans une vision "mobile first" et de vous appuyer sur le Css pour dilater l'affichage sur desktop ?

Je ne suis pas certain d'avoir bien saisi le sens de cette phrase. Vous voulez dire que sur mobile, j'aurais un texte qui irait à l'essentiel et sur desktop, le texte complet ? Où alors, former plusieurs paragraphes sur mobile pour aérer le contenu tandis que sur desktop, je peux me permettre de faire plus dense ?

L'autre solution n'est pas mauvaise mais le site présente une entreprise et ses prestations. J'ai un doute sur l'ergonomie en pointant chacune des prestations vers une nouvelle page.

PS : je suis tombé par hasard sur un article indiquant que le contenu caché (comme je le souhaite) mais affichable ne serait peut être plus référencé par Google. Est-ce bien vrai ? Si c'est le cas, c'est complètement stupide car le contenu est masqué mais bel et bien présent.

PS2 : j'ai approfondi mes recherches et il semble que si le contenu masqué se charge en même temps que la page (comme mon cas), il n'y a aucun soucis pour le référencement. Ca date de 2016, je ne sais pas si c'est toujours valable.
Modifié par Xhanxhand (18 Dec 2019 - 12:10)

Xhanxhand a écrit :


Je ne suis pas certain d'avoir bien saisi le sens de cette phrase. Vous voulez dire que sur mobile, j'aurais un texte qui irait à l'essentiel et sur desktop, le texte complet ? Où alors, former plusieurs paragraphes sur mobile pour aérer le contenu tandis que sur desktop, je peux me permettre de faire plus dense ?

Vous parliez d'accordéon. J'entends par là un affichage prévu en ce sens et dérouler l'affichage sur desktop (ou alors garder l'accordéon pour les deux).

[

Xhanxhand a écrit :

L'autre solution n'est pas mauvaise mais le site présente une entreprise et ses prestations. J'ai un doute sur l'ergonomie en pointant chacune des prestations vers une nouvelle page.

J'entends bien. Mais gardez à l'esprit que trop de phrasé risque de provoquer le décrochement de vos lecteurs. Allez au but, vous serez plus efficace dans votre communication.

Xhanxhand a écrit :
PS : je suis tombé par hasard sur un article indiquant que le contenu caché (comme je le souhaite) mais affichable ne serait peut être plus référencé par Google. Est-ce bien vrai ? Si c'est le cas, c'est complètement stupide car le contenu est masqué mais bel et bien présent.

C'est vrai pour la propriété display. Placée à none, le contenu devient invisible pour les robots et technologies d'assistance. Il est d'ailleurs préférable de masquer le contenu sans l'enlever du flux. Jouez plutôt avec un positionnement absolu, une mise sur orbite du contenu, une opacité nulle, une taille à zéro, un overflow masqué etc.


Par exemple, prenons ceci
"un chasseur sachant chasser sans son chien est un excellent chasseur"

<dl>
<dt>Un chasseur</dt>
<dd>sachant chasser sans son chien est un excellent chasseur</dd>
</dl>

dd { display: none; }

Dans ce cas, tout ce qui existe réellement pour les robots sera le contenu de la balise dt soit "un chasseur"

par contre avec

dl {
 position: relative;
}
dd {
position: absolute;
left: -99999rem;
opacity: 0;
width: 0;
height: 0;
overflow: hidden;
}

Là le contenu de dd fait toujours partie du flux de votre page donc est lu par les robots et technos d'assistance.
Bien sûr cela est à adapter en fonction de l'effet recherché à l'affichage mais l'idée est là.

Codepen
Dans ce pen vous constaterez que les définitions sont masquées mais qu'elles font toujours partie du flux donc les robots, lorsqu'ils lisent la page, y accèdent. Ce ne serait pas le cas si j'avais utilisé display none.

Hum ! C'est pas mal du tout comme technique.

A la base, j'avais dans l'idée d'avoir les textes directement accessible sans aucune manipulation sur la version destkop et sur la version mobile, j'aurais utilisé le menu en accordéon en jouant avec les display selon la résolution (ce que je fais déjà pour un menu réalisé uniquement pour les mobiles) mais il m'aurait fallut alors deux fois les textes car je ne vois pas comment faire autrement et ça m'embêtait pas mal.

Du coup, la solution que vous indiquez me semble vraiment adapté pour toutes résolutions tout en me donnant moins de travail.

Je vais tester cela

@greg_Lumière : J'adore !! Est-ce que mémé a fini par trouver la concoction de mots dans sa cave ?
Modifié par J_B (18 Dec 2019 - 18:38)

Je reviens après avoir tester votre code et je dois dire que je suis plus que satisfait.

J'ai bien sur adapté selon mon site et de mes préférences mais ça fonctionne impeccablement. Ce que j'ai surtout changé au delà de la mise en forme, c'est la position des définitions. Au lieu que ce soit en bas de page, chacune s'affiche sous le terme qui lui correspond.

A présent, je vais regarder pour rendre cela un peu plus sympa comme voir si je peux faire apparaître les définitions de manière moins brutes (comme le font la plupart des menus en accordéon) et afficher une flèche à côté des termes qui changent d'orientation.
Ce n'est pas une nécessité mais c'est toujours plus joli =)

Bonne nouvelle. Au moins votre cette voie facilitera grandement votre maintenance.
Pour ce qui est des transitions, vous verrez que ce n'est pas un problème en soi. En fait la clef c'est de bien positionner son objet quand il est masqué ensuite tout est possible, que ce soit un simple slide ou un effet de tourbillon. Vous trouverez sur Codepen et ailleurs pas mal d'effets sympa qui viendront enrichir votre inspiration.

En tout cas vous titillez ma curiosité. J'ai espoir de consulter le résultat un de ces quatre. En attendant, bonne continuation.

J_B a écrit :
@greg_Lumière : J'adore !! Est-ce que mémé a fini par trouver la concoction de mots dans sa cave ?

Whao, j'ai mis à moment à percuter mdr
Malheureusement mémé a passé l'arme à gauche. Paix en son âne !

Dès que le site sera terminé, je vous donnerais le lien pour que vous voyez le résultat.

Sinon, je ne parviens pas avec les transitions. Je me suis beaucoup renseigné et tester tout un tas de code (uniquement html et css). La plupart du temps, il ne se passe rien. Dans de rare cas, j'ai bien une animation mais étrange c'est à dire que le texte apparaît au milieu écrasé et s'étale ensuite sur la gauche complètement. Ce n'est pas facile à expliquer^^

Je pense que le soucis est que les textes sont séparés des balises ul et li alors que dans les exemples et démonstrations, tout est ensemble.

Même problème pour la flèche. C'est très souvent avec du Javascript et je voudrais éviter ça. Ou alors, c'est basé sur des checkbox et je ne parviens pas à adapter.

Je crois que je vais laisser tel quel.
Modifié par Xhanxhand (19 Dec 2019 - 11:47)

Peut-être nécessite-t'il une petite adaptation du html ?!
Si je comprends bien votre structure, vos liens sont dans une liste et vos boites en dehors des listes. Effectivement ça peu poser des soucis pour le Css.

Vous y reviendrez plus tard, qui sait la solution vous sautera peut-être aux yeux.

Mais en tout cas JS n'est pas indispensable pour ce genre de choses.

Je persiste encore et avec une simple transition sur la classe définition, j'ai bien une animation mais comme je l'ai expliqué, enfin tenté du moins.

Pour mieux me faire comprendre, j'ai uploadé une page de test : dnoi.fr/trans/

Dans sa forme la plus simple ça donne quelque-chose comme ça.
un exemple de votre page

Ha oui pas mal du tout.

De mon côté, j'ai continué dans mes recherches et à faire mes tests, et j'y suis presque.

J'ai bien l'effet voulu (mais le votre est vraiment sympa) mais le déroulement ne se fait qu'au passage de la souris et pas au clic. Je cherche comment faire. C'est surement dû au fait que j'ai supprimer les classes "definitions" car avec, je n'avais aucune transition.

			<ul id="prest">
				<li><a href="#"><h2>> Montage PC + OS + Pilotes</h2></a>
					<ul>
						<li>
						Offre la plus avantageuse pour le client.<br />
						Assemblage complet d'une tour d'ordinateur comprennant le matériel et l'installation du système d'exploitation et les pilotes nécessaires.<br /><br />
						Cette prestation n'inclut pas le prix de la clé d'activation Windows si necéssaire.<br /><br />
						<b>Tarif :</b> 64,99€<br />
						<b>Estimation de durée :</b> entre 3 et 4 heures<br />
						<hr></hr><br />
						</li>
					</ul>
				</li>
			</ul>

Le code CSS précédent n'a pas changé, j'ai juste ajouté et adapté ce qui suit :

#prest a { 
	display:block; 
	color: #fff; 
	text-decoration:none;
}

#prest ul {
	max-height:0em;	
	overflow: hidden;
	transition: 1s max-height 0.3s;
	border-radius: 0 0 8px 8px;
}

#prest > li:hover ul { max-height: 13em; }

Je vais regarder votre code de plus près.

Edit : J'apprécie beaucoup l'effet de transition de votre code mais je ne gère pas l'entreprise. Je ne suis que le webmaster (amateur^^) et la décision du chef est de garder le code ci-dessus c'est à dire que les textes s'affichent au survol du curseur.

Plus besoin de se prendre la tête.

Un grand merci pour votre aide. Je ne pensais pas que vous feriez autant.
Modifié par Xhanxhand (19 Dec 2019 - 15:04)

Pas de soucis, ça m'a fait plaisir de vous filer un coup de main.

Si je peux me permettre quelques recommandations :
* regrouper toutes vs liste en une seule (comme dans ma démo)
* éviter les <br> pour la mise en page ; utilisez plutôt des marques de paragraphes puis jouer sur les émargements en Css
* <hr> est une balise auto-clavée donc en html5 inutile de la fermer par un </hr> (d'ailleurs si vous regardez le code source depuis le navigateur cela vous est signalé en rouge)


Bonne continuation. Au plaisir

Pour la balise hr, je m'en suis rendu compte et j'ai corriger

Pourquoi devrais-je plutôt utiliser la balise <p> ? les <br /> sont bien des retours à la ligne alors je ne vois pas trop le soucis.

Pour les listes, je regarderais avec votre démonstration mais j'ai un autre soucis à régler au préalable^^

Edit : pour les listes, je suis obligé de faire une liste dans une liste sinon je n'obtiens pas l'effet de slide. J'ai une liste générale qui regroupe toutes les autres.

Un petit exemple ci-dessous :

			<ul id="prest">
				<li><a href="#"><h2>Montage PC + OS + Pilotes</h2> <img src="images/arrow.png" alt="" class="rotate" /></a>
					<ul>
						<li>
						Offre la plus avantageuse pour le client.<br />
						Assemblage complet d'une tour d'ordinateur comprenant le matériel et l'installation du système d'exploitation et les pilotes nécessaires au fonctionnement des périphériques.<br /><br />
						Cette prestation n'inclut pas le prix de la clé d'activation Windows si necéssaire.<br /><br />
						<b>Tarif :</b> <span style="color :#5fd072">64,99€</span><br />
						<b>Estimation de durée :</b> entre 3 et 4 heures<br />
						<hr /><br />
						</li>
					</ul>
				</li>

				<li><a href="#"><h2>Montage PC complet</h2> <img src="images/arrow.png" alt="" class="rotate" /></a>
					<ul>
						<li>
						Assemblage complet d'une tour d'ordinateur ne comprenant que le matériel<br /><br />
						Ce service est à privilégié si vous souhaitez ou devez changer la majeure partie des composants en une seule fois. Il vous permettra de diminuer les coûts liés au temps réservé au changement de votre matériel.<br /><br />
						<b>Tarif :</b> <span style="color :#5fd072">39,99€</span><br />
						<b>Estimation de durée :</b> 2 heures<br />
						<hr /><br />
						</li>
					</ul>
				</li>
[les autres listes]
</ul>

Modifié par Xhanxhand (21 Dec 2019 - 12:03)

Certes, vous avez raison, les <br> ("break-row") servent très exactement à insérer un retour à la ligne.
Toutefois il s'agit d'une des rares balises qu'il est impossible de personnaliser (pas d'émargement ni d'espacement entre-autres) or ce peut s'avérer pratique à terme. Donc non, ce n'est pas un soucis, mais un confort
Perso les br je les réserve principalement pour insérer un passage à la ligne au sein même d'un paragraphe.

Pour les listes, dans votre démo vous aviez une architecture sous forme
ul puis puis div puis ul puis div...
Ma recommandation allait dans le sens de ce que vous présentez dans votre dernier message.
Après, oui bien sûr il est tout à fait correct d'imbriquer les listes. C'est même indispensable pour ce genre d'effet.

Une dernière chose. Faites attention, dans votre précédent snippet vous avez un espace entre la fermeture de h2 et l'image. Ca va vous fausser l'affichage. Si vraiment vous avez besoin d'un émargement à cet endroit, préférer le mettre en Css. Quand vous aurez à y revenir plus tard vous vous remercierez hihi

Bonne continuation.