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:
- 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.
- Click on "Extensions" on the left-hand side
- 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.
- Click on the headline of the plugin (in our case "Full website screenshots (hearts, hearts etc.)" to open the detail page.
- On the details page, click on the button "Add to Firefox".
- 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.
- 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.
- Enter "bahn.de" in the Firefox address window. The Deutsche Bahn homepage will load.
- 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).
- 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.
- 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, 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.
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.
"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.
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?
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.
