En donner PLUS aux grands écrans

Texte en colonnes auto (column)

Un paragraphe trop large est inconfortable à lire. Mais il n'est pas toujours possible de placer le texte en colonnes.

 

Heureusement, il est possible de forcer un paragraphe à s'afficher en colonnes lorsque la largeur le permet, à l'aide de la propriété column .

 

Parmi les multiples description de cette propriété, j'ai apprécié la clarté de cet article : Les multi-colonnes en CSS3 par Raphaël sur alsacréations.

L'article d'alsacréations étant bien fait, inutile de tout expliquer à nouveaux.

En déterminant une largeur de colonne (column-width), le texte inséré dans un contenant à largeur variable se déroulera sur plusieurs colonnes dès que la largeur le permet. Le nombre de colonnes (column-count) détermine, selon la valeur de column-width, soit le nombre de colonnes, soit le nombre maximal de colonnes.

Précautions :

Suivant ce qui est ciblé, on peut obtenir des résultats imprévus. Si vous ciblez les paragraphes d'un contenant, le déroulé du texte peut être incohérent (pour la lecture). Chaque ligne de texte balisée en <p></p> étant coupée indépendamment de sa position relative dans le texte complet. La solution dans ce cas, est de composer le texte en effectuant des sauts de ligne (<br />).


Lire la suite 0 commentaires

Raccourcir automatiquement un paragraphe

Lire la suite 0 commentaires

Afin de rendre la lecture de cet article compréhensible pour les écrans les plus courants, l'effet à été rendu accessible aux largeurs de 1300px. Mais en deçà de 1700px, le design est trop étroit.

Prévisualisation du site sur un écran 27' - design par défaut
Design par défaut sur un écran 27'

Comment s'affiche mon site sur un "grand" écran ?

La responsivité ou adaptabilité est l'ensemble des dispositions qui permettent à un site de s'afficher sur toutes les plateformes, en particulier sur les minuscules écrans des GSM portables et tablettes. Le site change d'aspect, mais les informations restent lisibles et complètes. Ces dispositions suivent généralement la règle du "plus petit dénominateur commun".
Ce qui est nécessaire pour un petit écran conditionne en partie ce qui sera acceptable pour un grand.

Conséquemment, une large surface des grands écrans reste vide. L'image suivante illustre comment apparaît mon site sur un écran d'Imac 27' et certains écrans affichent 2 fois plus de pixels ! Les résolutions supérieures à 1330 X 468 ne représentent que 2% des utilisateurs, mais faut-il les ignorer pour autant ?


Projet de remplissage optionnel des zones vides de l'écran
Projet de remplissage optionnel des zones vides de l'écran

Responsivité "positive"

L'idée est de profiter de cet espace pour ajouter des informations optionnelles. On ne peut évidemment pas indiquer des données essentielles à la compréhension de l'article en cours, puisque ces informations n'apparaîtront que dans 2% des visites. Le contenu sera accès sur des résumés d'articles connexes. Il semble intéressant de se pencher sur l'affichage d'articles de blog, afin de faire évoluer le contenu de la page lorsque le blog est mis à jour.

Il s'avère nécessaire de construire la page en 3 parties : centre, gauche et droite. Tous les modules permanents (centre) sont créés dans un seul module colonne (c'est primordial pour la méthode de placement que je mets en œuvre). Les articles de gauche et droite sont deux modules d'affichage du blog.


Les éléments de base à ajouter sur la page

Ajouter les éléments sur la page

Avant de les placer, il faut insérer les modules sur la page. Deux affichages du blog incluant deux articles en teasers réduits, sont ajoutés en fin de page. Grâce au tags, on sélectionne des types d'articles différents. Le titre de l'article reste en dehors, au dessus du reste.

 

Attention, tout ce qui suit n'est qu'un principe d'exploration, valable pour le présent site, et doit être adapté au vôtre.

 

Cibler les nouveaux éléments

Les trois contenants ont pour identifiants, (sur ce site) : 

#cc-m-10367991098 (Article principal centre),

#cc-m-10368206498 (Deux articles de gauche)

#cc-m-10368212398 (Deux articles de droite)

 

On pourra choisir aussi d'autres méthodes de sélection, par les class, ou par hiérarchie.


Exemple de méthode de ciblage avec l'inspecteur de propriété de Firefox
Ciblage avec l'inspecteur de propriété de Firefox

Libérer l'espace horizontal

Les éléments sont contraints au centre de la page par un contenant parent. il faut l'identifier et changer sa largeur maximale. Dans l'inspecteur, je cherche quel contenant parent possède une largeur, ou une largeur max.

En remontant 4 niveaux plus haut, je trouve que la class ".jtpl-content__inner" impose la propriété max-width: 1050px au contenants parents des modules formant l'article de la page. Il faut changer cette valeur, mais uniquement lorsque on veut afficher les articles sur les côtés. J'ajoute donc une valeur conditionnelle, ciblant la largeur de fenêtre navigateur :

@media(min-width:1700px) 
J'ajoute la modification de classe (limité à la page courante) :
@media(min-width:1700px){ #page-2071953298 .jtpl-content__inner {max-width: 100%!important;}
}


Résultat du design après la première couche de code

Rectifier largeurs et marges des trois éléments

Les éléments de la page disposent ainsi de toute la largeur de fenêtre. Ils restent les uns au dessus des autres, leur largeur est égale à la largeur disponible et sont alignés à gauche.

 

- La largeur des 3 blocs d'articles doit être fixée proportionnellement à l'espace disponible. J'utilise l'unité vw, proportionnelle au"viewport" (la fenêtre visible). Je leur accorde 22  + 40 et des marges de 1, ce qui donne : 1 + 22 + 1 + 1 + 40 + 1 + 1 + 22 + 1 = 90 vw. (le viewport est égal à 100vw, on peut lui préférer l'unité % pour plus de compatibilité)

 

Pour centrer les éléments sur la page, il faut centrer leur parent direct, le bloc #cc-matrix-2792303498.

Pour ce faire, je lui donne une largeur à peine plus grande que les éléments qu'il contient et des marges horizontales auto : 
#cc-matrix-2792303498 {margin:0 auto; width:91vw;}


Le parent des éléments flottants n'a plus de hauteur
Le parent des éléments flottants n'a plus de hauteur

Rectifier placement

- Enfin, les éléments doivent s'aligner côte à côte. Cela sera piloté par les propriétés float et clear :
#cc-matrix-2792303498 >div:nth-child(n+2)
/* Cible les div de premier niveau dans le content, à partir de la deuxième, afin d'épargner le titre (on pourrait aussi cibler les 3 id uniques)*/
{clear:none!important;float:left!important;  /*placement relatif*/
padding:0!important; /* neutralise les valeurs par défaut*/
margin:0 auto!important;} /* centrer les éléments dans l'espace disponible*/
#cc-m-10367991098{width:40vw;}  /*largeur pour l'article principal*/
#cc-m-10368212398,#cc-m-10368206498{width:25vw;} /*largeur des articles secondaires*/


Aspect de la page après la deuxième couche de code
Aspect de la page après la deuxième couche de code

Ajustage des autres éléments

- Les éléments flottants n'imposent plus leur hauteur au parent et le pied de page remonte jusqu'au titre. Paradoxalement, il suffit d'indiquer au parent de masquer le contenu qui dépasse ses limites, pour que celui-ci reprenne sa hauteur prévisible :

#cc-matrix-2792303498 {overflow:hidden;}

- Le fond de page (en fait, c'est le fond du content-area) est aligné à gauche. Il est également trop large :
#content_area {background-position: 50% 0; background-size: 42vw;} 

- Le titre principal doit être ramené au centre de la page. il vaut mieux un titre court, mais on peut aussi limiter sa largeur. 
#cc-m-header-10367987398 {margin: 0px 0px 0px 24vw; max-width: 44vw;}

 


Détail sur le comportement en colonnes automatique du texte
Comportement en colonnes auto du texte

Cacher les articles optionnels en navigation étroite

- Les articles optionnels doivent disparaître si la fenêtre n'a pas la place de les afficher sur les côtés. 

@media(max-width:1700px){ #cc-m-10368212398, #cc-m-10368206498 {display:none;} }

 

Amélioration de détails

- Les textes habillent de façon disgracieuse les images. Mais nous sommes déjà dans un module colonnes. J'impose un déroulé du texte sur deux colonnes lorsque la largeur est disponible : (voir documentation sur la valeur column )

.cc-m-textwithimage-inline-rte > p {

-moz-column-width:20em; -webkit-column-width:20em; -o-column-width:20em;  -moz-column-count:2; -webkit-column-count:2; -o-column-count:2; column-count:2; -moz-column-gap:10px; -webkit-column-gap:10px; -o-column-gap:10px; column-gap:10px;}
- Les images pourraient rester à 50% de large dans leur contenant : .j-textWithImage .cc-imagewrapper {max-width: 50%!important;}


Illustration d'un projet de distribution de l'article vertical dans la largeur
Projet de distribution de l'article vertical dans la largeur

Conclusion

- Ce principe illustre plusieurs techniques qui permette de placer des éléments optionnels. Elles peuvent être mise à profit pour personnaliser une page de diverses manières, en ajoutant des résumés d'articles, des images, des liens…

- Plus simplement, il serait utile de déplacer les éléments (permanents, du coup…) d'une longue page et de les redistribuer de gauche à droite lorsque la place l'autorise.

- D'autres méthodes peuvent être mise en œuvre, en particulier les propriétés flex, dont le potentiel est immense, bien qu'encore mal supportés par tous les navigateurs.


Référencer ou Créer, il faut choisir ! (ou pas)

Référencement web naturel, le nouveau tonneau des danaïdes

Le web est tellement envahi de sites redondants, inutiles, voire malfaisants, que les moteurs de recherches changent régulièrement leur mode d'indexation. Leur incapacité à indiquer des résultats utiles est devenu un ressort commercial : Payez, où on vous oublie ! La tendance actuelle cible les contenus qui évoluent, parmi les plus "pertinents". Nous voici condamnés à renouveler sans répit, comme un serpent qui devrait muer éternellement pour vivre.

Le blog sera une obligation, un site d'information ou rien ! Rajoutons encore au web du déjà dit, du déjà vu. Le resucée ressuscite. Cette optimisation prône des outils qui alimentent sa propre saturation. Blogueurs, community manager, forumeurs, autant de scieurs des branches qui les supportent.

C'est une nouvelle version du tonneau des Danaïdes. Aussitôt remplit, il est vide !

Conséquence périphérique :  l'originalité de la présentation ne fait plus revenir sur votre site, (paraît-il) puisqu'on n'y sera jamais parvenu ! Seuls ceux qui peuvent dépenser une énergie considérable en "renouvellement" apparaitront sur Google, Bing, Yahoo etc.

La création devient un luxe inutile, ou du moins, superfétatoire, en tout cas, suspecte.

On voit apparaître des sites marchands spécialisés dans la mise à jour de votre blog, à base de contenu "d'actualité ciblée" (copiée sur d'autres sites d'information et reformulé par des esclaves à 2€ la page).

"Pas le temps de tenir votre blog ? Nous le faisons à votre place…"

-"… Il n’est donc pas nécessaire d’avoir recours à des services onéreux de mise en page web : le contenu prime et primera toujours. C’est l’essence de votre site qui fera la différence avec tous les autres !" (sic kaoxee)

Je persiste à penser, au contraire, que l'originalité de votre site passe par son aspect, et exprime davantage votre personnalité, lorsque le contenu n'est plus qu'un outil de référencement, de moins en moins fiable au yeux des Internautes, périmé avant même d'avoir revêtu un sens.
Si le référencement tend à devenir impossible, bâtissez au moins une expérience visuelle unique.

2 commentaires