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:
- Ö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.
- Klicken Sie auf der linken Seite auf "Erweiterungen"
- 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.
- Klicken Sie auf die Übrschrift des Plugins (in unserem Fall "Vollständige Website Screenshots (Herzchen, Herzchen usw.)" um die Detailseite zu öffnen.
- Auf der Detailseite klicken Sie auf den Button "Zu Firefox hinzufügen".
- 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.
- Fertig - jetzt kann der Spaß beginnen. Sie müssten jetzt das Icon des Screenshot-Apparillos in Ihrer Plugin-Leiste sehen.
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.
- Geben Sie in dem Adressfenster von Firefox "bahn.de" ein. Die Startseite der Deutschen Bahn wird geladen.
- 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.
- 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.
- 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, 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 Bedeutung kurzer Ladezeiten für das Ranking betonen. Um die Ladezeit optimieren zu können, sind zunächst aussagekräftige Messmethoden nötig.
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 Handel zu betreiben. Mit WordPress und WooCommerce ist der Start zudem recht einfach.
„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. Praktischerweise bekommt der neugierige Web-Gärtner mit einem zeitgemäßen Browser alle Werkzeuge dafür an die Hand.
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 und was kann man tun?
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 dem Inhalt.
