fbpx
Download the User Profiles Worksheet A Dead-Simple Solution for Helping Clients Plan Their Priority Website Content
The Admin Bar

Best Browser Extensions for Web Designers

September 24, 2020

By: Kyle Van Deusen

Filed Under:

This page contains affiliate links in accordance with our affiliate policy.

Recently on the podcast I mentioned the browser extension "MeasureIt!" to Matt because I thought it would save him some time.

It got me to thinking about how much I use these browser extensions, and what ones I might be missing. 

I thought I'd share with you the ones I keep handy, why I like them, and ask you if I'm missing any must-have's.

My List of Must-Have Browser Extensions

Using the Chrome store here (sorry, FireFox users) since I've switched to using Microsoft Edge and all the extensions are compatible. 

Hoverify

This is, without doubt my favorite extension... It's an all-in-one tool for web development that gives you the ability to:

  • Inspect elements way easier than the inspector tool (fonts, sizes, CSS properties, etc.)
  • Pick colors (and copy or save!) from any page
  • Take screenshots
  • Copy CSS / Export to CodePen in one click
  • See the technology used to build a website
  • Download all the assets from a page (images, videos, etc.)
  • View a page in responsive modes across a multitude of devices

This one extension alone replaced 4 that I was using to do all of these things before. 

While many "all in one" solutions usually come with a compromise (compared to ones who focus on doing one thing) this extension is top of its class with all the features.

Nimbus Screenshot & Screen Video Recorder

Nimbus is super handy for taking screenshots of web pages and has a lot of goodies baked in. A few of the things I love are:

  • Take screenshots of what's visible
  • Take screenshots of the entire page
  • Annotate screenshots once you've taken them
  • Delayed screenshots (if you need to capture a drop-down or hover)

Their system for uploading the screenshot and giving you a quick-share link doesn't always work... And they've removed the "copy to clipboard" option (perhaps they moved it to the paid version)— still I haven't found a more useful extension on the market!

It might be worth mentioning that Nimbus stores a copy your screenshots on their server. So you might not want to use it for your sexy selfies.

Font Finder

Font finder is great for getting all the details about a typeface displayed on a website. Click the extension, then click any bit of text and a little popup will tell you:

  • The color (in Hex and RGB)
  • The background color
  • The font Family
  • Font Size
  • Line height
  • Letter spacing
  • Font weight
  • Font style

And a whole lot more.

ColorZilla

Need to find the hex value for any color on your screen? I rely on this extension multiple times each day— mostly because it’s simple to use! 

Simply click the extension, then click anywhere on your screen and the hex value of the color you selected will be copied to your clipboard automatically. 

It even keeps record of the recent colors you picked so you can go back and fetch them quickly.

BuiltWith Technology Profiler

I’ll admit, I dont understand all the information that BuiltWith spits out, but it does make taking a quick glance at the technology used to build a website pretty easy. 

In a practical sense, it usually satisfices my curiosity as to whether or not a website was built with WordPress— and even which plugins are being used in some cases.

Loom for Chrome

I’m a big fan of Loom (now that I’m running something using Chrome anyway) for creating quick videos for my clients or even my friends at TAB. 

The browser extension just makes it that much easier to hit the button and start recording right away without a bunch of setup (no more excuses!).

I find myself creating Loom videos much more often now that I have it as an extension than I did when I’d have to go to their website or open up the desktop app.

Page Ruler Redux

I was using MeasureIt!, but Lee at LDB Creative turned me onto Page Ruler Redux, which is fantastic!

Quickly and easily measure anything on a screen to get exact measurements, spacing, and a whole lot more.

This comes in especially handy when you are recreating something or "borrowing" some inspiration.

Honey

Honey goes out and finds coupon codes and deals at checkout. It doesn’t find deals for most of the things I buy but when it does I’m always thankful.

In fact, I never pay full price for a domain on NameCheap because the Honey extension always helps find a coupon code to save me at least 10%. 

A few suggestions from The Admin Bar community.

Since sending out this list in an email, I’ve received several suggestions for extensions from The Admin Bar community.

OneTab

OneTab lets you clear out the clutter of having 100 browser tabs open (admit it, you have at least 10 right now, don’t you?). The extension quickly puts all your open tabs into a list in ONE tab so you can quickly come back and access them as needed.

The extension claims to reduce memory consumption by up to 95%. Of course, I haven’t measured that— but it certainly helps! And let’s face it… with all these new browser extensions you’re installing, you could probably use all the memory help you could get ?

Thanks to Richard at RNR Design for the submission!

Window Resizer

Wonder what a page looks like at a certain resolution? The Window Resizer extension has a pretty cool trick! Instead of creating a container inside your browser (and kind of “faking” the resolution within a window) it automatically restores your browser window to the exact dimensions you select. You can choose from a ton of pre-selected sizes or type in your own.

The only thing that is a bit funky is when you want to view it on a screen resolution that is bigger than your monitor— easy solution: time to go monitor shopping!

Thanks to Karen at Brightgirl Designs for the submission!

Google Font Previewer

I could see Google Font Previewer coming in handy— with a couple clicks you can change all the fonts on a website to any Google font.

If you’re working on a redesign and want to see what a site might look like with some new typography— you can get a quick preview in just a few clicks of the mouse.

Not sure I’ll keep this one installed all the time, but I’ll likely grab it from time to time.

Thanks, Fola Design for the submission!

SEO Meta in 1 Click

All the work that went into creating this list and asking for feedback was worth it— just for finding SEO Meta in 1 Click!

Navigate to any website, click the browser extension, and get instant access to the: page title, meta description, author, publisher, headings, links scripts, images, links, social, and quick links to testing tools.

As Rosie from Wuf Design (who submitted this gem) said: “It’s great for a quick look at if a site has basic SEO, especially useful whilst on the phone to potential new client”.

Emoji Go

Need to copy a emoji to your clipboard? Emoji Go makes it easy and come with a great search function. 

Find the emoji you're looking for, click on it, and it's immediately in your clipboard for quick pasting. 

I bookmarked an emoji page a while back, but when Noah from Thrive Design shared this one with me I quickly replaced that system! 

Tag Assistant (By Google)

Tag Assistant is a handy little tool to make sure you've applied all your tags (like Analytics, for example) to your websites.  Anyone using Google Tag Manager will love this little extension! 

The Great Suspender

The Great Suspender will put your open but inactive tabs to sleep.  You can set the amount of time you want to wait before you suspend a tab, and even exclude tabs from being suspended.

This is a great, and automated, way of keeping your browser resources in check.

When you return to a suspended tab you can just click the page to have it refresh and open back up. 

Grid Ruler

I've always felt like a fool dragging a notepad file around trying to make sure things were aligned— but Grid Ruler solves this problem!

Quickly add the ability to drag rulers across any page. As a bonus it also works from inside page builders. A must have!

Website IP

When migrating websites from one server to another, I'm always anxious about propagation. This little plugin simply tells you the IP address a website is being served from so you and instantly see if your propagation has finished! Thanks for the share, Eric

Kyle's Headshot
Kyle Van Deusen
@kylevandeusen

Kyle is the co-host of The Admin Bar, the owner of a agency of one called OGAL Web Design and the co-founder of Docket WP. You’ll likely find him trolling The Admin Bar community.

Enjoy this? Tip Me a Taco

Join The Admin Bar Community
Tab Phone 3pt6
Black Icon 225Docket Wp Ml
Save Time, Improve Efficiency, & Make Fewer Mistakes
Learn More
Projecthuddle Light V2
A WordPress plugin for website & design feedback.
Learn More
Nurture Copy Logo Compressed (2)
Nurture better relationships through done-for-you email marketing
Learn More

More from The Bulletin Board

Book Recommendation

Recommended Reading

The best reads for web designers, agency owners, and freelancers.
Kyle Van Deusen
April 9, 2021
Sales

How To Sell Copywriting Services To Your Clients

How you can make a profit from outsourcing copywriting.
Abby Wood
April 8, 2021
Sales

Rethinking What it Means to "Sell"

Doing “sales” has always felt a bit gross to me. I’ve never considered myself terrible at it — but I...
Kyle Van Deusen
March 31, 2021
Processes

Creating “Burner” Email Addresses for Setting Up Client Accounts

Setting Up & Accessing Accounts for Clients is a Pain Through the process of developing websites or doing any kind...
Kyle Van Deusen
March 23, 2021
Sales

How to Sell Website Care Plans More Often

This article will help with a crucial challenge: getting people to actually take up a care plan.
Nick Gulic
March 23, 2021
General

A Friendly Reminder About Domains

This post was born from a horror story, but don't worry; there's a happy ending. It was only a few...
Matthew Sebert
March 22, 2021

Join Our Community

The Admin Bar Facebook group is at the heart of what we do. Join in on the daily conversation and get involved.
Join the Community
Tab Phone 3pt6
© The Admin Bar (a Division of OGAL Web Design) — All Rights Reserved
crossmenu