Comment bien formater un lien vers un fichier PDF ?

Saviez-vous que le format PDF a été créé en 1993 par Adobe ? Autant dire que ce format de fichiers est aussi vieux que le web (presque). Toujours est-il que les fichiers PDF font partie du quotidien des internautes mais qu’ils ne sont pas sans poser de problèmes. Le principal étant de provoquer l’ouverture d’une nouvelle fenêtre ou de lancer le téléchargement du fichier alors que l’utilisateur croit avoir cliqué sur un « simple » lien.

Idéalement il faudrait que chacun des liens pointant vers un fichier PDF soit clairement identifiable et précise le poids du fichier. C’est ce que je m’efforce généralement de faire en le précisant dans le lien mais il y a différentes possibilités :

C’est en tombant sur un article récemment publié (How should you display links to PDF files?) que j’ai eu envie de relancer ce vieux débat. Un débat ? Oui tout à fait, celui qui concerne les système de formatage automatique des liens en fonction du format des fichiers. Car le problème est que vous ne pouvez pas vous reposer sur la bonne volonté des rédacteurs qui n’auront pas toujours la conscience de préciser le format ainsi que le poids.

Il y a bien les recommandations d’Adobe en la matière (Use of Adobe icons and web logos) mais elles ne disent pas comment mettre ça en oeuvre de façon automatisée sur un existant avec une multitude liens dans une multitude de pages :

Adobe_PDF

Il existe des solutions pour faire cela avec les feuilles de style (Showing Hyperlink Cues with CSS) mais cela ne règle pas le problème de l’affichage du poids du fichier et vous pousse à reformater l’ensemble des liens (créant ainsi de la pollution visuelle) :

Hyperlink-Cues-CSS

Idéalement il faudrait limiter ce formatage supplémentaire (ajout d’un picto et du poids) aux liens pointant vers des fichiers et l’intégrer directement à l’outil de gestion de contenu qui se chargerait de rajouter un picto ainsi que de calculer et afficher le poids du document. Savez-vous si ce type de solution existe ?

Sinon il ne vous reste plus qu’à le faire à la main…

10 commentaires sur “Comment bien formater un lien vers un fichier PDF ?

  1. Comme souvent, au niveau du CMS, on a deux problématiques différentes :

    1) Le cas où l’on utilise un contenu structuré, et où le fichier vers lequel on pointe est en fait le contenu d’un champ de type fichier. Dès lors, le rendu est très simple à gérer, en particulier sous Drupal par exemple. Donc, dans ce cas là, si le rendu n’est pas comme on le souhaite : picto intitulé (type, taille), quelqu’un qui connait un minimum Drupal peut régler ça en 5 minutes.

    2) Le cas où l’on se trouve dans un éditeur WYSIWYG. Dès lors, l’utilisateur à la main sur l’intitulé des liens, donc : problème. Même si un outil générait automatiquement un intitulé de lien correct, certains s’empresseraient de supprimer cette parenthèse « inesthétique », ajoutée après le lien qu’ils ont inséré. C’est le problème classique des WYSIWYG : difficile de maitriser le html généré et son rendu.

    Un mix des deux serait sans doute intéressant : un éditeur WYSIWYG qui « verrouillerait » certaines portions de contenu. Par exemple, qui figerait un picto et le type et taille de fichier, pour ne laisser la place qu’a l’édition d’un intitulé, lorsqu’on insère un lien vers un fichier. Resterait à voir la tolérance des utilisateurs vis à vis d’un tel outil. Concernant ce dernier point, j’ai peur d’avoir mon idée.

  2. A mon avis PHP propose tout les outils pour faire ce genre de modification (ajout d’image, calcul de taille)
    Ca m’étonnerais grandement que ca n’existe pas pour WordPress.

    Techniquement d’ailleurs, il me semble que c’est mieux si l’image n’en est pas une (au format HTML): je serais plutôt pour l’ajout d’un padding dans de lien, ajout de l’icone en background une fois (CSS). De cette manière quand la souris s’approche de l’icone, le lien décrivant le fichier passe en :hover (et change de couleur comme sur ce site).

    Autre remarque: est ce que la taille du fichier est vraiment nécéssaire de nous jours ?

    Encore une chose: que préconises tu pour l’accessibilité? Indiquer quelque chose comme « Fichier PDF » dans l’attribut title ?

  3. @ Marco > Idéalement il faudrait deux possibilités dans l’éditeur WYSIWYG : « Insérer un lien » et « Insérer un fichier ». Je penche moi aussi pour une limitation drastique des possibilités de formatage dans un éditeur WYSIWYG (ça finit toujours pas dégénérer).

    @ Jmini > Oui le poids est nécessaire car certains fichiers PDF peuvent dépasser les 5-10 Mo et tout le monde ne dispose pas d’une liaison ADSL2+. Pour l’accessibilité je préconise de mentionner le format dans l’attribut (idéalement).

  4. Personnellement, j’ai pris la (mauvaise) habitude de mettre les infos supplémentaires dans l’attribut title du lien vers le fichier (Télécharge ‘nom du fichier’ type du fichier – poids) pour ne pas polluer visuellement l’affichage. Alors que c’est une information qui devrait être affichée en dur dans la page : Je vais peut-être pas commencer à télécharger un PDF de 10Mo si je suis en train de surfer sur mon mobile en 3G.

    L’icône du type de fichier est gérée via des styles CSS spécifique au format de fichier (pdf, doc, zip, etc.). Soit en ajoutant un class= »pdf » par exemple, soit en utilisant directement la syntaxe CSS a[type= »application/pdf »] pour cibler tous les liens qui ont l’attribut type= »application/pdf ». La deuxième méthode demande que cette information soit insérée par le CMS à l’upload de fichier mais ne sera pas disponible si c’est un simple lien vers un fichier hébergé sur un site externe.

    Les styles pour les fichiers peuvent être aussi disponibles dans l’éditeur WYSIWYG ((F)CKEditor dans le CMS Automne que j’utilise par exemple) pour que les utilisateurs qui insèrent des liens vers des fichiers bénéficient de la même présentation.

  5. Tout dépend du public cible. La plupart des gens ne font pas la différence entre 5 Ko et 5 Mo, d’ailleurs ils ne savent pas ce que cela veut dire. Pour les autres, ils sont généralement équipés d’une bonne connexion internet et rare sont les fichiers PDF de plus de 10 Mo.

    Personnellement, j’utilise un plug-in sur Firefox pour m’afficher l’icône de l’extension qui se cache derrière chaque lien. De cette manière, je n’ai pas de surprise en cliquant sur les hypertextes. On peut également regarder dans la barre d’état (en bas à gauche) mais on ne voit pas l’extension pour les url à rallonge.

  6. J’en profite au passage pour indiquer que kilo octet doit s’écrire ko (et non Ko)en abrégé car le K est l’unité de mesure du Kelvin et non du kilo (qui est k)

  7. C’est l’objet de deux « bonnes pratiques » de la prochaine version du référentiel Opquast

    N°CD-070 – Le format des fichiers proposés en téléchargement est indiqué. – Niveau 1 – Rubrique : Fichiers et multimédia – Sous-rubrique : Téléchargement
    http://www.opquast.org/index.php/opquast_org/tests/view?details=1&id=70

    N°CD-072 – La taille des fichiers internes proposés en téléchargement est indiquée. – Niveau 2 – Rubrique : Fichiers et multimédia – Sous-rubrique : Téléchargement
    http://www.opquast.org/index.php/opquast_org/tests/view?details=1&id=72

    Profitez en pour noter et donner votre avis sur ces bonnes pratiques !

    A mon sens, il n’est peut être pas nécessaire de spécifier la taille du lien tout le temps. Mais au moins quand la taille est importante.

    Nathalie > On devrait même parler de kio (kibioctet : http://fr.wikipedia.org/wiki/Octet#Multiples)

  8. Très simple à mettre en place avec un bon CMS tel que Typo3. En effet, on peut insérer des liens de différentes manière, y compris dans l’éditeur WYSIWYG, mais il y a un traitement de tous les types de contenu avant l’affichage (et un système de cache très puissant pour éviter les pertes de perf.)

    Donc en se penchant sur ce problème une fois sur un site, on peut l’appliquer sur tous les sites utilisant Typo3. Il faut que je note ça quelque part, je vais peut-être en faire un article un jour, ça serait un bon exercice pour les développeurs qui débutent.

  9. En effet les CMS prévoient souvent ce cas de figure ou en tout cas donnent la possibilité de le mettre en place. Dans SPIP, balises et filtres ad hoc permettent d’afficher automatiquement le picto correspondant au type de fichier, son type et son poid. Le gabarit de la page peut donc le prévoir aussi bien pour les fichiers associés à la page, que pour ceux insérés dans le texte.

Laisser un commentaire