Startseite » Blog » Interne Meldungen » Wie man einen Screenshot der kompletten Homepage macht

gerry_pflanze

Wie man einen Screenshot der kompletten Homepage macht

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

Leser fragen Gerry Webgärtner. Heute:

Gerry, wie macht man eigentlich einen Screenshot von einer Homepage oder einer kompletten Webseite? 

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

Pagespeed: Schnelle Seiten sind wichtig wie eh und je

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

12. Januar 2021

Pagespeed, die Ladezeit einer Website, ist ein Thema, das in der Entwicklung und im Betrieb von Websites wieder mehr an Bedeutung gewinnt. Zwar ist die Geschwindigkeit üblicher Internetverbindungen stetig gestiegen, gleichzeitig werden Web-Anwendnungen tendenziell komplexer und umfangreicher: Content-Management-Systeme mit kompletten […]

E-Commerce im kleinen Einzelhandel könnte so aussehen: Mit QR-Code gelabeltes Obst

E-Commerce: Webshop erstellen

21. Januar 2021

Einfacher als gedacht: Jetzt den eigenen Webshop erstellen mit WordPress und WooCommerce. 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, was vor allem den Branchenriesen wie Amazon […]

Fahndungsplakat: Schriftart gesucht

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

5. Dezember 2019

Gerrys Kurzanleitung mit Google Chrome Browser Schriftart auf der Website wählen Kontextmenü (rechte Maustaste). „Untersuchen“ wählen Auf Tabreiter „Computed“ klicken Scrollen bis Eintrag „Font-Family“ erscheint. Die erste aufgeführte Schriftart ist die gesuchte. („Roboto Slab“ in diesem Fall für unsere Überschriften) […]

Fassungslosigkeit vorm Bildschirm: Browser zeigt nicht das Gewünschte an

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

3. August 2020

Immer wieder unschön: Man schlägt sich die Nacht mit Änderungen um die Ohren, stellt alles online, schickt die Mail an den Kunden, freut sich, dass alles termingerecht erledigt wurde und dann kommt die Rückmeldung: „Bei mir sieht noch alles so […]

Bilder, Schere, Messwerkzeuge, um Bilder auf die richtigen Maße zu bringen

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

3. Dezember 2019

1. Welche Größe? Aus technischer Sicht allgemeingültige Vorgaben zu machen für die Mindest- oder Höchstgrößen von Bildern im Web ist zunehmend schwierig. Die sich weiterentwickelnde Display-Technik mit immer besserer Darstellungsqualität einerseits und immer höhere Geschwindigkeiten bei der Datenübertragung andererseits machen […]

Wir rufen Sie gerne zurück.

Scroll to Top