Déviation conditionnel Home page

[carbonathus]

Re : Déviation conditionnel Home page

APRES REFLEXION, JE FAIS UN NOUVEAU SUJET AUTOUR DE CE QUI SUIT ! Pitch de l'écran - fonts light

Salut tous,

Dans mes temps morts, je ne peux m'empêcher de continuer à chercher. Car même avec des navigateurs qui "lissent" bien les fonts, la différence entre deux écrans peut être importante.

Là, je tombe sur une donnée qui à mon avis s'approche de la solution : c’est le « pitch » ou « pas de masque » ou encore « pas de perçage » aussi appelé densité des pixels.

Et là, je vois une différence :

Mon écran Dell, E190S est à 0.29
Les écrans Mac sont autour des 0.25

et il semble que le critère de qualité soit <= 0.27 et que ce pitch influe surtout sur la qualité des textes.

J'aimerais bien tester ça ! parce qu'il se pourrait bien qu'avec un pitch > 0.27, les fonts Light ou extra Light soient mal affichés (c'est ce qu'il me semble conclure avec ce que j'ai lu sur des forums).

et c'est peut être avec ce paramètre qu'un test peut résoudre ce problème (avec un redirection vers un autre profil ou un changement de CSS)

Connaissez-vous un java script ou php, qui peut retourner le pitch de l'écran ?

Blaise

[carbonathus]

Re : Déviation conditionnel Home page

Sacré Damien,

Je crois bien que tu as visé très juste avec les navigateurs. Bien vu (ou bien pensé plutôt) !

Aujourd'hui, Firefox m'a proposé une mise à jour sur PC (c'est nouveau), eh ben oh miracle, QuickSand se lit beaucoup beaucoup mieux depuis. (incroyable différence par rapport à hier).

IE c'était déjà bon. Par contre, ça reste toujours affreux avec Opera et avec Chrome. Certainement une question de temps.

Pour info, j'ai bossé une heure là dessus aujourd'hui. (pas plus, je fais aussi des bases de données et là j'ai un monstre boulot à finir)

J'ai convaincu la cliente de faire quelque chose. J'ai finalement opté pour un petit texte message dans la colonne de droite (en haut), en Arial (bien sûr) : "Le texte s'affiche mal ? cliquer ici" et le lien change de profil.

Le texte message disparait après une vingtaine de secondes. ça donne bien ça, avec le mauvais écran, on ne voit que lui ! et c'est petit. ça devrait fonctionner.

C'est sûrement pas ce qu'il y a de mieux en terme de communication (impression que ça donne) mais tout le monde est content. Avec un peu de chance, les mises à jour continueront d'arriver et je pourrai finalement enlever ce truc.

Voilà le résultat des courses. Maintenant après approbation par Nadège, je mettrai ça en place sur la page publiée. (c'est encore en démo avec le lien dans le footer)

A la prochaine. Bonne soirée.

Blaise

PS :

j'ai pas encore essayé le switch des écrans sur les pc. Mais franchement je crois pas que ça serait flagrant. Celui qui a le bon écran est en fait un PC plus ancien et moins performant que celui qui a le mauvais.

[carbonathus]

Re : Déviation conditionnel Home page

oui ok, ça je vais faire !

B

[ZDamienZ]

Re : Déviation conditionnel Home page

Non ce que je veux dire c'est que pour tes tests il faut faire quelque de chose super de carré.
Si tu veux tester si ça vient du ratio de l'écran il faut mettre l'écran sur le même PC.
De cette manière tu testes vraiment le ratio puisque tu es sûr de ne pas varier d'autres paramètres.

Damien

[carbonathus]

Re : Déviation conditionnel Home page

oui, oui, non mais je suis totalement d'accord. Un moment faut dire stop et accepter qu'il n'y a pas de vraie solution "automatique" pour tout.

C'est un des problèmes de l'informatique et de notre système d'économie de marché. Chacun a son système, défend ses licences... c'est pas nouveau et c'est peut-être pas plus mal comme ça.

Je dirai à la cliente que c'est soit on change de police, soit je fais un petit lien manuel pour ceux qui n'arrivent pas à lire QuickSand.

Surtout qu'en définitif, c'est vraiment un problème très isolé, y'a plein d'autres fonts qui fonctionnent partout.

M'enfin, cette question de ratio reste tout de même une énigme. Est-ce que tous les écrans de bureau ont le même ratio ? ça difficile de trouver la réponse. Avec le code d'Iomart, ça réagissait avec un ratio de 1.5 et 3/2, alors qu'avec mon java script ça réagissait seulement avec 1.

C'était sympa d'échanger en tous cas. Et je ne reste pas sur ma fin, frustré de n'avoir pas eu d'avis de pro. Bon sang, ça a bougé ici, j'ai eu des avis et des solutions. Génial.

Je t'envoie un mp

Blaise

[ZDamienZ]

Re : Déviation conditionnel Home page

Après tout ça est extrêmement subjectif, comme je te le disais même sans parler de retina ça varie extrémement d'un os à l'autre et d'un navigateur à l'autre.

XP IE 8

XP Chrome

Windows 7 IE9

Ubuntu Chrom

[carbonathus]

Re : Déviation conditionnel Home page

oui, là moi j'ai un Mac 27 pouces de mai 2011 (thunderbolt)

Sinon, sur le PC qui pose problème c'est un Dell E190S

et sur le deuxième PC, c'est un ancien écran Mac 27 pouce lcd. Sur celui là, c'est ça qui est étonnant, c'est nickel ???

Cela dit, je sais que je ne suis pas le seul à avoir ce mauvais affichage sur un PC, la mère de ma cliente, s'est plainte de ne pas pouvoir lire. Je connais pas son matos.

Ce que je cherchais à obtenir avec Damien, c'était un code qui affiche ce ratio on load sur l'écran. ça ça pourrait nous aider à les définir.

A part ça, si vous êtes sur le site, en bas dans le footer, à droite y'a un lien test New fonts. C'est du OpenSan et ce fonts la, s'affiche très bien sur le Dell. Par contre, comme toujours, c'est beaucoup plus gros que sur le Mac. Il devrait donc logiquement bel et bien y avoir une différence de ratio.

Là, j'ai enlevé le code test. ça va faire flipper la cliente et y'a 5 visiteurs que je sais pas qui c'est

Encore un détail : chaque profil a son propre doc template.php Si vous avez besoin que le code soit actif, pour faire des tests, je pourrais peut-être le mettre dans le template.php du profil test new fonts (lien discret dans le footer). ça ne toucherait pas tout le site comme ça l'a fait en le plaçant, dans le doc Fonts du template.

Mais dans ce doc, je sais pas trop où le placer.

[lomart]

Re : Déviation conditionnel Home page

ah non mince. C'est rouge sur tous les écrans !

Il faudrait tester sur un écran retina pour voir
ou changer les ratios

[carbonathus]

Re : Déviation conditionnel Home page

ah non mince. C'est rouge sur tous les écrans !

Et ce n'est plus du QuickSand comme voulu

L'écran qui affiche très mal est un Dell E190S format un peu carré de 1280 x 1024

[carbonathus]

Re : Déviation conditionnel Home page

Ok, je vais temporairement me mettre sur le profil par défaut, faire ce test et je te redis.

le lien si jamais : http://www.espace-alpha.net

Un site très simple, épuré.

Bien à toi.

Blaise

[lomart]

Re : Déviation conditionnel Home page

Tu colle ça

body { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; color:red;}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5)
{
body { font-family: "QuicksandLight"; color:green;}
}

à la fin du fichier /templates/yoo_nano2/fonts/QuickSand.css

Si tu vois tantôt rouge tantôt vert, c'est bon !

[carbonathus]

Re : Déviation conditionnel Home page

Debleu ! tu lis à la vitesse de l'éclair Iomart.

Bon, alors la conclusion tirée du résultat de mon java script est fausse et c'est tant mieux ! Si finalement j'arrive à une solution, je n'en croirai pas mes yeux. Je te garantis que j'ai cherché.....

boostrap de joomla 3 ??? je connais pas ça moi. Mais, le propos que tu mentionnes est exactement ma question. ça me rassure suis pas complètement débile, seul à me poser cette question.

Pour le moment, j'en suis au Joomla 2.5. Et comme je l'ai dit à Damien, je suis pas développeur, tout est plus long et plus compliqué pour moi.

Je vais pas t'embêter à m'expliquer où placer ton code, mais pour être franc, oulalala quand tu dis à la fin du fichier template... ça me nécessite une intense réflexion. Glups !!! Je vais aller voir ça, et essayer de trouver.

Comme ça, je préférerais une redirection à la fin du test.... mais je vais déjà tâcher de le comprendre avant de chercher à le modifier.

Voici mon fichier Template.php, c'est un template Yootheme. ça peut vous intéresser.

Vraiment merci.

Blaise

P.s : mon template.php n'est pas accepté pour l'import ici. Je colle le code sous ce ps.

J'ai aussi des fichiers CSS pour un profil par défaut (dans le dossier du template). Et un dossier styles (dans le dossier du template), avec des dossiers profils (que je peux dupliquer et modifier) qui contiennent aussi tous les fichiers CSS nécessaires, pour des profils différents.

Ensuite, je peux assigner une page au profil que je veux.

Pour pouvoir faire les mises à jour du template sans risque de perdre mes réglages, le profil du site n'est pas le par défaut, mais un de ceux qui est dans le dossier style. C'est pour ça que la redirection est intéressante. il suffit de faire un autre profil pour les écrans mauvais, et que le test redirige vers le profil voulu.

En résumé, c'est ça qui me fait réfléchir et hésiter à coller ton code, tout de go. ça me fout la trouille.


template.php :

<?php
/**
* @package yoo_nano2
* @author YOOtheme http://www.yootheme.com
* @copyright Copyright (C) YOOtheme GmbH
* @license http://www.gnu.org/licenses/gpl.html GNU/GPL
*/

// get template configuration
include($this['path']->path('layouts:template.config.php'));

?>
<!DOCTYPE HTML>
<html lang="<?php echo $this['config']->get('language'); ?>" dir="<?php echo $this['config']->get('direction'); ?>">

<head>
<?php echo $this['template']->render('head'); ?>
</head>

<body id="page" class="page <?php echo $this['config']->get('body_classes'); ?>" data-config='<?php echo $this['config']->get('body_config','{}'); ?>'>

<?php if ($this['modules']->count('absolute')) : ?>
<div id="absolute">
<?php echo $this['modules']->render('absolute'); ?>
</div>
<?php endif; ?>

<div class="wrapper clearfix">

<header id="header">

<?php if ($this['modules']->count('toolbar-l + toolbar-r') || $this['config']->get('date')) : ?>
<div id="toolbar" class="clearfix">

<?php if ($this['modules']->count('toolbar-l') || $this['config']->get('date')) : ?>
<div class="float-left">

<?php if ($this['config']->get('date')) : ?>
<time datetime="<?php echo $this['config']->get('datetime'); ?>"><?php echo $this['config']->get('actual_date'); ?></time>
<?php endif; ?>

<?php echo $this['modules']->render('toolbar-l'); ?>

</div>
<?php endif; ?>

<?php if ($this['modules']->count('toolbar-r')) : ?>
<div class="float-right"><?php echo $this['modules']->render('toolbar-r'); ?></div>
<?php endif; ?>

</div>
<?php endif; ?>

<?php if ($this['modules']->count('logo + headerbar')) : ?>
<div id="headerbar" class="clearfix">

<?php if ($this['modules']->count('logo')) : ?>
<a id="logo" href="<?php echo $this['config']->get('site_url'); ?>"><?php echo $this['modules']->render('logo'); ?></a>
<?php endif; ?>

<?php if($this['modules']->count('headerbar')) : ?>
<?php echo $this['modules']->render('headerbar'); ?>
<?php endif; ?>

</div>
<?php endif; ?>

<?php if ($this['modules']->count('menu + search')) : ?>
<div id="menubar" class="clearfix">

<?php if ($this['modules']->count('menu')) : ?>
<nav id="menu"><?php echo $this['modules']->render('menu'); ?></nav>
<?php endif; ?>

<?php if ($this['modules']->count('search')) : ?>
<div id="search"><?php echo $this['modules']->render('search'); ?></div>
<?php endif; ?>

</div>
<?php endif; ?>

<?php if ($this['modules']->count('banner')) : ?>
<div id="banner"><?php echo $this['modules']->render('banner'); ?></div>
<?php endif; ?>

</header>

<?php if ($this['modules']->count('top-a')) : ?>
<section id="top-a" class="grid-block"><?php echo $this['modules']->render('top-a', array('layout'=>$this['config']->get('top-a'))); ?></section>
<?php endif; ?>

<?php if ($this['modules']->count('top-b')) : ?>
<section id="top-b" class="grid-block"><?php echo $this['modules']->render('top-b', array('layout'=>$this['config']->get('top-b'))); ?></section>
<?php endif; ?>

<?php if ($this['modules']->count('innertop + innerbottom + sidebar-a + sidebar-b') || $this['config']->get('system_output')) : ?>
<div id="main" class="grid-block">

<div id="maininner" class="grid-box">

<?php if ($this['modules']->count('innertop')) : ?>
<section id="innertop" class="grid-block"><?php echo $this['modules']->render('innertop', array('layout'=>$this['config']->get('innertop'))); ?></section>
<?php endif; ?>

<?php if ($this['modules']->count('breadcrumbs')) : ?>
<section id="breadcrumbs"><?php echo $this['modules']->render('breadcrumbs'); ?></section>
<?php endif; ?>

<?php if ($this['config']->get('system_output')) : ?>
<section id="content" class="grid-block"><?php echo $this['template']->render('content'); ?></section>
<?php endif; ?>

<?php if ($this['modules']->count('innerbottom')) : ?>
<section id="innerbottom" class="grid-block"><?php echo $this['modules']->render('innerbottom', array('layout'=>$this['config']->get('innerbottom'))); ?></section>
<?php endif; ?>

</div>
<!-- maininner end -->

<?php if ($this['modules']->count('sidebar-a')) : ?>
<aside id="sidebar-a" class="grid-box"><?php echo $this['modules']->render('sidebar-a', array('layout'=>'stack')); ?></aside>
<?php endif; ?>

<?php if ($this['modules']->count('sidebar-b')) : ?>
<aside id="sidebar-b" class="grid-box"><?php echo $this['modules']->render('sidebar-b', array('layout'=>'stack')); ?></aside>
<?php endif; ?>

</div>
<?php endif; ?>
<!-- main end -->

<?php if ($this['modules']->count('bottom-a')) : ?>
<section id="bottom-a" class="grid-block"><?php echo $this['modules']->render('bottom-a', array('layout'=>$this['config']->get('bottom-a'))); ?></section>
<?php endif; ?>

<?php if ($this['modules']->count('bottom-b')) : ?>
<section id="bottom-b" class="grid-block"><?php echo $this['modules']->render('bottom-b', array('layout'=>$this['config']->get('bottom-b'))); ?></section>
<?php endif; ?>

<?php if ($this['modules']->count('footer + debug') || $this['config']->get('warp_branding') || $this['config']->get('totop_scroller')) : ?>
<footer id="footer">

<?php if ($this['config']->get('totop_scroller')) : ?>
<a id="totop-scroller" href="#page"></a>
<?php endif; ?>

<?php
echo $this['modules']->render('footer');
$this->output('warp_branding');
echo $this['modules']->render('debug');
?>

</footer>
<?php endif; ?>

</div>

<?php echo $this->render('footer'); ?>

</body>
</html>

[lomart]

Re : Déviation conditionnel Home page

Bonjour Iomart, et bienvenue dans le sujet du gros pénible que je suis :O)

Côté pénible, je suis d'accord

Il faut 2 minutes pour tester ma solution. Le temps de coller mon code à la fin du fichier template

Helvetica Neue, que tu mentionnes dans ton code

J'ai récupéré la définition dans le bootstrap de Joomla 3.0 pour illustrer mon propos sans chercher à savoir si elle convient. Le problème n°1 est : comment réagir différemment en fonction du type d'écran

[carbonathus]

Re : Déviation conditionnel Home page

Oui, j'ai essayé de posé le html à la racine, ça n'a pas fonctionné ! (j'ai eu fait ça pour des popup ???) Il m'a aussi semblé qu'il manquait une ) à la fin du code.... J'ai fait plein d'essai, aussi avec l'option console log, mais rien obtenu).

Je suis pas un développeur, mais je vais tout faire pour apprendre le php, faire une formation (me débrouille avec le html et les css, et je peux comprendre et légèrement modifier le php. J'en suis là.).

Par contre non, j'ai pas besoin de refaire un template. Je crée un profil, et je lui assigne des pages. Tout ça dans le même template.
Donc la redirection m'enverrait sur une page à qui j'aurais assigné un profil différent (css, warp tout quoi) adapté aux mauvais écrans (ou aux bons, c'est selon).

En bref, on duplique le profil, et on le transforme, c'est simple et très efficace. Ensuite on lui assigne n'importe quel page (menu en fait). C'est vraiment bien.

A bientôt et merci encore.

Blaise

Non tu n'as pas a rajouter de fichier html a la racine du site. Tu es sur Joomla, pas sur un site statique.

En gros il faudrait que tu crées une page sous Joomla spéciale pour les mauvais ratios et que tu appliques un template spécial à cette page ou alors un style du template pour cette page.

Mais là tu compliques énormément un site qui est simple au départ.

Franchement tu pars dans un truc imbuvable pour pas grand chose.
Même si c'est sympa d'apprendre des trucs, là ce sont des choses super particulières et pointues (javascript, redirections, retina...) qui risquent de t'embrouiller plus qu'autre chose.

Damien

[carbonathus]

Re : Déviation conditionnel Home page

Bonjour Iomart, et bienvenue dans le sujet du gros pénible que je suis :O)

Et re bonjour Damien,

ça m'a l'air extrêmement intéressant ce que tu proposes Iomart. Yahou chapeau, d'avoir si bien cerner la question.

Maintenant, j'ai un petit doute que je vous soumets, avec cette question ratio, parce que le java script que j'ai testé dans mon head, le voici il est simple :

<script>
if (window.devicePixelRatio == 1) {
alert("This is a high-density screen");
} else if (window.devicePixelRatio < 1) {
alert("This is a low-density screen");
}
</script>

m'a bien envoyé une alerte sur mes trois écrans mais seulement avec == 1, càd sur un mac (no problem d'affichage), sur un pc (avec un écran qui affiche bien QuickSand) et sur un autre Pc (avec écran mauvais qui l'affiche très mal). PAF, même alerte au même moment, sur les trois.

Ce qui peut laisser conclure, qu'ils ont tous un ratio de 1 (donc le problème ne serait pas le ratio). Et le code que tu proposes Iomart, servirait à rien, si on se fie à cette conclusion ! That's the question ???

Est-ce que mon script est fiable et est-ce qu'il récupère vraiment le ratio, ça franchement, je ne le sais pas du tout !!! Mais toutes autres valeurs de ratio que j'ai mise dans le script test (j'en ai essayé plusieurs, de 0.75 à 1.5), ne donnaient aucune alerte.

Conclusion (peut-être fausse) : ils ont tous un ratio de 1.

Je me suis alors demandé si ce ratio, ne concerne pas seulement les Smarphones et autres mini écran, mais pas les écrans de bureau ???

Pour moi, ça reste une question vraiment intéressante. Et j'aimerais bien me dire ahhhhh, ça y'est je comprends, je maîtrise.

Mais c'est vrai, comme dit Damien, que ces questions de rendu des écrans, sont assez "imbuvables" (il vient de Bordeaux faut dire... respect pour les bons vins :O) ).

Concrètement à ce stade, pour la copine "cliente", je vais simplement proposer un lien dans le footer du genre : "votre écran affiche mal le texte ci-dessus ? cliquer ici" et ça va partir sur un autre profil du site (du Arial ou du OpenSans très lisible par tous).

Mais à titre personnelle, j'aimerais vraiment bien maîtriser ce test. Je vais donc essayer de mettre en application ta proposition Iomart, (à moins que toi aussi tu me dises que tu as un doute quant à la variabilité des ratios sur les différents écrans de bureau. Là, si toi tu dis ça, j'arrêterai les frais. C'est 1 et y'a rien à faire, sinon attendre que les navigateurs s'adaptent).

merci à tous, en tous cas. ça me met de bonne humeur l'esprit qui règne ici.... C'est tellement différent que dans la vie !!! ça donne de l'espoir pour le monde futur. (un peu de philosophie, histoire de confirmer que je suis bien un pénible :O)

Merci les gars !

Blaise

P.S : Helvetica Neue, que tu mentionnes dans ton code, Iomart ??? Je savais pas qu'il existait en Web fonts. Il est super Light aussi, je le trouve extra bien et je l'utilise pour mon courrier. Est-ce qu'il est plus fiable que QuickSand ? et où l'as-tu trouvé ?