template purity 3 responsive

[clodcharl]

Bonjour,
J'utilise le template purity 3 et je n'arrive pas a le paramétrer pour le rendre responsive.
D'après google, ce serai mes articles trop larges.. je ne comprends pas.
mon site: csclichytennis.com
Merci pour votre aide,
Claude

[PhilJ]

Re : template purity 3 responsive

Bonjour Claude,

J'utilise le template purity 3 et je n'arrive pas a le paramétrer pour le rendre responsive. [...]

C'est la preuve qu'il ne suffit pas que le template soit mobile ready pour que le site soit responsive.


Je n'ai regardé que la page d'accueil, où il y a déjà pas mal d'obstacles à votre souhait d'un rendu responsive :

En premier lieu, l'image /images/sampledata/titresite.jpg a une largeur de 1100 px et n'est pas sous contrôle.


Ensuite, les classes Bootstrap contrôlant les 4 modules situés (presque) en haut, 'Contact', 'Inscription'... sont manifestement à revoir : <div class=" col-lg-3 col-md-3 col-sm-3 col-xs-6">.

En effet, les écrans sous contrôle Bootstrap sont construits sur une grille de 12 / 12.

Pour mieux comprendre :

En premier lieu, chaque « ligne » (= par exemple, et typiquement, un container accueillant un groupe de modules pouvant s'afficher les uns à côté des autres sur grand écran) est divisible en 12 largeurs (12 zones si vous préférez). En conséquence, chacune des lignes doit toujours compter 12 largeurs, ni plus, ni moins, que cette valeur 12 soit obtenue en une seule fois (= 12), ou bien qu'elle soit obtenue en additionnant les différentes largeurs de la même ligne — par exemple, pour des largeurs égales : 6 + 6, ou 4 + 4 + 4, ou 3 + 3 + 3 + 3, et, pour des largeurs inégales : 5 + 7, ou 7 + 5, ou 5 + 4 + 3, etc.

Là où Bootstrap se révèle très malin, c'est qu'il permet des découpages différents pour un même container en fonction de la largeur de l'écran utilisé par les visiteurs. Voyez les informations essentielles sur le site Bootstrap : http://getbootstrap.com/css/#grid-options.

Par exemple, col-xs-6 signifie que la zone peut s'afficher sur la moitié de la largeur disponible sur smartphone (xs= extra small [screen]).

Donc déjà, dans votre codage, la classe col-xs-6 est forcément inadaptée sur smartphone puisque :

1. Vous l'utilisez pour chacun des 4 modules, donc 4 fois, ce qui donne 4 x 6 = 24, impliquant donc logiquement 2 lignes (= 24 = 2 x 12).
2. Chaque module contient une image dont la largeur est de 200 px. Il est de ce fait hors de question que ces 4 modules puissent tenir, même sur 2 lignes sur un écran de 320 px (iPhone).

Pour corriger, c'est très simple : pour chaque module, remplacez col-xs-6 par col-xs-12. De cette façon, chacun des 4 modules occupera toute la largeur sur les smartphones.

Il vous faudra revoir, de même, les autres classes : sur tablettes (entre 768 et 991 px), il vous faudra placer vos 4 modules sur 2 lignes, sinon ils se chevaucheront, donc : col-sm-6 au lieu de col-sm-3.

En 3^e lieu, vous affichez un tableau dont la largeur explicite est incompatible avec les petits écrans : <table cellpadding="2" border="0" align="center" style="width: 710px; background-color: #f5ec67;">.

=> Remplacez 710px par auto.


...Il y a peut-être d'autres choses sur lesquelles il faudrait intervenir (et sur d'autres pages), mais les quelques modifications suggérées devraient déjà bien améliorer l'aspect de la page d'accueil.



Cordialement,

[clodcharl]

Re : template purity 3 responsive

Bonjour Claude,




C'est la preuve qu'il ne suffit pas que le template soit mobile ready pour que le site soit responsive.


Je n'ai regardé que la page d'accueil, où il y a déjà pas mal d'obstacles à votre souhait d'un rendu responsive :

En premier lieu, l'image /images/sampledata/titresite.jpg a une largeur de 1100 px et n'est pas sous contrôle.


Ensuite, les classes Bootstrap contrôlant les 4 modules situés (presque) en haut, 'Contact', 'Inscription'... sont manifestement à revoir : <div class=" col-lg-3 col-md-3 col-sm-3 col-xs-6">.

En effet, les écrans sous contrôle Bootstrap sont construits sur une grille de 12 / 12.

Pour mieux comprendre :

En premier lieu, chaque « ligne » (= par exemple, et typiquement, un container accueillant un groupe de modules pouvant s'afficher les uns à côté des autres sur grand écran) est divisible en 12 largeurs (12 zones si vous préférez). En conséquence, chacune des lignes doit toujours compter 12 largeurs, ni plus, ni moins, que cette valeur 12 soit obtenue en une seule fois (= 12), ou bien qu'elle soit obtenue en additionnant les différentes largeurs de la même ligne — par exemple, pour des largeurs égales : 6 + 6, ou 4 + 4 + 4, ou 3 + 3 + 3 + 3, et, pour des largeurs inégales : 5 + 7, ou 7 + 5, ou 5 + 4 + 3, etc.

Là où Bootstrap se révèle très malin, c'est qu'il permet des découpages différents pour un même container en fonction de la largeur de l'écran utilisé par les visiteurs. Voyez les informations essentielles sur le site Bootstrap : http://getbootstrap.com/css/#grid-options.

Par exemple, col-xs-6 signifie que la zone peut s'afficher sur la moitié de la largeur disponible sur smartphone (xs= extra small [screen]).

Donc déjà, dans votre codage, la classe col-xs-6 est forcément inadaptée sur smartphone puisque :

1. Vous l'utilisez pour chacun des 4 modules, donc 4 fois, ce qui donne 4 x 6 = 24, impliquant donc logiquement 2 lignes (= 24 = 2 x 12).
2. Chaque module contient une image dont la largeur est de 200 px. Il est de ce fait hors de question que ces 4 modules puissent tenir, même sur 2 lignes sur un écran de 320 px (iPhone).

Pour corriger, c'est très simple : pour chaque module, remplacez col-xs-6 par col-xs-12. De cette façon, chacun des 4 modules occupera toute la largeur sur les smartphones.

Il vous faudra revoir, de même, les autres classes : sur tablettes (entre 768 et 991 px), il vous faudra placer vos 4 modules sur 2 lignes, sinon ils se chevaucheront, donc : col-sm-6 au lieu de col-sm-3.

En 3^e lieu, vous affichez un tableau dont la largeur explicite est incompatible avec les petits écrans : <table cellpadding="2" border="0" align="center" style="width: 710px; background-color: #f5ec67;">.

=> Remplacez 710px par auto.


...Il y a peut-être d'autres choses sur lesquelles il faudrait intervenir (et sur d'autres pages), mais les quelques modifications suggérées devraient déjà bien améliorer l'aspect de la page d'accueil.



Cordialement,

Merci de ces conseils interressants;
Ils sont assez techniques, je vais essayer de les appliquer.
Cordialement

[clodcharl]

Re : template purity 3 responsive

Merci pour ces renseignements assez techniques, je vais essayer de les mettre en oeuvre.
Cordialement