I’m sure that I’m preaching to the choir that most of us don’t have enough time in the day to get all of our work done. Efficiency is a must for everything that I do at the office, and one of the easiest ways to save time for me (when wearing my creative and quality-assurance hat) is the use of browser extensions.

Google Chrome is my browser of choice, and if you’re not familiar with browser extensions, they are essentially plugin tools you can add that help with a number of time-saving tasks. They take roughly a second to install and should instantly help cut time out of your daily processes. If you’re not sure where your extensions are located in your browser, check out the image above. It’s also important to note that most browsers, including Firefox, Safari and others, have free extensions available as well.

My Recommended Browser Extensions

“They aren’t going to save that much time.” That was me before I gave a few a test drive, and it wasn’t soon thereafter that I realized I was way off with my judgment. Below is a selection that I think everyone would benefit from:

1. Resolution Test – When you’re designing and developing for an array of different devices and resolutions it’s important to see what your site looks like on a variety of screen sizes. This extension will resize your browser and show you how your layout renders at that size. You can create your own custom sizes and save them for future testing.
2. Awesome Screenshot – A great tool for grabbing full or partial-page screenshots. I personally hated having to stitch screenshots together for a full-page rendering, and this tool does it in two clicks.
3. WhatFont? – Use this to know exactly what font is being used on a website. Simply hover the mouse over the text and it’ll tell you the font name, style, weight, etc. Below, you can see I wanted to know what font the “save 30% on trees, lights & ornaments” was. The black box shows all the details about that font selection. Funny, I didn’t realize Target created their own custom font for their site. “Targetica,” clever.
   

   Target.com

4. Page Ruler – A very quick and easy way to know the pixel dimensions of graphical elements on page and gauge the spacing between. This helps me when testing how browsers render margins on screen or in certain environments. Below you can see that I’ve clicked on the tool and meaured out roughly the width and height of the heading graphic. The orange arrow points to show you the exact dimensions I’ve outlined. Very useful.
   

   Image courtesy of uxdesign.cc

5. Eye Dropper – Will grab the any color on screen and tell you exactly the HEX value or RGB values of that selected color.
6. Clear Cache – One click of this tool and it’ll clear all the cache you have on your computer for that website and also reload the page so that you’re seeing the most recent version.
7. WAVE – This is an amazing tool for private and secure accessibility reporting of your website. The tool injects icons and indicators onto your page and shows you want needs to be addressed to meet accessibility compliance. Everyone should have the same opportunities when browsing the web, so make sure that you’re doing your best to design and develop a site that meets the highest level of accessibility.

I’ve only touched on a handful of extensions that I like use, and there are literally hundreds available that help make your tasks so much more convenient.  I’d love to hear if you have a favorite out there that I should be aware of.