Wikia

Wikia Français

Commentaire0

Préparer votre wiki pour Darwin : la page d'accueil

Wyz novembre 19, 2013 Blog utilisateur:Wyz

Comme vous le savez peut-être, la mise en page fluide, première étape du projet Darwin est sur les rails. Il est temps de voir comment cela va impacter votre wiki et comment vous y préparer. Aujourd'hui nous traiterons de la page d'accueil du wiki.

La page d'accueil est souvent l'une des pages les plus compliquées d'un wiki, avec beaucoup de fonctionnalités possibles allant des menus et flux d'actualité à la mise en valeur d'articles ou médias et mises à jour des règles. Le contenu est d'ordinaire organisé en utilisant les balises de colonnes, ce qui crée une colonne à droite de la même largeur que celle qui s'affiche à droite des pages d'article.

Colonne de gauche

Le contenu le plus important sur la page d'accueil se trouve généralement dans la colonne de gauche. Comme l'espace pour les articles sur les autres pages, cette zone a un comportement fluide afin d'être sûr qu'elle reste le point d'attention du lecteur. Quand on crée ou modifie un conteneur pour la colonne de gauche, il est préférable d'utiliser un pourcentage pour la propriété largeur afin que les proportions de la mise en page soient les mêmes pour tous les lecteurs. Par exemple, si un conteneur centré est défini pour utiliser 80% de la largeur disponible, les utilisateurs verront toujours une marge de 10% de chaque coté, qu'ils utilisent un ordinateur portable avec un petit écran ou un écran dédié au jeu plus large. Auparavant, avec une mise en page à largeur fixe, définir une largeur de 536px (pixel) aurait fait que le conteneur utilise 80% de l'espace horizontal de la colonne de gauche. Mais avec une largeur fixe sur une page fluide, le conteneur ne s'agrandira pas avec le reste de la mise en page et peut paraître bizarre pour les utilisateurs avec de grands écrans.

Le contenu à l'intérieur des conteneurs de la page d'accueil peuvent aussi avoir un comportement fluide. Les blocs de texte seront automatiquement renvoyés à la ligne par défaut, tout comme sur les pages d'article. La galerie de personnages sur le wiki Breaking Bad anglophone et le tableau des champions sur le wiki League of Legends anglophone sont de bons exemples de listes d'image qui s'adaptent automatiquement à la largeur variable.

Colonne de droite

La mise en page fluide de Darwin a réduit la largeur de la colonne de droite sur les articles de 330px à 300px. Ce même changement est appliqué à la colonne de droite de la page d'accueil. Le contenu de la colonne de droite ayant été défini pour faire toujours 330px de large doit être ajusté. Il est possible de soustraire simplement 30px de toutes les valeurs que vous avez actuellement, mais veuillez noter une chose : quand une communauté de Wikia est consultée sur un iPad (ou autre tablette) en mode « portrait », le contenu de la colonne de droite de la page d'accueil est déplacé sous la colonne de gauche. (La même chose se produit pour la colonne de droite sur les articles.)

Vous n'avez pas besoin de posséder un iPad pour constater ce comportement. Réduisez la fenêtre de votre navigateur quand vous consultez un wiki avec la mise en page fluide (comme le Wiki des communautés) et vous verrez que le contenu de la colonne de droite est déplacé en bas de la page. Notez aussi que les éléments flottent à gauche. Pour ces raisons, vous pourriez considérer de définir la largeur des conteneurs de la colonne de droite à 100% aussi. Cela leur permettra d'utiliser l'espace maximum possible dans le cas d'un affichage en mode portrait de la page d'accueil sur tablette.

Carrousel

Les carrousels sont le plus souvent utilisés sur les pages d'accueil. Les dimensions d'un carrousel sont toujours 670px par 360px et un carrousel sera toujours aligné au centre de l'espace qu'il occupe. Avec une colonne de gauche en mise en page fluide, les utilisateurs avec des écrans larges verront des marges des deux côtés du carrousel. Si vous souhaitez en faire plus avec cette espace où on voit l'arrière-plan, il est possible de placer un carrousel à l'intérieur d'un conteneur qui lui est propre, comme on le voit sur la page d'accueil du wiki Yu-Gi-Oh! hispanophone.

Si vous avez des astuces à partager ou des exemples de comment faire des pages d'accueil superbes en mode fluide, n'hésitez pas à répondre dans les commentaires ci-dessous !

Si vous êtes un administrateur et que vous avez besoin d'aide pour préparer votre wiki pour la mise en page fluide, faites-le nous savoir ici.



Vous avez des questions ou souhaitez en discuter ? Consultez le forum Darwin.