Readers ask Gerry Webgärtner. Today:

Gerry, how do you actually take a screenshot of a homepage or a complete website? 

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 a 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 be able to talk about conditions.

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 page headers and page ends.

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 appears.
   
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 headline of the plugin (in our case "Full website screenshots (hearts, hearts etc.)" to open the detail page.
   
5. On the details page, click on the button "Add to Firefox".
   
6. You must now confirm the addition once again by clicking on the action "Add" in the small window at the top right. A small note: The default settings for this plugin are already very well chosen. I recommend that you leave the box "Allow the extension to run in private windows" unchecked.
   
7. Done - now the fun can begin. You should now see the icon of the screenshot apparillo 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 start page.

1. Enter "bahn.de" in the Firefox address window. The Deutsche Bahn homepage will load.
2. Click on the new icon in the top right-hand corner. A drop-down menu appears in which you select the command "Record whole page" (immediately first).
   
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