Website-Pflege

Wie man einen Screenshot der kompletten Homepage macht

20.08.2019

Bild eines schönen aufgeräumten Gartens

gerry_pflanze

 

(auch wenn die Homepage über den Bildschirm hinaus geht)

Leser fragen Gerry Webgärtner. Heute:

Liebe Leser,

es gibt immer wieder Situationen, in denen man schnell mal Bildschirmaufnahmen, oder so genannte Screenshots, von Webseiten machen möchte. Zum Beispiel ist es nützlich, wenn man einen bestimmten Zustand der Website oder Fehler dokumentieren will.

Oder Sie sind gerade Auftraggeber in einem Web-Projekt und wollen Ihrer Agentur Anmerkungen zum Stand schicken. Manchmal sehen Websites auf verschiedenen Browsern (Chrome, Firefox, Edge, Safari, Opera, etc.) anders aus – um Kommunikationsmissverständnissen aus dem Weg zu gehen ist die Visualisierung mit einem Screenshot die beste Methode, um über Zustände reden zu können.

Das Problem ist meistens: Bei längeren Seiten sieht man nur den jeweiligen Ausschnitt und nicht die komplette Seite, daher sind die Bordmittel von Windows oder Mac OS an dieser Stelle mühselig.

Mit dem „Drucken“ Befehl im Web-Browser können Sie zwar die komplette Seite ausdrucken, aber sie sieht meistens  anders aus als auf dem Bildschirm, zudem haben Sie Unterbrechungen durch Seitenkopf und Seitenende.

Zum Glück gibt es dafür jede Menge Lösungen auf dem Markt. Einmal eingerichtet kann man diese Methode dann immer wieder benutzen. Die Screenshots dann per E-Mail zu versenden dauert mit dem richtigen Tool gerade mal 2-3 Minuten.

Hier ist eine Schritt für Schritt Anleitung für den Firefox-Browser auf dem Desktop.                                           Andere Anleitungen folgen bald 🙂

Installation des Screenshot-Plugins für Firefox:

  1. Öffnen Sie den Firefox-Browser, klicken Sie auf das Menü-Symbol (Hamburger-Icon) auf der rechten Seite und klicken Sie auf „Add-Ons“. Es erscheint die Seite Ihrer vorhandenen Erweiterungen.
    Screenshot Installation Fireshot Firefox Menü aufrufen
  2. Klicken Sie auf der linken Seite auf „Erweiterungen“
    Firefox Einstellungen
  3. In dem Textfeld rechts neben „Weitere Erweiterungen suchen“ geben Sie „FireShot“ ein und drücken Sie die Return-Taste. Die entsprechende Erweiterung müsste jetzt als erstes Suchergebnis angezeigt werden.
    Firefox Pluginname in Suchfenster eingeben
  4. Klicken Sie auf die Übrschrift des Plugins (in unserem Fall „Vollständige Website Screenshots (Herzchen, Herzchen usw.)“ um die Detailseite zu öffnen.
    Screenshot Installation Fireshot Suchergebnis
  5. Auf der Detailseite klicken Sie auf den Button „Zu Firefox hinzufügen“.
    Screenshot Installation Fireshot Installation
  6. Sie müssen jetzt das Hinzufügen noch einmal bestätigen, indem Sie oben rechts auf das kleine Fenster die Aktion „Hinzufügen“ klicken. Ein kleiner Hinweis: Die Voreinstellungen für dieses Plugin sind bereits sehr gut gewählt. Ich empfehle Ihnen, das Kästchen „Ausführen der Erweiterung im privaten Fenstern erlauben“ ausgeschaltet zu lassen.
    Screenshot Installation Fireshot Hinzufügen Screenshot Installation Fireshot Private Fenster
  7. Fertig – jetzt kann der Spaß beginnen. Sie müssten jetzt das Icon des Screenshot-Apparillos in Ihrer Plugin-Leiste sehen.
    Screenshot Installation Fireshot 1. Schritt

Aufzeichnen der Homepage als PDF (oder Bild)

Nun wollen wir einmal einen Screenshot einer kompletten Website aufnehmen. Als Beispiel dient uns „bahn.de“, die nie mit zu wenig Inhalt auf der Startseite geizt.

  1. Geben Sie in dem Adressfenster von Firefox „bahn.de“ ein. Die Startseite der Deutschen Bahn wird geladen.
  2. Klicken Sie oben rechts auf das neue Icon. Es erscheint ein Drop-Down Menü, in dem Sie den Befehl „Ganze Seite aufnehmen“ (Gleich als erstes) auswählen.
    Screenshot einer Homepage Anwendung
  3. Die Aufnahme startet sofort. Die Seite scrollt jetzt automatisch bis ans Ende und dabei werden alle sichtbaren Bereiche aufgenommen und automatisch aneinander gereiht, so dass eine volle Aufnahme entsteht.
  4. Anschließend erhalten Sie wieder einen Dialog, in dem Sie gefragt werden, in welchem Format die Ausgabe gespeichert werden soll. Ich empfehle Ihnen PDF, dann können Sie es später noch zusätzlich bearbeiten oder mit Schlagworten versehen.

Anbei ein FireShotCaptureXXX-Beispiel_DBs (Wir haben das PDF anschließend drastisch komprimiert, um die Dateigröße zu reduzieren, daher die etwas verschwommene Aufnahme)

Viel Spaß,
Euer Gerry

Siehe auch