StartBlogInternal messagesHow to make a screenshot of the complete homepage
gerry_plant

How to make a screenshot of the complete homepage

(even if the homepage goes beyond the screen)

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.
    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 headline of the plugin (in our case "Full website screenshots (hearts, hearts etc.)" to open the detail page.
    Screenshot installation Fireshot search result
  5. On the details page, click on the button "Add to Firefox".
    Screenshot Installation Fireshot Installation
  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.
    Screenshot Installation Fireshot Add Screenshot Installation Fireshot Private Window
  7. Done - now the fun can begin. You should now see the icon of the screenshot apparillo 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 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).
    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

Pagespeed: Fast pages are as important as ever

Pagespeed analysis made easy - measure the loading time of my homepage with one mouse click

12 January 2021

Pagespeed, the loading time of a website, is a topic that is once again gaining importance in the development and operation of websites. Last but not least, Google, as probably the most important search engine provider, never tires of emphasising the importance of short loading times for the ranking. In order to be able to optimise the loading time, meaningful measurement methods are first necessary.

E-commerce in small retail could look like this: Fruit labelled with a QR code

E-commerce: Create a webshop

21 January 2021

The ongoing Corona crisis is forcing many shops, especially smaller ones, to close their local shops for longer and longer periods. Online retail, however, is flourishing.
In this situation, even small traders have the chance to trade successfully online with good ideas. With WordPress and WooCommerce, it is also quite easy to get started.

wanted poster: font wanted

What fonts are used for headings and text on our site?

5 December 2019

"That looks nice though, I wonder what kind of font that is? And what colour?" In web development, as in gardening, it is always interesting to look at the results of other creators. Conveniently, the curious web gardener is given all the tools to do so with a contemporary browser.

Bewilderment in front of the screen: Browser does not display what you want

Help, my Firefox, Chrome, Safari, Edge is showing me old or broken content....

3 August 2020

After changes have been made in the context of website maintenance, we often receive feedback from customers such as "Everything still looks the same on my site" or "But now the website is completely broken!"
What is going on and what can be done?

Pictures, scissors, measuring tools to bring pictures to the right dimensions

How big do photos actually have to be that you place in the margin or in a gallery?

3 December 2019

If you want to embellish your web garden with new images, first make sure you know the maximum planned display size of the graphics and scale the image files to this pixel size. The suitable file format for the output results from the content.

We will be happy to call you back.

Scroll to Top