Twenty Fifteen : vertical et efficace !

Ce billet regroupe les principales informations pratiques qui vous permettront de prendre en mains sans plus tarder le thème graphique Twenty Fifteen (2015), disponible dès à présent sur Hypothèses. Une fois le thème activé sur votre carnet via le menu « Apparence>Thèmes », vous trouverez la plupart des options de configuration le concernant dans le menu « Apparences>Personnaliser ».

Un thème adapté à tous les écrans

Twenty Fifteen est issu des dernières technologies en matière d’expérience utilisateur et de la méthode de conception « Mobile first » (le webdesigner développe  le thème graphique en partant de la version mobile, considérant celle-ci comme la plus utilisée). Ce thème est donc bien entendu responsive : il s’adapte parfaitement à toutes les tailles d’écrans.

Le coté responsive du thème Twenty Fifteen
Exemple d’un carnet utilisant Twenty Fifteen, affiché sur des écrans de tailles différentes.

Un en-tête…vertical !

Twenty Fifteen met l’accent sur la lisibilité de vos contenus et se démarque des autres thèmes par l’absence d’en-tête horizontal. Tout se passe dans la colonne latérale de gauche, qui va pouvoir accueillir vos menus, vos widgets, mais également le titre et le sous-titre de votre carnet, faisant bien de cet espace l’en-tête de votre carnet, même s’il ne se situe pas en haut de celui-ci… L’en-tête de votre carnet est donc la zone (non délimitée visuellement) située en haut de la colonne latérale de gauche et contenant le titre et le sous-titre de votre carnet.

Vous remarquerez que lorsque vous faites défiler vers le bas le contenu de votre carnet, cette colonne latérale défile également, puis devient statique lorsque vous arrivez en bas de la colonne et qu’il y a toujours du contenu à faire défiler dans la zone principale de publication de votre carnet.

Deux menus à personnaliser

C’est dans cette colonne latérale que vous allez pouvoir placer, une fois que vous l’aurez créé, le menu de navigation – qui sera donc également vertical – de votre carnet. Pour apprendre à créer un menu sous WordPress, vous pouvez vous référer à ce billet de la Maison des Carnets.

Twenty Fifteen vous offre en outre la possibilité d’ajouter une description à vos éléments de menu. Pour ce faire, rendez-vous dans le menu « Apparences>Menus »,  puis cliquez sur l’onglet « Options de l’écran » en haut à droite de votre écran. Cochez la case « Description ». Vous pouvez refermer ce menu en cliquant à nouveau sur « Options de l’écran ». Dès lors, en affichant les options de n’importe quel éléments de menu (en cliquant sur la petite flèche située à droite du rectangle matérialisant l’élément de menu en question), vous constaterez la présence d’un champ « Description ». Remplissez-le à votre guise ; les éléments que vous y renseignerez apparaîtront en-dessous des éléments de menu correspondants.

Exemple d'un menu comportant des descriptions associées à certains de ses éléments.
Exemple d’un menu comportant des descriptions associées à certains de ses éléments.

En-dessous de ce menu, vous avez la possibilité de placer un second menu, dédié aux réseaux sociaux. Pour ce faire, il vous suffit de créer un menu ne contenant que des liens, renvoyant vers vos profils sur les réseaux sociaux de votre choix. Il suffit ensuite de placer ce menu dans l’emplacement « Social Links Menu ». Vous n’avez pas besoin de paramétrer l’affichage des icônes dans ce menu ; le fait d’y insérer des liens vers vos réseaux sociaux entraînera l’affichage automatique des icônes correspondants.

Liens sociaux en menu
Exemple d’un menu constitué de liens vers les réseaux sociaux.

Cet affichage automatique des icônes n’est possible qu’avec des liens pointant vers les services web suivants :

  • CodePen
  • Digg
  • Dribbble
  • Dropbox
  • Email (mailto: links)
  • Facebook
  • Flickr
  • Foursquare
  • GitHub
  • Google+
  • Instagram
  • LinkedIn
  • Path
  • Pinterest
  • Pocket
  • Polldaddy
  • Reddit
  • RSS Feed (URLs + /feed/)
  • Spotify
  • Skype
  • StumbleUpon
  • Tumblr
  • Twitch
  • Twitter
  • Vimeo
  • WordPress
  • YouTube

Voir la vie en rose…ou en jaune

Twenty Fifteen propose six jeux de couleurs que vous pouvez sélectionner via le menu « Apparence>Personnaliser>Couleurs ». À partir de ces combinaisons de base, vous pouvez ensuite ajuster les couleurs à votre convenance. Peuvent être modifiées les couleurs :

  • de fond de l’en-tête et de la barre latérale (l’en-tête étant l’espace situé en haut de la colonne de gauche et comportant le titre et le sous-titre de votre carnet)
six-couleurs-predefinies-2015
Exemple d’utilisation des jeux de couleurs de base proposés par Twenty Fifteen.

Vous pouvez également définir une image d’en-tête (qui sera donc l’image de fond de la colonne de gauche) ainsi qu’une image d’arrière-plan (qui sera quant à elle l’image de fond de la zone de publication principale de votre carnet). Pour ce faire, passez par les menus « Apparence>Personnaliser>Image d’en-tête/Image d’arrière-plan ».

Attention cependant, le choix de ces images devra respecter deux contraintes : le format tout d’abord, notamment pour la colonne de gauche, relativement étroite. Il faudra donc privilégier une image en portrait pour garantir un rendu intéressant visuellement. Pour information, la colonne de gauche possède une largeur de 248 pixels. Cette largeur est de 660 pixels pour la zone principale de publication. Ensuite, veillez à utiliser des images suffisamment sobres et à vérifier le contraste de celles-ci avec vos éléments textuels, pour ne pas entraîner une diminution voire une perte de lisibilité de vos contenus.
Dernière chose, pensez à indiquer les crédits (licence, droits d’utilisation spécifiques, nom de l’auteur, lien vers l’image originale le cas échéant…) associés aux images que vous utilisez (par exemple sur la page « Crédits » de votre carnet).

Exemple d'utilisation d'images d'en-tête et d'arrière-plan.
Exemple d’utilisation d’images d’en-tête et d’arrière-plan.

Optimisez vos images à la Une

Comme beaucoup d’autres thèmes, Twenty Fifteen vous permet de mettre des images à la Une dans vos billets (une image par billet). Pour ce faire, ajoutez l’image de votre choix en passant par la section « Image à la Une », située en bas à droite de l’espace d’édition de n’importe quel billet. Pour que vos images à la Une s’affichent de façon optimale, rapprochez-vous le plus possible des dimensions suivantes : 825 pixels de largeur pour 510 pixels de hauteur.
Par ailleurs, n’oubliez pas d’indiquer clairement, ici aussi, les crédits associés à ces images.

Pour aller plus loin

Afin de compléter ce billet, vous trouverez sur internet un grand nombre de tutoriels qui vous présenteront Twenty Fifteen dans ses moindres détails. En voici une sélection :

Si vous avez une question sur l’utilisation de Twenty Fifteen ou plus généralement sur la prise en mains de votre carnet, envoyez un message sur la liste de discussion et d’entraide des carnetiers : carnetiers[at]groups.openedition.org
Si vous n’y êtes pas abonnés, envoyez une demande à l’équipe d’Hypothèses via l’adresse hypotheses[at]openedition.org

A bientôt sur Hypothèses !

Image à la une : Camping de la Bucle par Alexandre Duret-Lutz sous licence Creative Commons by-nc-sa


Michel Tamarin

Chargé de projet web hypotheses.org

More Posts - Website

Follow Me:
TwitterLinkedInGoogle Plus