Start / Website guide / Internal messages / How to make a screenshot of the complete homepage

Website maintenanceHow to make a screenshot of the complete homepage

Gerry the web gardener answers the question how to make a screenshot of a complete homepage.

Matthias Speth, 20 August 2019

Picture of a beautifully tidy garden

gerry_plant

 

(even if the homepage goes beyond the screen)

Readers ask Gerry Webgärtner. Today:

Dear readers,

There are always situations in which you want to quickly take screen recordings, or so-called screenshots, of websites. For example, it is useful when you want to document a certain state of the website or errors.

Or you are currently the client in a web project and want to send your agency comments on the status. Sometimes websites look different on different browsers (Chrome, Firefox, Edge, Safari, Opera, etc.) - to avoid communication misunderstandings, visualisation with a screenshot is the best way to talk about statuses.

The problem is usually: with longer pages, you only see the respective section and not the complete page, so the on-board tools of Windows or Mac OS are cumbersome at this point.

With the "Print" command in the web browser, you can print the complete page, but it usually looks different than on the screen, and you also have interruptions due to the page header and page end.

Fortunately, there are many solutions on the market. Once set up, you can use this method again and again. Sending the screenshots by e-mail takes just 2-3 minutes with the right tool.

Here is a step by step guide for the Firefox browser on the desktop.                                           Other instructions will follow soon 🙂

Installation of the screenshot plugin for Firefox:

  1. Open the Firefox browser, click on the menu icon (hamburger icon) on the right-hand side and click on "Add-ons". The page of your existing extensions will appear.
    Screenshot Installation Fireshot Open Firefox Menu
  2. Click on "Extensions" on the left-hand side
    Firefox settings
  3. In the text field to the right of "Search for more extensions", enter "FireShot" and press the Return key. The corresponding extension should now be displayed as the first search result.
    Enter Firefox plugin name in search window
  4. Click on the caption of the plugin (in our case "Complete website screenshots (hearts, hearts etc.)" to open the detail page.
    Screenshot installation Fireshot search result
  5. On the details page, click on the "Add to Firefox" button.
    Screenshot Installation Fireshot Installation
  6. You must now confirm the addition once again by clicking the "Add" action in the small window at the top right. A small note: The default settings for this plugin are already very well selected. I recommend that you leave the "Allow the extension to run in private windows" box unchecked.
    Screenshot Installation Fireshot Add Screenshot Installation Fireshot Private Window
  7. Done - now the fun can begin. You should now see the screenshot app icon in your plugin bar.
    Screenshot Installation Fireshot 1st step

Record the homepage as a PDF (or image)

Now let's take a screenshot of a complete website. We will use "bahn.de" as an example, which is never stingy with too little content on the homepage.

  1. Enter "bahn.de" in the Firefox address window. The Deutsche Bahn homepage will load.
  2. Click on the new icon at the top right. A drop-down menu appears in which you select the "Record entire page" command (first thing).
    Screenshot of a homepage application
  3. The recording starts immediately. The page now automatically scrolls to the end and all visible areas are recorded and automatically lined up to create a full recording.
  4. Then you get a dialogue again asking you in which format the output should be saved. I recommend PDF, then you can additionally edit it later or add keywords.

Enclosed is a FireShotCaptureXXX-Example_DBs (We compressed the PDF drastically afterwards to reduce the file size, hence the somewhat blurry shot).

Have fun,
Your Gerry

See also