20.08.2019

Website-Pflege

Wie man einen Screenshot der kompletten Homepage macht

Inhaltsverzeichnis

(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

Mehr zu diesem Thema

Pagespeed-Analyse leicht gemacht – die Ladezeit meiner Homepage messen mit einem Mausklick

Pagespeed, die Ladezeit einer Website, ist ein Thema, das in der Entwicklung und im Betrieb von Websites wieder mehr an Bedeutung gewinnt. Nicht zuletzt wird gerade Google als wohl wichtigster Suchmaschinenanbieter nicht müde, auf die…

Zum Artikel…

E-Commerce: Webshop erstellen

Die andauernde Corona-Krise zwingt viele, gerade auch kleinere, Geschäfte zu immer längeren Schließungen der Ladengeschäfte vor Ort. Der Online-Handel jedoch blüht. In dieser Situation haben auch kleine Händler die Chance, mit guten Ideen erfolgreich online…

Zum Artikel…

Welche Schriftarten werden für Überschriften und Texte auf unserer Seite benutzt?

"Das sieht aber nett aus, was das wohl für eine Schriftart ist? Und was für eine Farbe?" In der Web-Entwicklung wie im Garten ist es immer interessant, sich mit den Ergebnissen anderer Schaffender zu befassen.…

Zum Artikel…

Hilfe, mein Firefox, Chrome, Safari, Edge zeigt mir alte oder kaputte Inhalte an…

Nach erfolgten Änderungen im Rahmen der Website-Pflege erhalten wir von Kunden öfter Rückmeldungen wie "Bei mir sieht noch alles so aus wie vorher" oder "Jetzt ist die Website aber ganz kaputt!" Was ist da los…

Zum Artikel…

Wie groß müssen eigentlich Fotos sein, die man am Rand oder in einer Galerie platziert?

Wer seinen Web-Garten mit neuen Bildern verschönern möchte, vergewissert sich zunächst einmal über die maximale geplante Darstellungsgröße der Grafiken und skaliert die Bilddateien auf diese Pixelgröße. Das geeignete Dateiformat für die Ausgabe ergibt sich aus…

Zum Artikel…