fbpx
tab pride

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? Become an Official Barfly!

More from The Bulletin Board

Sales

The Pipeline is Key: Here's Why Being Reactive is Not Enough

Struggling to keep your pipeline filled? Learn why reactive marketing might be holding you back, and what you can do about it.
Kyle Van Deusen
May 31, 2021
Processes

Charging for Discovery (S.O.P.)

A full breakdown of why you should be charging for project discovery, and exactly how to do it!
Hans Skillrud
May 28, 2021
Sales

Craft the Perfect Analogy to Educate Clients and Secure the Sale

Whether it’s explaining that doing SEO doesn’t provide overnight ranking success, or the necessity for WordPress website maintenance — clients...
Kyle Van Deusen
May 24, 2021
Processes

The Orderly Inbox

The Orderly Inbox, a.k.a. “inbox zero” isn’t about always being caught up on all of your work—that’s called a “fantasy”....
Kyle Van Deusen
May 23, 2021
Client Management

Building a Minimal Client Dashboard in WordPress

I recently decided to build my own minimal dashboard for the clients on my care plan for added value. In...
Matthew Sebert
May 19, 2021
Strategy

The power of having a success partner - get ready to change your business (and your life!)

Success partners are all about action, helping each other grow their business, reduce stress and have the confidence to take on larger projects and or new challenges, and coaching each other through the process.
Laura Sutherly & Barry Alt
May 13, 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 4k member
© The Admin Bar (a Division of OGAL Web Design) — All Rights Reserved
crossmenu