Share Responsive Web Design Layout Screenshots with Chrome Extension “Full Page Screen Capture”

share responsive design screenshots article banner

Are you making every web design preview in Photoshop? Does it take time for every change you need to make for multiple browsers?

If you are in your frontend web development phase and would like to quickly share screenshots of live results, the Google Chrome extension “Full Page Screen Capture” will make your processes so much faster.

You will be able to capture exactly what the Google Chrome browser and user sees, instead of a theoretical design that has not been tested on browsers.

No more cutting and pasting image files!

First, open Google Chrome and get the Chrome Extension at the Chrome Web Store.

chrome store responsive screenshots extension

Select “Add To Chrome” and install to your browser. Restart your browser or computer if necessary.

A “Full Page Screen Capture” icon will show in your Chrome browser menu bar.

share responsive screenshots chrome icon

 

Go to a website you would like to capture a screenshot and select the “Full Page Screen Capture” icon.

Share Responsive Web Design Layout Screenshots  loading screen

Do not touch anything while the extension scans the website, otherwise your progress will be canceled.

 

Responsive Web Design Layout Screenshot Example

Once the capture is completed, a new tab will open with name “Full Page Screen Capture”. A full resolution screen capture will be displayed in the center of the page. Right-click the image and save the image.

 

Screen Capture Responsive Layouts

On the page that you want to show responsive layouts, press F12 to open Chrome Developer Tools. These tools will allow you to test different resolution sizes on the page you are showing.

Responsive Screenshot example

If you cannot see device options, make sure the blue “Toggle device toolbar” icon is selected in the Developer Tools panel.Developer Tools selection for responsive screenshot

Right-click the image to save the full resolution screenshot of your responsive layout.

example of mobile responsive layout screenshot

What You Should Know

Websites that have interactive content and fixed objects may not show correctly in the screenshot. You should disable or fix the interactive objects in the state you would like to show in the screenshot. Otherwise, you can use 3rd party image editing tools to refine your screenshot before delivering.

Get Google Chrome

https://www.google.com/chrome/

Get Full Page Screen Capture Extension

https://chrome.google.com/webstore/detail/full-page-screen-capture/fdpohaocaechififmbbbbbknoalclacl

Google Browser Size Tool

All web designers today must pay attention to additional aspects such as SEO and conversion data.

See Google Browser Size Tool to get a better idea about what users can actually see without scrolling (numbers ofcourse don’t include less space taken from toolbars and funny browser bars)

Oh, users can only see first row of 3 products without scrolling

Enjoy!

Nofollow Chrome Extension

See Astral Web’s Chrome Extension for easy to find out nofollow links on any page.

Description – Hover over a webpage link to discover if it is a follow of nofollow link. Great for SEO work & link building. Utilizes robots.txt, meta robots tag and rel for nofollow diagnosis. Currently does not work with javascript links.

Get nofollow chrome extension