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 % |
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).
Cliquez ici pour suivre les blogs du Staff.
Nous expérimentons ! Apprenez-en plus sur les types d'événements et autres choses que nous avons fait jusqu'à présent ou que nous prévoyons de faire !
Vous souhaitez un accès à temps réel à vos camarades éditeurs et au staff ?
Rejoignez notre serveur Discord officiel pour les utilisateurs enregistrés !