Fandom

Wikia Français

Commentaires137

Modifications de la mise en page : points d'arrêt et typographie

Wyz avril 15, 2015 Blog utilisateur:Wyz

Interférence d'un bloqueur de publicité détectée !


Wikia est un site gratuit qui compte sur les revenus de la publicité. L'expérience des lecteurs utilisant des bloqueurs de publicité est différente

Wikia n'est pas accessible si vous avez fait d'autres modifications. Supprimez les règles personnalisées de votre bloqueur de publicité, et la page se chargera comme prévu.

Breakpoints-blogheader - fr.png


Le contenu de ce billet a été modifié. Veuillez le relire pour voir ce qui a changé !!


Bonjour à tous. Avec le prototype de mise en page des articles l'année dernière, nous avons testé un grand nombre de choses différentes et nous avons reçu beaucoup d'avis qui ont été décisifs sur ce que nous allons essayer et comment nous allons avancer. Le prototype nous a permis d'apprendre des choses importantes sur ce qui fonctionne ou non (par exemple, retirer la colonne de droite a beaucoup gêné). Nous allons quand même apporter des changements progressifs à la mise en page des articles, mais notre but est de nous concentrer sur des parties spécifiques de la mise en page, une par une. Ce processus est similaire à la façon dont nous avons mis à jour la navigation globale en janvier, mais cela prendra plus de temps pour que les modifications de la mise en page des articles soient toutes là.

En haut de la liste se trouvent l'ajout de points d'arrêt à la mise en page réactive de Wikia et quelques mises à jour de la typographie. Les modifications de la typographie ne seront appliquées que pour le point d'arrêt le plus grand, que nous appelons « Bureau grand format » (Desktop XL), actuellement défini pour les affichages dont la largeur est plus grande que 1575 px. La galerie ci-dessous montre quelques exemples avant-après de ce qui va changer lorsque la mise en page s'adapte à une largeur d'écran correspondant au bureau grand format. Parcourez les images de la galerie puis continuez votre lecture pour en savoir plus sur les modifications que nous allons apporter aux points d'arrêt et à la typographie. Les points d'arrêt et les modifications de la typographie prendront effet le mardi 19 mai sur tous les wikias.

Points d'arrêt

Ceci est une variation de l'apparence « fluide » où nous avons ajouté des points d'arrêt pour permettre un comportement plus prévisible, ce qui réduit les risques d'avoir certains modèles qui s'affichent mal sur une page. Notre but avec les points d'arrêt est que le site soit toujours réactif afin que la page s'adapte aux écrans les plus larges, ce qui sera défini par la zone d'affichage du navigateur (viewport). Veuillez noter que les barres de défilement sont considérées comme en dehors des limites de mesure de l'écran.

Voici la liste des différents points d'arrêt et les largeurs d'écran correspondantes :

Point d'arrêt Largeur espace de contenu Largeur écran (minimale) Largeur écran (maximale) % du trafic bureau/tablette
Tablette en mode portrait 768 px 768 px 1023 px 16 %
Tablette en mode paysage 1024 px 1024 px 1084 px 50 %
Bureau 1084 px 1084 px 1594 px
Bureau grand format 1238 px 1595 px 34 %
Note : ce tableau a été mis à jour, les nouveaux points d'arrêt « bureau » et « tablette en mode paysage » ont été ajoutés.

Typographie

Nous souhaitons nous concentrer sur la lisibilité et la longueur de ligne qui respectent les bonnes pratiques des interfaces modernes (expérience utilisateur) et cela signifie adapter l'expérience à l'affichage. Sur Wikia aujourd'hui, seule la longueur de ligne change mais pas la taille de la police ou la hauteur de ligne. Avec la mise à jour de la typographie, la taille de police et la hauteur de ligne changeront avec le point d'arrêt « Bureau grand format » et vous pouvez consulter le tableau ci-dessous pour connaître les détails spécifiques. Pour les points d'arrêt bureau et tablette, la taille du texte est celle actuellement par défaut sur Wikia. La seule augmentation se produit une fois la largeur « Bureau grand format » atteinte.

Voici la liste des modifications typographiques pour chaque point d'arrêt :

Bureau / Tablette Bureau grand format
(taille de police / hauteur de ligne)
H1 - en-tête 28 / 28 34 / 34
H2 - en-tête 20 / 22 28 / 30
H3 - en-tête 17 / 22 22 / 24
H4 - en-tête, citation 15 /22 20 / 28
Corps de texte 14 /22 16 / 26

Nous avons l'intention d'appliquer ces modifications uniquement aux en-têtes, corps de texte et citations basiques. Un problème que nous allons rencontrer est que, si certains modèles n'ont pas la bonne classe, ils peuvent être sujets aux modifications typographiques, ce qui peut les casser. Nous avons commencé à dresser une liste des problèmes potentiels, leurs causes et les solutions possibles. La plupart de ces problèmes peuvent être corrigés soit en corrigeant les classes utilisées par ces modèles ou en corrigeant le CSS. Cette liste se trouve ici et sera mise à jour régulièrement au fur et mesure que nous et les utilisateurs comme vous modifions sur Wikia avec la nouvelle mise en page.

Comment voir les points d'arrêt et la typographie

Si vous souhaitez avoir un aperçu de comment ça donne sur votre wikia, tout ce dont vous avez besoin sont des paramètres d'URL. Consultez les indications ci-dessous pour les paramètres que vous devez ajouter pour avoir un aperçu des deux.

Pour un aperçu des points d'arrêt et de la typographie :
Ajoutez ?oasisbreakpoints=1&oasistypography=1 après l'URL
Par exemple : http://fr.onceuponatime.wikia.com/wiki/Emma_Swan?oasisbreakpoints=1&oasistypography=1

Les points d'arrêt et la modification de la typographie prendront effet mardi 19 mai sur tous les wikias. Si vous constatez quelque chose de bizarre ou cassé, commencez par consulter la page d'aide pour voir si une solution y a été consignée. Si ce n'est pas le cas, faites-le nous savoir dans les commentaires ci-dessous ou via Special:Contact.


MISE À JOUR : 21 mai 2015

Afin de résoudre certains bugs relatifs aux barres de défilements, nous avons décalé légèrement les points d'arrêts. Le point d'arrêt bureau est maintenant à 1084 px et le bureau grand format à 1595 px. Le tableau sur ce billet et les informations de la page d'aide ont été mis à jour pour refléter ces changements.


Vous pouvez consulter l'article original ici (en anglais).
Vous souhaitez être informé(e) sur les billets postés en rapport avec l'actualité Wikia ? Alors cliquez ici pour suivre ce blog.

Sur le réseau Fandom

Wiki au hasard