[RÉGLÉ] Site responsive avec Joomla 3.7

[amarchand83]

Bonjour,

Après m’être beaucoup renseigné je ne suis guère avancé.. J’ai lu tout et presque son contraire, par des experts qui n’en sont pas vraiment… Ici je pense trouver une vraie réponse.

Si je résume, en 2017 un site doit être « responsive » tout le monde est d’accord
J’ai donc comme des milliers de gens débutant qui choisissent Joomla (à raison) choisi un template responsive

Ensuite j’ai construit petit à petit mon site, mais dans l’ignorance totale du débutant j’ai mis en forme mes articles avec des tableaux, et je ne regrette pas, c’est facile à comprendre et à appréhender le HTML et ça permet d’avancer.

Mes interrogations et vu les question sur le net sûrement par beaucoup de gens sont les suivantes :

- Un tableau HTML avec width 100% est-il responsive ?
- Ajouter height 100% apporte-t-il quelque chose ?
- Faut-il impérativement passer par des div et du CSS sachant qu’apparemment CSS3 n’est pas encore supporté par tous les navigateurs en particulier IE, si oui existe-t-il un tuto compréhensible pour des personnes n’ayant pas 10 ans d’expérience en ce domaine
- Y-a-t-il une extension Joomla qui rend les tableaux responsive, par exemple quid de l'extension : "Responsive tables"
Merci de vos éclairages comme toujours pertinents.

[daneel]

Re : Site responsive avec Joomla 3.7

Bonjour,

Pour simplifier grossièrement la situation, un tableau n'est pas "responsive" par défaut. Pour limiter les dégats, certains ajoutent un overflow horizontal en css comme l'indique w3cschool :

https://www.w3schools.com/howto/howto_css_table_responsive.asp

mais avec un peu de code javascript, il peut se transformer facilement...

Exemple en jquery : http://www.jerrylow.com/basictable/demo/

A défaut de coder ou d'avoir cette option responsive dans le template, on peut utiliser des extensions spécifiques :

http://www.graphicaholic.com/demos/extensions/tableaholic

Par exemple, Tableaholic est libre & gratuit. Il suffit d'installer et publier le plugin (il ne s'active pas automatiquement).

Puis d'ajouter dans l'article :

{responsive}

et préciser la classe responsive dans le code source du tableau...
l'auteur explique comment le faire également avec l'éditeur JCE.

< table class="responsive" >

J'ai testé le plugin et cela fonctionne très bien sous joomla 3.7.3...




en vue mobile




Le tableau reste personnalisable en css soit dans les feuilles de style ou dans l'option fourni par le plugin.

Un module est également proposé.

[amarchand83]

Re : Site responsive avec Joomla 3.7

Merci de cette réponse précise, je vais mettre en place le plugin tableaholic ce qui me semble le plus facile techniquement.

j'ai lu la doc de ce plugin mais j'ai 2 petites précisions à demander :

1)
<table class="responsive"> ok à chaque table, mais ai-je intérêt à garder le width 100% que j'ai mis systématiquement ou dois-je le retirer, rien n'est dit à ce sujet, est-ce compatible ou incompatible ?
Logiquement on devrait le retirer c'est le travail du "responsive" ?
Dans mes TD j'ai aussi partager les tableaux en % (le total faisant 100% bien sur), ça je le garde bien sur ?

2) dans le code HTML ajouter {responsive}
J'ajoute donc cela juste avant chaque balise TABLE dans le HTML c'est bien cela ? dans des balises DIV ? SPAN ? sans rien préciser ?

[lomart]

Re : Site responsive avec Joomla 3.7

Bonjour,

Il faut faire une distinction entre
- les tableaux de données pour lesquels les solutions de Daneel sont pertinentes
- la mise en page par tableau qui ne peut pas fonctionner en responsive**

En ce qui concerne le support CSS3, il suffit de consulter les stats d'utilisation des navigateurs : https://www.w3schools.com/browsers/b...s_explorer.asp et le support des fonctions http://caniuse.com/

De plus, le but du responsive n'est pas que toutes les informations entrent sur la page, mais que la navigation soit adaptée à la taille de l'écran et à la grosseur des doigts.

** on peut éventuellement jouer sur les display, mais c'est encore plus compliqué.

[amarchand83]

Re : Site responsive avec Joomla 3.7

J'ai bien compris que le but du responsive est d'adapter la navigation à la taille de l'écran et non à tout mettre dedans écran

Je ne saisis pas bien la différence subtile entre tableaux de données et mise en page par tableau...
Pour moi un tableau de données est aussi mis en page par le tableau non?

Pour préciser mes tableaux, comme ceux de bcp de sites que j'ai visité pour voir, contiennent des données texte et des images. Tout cela est mis en page dans des tables HTML.

Je suis donc dans le cas de figure où l'utilisation du plugin Tableaholic n'aura pas d'effet sur le côté responsive ?

[lomart]

Re : Site responsive avec Joomla 3.7

Je ne saisis pas bien la différence subtile entre tableaux de données et mise en page par tableau..

Un tableau de données contient des données comme c'est le cas d'un tableur.
Regarde les copies d'écran du post de Daneel pour comprendre que ton site ne ressemblera plus à rien sur un mobile.

[amarchand83]

Re : Site responsive avec Joomla 3.7

Oui, je suis bien d'accord, je vais donc m'atteler à modifier ce qu'il faut, mais pour l'instant je suis dans l'inconnu...

J'ai pas mal de tableaux qui mettent en page mes textes et images et en plus en double avec les associations FR/EN, je vais faire un essai sur un tableau simple...

J'imagine un CSS général dans ma custom.css et remplacer mes TABLE par des DIV, enfin j'imagine plus que je vois...

je vais chercher si je trouve un tuto enfin compréhensible (par moi)

[daneel]

Re : Site responsive avec Joomla 3.7

Un grand merci à lomart d'avoir complété l'information, la solution du plugin répond bien au besoin d'afficher des tableaux de données.
Pour sa mise en application, il faut tester tout simplement

Vis à vis de personnes sans connaissance de l'html & css, et dans le cas de de mises en page plus complexe mélangeant texte & image, j'ai utilisé des shortcodes pour créer des tableaux en div à la sauce bootstrap... Pour se remémorer les codes, un bouton était ajouté à l'éditeur html facilitant ainsi leur création (avec le nombre de colonnes en classes css, etc.).

http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem

Le problème étant la compatibilité boostrap 2 ou bootstrap 3 du template...

Mais cela fait déjà plus de deux ans que j'ai laissé tomber les shortcodes...
au profit de page builder comme sp page builder de Joomshaper (il y a aussi Page builder CK, Page builder JSN...) Avec l'activation de l'intégration dans les articles, le rédacteur lambda choisit entre une page normale ou enrichi par le pagebuilder.

Sincèrement j'ai longtemps hésité avant de donner ce genre d'outil mais après avoir mis en place à de nombreuses reprises... Je n'ai eu que des retours positifs et enthousiaste !

En résumé, tu n'est pas obligé de te taper la conversion de table en div pour gérer le responsive dans ton contenu, pour aligner des blocs de texte, des images, video, etc... les pages builder (peu importe ton choix) te donneront le moyen d'agir rapidement, le code généré est souvent acceptable (en terme de performance) et tu peux faire de belles mises en page.

[amarchand83]

Re : Site responsive avec Joomla 3.7

Je vais essayer Page Builder CK (j'utilise déjà avec bonheur imageEffectCK)

Merci

[manu93fr]

Re : Site responsive avec Joomla 3.7

Je vais essayer Page Builder CK (j'utilise déjà avec bonheur imageEffectCK)

Merci

C'est un bon choix
Car il fait du responsive sans vraiment que tu t'en rendes compte ... un bonheur !