How to make a screenshot of the complete homepage

 

(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.
   
2. Click on "Extensions" on the left-hand side
   
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.
   
4. Click on the caption of the plugin (in our case "Complete website screenshots (hearts, hearts etc.)" to open the detail page.
   
5. On the details page, click on the "Add to Firefox" button.
   
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.
   
7. Done - now the fun can begin. You should now see the screenshot app icon in your plugin bar.
   

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).
   
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