S'identifier - S'inscrire - Ecrire un article - Contact

Liste des imperfections des modèles

Par Stephane • Echanges • Vendredi 28/09/2007 • 15 commentaires  • Lu 3207 fois • Version imprimable

Mots-clés :


J'ai une idée pour résoudre le problème soulevé par Caroline :

Un point moins positif : par rapport à Typepad notamment, on souffre toujours du manque de puissance des modèles. Je rêve d'un modèle à trois colonnes sobre et beau comme celui de Typ.... et surtout qui fonctionne bien. Je me dis que l'important, maintenant, ce ne serait pas tant de créer sans cesse de nouveaux modèles que de résoudre les quelques embêtantes imperfections des modèles les plus puissants qui existent déjà (genre GreenPark ou Minimum). Ce serait moins coûteux en temps pour l'équipe et vraiment très satisfaisant pour ceux qui veulent utiliser leur modèle de façon correcte dans la minute qui vient.


L'idée : on créé une liste de toutes ces imperfections, si possible avec des exemples live, et ensuite on paie un gourou CSS pour résoudre tous ces ennuyeux problèmes d'étoiles qui dépassent, de texte qui se décale, de colonnes qui chutent etc.

La réalisation de l'idée :
  1. tout le monde liste ci-dessous toutes les imperfections rencontrées sur leur blog ou ailleurs, avec si possible un lien vers la page qui bug. Si vous voulez, vous pouvez créer des sites dont l'identifiant commence par bug- pour exposer ces problèmes.
  2. je trouve un gourou CSS capable de nous corriger tous ces problèmes

A vous de jouer !

D'autres articles sur des thèmes similaires :


Commentaires

Imperfection : adaptation de la colonne centrale sur Green Park (pour les moyens écrans) par Caroline le Vendredi 28/09/2007 à 19:27

Génial ! Quelle bonne idée !

Je commence : sur Green Park, le fait que la colonne centrale s'adapte en largeur pose un problème pour les écrans de taille moyenne (très répandus chez les lecteurs de blogs culinaires).

Je vous montre un exemple sur mon blog en cours de création :



Ça c'est sur Firefox, et sur un écran encore un peu plus grand qu'une résolution du genre 600 x 800, encore assez répandue. Toute la colonne de droite est bouffée, et la colonne centrale est exagérément étroitisée.
(J'ai essayé de résoudre le problème en bricolant, c'est-à-dire en demandant dans le menu "blocs" qu'aucun bloc de droite ne soit affiché en page normale : juste en page "sommaire" : pour qu'au moins on puisse lire les articles en largeur correcte dès qu'on a cliqué sur le titre de l'article ; mais ça ne marche pas.)

J'ai mis une largeur maximale pour les photos de 350 px pourtant ! Ce qui n'est franchement pas énorme...

Sur mon écran à moi, ça donne ceci, et encore la fenêtre occupe à peine les trois quarts de mon écran (histoire de dire que sur les écrans pro, cette limitation donne un truc franchement moche : cf. tout le blanc à droite de la photo) :




La solution que j'aimerais : pas d'adaptation de taille de colonne. A mon avis, tout devrait être fixe : aucune colonne en largeur adaptable. Si on ne capte pas tout sur son écran, tant pis, on fait défiler.

Je vous donne en exemple le blog de Scally, il est puissant, et adaptable à tout format et résolution d'écran, car on peut faire défiler : rien n'est déformé.

• Petit écran :
on n'en voit que les deux tiers à peine, ça je le reconnais : mais tout est nickel. Si on veut en voir plus, on se déplace vers la droite et là encore tout sera nickel.




• Grand écran : tout est impec, l'espace est bien occupé. Pas de blanc, pas de gâchis d'espace, du beau et du bien rempli.




Pour moi, là, c'est une conception parfaite :

• Puissante, d'abord.

• Et avec une maquette toujours cohérente... surtout, une maquette respectée quelle que soit la configuration et le matériel du lecteur. Si on a un petit écran, il suffit de bouger sa souris et on voit tout.
Alors que dans la version actuelle de Green Park, avec un petit écran, on n'a pas accès du tout (quelles que soient les manipulations qu'on peut faire) à la colonne de droite.


Re: Imperfection : adaptation de la colonne centrale sur Green Park (pour les moyens écrans) par Stephane le Vendredi 28/09/2007 à 22:23

Stephane Mmmmh. Oui mais justement, il y a deux sortes de modèles : les modèles à largeur fixe, et les modèles à largeur variable qui s'adaptent à la taille de l'écran. Green Park, Goofy et RDC Large sont des modèles à largeur variable. Le gros avantage, c'est qu'ils utilisent tout l'espace utile. Pas besoin de défiler à droite, ce qui est franchement pas pratique du tout. Par contre effectivement, s'il y a des éléments irrétrécissables dans la colonne centrale, ca va occasionner des problèmes en petite résolution. Ce n'est donc pas un bon choix pour les photos. Ou alors il faut mettre 2 colonnes, pas 3.

Si tu veux un controle absolu sur la mise en page, il vaut mieux effectivement utiliser un modèle à largeur fixe, comme RDC, Déclic ou autres. Par contre, pour éviter le défilement, j'ai surtout mis des modèles qui ne dépassent pas 800 pixels de large, qui est la résolution minimum de la quasi totalité des écrans aujourd'hui. On pourrait peut-être mettre des variantes à 1024 pixels, ce qui permettrait de mettre une troisième colonne dans ces modèles.


Re: Imperfection : adaptation de la colonne centrale sur Green Park (pour les moyens écrans) par labosonic le Vendredi 28/09/2007 à 23:31

"Green Park, Goofy et RDC Large sont des modèles à largeur variable".
RDC Large, un modèle à largeur variable ? Très sérieusement, je suis d'accord sur le fait qu'il soit à largeur variable (d'ailleurs le problème c'est qu'elle varie toute seule et sans prévenir, non ?) mais il faut arrêter arrêter d'appeler ça, un modèle ... Mettre des contenus de colonnes dans une table html, c'est quand même une méthode qui est obsolète et très pénalisante en terme d'accessibilité.
Je pense pas que ce soit la peine de payer quelqu'un pour "réparer" un truc vieux et pénible à la lecture quis era démodé une fois relooké, autant investir carrément et directement dans un clone de RDC (Large et pas large) qui soit codé directement d'une manière conforme aux standards.


Re: Imperfection : adaptation de la colonne centrale sur Green Park (pour les moyens écrans) par Stephane le Lundi 01/10/2007 à 10:20

Stephane Les tables ont de gros avantages quand le contenu des colonnes est imprévisible et susceptible de contenir des images énormes par exemple. Mais bon, pour moi c'est juste un détail d'implémentation du modèle. Pour un gourou des CSS, créer un équivalent au modèle actuel ne devrait prendre qu'une demi-heure.


Re: Imperfection : adaptation de la colonne centrale sur Green Park (pour les moyens écrans) par Stephane le Mardi 02/10/2007 à 10:11

Stephane > mais il faut arrêter arrêter d'appeler ça, un modèle ... Mettre des contenus de colonnes dans une table html, c'est quand même une méthode qui est obsolète et très pénalisante en terme d'accessibilité.

Euh au fait, t'es allé regarder à quoi ressemblait le code du "modèle" Goofy ? Il utilise exactement la même méthode que RDC large. Comme quoi... ;-)


Re: Imperfection : adaptation de la colonne centrale sur Green Park (pour les moyens écrans) par labosonic le Mercredi 03/10/2007 à 01:27

Evidemment, je connnais bien le code de Goofy pour l'avoir initié. Mais je ne vois pas ce que ça change à mon propos.

Il y a dans la palette de modèles proposés par Viabloga :
- un modèle particulièrement buggué (RDC Large) sur lequel il est à mon avis totalement inutile de replacer une rustine pour le rechaper une énième fois et qu'il faudrait mieux recréer à partir du départ.
- des modèles moins problématiques (Goofy, Maui) qui sont basés sur cette méthode qui est pénalisante en terme d'accessibilité mais aussi en terme d'image pour la plate-forme (parce que ça fait quand même moyennement sérieux). Sur ceux-là, il faut statuer de manière claire pour savoir exactement quoi en faire : les corriger pour les mettre en conformité avec le minimum vital des standards du web ou les laisser tels quels.

- Sur le premier point, la réponse me semble évidente, puisqu'elle concerne directement l'utilisation.
- Sur le second, c'est à débattre et à trancher (en sachant quand même que les seules chances pour Viabloga d'avoir de nouveaux modèles "propres" créés par des utilisateurs sont quand même liées aux stocks de modèles existants qui se doivent d'être le plus clair et le plus conforme possible compte-tenu qu'ils servent d'exemples). En tant qu'utilisateur de Viabloga, j'aurais tendance à penser que les adapter aussi ne serait pas superflu mais la question relève à mon sens de ceux qui gérent la plateforme, son argent, son futur et son image.

Les autres points (correction des problèmes d'affichage liés à un modèle et/ou une fonctionnalité spécifique, possibilité de publier un blog sur un fond un peu foncé) me semblent annexes même s'ils doivent être traîtés en même temps que le chantier qui consiste à uniformiser les modèles entre eux (pour permettre que tous soient au même niveau de fonctionnalités, que certaines couleurs invariantes et la place des blocs soient partagées).


Re: Imperfection : adaptation de la colonne centrale sur Green Park (pour les moyens écrans) par leblase le Samedi 29/09/2007 à 00:21

leblase Caroline,
Excuse mon niveau geek très en-dessous du niveau de la mer mais je me demande s'il ne faudrait pas prendre le problème de la photo à l'envers (car je suis d'accord avec Stéphane: faire glisser l'écran latéralement est énervant au possible): pourquoi ne donnerais-tu pas une largeur maximale d'image bien plus grande que celle d'aujourd'hui, sachant que viabloga a tendance à recalibrer les photos automatiquement à la valeur max requise par le modèle?
Celà ne t'éviterait-il pas le désagrément du trou devant les écrans panoramiques de plus en plus fréquents?


Re: Imperfection : adaptation de la colonne centrale sur Green Park (pour les moyens écrans) par Caroline le Samedi 29/09/2007 à 09:51

Stéphane, OK, je comprends.

Leblase, ta suggestion serait parfaite si les photos rétrécissaient en même temps que la colonne : le seul hic, c'est qu'elles restent fixes. Sur mon tout premier exemple, déjà en réglant la largeur maximale des photos à 350 px, la colonne de droite ne pourra jamais apparaître en entier : pour m'adapter aux écrans 600 x 800, je devrais la régler sur 250 px pour que la colonne de droite apparaisse intacte.

L'idéal évidemment, mais je crains bien que ce soit impossible, serait que les photos puissent être contraintes dans leur taille par la limite droite de la colonne centrale : on fixerait une largeur maxi de son choix, par exemple 450, qui assurerait un bon affichage des photos pour les grands écrans. Mais il n'y aurait pas de souci pour les écrans plus petits, les photos s'adaptant automatiquement à la largeur de la colonne centrale, même très réduite.
L'optimum serait que l'échelle des photos s'adapte à la largeur de la colonne. Autre option moins séduisante mais qui serait mieux que maintenant : que les photos soient tout bonnement non réduites, mais coupées ; c'est-à-dire qu'elles disparaissent sous la colonne de droite quand il y a conflit de largeurs, au lieu de masquer la colonne de droite comme actuellement (ainsi, on aurait toujours la possibilité de faire apparaître la photo en plein écran en cliquant dessus, alors qu'il est impossible actuellement de faire apparaître la colonne de droite si la photo dépasse de la colonne centrale).


Re: Imperfection : adaptation de la colonne centrale sur Green Park (pour les moyens écrans) par Caroline le Samedi 29/09/2007 à 09:54

Pardon Stéphane, j'avais escamoté le "éléments irrétrécissables" de ta réponse. Donc, il ne reste comme moyen peut-être possible que celui de donner la priorité à la colonne du droite : qu'elle soit toujours au premier plan et que la colonne centrale soit toujours à l'arrière plan quand il y a conflit de largeurs. Tu crois que ce serait envisageable ?


Premier exemple : par labosonic le Samedi 29/09/2007 à 00:14

Vous pouvez le voir ici : http://critico-blog.viabloga.com/texts/critiques-recentes

C'est un texte libre qui constitue le contenu d'un de mes blocs (colonne de gauche, page d'acceuil).

Les problèmes :

Les images générées par la mosaique sont le plus à droite possible (ou quasiment, on va pas ergoter) et elles sont très éloignées du bord gauche.


Pourquoi ?

Parce que la place est prévue pour l'infobulle et qu'on ne peut pas la changer (la mettre à droite).
Quels inconvénients ?
On ne peut pas mettre un extrait de mosaïque dans une colonne de largeur réduite (comme ma colonne de droite). On ne jamais vraiment envisager de mettre beaucoup d'éléments de mosaïque en largeur (3 au maximum sur cette page que je n'utilise qu'à des fins de contrôle alors qu'il y a la place pour 4).

La couleur de la vignette, c'est n'importe quoi.


Pourquoi ?
J'ai déjà dû faire moi-même du tuning pour éviter que ma mosaïque soit sur un fond gris terne (Je mets la modif que j'ai faite en fin de commentaire) mais cela ne suffit pas et il y a à mon avis une réelle impossibilité à virer ces bandes grisâtres en haut et en bas.

Quel inconvénient ?

Je m'y connais un peu et je n'arrive pas à me dépétrer de ça ... Je n'ose pas imaginer comment celui qui veut faire une mosaïque qui ne soit pas grise sans toucher au CSS peut faire.


Plus globalement, ce souci pose aussi un problème, celui des CSS inadaptés qui ne relèvent pas des modèles eux-mêmes (et à mon avis, c'est aussi le cas quand il y a des étoiles qui débordent ...).


/* =Hoverbox Code Rewrited
----------------------------------------------------------------------*/
.hoverbox
{
/*    cursor: default;*/
    list-style: none;
}
/*
.hoverbox li a
{
    cursor: default;
}
*/
.hoverbox a .preview
{
    display: none;
}
.hoverbox a:hover .preview
{
    display: block;
    position: absolute;
    top: -33px;
    left: +45px;
    z-index: 1;
}
.hoverbox li img
{
    border-color: #ffffff;
    border-style: solid;
    border-top-width: 1px;
        border-left-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    padding: 0px;
        margin: 0 px;
    vertical-align: center;
        text-align:center;
           background:#<smartcolor background>;   
}
.hoverbox li a
{
    float: left;
    position: relative;
    width:155px;
           background:#<smartcolor background>;   
}
.hoverbox li .image
{
    width:150px;
    height:155px;
    text-align:center;
         background:#<smartcolor background>;
}
.hoverbox .preview
{
    border-color: #ffffff;
}


par isabelle le Lundi 01/10/2007 à 23:21

isabelle Les étoiles qui dépassent de la largeur des petites colonnes : voir chez Babar tout en bas
Les chiffres de résultat de vote qui se supperposent sur les étoiles, sur Pitr uniquement je pense : voir la maquette d'Ecrivez le programme (je me demandais sur Pitr, vu que les étoiles dépassent aussi, si on avait un bloc large en dessous des petites colonnes pour y mettre les suggestions, ça pourrait peut-être s'arranger)


Modèle Green Park : "Insérer un séparateur" est impossible par Caroline le Mardi 16/10/2007 à 10:45

Caroline J'ai besoin de mettre des séparateurs pour structurer mes articles.

Si on clique dans l'éditeur sur "Insérer un séparateur", le séparateur apparaît bien à l'endroit voulu dans la fenêtre de l'édition, mais il ne s'affiche pas dans l'article après validation.

Un peu comme s'il était transparent : on sent qu'il existe, car on discerne un décalage vers le bas, mais il est invisible.

A tout hasard, j'ai essayé de mettre une couleur dans le code source juste avant la balise du séparateur, mais ça ne marche pas.


green park... par Delphine le Lundi 22/10/2007 à 22:33

C'est marrant parce que moi je n'ai pas les mêmes soucis avec ce modèle de mise en page :)
Je suis génée par les titres qui ne sont pas affichés en entier dans leur encart de titre de bloc (sur deux lignes quoi, et la 2e est écrit en blanc sur le fond blanc du bloc). M'enfin, je me demande si ça n'est pas aussi parce que j'ai tendance à agrandir la taille de police des weblogs ?


Re: green park... par Stephane le Mardi 23/10/2007 à 11:53

Stephane Oui, c'est un modèle où il faut des petits titres.


Re: green park... par Caroline le Jeudi 25/10/2007 à 14:07

Caroline Ça oblige à faire un grand effort de concision ! Tout le contraire de mon tempérament. Un jeu plutôt amusant, donc, en ce qui me concerne... ;-)
Parfois je me couche sans avoir trouvé et paf, illumination, j'ai un machin génial qui me vient la nuit et qui me réjouit vraiment au matin.



Session

Pour participer plus facilement, ouvrez une session :

Identifiant de
mon blog
Nom d'utilisateur
Mot de passe

Si vous avez déjà un blog sur ViaBloga ou si vous avez ouvert un compte sur l'un d'entre eux, vous pouvez vous identifier avec votre nom d'utilisateur et mot de passe en précisant d'abord l'identifiant de votre blog.

S'inscrire

Archives par mois