PDF

10min

leicht

-

Das Portable Document Format (PDF; deutsch: (trans)portables Dokumentenformat) ist ein plattformunabhängiges Dateiformat für elektronische Dokumente, das von Adobe Systems entwickelt wurde.

Ziel war es, Dokumente unabhängig vom ursprünglichen Anwendungsprogramm, vom Betriebssystem oder von der Hardwareplattform originalgetreu weitergeben zu können. Ein Leser einer PDF-Datei soll das Dokument immer in der Form betrachten und ausdrucken können, die der Autor festgelegt hat. Die typischen Konvertierungsprobleme (wie veränderter Seitenumbruch oder falsche Schriftarten) beim Austausch eines Dokuments zwischen verschiedenen Programmen entfallen dadurch.

Neben Text, Bildern und Grafik kann eine interaktive PDF-Datei auch Hilfen wie …

• anklickbare Inhaltsverzeichnisse
• miniaturisierte Seitenvorschauen
• Formularfunktionen

enthalten.

Empfehlung: Wenn du PDF-Dokumente erzeugst, wähle eine möglichst hohe Version, da so die Dokument-Größe reduziert wird. Da der Adobe-PDF-Reader automatisch aktualisiert wird, haben Benutzer im Allgemeine neueste Versionen verfügbar.

PDF-Dateien in Webseiten

PDF-Dateien sind populär, um druckoptimiert Erzeugnisse auszuliefern. Auch wenn mittlerweile kein Plugin oder gar eine externe Applikation mehr benötigt wird, um PDFs darzustellen, stellen sie für den Anwender einen überraschenden Ausstieg aus dem UI der Webseite dar.

• Markiere solche Links besonders, die PDF-Files ausliefern.
  → Links auf unterschiedliche Dokumenttypen kennzeichnen
• Gib bei PDF-Links auch die Dateigröße an, damit ein Benutzer entscheiden kann, ob er oder sie das Downloadvolumen vielleicht vermeiden möchte.
• Auch bei PDF-Dateien gilt es, Richtlinien zur Barrierefreiheit zu beachten.

Barrierefreie PDFs? - Gibt es nicht!

Es gibt einige Anleitungen im Netz PDFs so zu erstellen, dass sie barrierefrei sein sollen. In den WCAG gibt es Regeln, die versuchen Standards für PDFs zu setzen.

Trotzdem ist ein PDF eine Abweichung vom gewohnten Design der Webseite. Auch wenn man auf Tabellen und Mehrspaltenlayout verzichtet, werden PDFs auf mobilen Geräten mit kleinen Bildschirmen nicht responsiv dargestellt und der Leser muss auch horizontal scrollen.

Empfehlung: Veröffentliche alle Inhalte deiner Webseite als HTML!
Falls einzelne Seiten oder Formulare archiviert und ausgedruckt werden sollen, kann man einen Print-Button zur Verfügung stellen.

PDFs sollten …

• einen Seitentitel haben, der anstelle des Dateinamens im Tab erscheint und vorgelesen wird.
• eine Sprachangabe haben und Sprachwechsel auszeichnen, damit Wörter in anderen Sprachen richtig ausgesprochen werden.
• gute Überschriften haben, die den Text gliedern.
• Alternativtexte für Bilder enthalten.
• Listen als solche auszeichnen.
• Links durch aussagekräftige Linktexte ergänzen.
• Text sollte in ausreichender Schriftgröße mit hohem Kontrast gute Lesbarkeit ermöglichen.

PDFs ausdrucken

Jedes HTML-Dokument, jedes SVG und andere Bildformate können vom Browser ausgedruckt, aber auch als PDF druckfertig umgewandelt und für einen späteren Druck gespeichert werden.

Man kann Nutzern das Drucken und Speichern erleichtern, wenn man einen Print-Button einfügt:

Print-Button

    <button class="print-button" onclick="printPage()">Seite ausdrucken oder als PDF speichern</button>

    <script>
        function printPage() {
            window.print(); // Öffnet den Print-Dialog des Browsers
        }
    </script>

Dabei sollte natürlich auch das Print-CSS so optimiert werden, dass Kopf- und Fußzeilen, Navigation und andere Elemente wie Suchfelder oder auch der Print-Button selbst ausgeblendet werden.

@media print {
    .print-button {
        display: none;
    }
}

Aber auch ohne unsere Unterstützung klappt das heutzutage mit Browser- und System-Funktionen:

Firefox

Druckdialog:

Chrome

Druckdialog:

Safari

Druckdialog auf einem Mac:

Auf einem iPhone (je kleiner der Bildschirm, desto komplizierter die Bedienung): unten auf "teilen" / auf "Optionen" / auf "PDF" und Haken / dann erscheint die Taste "In Dateien sichern".

Siehe auch

• 

  Print-CSS (Druckausgabe)

  Druckvorlagen im Stylesheet anlegen

   
• 

  Formulardaten als PDF ausgeben

  Formular ausfüllen und als Bestätigung ausdrucken

   
• 

  Spickzettel -
  PDFs mit HTML erstellen