[Résolu] Design responsive avec menu mobile

Bonjour à tous !

j'ai un site web depuis plusieurs années, et google m'indique régulièrement dans sa console que l'ergonomie n'est pas adaptée au mobile...
je le savais mais pendant longtemps, 90% de la navigation du site se faisait depuis un pc donc je m'en fichais ^^
maintenant, il y a presque la moitié qui vient sur mobile donc je ne peux plus l'ignorer

le design actuel est inadaptable en mobile, ça demande trop de modif (design très graphique, qu'il faudrait sûrement remettre au goût du jour également mais je ne suis pas designer )

du coup, vaut-il mieux faire une version mobile dédiée, complètement différente de la version PC (qui garderait son design actuel) ou vaut-il mieux faire un design adaptable (et en profiter pour tout changer y compris la version PC) ?
à savoir que le site a 15 ans ( ouch le coup de vieux) et le design n'a à peu près jamais changé (le code, en revanche, pas mal ^^) mais il est peu fréquenté alors je ne veux pas investir beaucoup (ni en temps, ni en argent)
ou bien je continue de m'en moquer jusqu'à ce qu'il ne soit plus fréquenté du tout et je pourrais le fermer ^^

qu'en pensez-vous ?
merci

NB : le site est https://www.tcg-seigneur-des-anneaux.fr

EDIT : changement de titre pour mieux correspondre à la suite ^^
Modifié par Elianora la blanche (22 Aug 2019 - 18:35)

Bonsoir,
je pense qu'en modifiant un peu la CSS on doit rendre les pages responsives, notamment avec les flexboxes qui permettent pas mal de choses pour les sites 3 colonnes comme le tien, changer l'ordre des 3 colonnes, occuper tout l'espace, etc

vite fait; j'ai créer un parent "<main>" pour gauche, centre et droite

<main>
     <div id="gauche></div>
     <div id="droite></div>
     <div id="centre></div>
</main>

et un peu de CSS :

@media (max-width: 992px) {
	#gauche,#droite {float:none;}
	main {
		display:flex;
		background-color:gold;
		flex-wrap: wrap;
	}
	#gauche {
		flex:1;
		display:flex;	
	}
	#droite {
		order:1;
	}
	#centre {
		background-color:teal;
		margin:0;
	}
}

i faut peaufiner la partie gauche (qui est en haut en dessous de 992px) notamment utiliser flex pour la navigation, etc
On doit pouvoir faire quelque chose assez rapidement
Modifié par farang (21 Aug 2019 - 19:45)

merci, je ne connais pas encore cette propriété flex, il va falloir que je me penche dessus

je vais regarder, quitte à virer les images de fond sur mobile (car le texte débordera si la taille s'adapte)

un peu de doc sur flex :

https://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox
https://la-cascade.io/flexbox-guide-complet/

et un récap en pdf :

https://www.alsacreations.com/xmedia/guidelines/flexbox-cheatsheet.pdf

étudie sérieusement flex, c'est indispensable aujourd'hui, et tu vas découvrir la magie du truc, comment flex simplifie le code, une merveille !

merci, c'est intéressant

edit : trouvé

sinon, j'ai modifié la css et simplifié l'html
en mode "petit écran", je masque certains fonds, ça rend encore pas trop mal (et c'est bien plus simple)

par contre, les "colonnes" gauche et droite, qui deviennent des lignes, s'affichent un peu n'importe comment ^^
(et j'ai quelques soucis avec les copyrights qui des fois sont centrés, et des fois non )

est-ce possible de faire un truc sympa avec un menu "sandwich" un peu comme là (quand on réduit la taille de fenêtre) : https://codepen.io/raphaelgoetter/pen/jrWObK mais sans js ?
sinon, je mettrai du js, ça me tuera pas ^^

ou comme là mais sans bootstrap : https://getbootstrap.com/2.3.2/ ? ^^

et sinon, ça restera comme c'est, je suis plutôt satisfaite du résultat obtenu
Modifié par Elianora la blanche (22 Aug 2019 - 21:52)

Elianora la blanche a écrit :

est-ce possible de faire un truc sympa avec un menu "sandwich" un peu comme là (quand on réduit la taille de fenêtre) : https://codepen.io/raphaelgoetter/pen/jrWObK mais sans js ?

Hello,

Oui elle se trouve ici : https://codepen.io/raphaelgoetter/pen/JGOgJj

Et tu as la page récap ici : http://goetter.fr/nav/

Bonne journée

EDIT : bon, j'ai presque réussi à faire un truc comme je voudrais
mon souci, c'est que les liens (block) sont tous collés les uns aux autres, j'aimerais un peu d'espacement, comme sur l'exemple (je suis partie sur "push top" plutôt) ou une bordure mais qui ne déborde pas de la fenêtre ou du contenu

j'ai laissé mes ul, li, est-ce ça qui gêne ?

d'ailleurs le header et le footer débordent et on doit donc légèrement scroller horizontalement, je ne vois pas pourquoi
ce n'est pas très grave mais c'est dommage

merci
Modifié par Elianora la blanche (23 Aug 2019 - 14:49)

bonjour,

j'avais demandé à notre ami google de revenir voir comme j'avais bien mis à jour mon petit site, il est revenu mais il n'est toujours pas content

j'ai l'impression qu'il n'a pas mis à jour son index... donc forcément, ça ne va toujours pas
mais même quand je teste en direct, il y a des soucis car parfois il ne charge pas la css ni le js (souvent en fait) donc c'est toujours moche, mal mis en page et écrit trop petit...
quand il arrive à charger css et js, ça lui convient
je suppose que c'est un souci serveur...

de mon côté, j'aimerais bien régler le souci de débordement et avoir un espacement entre mes boutons de menu
est-ce possible ?

merci

bon, j'ai réussi à faire un truc pas trop dégueu
j'ai modifié le menu mobile et enlevé 2-3 trucs en mode petit écran