Capture screenshot: Best friend to UX user experience designer
You’re a conducting a competitor audit. You want to take a full page screenshot of your competitor’s brand new campaign. You have 13 direct competitors. They each launch a new campaign every week. They each have a desktop, tablet and mobile website. Sure, it’s responsive, but they each look totally different. That’s 2,028 screenshots per year. Do yourself a favour—check out this tutorial. In this walkthrough, we’ll learn how to take a full page screenshot in Safari for Mac. Better yet, it doesn’t require a plugin or extension—excellent!
Open Safari for Mac
Look at the Safari menu bar. See the Develop menu? No? Follow the next step.
Enable Develop menu
Click Safari, then Preferences (⌘,). Open the Advanced tab. Then, check Show Develop menu in menu bar. This will enable Develop mode.
With Develop enabled, right-click the browser window. There, you’ll see Inspect Element. You’ll see several new tabs. Click the Elements tab.
Scroll to the top of the Elements window. There, you’ll find a purple HTML tab.
Right-click the purple HTML tab. You’ll see an option to Capture Screenshot. Click Capture Screenshot to take your full page screenshot. Save the screenshot.
Responsive full page screenshot
Now, the Develop menu is super useful. I use Responsive Design Mode on a daily basis—to check out mobile and tablet websites in Safari for Mac. Click Develop, then Enter Responsive Design Mode.
I’ll cover Responsive Design Mode in a future tutorial. For now, we’re interested in screenshotting our mobile website.
Click iPhone 8 to preview our website in a mobile format.
As before, open Inspect Element and find the purple HTML tag. Like before, click Capture Screenshot.
Save the high-resolution mobile screenshot.
Need more content? Why not learn how to compress Adobe Illustrator files with Create PDF Compatible File. Still don’t have an Adobe Creative Cloud subscription? Click here to make an account.