The first thought that crosses my mind when I discover a new web tool: “This is awesome! I can’t believe I didn’t know about this!”
The second thought, laced with bitterness: “If only I had this for my last project.”
If you’re a faithful Chrome user like myself, you’ve probably noticed the massive library of extensions offered in the Chrome Store. Some of these extensions are incredibly helpful, like an accurate font identifier (has your mind been blown yet?). The problem is, there are so many to look through, it’s pretty overwhelming—especially if you don’t know what you’re looking for.
What follows is a list of 5 web design and development extensions I use on a daily basis. They save me from saying things like, “What was that color’s hexadecimal code, again?” and “Sure, it’s above the fold. I think.” Take a look at the tools, try them out, and proceed to smack your head on the desk for not learning about them earlier (it’s okay, I did it too!):
Wouldn’t it be nice if you could roll over some text and instantly see the font in a tooltip? Say hello to WhatFont, a Chrome extension that takes the hassle out of font identification. To test its reliability, I went to Google Web Fonts, Google’s open-source font API. Sure enough, each font came up exactly as mentioned. “Okay,” you’re thinking, “I could figure that out with Inspect Element.” True, but I took it a step further and tested it with images. To my surprise, WhatFont correctly identified the font used in the Smashing Magazine logo. Though it claims to be less reliable with images, it seems to have the best combination of user-friendliness and accuracy I’ve seen in font identification tools thus far.
If you’ve ever tried to identify a color on a website, you know the drill – open Inspect Element, search through the CSS, click through a few HTML elements, and eventually you’ll find the hexadecimal code. Why not save a few steps and use an eyedropper tool extension right in the browser? The tool allows you to select a color on the webpage, and even saves up a color history so you have a palette ready to go. If you’re testing some CSS color changes in Chrome’s Inspect Element and want to find a suitable color, use Eye Dropper’s Color Picker feature, which provides the entire color spectrum along with codes for your coding.
Google Search By Image
This invaluable resource lets you search for pictures, with a picture. Simply right-click on an image and select “Search Google with this image.” The search results show other websites that image was used on, and where you can find similar photos. This has come in handy when considering stock images for websites—for instance, a fit-looking male for a health supplements website. Just right click on the photo within the stock photo website, then see who else is using the same picture. It would be pretty embarrassing if a competitor used the exact same image, or if it was used in a news article about steroid abuse. Google Search by Image will become your new best friend when researching images!
With the wide range of monitor sizes and screen resolutions being used today, it’s only prudent to test your sites in a variety of them. Resolution Test takes the guesswork out of screen resolution testing by providing popular size options that you can “try on” your website in the browser. Ensure your “above the fold” elements really made the cut. My only complaint is that there aren’t presets for popular smartphone resolutions, like the iPhone’s 640 X 960. Fortunately, you can add custom sizes, so this isn’t a huge obstacle.
If you only download one Chrome Extension for web design, make sure it’s this one. This incredibly robust tool would require an entire article to explain all of its features, but here are a few key points.
- Under a CSS tab, users can selectively disable certain style types, including inline styles, browser defaults, and print styles.
- The Form section begs the question “you can do that?” with options to remove maximum lengths, display passwords, and more.
- Pictures with empty/no alt attributes, oversized dimensions, and no dimensions can’t hide from the Images section, which also displays paths, identifies background images, and much more.
- See stack levels at a glance and get meta information in the Information tab.
- Get a color picker, ruler, and other useful tools in the Miscellaneous tab.
This is one tool you’ll just have to download and test drive yourself – you’ll wonder how you ever lived without it!
That’s my short list of useful extensions—what tools made you smack your head against your desk in fury that you didn’t know about it before? I’m putting on my helmet now.