Ce site passe-t-il sous toutes les résolutions ?

Le jeudi 3 novembre 2011 à 18:51, Jean Francois Ortolo a écrit :

Bonsoir

Bonsoir,

J'ai terminé de mettre au point toutes les fonctionnalités du site
www.lespronostics.com , à part que la partie centrale est formattée de
grandeur fixe, et devrait donc mal passer sous certaines résolutions.

Je dois ( mais je suis un gros flemmard ;( )
[...]

Merci de m'indiquer les problèmes d'affichage que vous rencontrez. ;)

Es-tu suffisamment flemmard pour ne pas avoir le temps d'installer un
émulateur de navigateur mobile par exemple comme Opera Mobile ? :-)
http://dev.opera.com/articles/view/opera-mobile-emulator/
Il te permettra de simuler différents appareils mobiles à différentes
résolutions.
Une autre possibilité, guère plus difficile à mettre en ½uvre, est d'émuler
Opera Mini ou d'autres navigateurs en Java comme Bolt Browser ou UCWeb
Browser via le microemulator
Voir http://www.opera-fr.com/wiki/wiki?OperaMiniSurVotrePC
Le changement de résolution est enfantin à pratiquer là dessus.

Firefox Mobile doit aussi exister en version PC/Mac...

Il existe bien sûr des émulateurs d'iPhone, d'Android et compagnie mais
c'est un poil plus lourd à installer configurer.

@+
--
rm

Bonjour,

Jean Francois Ortolo a tapoté, le 03/11/2011 18:51:

J'ai terminé de mettre au point toutes les fonctionnalités du site
www.lespronostics.com , à part que la partie centrale est formattée de
grandeur fixe, et devrait donc mal passer sous certaines résolutions.

Sur un netbook ça passe, j'ai juste un ascenseur pour la partie verticale.

--
Stéphane

<http://pasdenom.info/fortune/>

Qu'est-ce que l'inspiration ?
C'est d'avoir une seule chose à dire
que l'on ne soit pas fatigué de dire.
-+- Jean Paulhan (1884-1968) -+-

Le 03/11/2011 22:14, rm a écrit :

Es-tu suffisamment flemmard pour ne pas avoir le temps d'installer un
émulateur de navigateur mobile par exemple comme Opera Mobile ? :-)
http://dev.opera.com/articles/view/opera-mobile-emulator/
Il te permettra de simuler différents appareils mobiles à différentes
résolutions.
Une autre possibilité, guère plus difficile à mettre en ½uvre, est d'émuler
Opera Mini ou d'autres navigateurs en Java comme Bolt Browser ou UCWeb
Browser via le microemulator
Voir http://www.opera-fr.com/wiki/wiki?OperaMiniSurVotrePC
Le changement de résolution est enfantin à pratiquer là dessus.

Firefox Mobile doit aussi exister en version PC/Mac...

Il existe bien sûr des émulateurs d'iPhone, d'Android et compagnie mais
c'est un poil plus lourd à installer configurer.

@+

Bonjour Monsieur

Ma question, ne portait pas sur la compatibilité de mon site avec les
mobiles... Mais avec l'adaptation de mon site, aux diverses résolutions
existantes ( donc sur ordinateur classique, je pensais que c'était
évident ).

Donc, ma question reste posée, vu que je ne peux pas tester une
résolution plus grande que la mienne ( 1280x1024 ) sur mon ordinateur,
or il y a il me semble, pas mal de résolutions plus fines que çà.

Ma question prote également, sur toutes les résolutions, y compris
moins fines, genre 640x480 ( çà doit être carrément horrible... ),
800x600, ou 1024x768, mais aussi plus fines.

Merci beaucoup de votre réponse.

Bien amicalement.

Jean François Ortolo

Jean Francois Ortolo a tapoté, le 04/11/2011 09:33:

Ma question, ne portait pas sur la compatibilité de mon site avec les
mobiles... Mais avec l'adaptation de mon site, aux diverses résolutions
existantes ( donc sur ordinateur classique, je pensais que c'était
évident ).

Tu peux aussi essayer : <http://browsershots.org/>.

--
Stéphane

<http://pasdenom.info/fortune/>

Au téléphone les silences coûtent aussi cher que les paroles ;
dans la vie aussi.
-+- Gilbert Cesbron (1913-1979), de petites choses. -+-

Le 04/11/2011 09:33, Jean Francois Ortolo a écrit :

Bonjour Monsieur

Ma question, ne portait pas sur la compatibilité de mon site avec les
mobiles... Mais avec l'adaptation de mon site, aux diverses résolutions
existantes ( donc sur ordinateur classique, je pensais que c'était
évident ).

Donc, ma question reste posée, vu que je ne peux pas tester une
résolution plus grande que la mienne ( 1280x1024 ) sur mon ordinateur,
or il y a il me semble, pas mal de résolutions plus fines que çà.

Ma question prote également, sur toutes les résolutions, y compris moins
fines, genre 640x480 ( çà doit être carrément horrible... ), 800x600, ou
1024x768, mais aussi plus fines.

Merci beaucoup de votre réponse.

Bien amicalement.

Jean François Ortolo

La mise en page fluide est bien proportionnée. Je n'ouvre jamais mon
navigateur en plein écran, mais là c'est agréable (1920*1200).
Par contre, ça devient confus en-dessous de 880 : la colonne de droite
est trop large. Il suffirait de mettre les labels au-dessus des input
pour réduire.

Pour le design, c'est comme le site précédent : 1980 style :).
Pourtant il doit bien y avoir de jolis templates sous SPIP, non ?
Un peu curieux l'image en entête qui reste en fixe lorsqu'on défile.

Par contre, 7 feuilles de style et 6 JS, on est pas trop dans
l'optimisation là ! Et je ne comprends pas pourquoi vous avez mis un
jquery non minifié : 160Ko, même pas sur un CDN !
En plus, pas de gzip côté serveur, c'est dommage avec tout le texte, les
CSS et JS qu'il y a.
Ça nous fait 350Ko pour un page au design soviétique. On passe
probablement en-dessous de 150 en minifiant et gzippant. Et on
arriverait à un pageLoad inférieur à la demie seconde en concaténant en
plus.

Peut-être que ça motivera mon père pour aller sur le net (40 ans de
pronostics avec son turf !).

Le 03/11/2011 18:51, Jean Francois Ortolo a écrit :

Je dois ( mais je suis un gros flemmard ;( ), arranger le script css,
pour convertir les tailles fixes, en tailles proportionnelles à la
largeur de l'écran, mais ce fichier, fait environ 47 pages A4 à
l'impression, en caractères moyens... ;(

En effet, j'ai programmé dans ce fichier css, autant de classes que de
types de pages, et de types d'éléments dans chaque page

Bonjour,

Je n'ai pas compris ce que vous vouliez dire dans cette dernière phrase,
et en regardant rapidement les css de votre site je n'ai pas été mieux
éclairé.

J'imagine que vous avez multiplié les classes css par exemple, une par
type de page... est-ce le cas ?
Vous pouvez simplement ajouter le type de page dans le body par exemple,
et ensuite jouer sur les sélecteurs. Par exemple :

<body class="my-class-for-body" id="body-accueil">

<body class="my-class-for-body" id="body-article">

<body class="my-class-for-body" id="body-rubrique">

#body-accueil.my-class-for-body {
...
}
#body-article.my-class-for-body {
...
}
#body-rubrique.my-class-for-body {
...
}

Le vendredi 4 novembre 2011 à 09:33, Jean Francois Ortolo a écrit :

Le 03/11/2011 22:14, rm a écrit :

Es-tu suffisamment flemmard pour ne pas avoir le temps d'installer un
émulateur de navigateur mobile par exemple comme Opera Mobile ? :-)
http://dev.opera.com/articles/view/opera-mobile-emulator/
Il te permettra de simuler différents appareils mobiles à différentes
résolutions.
Une autre possibilité, guère plus difficile à mettre en ½uvre, est d'émuler
Opera Mini ou d'autres navigateurs en Java comme Bolt Browser ou UCWeb
Browser via le microemulator
Voir http://www.opera-fr.com/wiki/wiki?OperaMiniSurVotrePC
Le changement de résolution est enfantin à pratiquer là dessus.

Firefox Mobile doit aussi exister en version PC/Mac...

Il existe bien sûr des émulateurs d'iPhone, d'Android et compagnie mais
c'est un poil plus lourd à installer configurer.

@+

Bonjour Monsieur

Oups, pardon, Bonjour Monsieur,

Ma question, ne portait pas sur la compatibilité de mon site avec les
mobiles...

De nos jours, il arrive que certains sites soient visités depuis des
appareils mobiles, aux résolutions et tailles d'écran limités, peut-être
même depuis un champs de course ;)
Donc un p'tit coup de simulateur ne peut pas faire de mal, ça évite
d'acheter un smartphone et d'user un forfait.

Mais avec l'adaptation de mon site, aux diverses résolutions
existantes ( donc sur ordinateur classique, je pensais que c'était
évident ).

Effectivement, j'ai cru que vous parliez de résolutions variées et pas
juste celles qu'on trouve habituellement sur des ordinateurs de
bureau/portable.

Donc, ma question reste posée, vu que je ne peux pas tester une
résolution plus grande que la mienne ( 1280x1024 ) sur mon ordinateur,
or il y a il me semble, pas mal de résolutions plus fines que çà.

En 1920x1080 sur un écran 23", votre site s'affiche plutôt bien, c'est
assez aéré, les boutons sont presque trop gros par rapport au texte qu'ils
contiennent et à la taille du pointeur de la souris ;)

Ma question prote également, sur toutes les résolutions, y compris
moins fines, genre 640x480 ( çà doit être carrément horrible... ),

En 240x340, ça peut donner ça :
http://www.opera.com/developer/tools/mini/?url=http://www.lespronostics.com
Ça reste utilisable, mais c'est moins pratique, forcément.

800x600, ou 1024x768, mais aussi plus fines.

Eh bien, là, on se rapproche des résolutions actuelles de certaines
tablettes et smartphones, donc l'émulateur pourrait dépanner :)

@+
--
rm

Le 04/11/2011 14:53, Pierre Goiffon a écrit :

Le 03/11/2011 18:51, Jean Francois Ortolo a écrit :

Je dois ( mais je suis un gros flemmard ;( ), arranger le script css,
pour convertir les tailles fixes, en tailles proportionnelles à la
largeur de l'écran, mais ce fichier, fait environ 47 pages A4 à
l'impression, en caractères moyens... ;(

En effet, j'ai programmé dans ce fichier css, autant de classes que de
types de pages, et de types d'éléments dans chaque page

Bonjour,

Je n'ai pas compris ce que vous vouliez dire dans cette dernière phrase,
et en regardant rapidement les css de votre site je n'ai pas été mieux
éclairé.

J'imagine que vous avez multiplié les classes css par exemple, une par
type de page... est-ce le cas ?
Vous pouvez simplement ajouter le type de page dans le body par exemple,
et ensuite jouer sur les sélecteurs. Par exemple :

<body class="my-class-for-body" id="body-accueil">

<body class="my-class-for-body" id="body-article">

<body class="my-class-for-body" id="body-rubrique">

#body-accueil.my-class-for-body {
...
}
#body-article.my-class-for-body {
...
}
#body-rubrique.my-class-for-body {
...
}

Vu la qualité du design - et j'entends par là également la typo -, il
est *évident* que les CSS ne sont pas du tout utilisés comme il se doit.
47 pages imprimées de CSS pour une mise en page aussi simple, c'est
aberrant.
Et, fort heureusement, il n'y a pas de "tailles proportionnelles à la
largeur" ! Ce n'est pas parce qu'on a une fenêtre de 1000px de large
que l'on souhaite des caractères plus petits qu'en 1920 !
Ne pas confondre la définition d'un écran, par exemple 1600x1200, et sa
résolution, fixée historiquement à 72dpi par les graphistes mais en
général dans les 90dpi.
Exception faite des écrans à haute densité de pixels (dans 120 à 150dpi
: iphone, ipad, galaxy S, nexus...), vous N'avez PAS à changer la
font-size en fonction de la taille de la fenêtre (qui, faut-il le
rappeler, ne correspond pas forcément à celle de l'écran.)

Le 04/11/2011 14:53, Pierre Goiffon a écrit :

Le 03/11/2011 18:51, Jean Francois Ortolo a écrit :

Je dois ( mais je suis un gros flemmard ;( ), arranger le script css,
pour convertir les tailles fixes, en tailles proportionnelles à la
largeur de l'écran, mais ce fichier, fait environ 47 pages A4 à
l'impression, en caractères moyens... ;(

En effet, j'ai programmé dans ce fichier css, autant de classes que de
types de pages, et de types d'éléments dans chaque page

Bonjour,

Je n'ai pas compris ce que vous vouliez dire dans cette dernière phrase,
et en regardant rapidement les css de votre site je n'ai pas été mieux
éclairé.

Bonjour Monsieur

Tous les fichiers *.css utilisés sont ceux initiaux de Spip, sauf
celui que j'ai programmé personnellement ( complété avec les classes
personnelles du site ), qui se trouve à l'url suivante :

www.lespronostics.com/squelettes/perso.css

J'imagine que vous avez multiplié les classes css par exemple, une par
type de page... est-ce le cas ?

Non seulement une classe par type de page, mais un ensemble de
classes ( pour chaque éléments de la page ), en fonction de son type, et
du degré d'imbrication dans l'arborescence des éléments.

Vous verrez vous-même en téléchargeant ce fichier perso.css

Si le Monsieur qui m'a demandé de faire ce site, ne m'avait pas dit
qu'il ferait appel à un graphiste, c'est sûr que j'aurais regroupé les
classes, en fonction des éléments de types communs, en essayant de
rendre le design le plus homogène possible, pour les différentes pages,
de manière à diminuer autant que possible, le nombre de classes.

Hélas, le mal est fait, et le Monsieur, a encore cette idée en tête,
de faire appel à un graphiste.

Mais vous savez, que pour un site sous Spip, le design dépend surtout
du squelette de base utilisé ( en l'occurence le squelette Ahuntsic,
recommandé par le Monsieur ), et le design, m'a été dicté aussi par le
Monsieur, savoir : Menu à gauche, des menus d'abonnement à droite, une
photo en haut, et des publicités au centre en dessous de la photo du
haut, et en dessous des menus de droite. Ainsi que le contenu dynamique
au centre.

C'est un design somme toute assez convivial pour la navigation, car
les éléments de navigation ( menu de gauche notamment ) sont facilement
accessibles, et la navigation, devrait être évidente.

Celà dit, j'avoue que je ne suis pas très au courant des finesses
d'un design très moderne. Si vous pouvez m'indiquer des sites ayant un
tel design, j'aimerais bien. ;)

Vous verrez vous-même le fichier perso.css

Ce serait gentil de votre part, de em dire ce que vos en pensez.

En ce qui me concerne, je pense que mon prof d'Informatique de mon
stage de 1997, m'aurait clairement dit, que c'est une usine à gaz, ou
pire... ;(

Vous pouvez simplement ajouter le type de page dans le body par exemple,
et ensuite jouer sur les sélecteurs. Par exemple :

<body class="my-class-for-body" id="body-accueil">

<body class="my-class-for-body" id="body-article">

<body class="my-class-for-body" id="body-rubrique">

#body-accueil.my-class-for-body {
...
}
#body-article.my-class-for-body {
...
}
#body-rubrique.my-class-for-body {
...
}

Rebonjour Monsieur

Je ne connaissais pas cette technique en css. Il me semble que ce ne
serait pas adaptable, pour de multiples éléments de la page, sachant que
le contenu de leur classes, varierait en fonction du taux d'imbrication
d'un élément dans la page, et que ce taux d'imbrication ( et les types
d'imbrication ) varieraient aussi suivant les types des pages.

Si vous pouviez me donner une sorte de modèle css du même genre que
celui que vous m'avez indiqué ci-dessus, qui marche dans ce type de
contraintes, je vous en serais plus que très reconnaissant, car celà
m'ôterait une très grande épine du pied, au moins pour le nommage et la
désignation des classes, qui serait très simplifiés.

Mais... Celà n'empêcherait-il pas, qu'il faille fournir pour chacune
de ces classes et sous-classes ( ou classes + sélecteurs ), ses propres
valeurs, différentes pour chaque classes différentes ?

Sinon, si celà pouvait m'aider, à passer d'un mode de systèmes de
classes hétérogènes, comme c'est le cas actuellement, à un mode de
systèmes de classes homogènes ( des classes de valeurs pratiquement
identiques pour des types de pages différentes ), et/ou inversement d'un
système homogène à un système hétérogène, ce serait fabuleux, car à ce
moment-là, je pourrais raccourcir beaucoup le fichier, en rassemblant
des classes de valeurs pratiquement équivalentes en une seule classe (
par type d'élément, et éventuellement d'autres critères ), et ainsi, ce
travail de mise en proportionnel, que j'estime nécessaire, serait très
très facilité, et je serais en mesure, à la fois d'adopter un mode de
nommage des classes, beaucoup plus rationnel et lisible, et d'avoir un
fichier perso.css , beaucoup plus court.

Merci beaucoup beaucoup pour votre réponse.

Bien amicalement.

Jean François Ortolo

Le 04/11/2011 15:29, Olivier Masson a écrit :

Vu la qualité du design - et j'entends par là également la typo -, il
est *évident* que les CSS ne sont pas du tout utilisés comme il se doit.
47 pages imprimées de CSS pour une mise en page aussi simple, c'est
aberrant.
Et, fort heureusement, il n'y a pas de "tailles proportionnelles à la
largeur" ! Ce n'est pas parce qu'on a une fenêtre de 1000px de large que
l'on souhaite des caractères plus petits qu'en 1920 !
Ne pas confondre la définition d'un écran, par exemple 1600x1200, et sa
résolution, fixée historiquement à 72dpi par les graphistes mais en
général dans les 90dpi.
Exception faite des écrans à haute densité de pixels (dans 120 à 150dpi
: iphone, ipad, galaxy S, nexus...), vous N'avez PAS à changer la
font-size en fonction de la taille de la fenêtre (qui, faut-il le
rappeler, ne correspond pas forcément à celle de l'écran.)

Bonsoir Monsieur

Je reconnais, que ma programmation du fichier perso.css , qui est le
seul script css spécifique au site ( et non pas de Spip ), a été très
"brute force", avec pour seul idée en tête de ma part, de laisser toute
liberté au graphiste, de modifier comme il le voudrait, chaque éléments
de chaque pages.

Celà, a entraîné, une multiplication exponentielle du nombre de
classes, ce qui est une pratique effectivement aberrante en matière de
programmation css.

En ce qui me concerne, j'ai effectivement confondu résolution et
définition.

A mon avis ( merci de me détromper ), les font-size doivent être
spécifiés en em, et non pas en pixels ( px ).

En effet, quand la définition augmente, la taille restant fixe en
pixels, occupe proportionnellement moins d'espace par rapport à l'écran.

Le problème ( c'est le cas pour les font-size, et également pour les
dimensions des containers, à part la div du milieu ), c'est que toutes
les dimensions de la partie centrale du site ( au milieu de l'écran ),
sont en pixels.

Pour les containers, ils devraient être en pourcentages ou à la
rigueur ( pour des dimensions verticales de containers ) en em.

Un container dont la largeur est donnée en pourcentage, a une taille
qui prend le pourcentage indiqué, de la taille de son container père
immédiat.

Celà implique, lors de la conversion des tailles en pixels, en
tailles en pourcentages, toute une gymnastique de calcul de la taille
théorique en pourcentages, en fonction du degré d'imbrication de chaque
containers.

En conclusion, il me semble que convertir toutes les tailles en
proportionnel ( sortir du tout px ), est une nécessité.

Merci de me dire ce que en pensez.

Bien amicalement.

Jean François Ortolo