Suggestion d'amélioration module skin

Super_chemist · 06/06/2012 16:43:49

Salut jpg

Je me suis rendu compte d'une problématique ces derniers temps : la plupart des sites internet sont fait avec un skin fixe.
Mais de plus en plus d'utilisateurs visitent nos sites à partir d'écrans de petites dimensions (ordinateurs netbook, tablettes, téléphones...)

En particulier, les utilisateurs de téléphone se retrouvent à devoir zoomer, alors que le site qui ne contient presque que du texte pourrait s'afficher de manière lisible...

Je te suggère donc, lors de la génération de cms.css, de mettre des max-width: au lieu des width:. L'aspect restera le même sur grand écran (design fixe), et s'adaptera sur petits écrans.
De même pour le #main qui pourrait avoir un min-width:50%, ce qui placera le #main sous le #side si l'écran est trop étroit.

Adrien

jpg · 01/07/2012 19:46:07

Bonsoir Adrien,

c'est pas déjà le cas ?

regarde les skins zplusbleu, zplusrouge etc ...

a+
Jean-Paul

Super_chemist · 01/07/2012 21:33:16

Non justement, ce n'est pas le cas !

Dans le paramétrage du design, si on met une valeur à page_width, on génère un width: x px; dans le cms.css et on a un design fixe.
Si on met 0, on ne génère pas le width et on a un design 100% de large.

Moi j'aime bien faire un design qui a l'air fixe pour les utilisateurs de grand écran (genre 900px de large) car si le visiteur a un écran 32'-quad-HD-je-sais-pas-quoi, les paragraphes sont étirés et ratatinés en hauteur...
Pour autant, pour les visiteurs ayant un écran plus étroit que 900px (résolution type VGA, téléphone, ou simplement navigateur en mode fenêtré), j'aime bien un design extensible pour ne pas scroller en horizontal ni imposer l'usage du zoom pour l'utilisateur.

Donc je joue principalement avec du max-width:900px; (par exemple) et évidement un CSS extensible avec des pourcentages et des max un peu partout (ce qui est loin d'être simple!).

Et je me disais que cette pratique pourrait être intéressante dans les "thèmes" standards de ziteplus, vu que c'est à partir d'eux que les webmasters bâtissent leurs CSS...

Astuce: pour tester avec un téléphone sans que celui-ci ne dézoome automatiquement la page, il faut ajouter <meta name="HandheldFriendly" content="true" /> dans le template.

Dans le même genre, j'ai réécrit le plugin advimage de tinymce pour qu'il mette des max-height et max-width au lieu de height et width. Ca revient au même pour les grands écrans, ça marche mieux avec les petits.
Je peux le poster si ça intéresse quelqu'un !

Dernière modification par Super_chemist (01/07/2012 21:36:28)

jpg · 01/07/2012 21:55:03

Je sais pas, j'ai travaillé cette question dans deux autres axes: que le design puisse s'adapter a un grand écran (si on met à zéro) et que le menu reste utilisable même sur un écran plus petit genre 800x600.

Si on prend deux sites ziteplus très basiques au niveau du deisgn: www.giausserand.fr ou jpgg.free.fr
ils s'affichent parfaitement sur un téléphone portable (smartphone) sans aucun scrolling horizontal.

Tu as un exemple de site qui met en exergue cette problématique ?

a+
Jean-Paul

Super_chemist · 01/07/2012 22:55:18

Ben, justement...

giausserand.fr, en 800x600 sur un ordi, ne passe pas en largeur. Scroll horizontal...
Je te suggère de tester, tout simplement en passant ton navigateur en fenêtré, et en réduisant la largeur de la fenêtre...
Et sur un smartphone, je vois la page "de loin" et suis obligé de zoomer pour lire (du coup, scroll horizontal aussi)

jpgg.free.fr passe bien, lui (encore qu'il faudrait tester avec un smartphone et un <meta name="HandheldFriendly" content="true" /> dans le template car je pense que le #menu va gêner...), mais prend 100% de l'écran, ce qui sur très grand écran peux foirer un design à base de photos et d'images...

jpg · 01/07/2012 23:31:39

Justement, c'est un très bon exemple:

- www.giausserand.fr utilise les anciens templates zite de renaud

=> scroll horizontal sur un pc en 800x600 ... mais passe sans problème sur un smartphone

- jpgg.free.fr utilise les nouveaux templates ziteplus (zplusbleu etc...)

=> aucun scroll horizontal sur un pc en 800x600 ou même moins et aucun problème sur mon smartphone.

Pour l'instant je trouve le comportement satisfaisant pour les nouveaux skin ziteplus

Je suis preneur d'un exemple.

Tu sais, je suis pragmatique, si ces modifs apportent quelques choses, pourquoi pas.

a+
Jean-Paul

Super_chemist · 02/07/2012 15:13:19

Voici un exemple de ma proposition, bricolé à partir du site que je gère : http://test.lpc.free.fr/ (inutile de chercher à explorer les sites, il n'y a que la 1re page...)

Le premier lien est un design fixe, tel que giausserand.fr. Comme je le dis, c'est un design fixe, donc scroll horizontal ou zoom obligatoire aux petites résolutions.
Sur un smartphone, il faut zoomer pour pouvoir lire le texte.

Le 2e est un design extensible, tel que jpgg.free.fr. Passe tout seul aux petites résolutions, mais pas terrible sur très grand écran...
Sur un smartphone, on peux lire d'emblée le texte, et la structure de la page est conservée/adaptée grace au CSS.

Le 3e est un compromis entre les deux, avec un max-width. Il s'adapte aux petites résolutions, et s'affiche comme un design fixe aux grandes.
Là aussi, on peux lire d'emblée le texte sur smartphone.

jpg · 02/07/2012 18:52:20

Super_chemist a écrit :

Le 3e est un compromis entre les deux, avec un max-width. Il s'adapte aux petites résolutions, et s'affiche comme un design fixe aux grandes.
Là aussi, on peux lire d'emblée le texte sur smartphone.

Ok, je comprends mieux le pourquoi de la demande.
Effectivement, cela doit pouvoir être intégré dans les skin extensibles sans problème (zplusbleu etc ...)
Je vais voir ça pour les nouveaux ziteplus.

Super_chemist a écrit :

Dans le même genre, j'ai réécrit le plugin advimage de tinymce pour qu'il mette des max-height et max-width au lieu de height et width. Ca revient au même pour les grands écrans, ça marche mieux avec les petits.
Je peux le poster si ça intéresse quelqu'un !

Toujours preneur d'un exemple pour juger sur pièce de la différence

a+
Jean-Paul

Super_chemist · 02/07/2012 19:09:32

Par exemple, la grande photo en bas de mon site d'exemple a été insérée avec le advimage modifié.
Si tu redimensionne ton navigateur (avec un design extensible!), elle s'ajustera pour ne pas faire plus de 100% de la largeur.
(avec le advimage original, les dimensions de l'image sont fixes et l'image ne se redimensionne pas, elle dépassera)

Et la nouvelle version de zdiaporama que j'ai mis en lien dans le forum il y a quelques semaines se comporte pareil (voir l'image flottante à gauche, j'ai viré le javascript mais c'est une image de zdiaporama à l'origine), elle s'ajuste pour 50% maxi si je me souviens bien.

Dernière modification par Super_chemist (02/07/2012 19:14:55)

Super_chemist · 02/07/2012 19:12:34

A noter que pour que tout s'affiche ainsi sur smartphone, il faut que la balise <meta name="HandheldFriendly" content="true"> soit dans le head.
Sinon le smartphone fera comme si il avait un grand écran, et il faudra jouer du zoom...

Super_chemist · 02/07/2012 23:02:56

Ici mon advimage modifié.
http://test.lpc.free.fr/advimage_modifie.zip
Le dézipper dans le dossier advimage de tinymce, en écrasant ce qui doit l'être.
Bien vider le cache du navigateur pour mettre à jour le js.

Adrien

jpg · 02/07/2012 23:17:21

Super_chemist a écrit :

Par exemple, la grande photo en bas de mon site d'exemple a été insérée avec le advimage modifié.
Si tu redimensionne ton navigateur (avec un design extensible!), elle s'ajustera pour ne pas faire plus de 100% de la largeur.
(avec le advimage original, les dimensions de l'image sont fixes et l'image ne se redimensionne pas, elle dépassera)

tu m'as convaincu

si un pro du css a des objections ... c'est maintenant qu'il faut les faire

a+
Jean-Paul

Forum ZitePLUS

#1 06/06/2012 16:43:49

Suggestion d'amélioration module skin

#2 01/07/2012 19:46:07

Re : Suggestion d'amélioration module skin

#3 01/07/2012 21:33:16

Re : Suggestion d'amélioration module skin

#4 01/07/2012 21:55:03

Re : Suggestion d'amélioration module skin

#5 01/07/2012 22:55:18

Re : Suggestion d'amélioration module skin

#6 01/07/2012 23:31:39

Re : Suggestion d'amélioration module skin

#7 02/07/2012 15:13:19

Re : Suggestion d'amélioration module skin

#8 02/07/2012 18:52:20

Re : Suggestion d'amélioration module skin

#9 02/07/2012 19:09:32

Re : Suggestion d'amélioration module skin

#10 02/07/2012 19:12:34

Re : Suggestion d'amélioration module skin

#11 02/07/2012 23:02:56

Re : Suggestion d'amélioration module skin

#12 02/07/2012 23:17:21

Re : Suggestion d'amélioration module skin

Pied de page des forums