Comment rendre votre site WordPress convivial en un rien de temps

Votre site WordPress est-il compatible avec l'imprimante ? Si vous n'avez aucune idée de ce à quoi cette question veut en venir, ce n'est peut-être pas…

Bien que certains développeurs de thèmes WordPress intègrent la prise en charge du contenu convivial pour l'impression, la plupart du temps, ce n'est pas le cas. Et cela signifie que si vous voulez que les gens puissent imprimer votre contenu d'une manière réellement lisible, vous devrez prendre les choses en main… c'est ce dont je vais parler aujourd'hui.

Dans cet article, vous apprendrez ce qui rend un site Web convivial, ainsi que comment vous pouvez rendre votre propre site Web WordPress convivial à l'aide de CSS ou d'un plugin.

Qu'est-ce qui rend un site Web convivial ?

Votre site Web contient des tonnes d'éléments qui permettent aux gens de parcourir facilement l'intégralité de votre site. Menus de navigation, hyperliens internes, barres latérales… tout est bon pour les personnes visitant votre site sur Internet car cela leur permet de trouver de nouvelles informations et de se déplacer entre les différentes pages.

Mais lorsqu'il s'agit d'imprimer un contenu spécifique de votre site, ces éléments ne font que gêner. Pensez-y… les gens ne peuvent pas cliquer sur votre menu de navigation ou interagir avec votre barre latérale sur la page imprimée, donc leur demander d'imprimer votre menu de navigation supérieur n'est pas particulièrement utile lorsqu'ils lisent votre contenu sur un morceau de papier.

De plus, il arrive que les polices et la taille des polices utilisées sur votre site Web ne correspondent pas aussi bien aux dimensions de la page imprimée.

Et enfin, de nombreuses personnes vont imprimer votre contenu en noir et blanc (et l'encre de couleur est chère !), donc adopter un look plus en niveaux de gris pour votre contenu imprimable est toujours une bonne idée.

Pour cette raison, rendre votre site Web convivial implique principalement :

• Modification des polices, de la taille et de l'espacement pour faciliter la lecture sur une taille de page normale
• Suppression d'éléments superflus tels que les publicités, la navigation et les barres latérales qui ne sont pas utiles sur une page imprimée
• Amortir les couleurs si vous utilisez beaucoup d'éléments non noirs et blancs

Alors, comment pouvez-vous réellement faire cela? Découvrons-le…

Comment rendre votre site Web convivial avec CSS

Dans la section suivante, je vais vous montrer quelques plugins WordPress qui peuvent vous aider à rendre votre site plus convivial sans avoir à creuser dans un CSS. Mais si vous voulez avoir un contrôle total sur l'apparence de la version d'impression de votre site, vous pouvez en fait utiliser des sélecteurs de média pour styliser la version d'impression de votre page.

Le bloc de construction CSS de base pour votre contenu imprimable est le suivant :

 @media print {
/* Les styles spécifiques à l'imprimante vont ici */
}

Tous les styles CSS que vous ajoutez à cette déclaration de médias ne concerneront que la version imprimée de votre page.

Où allez-vous à partir de là? Eh bien, il est difficile de donner une réponse exacte car cela dépend en grande partie de vos préférences et de votre thème spécifiques.

Mais en général, voici certaines des choses que vous voudrez faire avec CSS :

• Utilisez display:none pour supprimer des éléments tels que les barres latérales, les menus de navigation, les formulaires de recherche et tout ce qui n'est pas utile sur la page imprimée.
• Définissez une taille de police lisible. Le graphique Points to Pixels de Reed Design est utile pour déterminer comment les pixels sont liés aux tailles de police que vous connaissez dans des programmes plus conviviaux comme Microsoft Word ou Google Docs.
• Utilisez une police serif pour vos styles d'imprimante, car la plupart des gens trouvent qu'il est plus facile de lire sur la page imprimée.
• Changez les couleurs, surtout si vous utilisez une couleur d'arrière-plan très chargée en encre. La plupart des navigateurs utilisent par défaut un fond blanc dans de nombreuses situations, mais il est bon de s'en assurer, car tout problème peut entraîner une tonne d'encre gaspillée.

En ne faisant que les quatre choses ci-dessus, vous devriez déjà avoir un site Web assez convivial pour les imprimantes. Mais si vous souhaitez aller encore plus loin, vous pouvez également mettre en œuvre des tactiques plus avancées. Par exemple, vous pouvez utiliser :after pour imprimer l'URL de tous les liens. Cela supprime les médias inutiles des publications (comme les vidéos - pas très utiles en version imprimée), et plus encore.

Si vous souhaitez des exemples plus spécifiques de styles CSS conviviaux pour les imprimantes en action, un bon article à lire est celui de Smashing Magazine car ils passent par une page d'exemple entière.

Quelques plugins WordPress pour rendre votre site imprimable

Si vous préférez ne pas vous salir les mains avec CSS, vous pouvez, comme d'habitude, vous tourner vers un plugin WordPress pour obtenir de l'aide. Vous avez un tas d'options différentes, mais voici quelques recommandations.

Avant de commencer, cependant, je tiens à préciser que ces plugins ne fonctionnent que lorsque les utilisateurs cliquent sur le bouton Print This dédié fourni par chaque plugin. Ils n'affecteront pas le style d'impression de votre site si un utilisateur accède directement à l'option d'impression de son navigateur.

WP-Imprimer

WP-Print est un plugin gratuit populaire pour vous aider à créer un site WordPress convivial pour les imprimantes. En plus d'ajouter un bouton Print This dédié, le plugin vous offre également une interface conviviale. Cela vous permet toujours de personnaliser de nombreux paramètres dont j'ai parlé dans la section CSS précédente.

J'étais curieux de voir comment ce plugin fonctionne avec Divi et le Divi Builder. Alors, j'ai mis en place un post de test rapide pour voir comment les choses fonctionnent. Voici à quoi ressemble la version Web de mon article de test :

Et voici à quoi ressemble la version imprimable de cet article ( rappelez-vous - vous pouvez personnaliser le fonctionnement des images - mon exemple utilise simplement la valeur par défaut ):

Une chose particulièrement intéressante à propos du plugin est qu'il ajoute automatiquement des citations pour les liens dans le contenu. Il supprime également toutes les options de navigation.

Sachez simplement que vous devrez être à l'aise pour fouiller dans les fichiers modèles de votre thème pour ajouter le bouton « Imprimer ceci » . C'est à peu près juste un travail de copier-coller - mais les débutants pourraient le trouver un peu déroutant.

Prix ​​: Gratuit | Plus d'information

Impression, PDF, e-mail par PrintFriendly

Avant d'aller plus loin, je veux commencer par la mise en garde principale de ce plugin - la version gratuite est financée par la publicité. Pas idéal… mais le plugin lui-même est plutôt sympa, et les publicités ne sont pas particulièrement intrusives.

Si ce n'est pas un dealbreaker, ou si vous êtes prêt à passer au niveau pro, continuez à lire…

Le plugin WordPress de PrintFriendly intègre le service PrintFriendly dans votre site. Il s'agit d'un service sympa qui, en plus de supprimer les parties superflues de votre thème WordPress, donne également à vos utilisateurs un certain contrôle sur l'apparence de leur page imprimée.

Comme WP-Print, le plugin vous donne un bouton d'impression. Lorsque vous cliquez dessus, ce bouton ouvre une fenêtre lightbox. C'est ici que les utilisateurs peuvent prévisualiser la version imprimée, ainsi que ajuster la taille de l'image et du texte :

Il n'a pas la fonctionnalité de citation de lien intéressante de WP-Print, mais je pense que c'est génial en raison du contrôle qu'il offre à vos visiteurs. Et une autre bonne chose est que cela permet également aux lecteurs de partager ou de télécharger facilement votre message au format PDF ou par e-mail.

Prix ​​: Gratuit avec support publicitaire. La version Pro commence à 4 $ par mois | Plus d'information

Envelopper les choses

S'il est vrai que la majorité de vos visiteurs consommeront votre contenu en ligne, cela ne signifie pas que vous devez complètement ignorer les personnes qui souhaitent imprimer votre contenu sur papier. La création d'un site Web convivial pour les imprimantes est une chose unique. Et une fois que vous l'avez mis en place, les visiteurs peuvent imprimer votre contenu selon leurs besoins tout en profitant d'une excellente expérience.

Maintenant à vous – imprimez-vous déjà du contenu à partir d'un site Web ? Qu'est-ce que vous aimez et/ou n'aimez pas dans les versions imprimables de la plupart des sites Web ?

Image miniature de l'article par AVIcon / shutterstock.com