If you’re an agency or a company that has a portfolio of sites or pages that you wish to share online, you’ve probably gone through the pain of trying to capture uniform screenshots of each of the sites.
One of the clients that we’re working with builds hosted Intranet solutions that can be internally hosted within the confines of a company. Intranets are incredibly helpful for companies to communicate company news, distribute marketing information, provide benefits information, etc.
We helped OnSemble migrate their Intranet solution out of their parent company’s website. It was an extensive project that incorporated everything from building out new social profiles, updating Marketo, and then disassembling some of the custom development that they’d done in the past to combine their sites.
Client Screenshots With Google Chrome
You may not realize this, but you can capture perfect screenshots with Google Chrome’s built-in set of robust developer tools. Interestingly, it’s not a very well-known feature despite it having amazing flexibility.
Here’s a quick video tutorial on how to take a perfect, specifically sized, screenshot of a web page using Google Chrome:
Steps To Take A Screenshot With Google Chrome
Google Chrome’s Developer Tools have the option to preview a site using its device toolbar. The tool was built so that developers could see how the site looked in different viewport sizes across different devices… but it happens to also be a perfect way to get a perfectly sized screenshot of a web page.
In this case, we want each of OnSemble’s key clients across industries that have built beautiful Intranet sites to take a screenshot so that we can display them all within a portfolio on their website. We want the pages to be 1200px wide by 800px tall. To accomplish this:
- In the far right navigation button (3 vertical dots), select the Customize and Control Menu.
- Select More Tools > Developer Tools
- Toggle the Device Toolbar to bring up the device options and dimensions.
- Set the first option to Responsive, then set the dimensions to 1200 x 800 and hit enter. The page will now display with those dimensions.
- On the right side of the Device Toolbar, click the navigation button (3 vertical dots) and select Capture Screenshot.
- Google Chrome will take a perfect screenshot and drop it into your Downloads folder where you can attach and send it in an email. Be sure not to select full size screenshot since that will take the entire length of the page and ignore your height limit.
Google Chrome Keyboard Shortcuts for Screenshots
If you’re a keyboard shortcut master, you can also just take a full-page screenshot with these shortcuts. I don’t like this approach as I can’t set the maximum height of the viewport… but it comes in handy if you ever needed an entire page’s screenshot.
Keyboard Shortcuts on a Mac:
1. Alt + Command + I
2. Command + Shift + PKeyboard Shortcuts on in Windows or Linux:
1. Ctrl + Shift + I
2. Ctrl + Shift + P