It’s coming up on two years since I last made my list of 5 More Free Web-Based Design and Development Tools I Actually Use , which was an update to my initial post, 5 Free Web-Based Design and Development Tools I Actually Use. Well, a lot has changed in the web-building landscape since then and I thought I’d revise this list for modern times. You’ll notice that I dropped the “web-based” prefix since bookmarklets and browser extensions are also included below. Some oldies still cut the mustard, but a few new kids have proven useful as well. As always, if you use something you think should be on this list, please let me know in the comments below.
Here (in no particular order) are the top free web design and development tools I actually use:
Underscores (WordPress starter theme)
I build a lot of WordPress themes from scratch and am always on the hunt for the latest/greatest “blank” starter theme to build my next project upon. Some of the folks at Automattic’s Theme Division have forked their trusted Toolbox starter theme and created the “_s” theme, also known as Underscores. The stripped-down theme contains the usual bells and whistles such as (Eric Meyer’s) css reset, HTML5 goodness, enqueued scripts and styles and even has a customizable downloader so you can brand it with your own custom slugs and such. If Automattic uses it then it’s probably a good starting point for all of us.
WhatFont (Bookmarklet, Chrome & Safari extensions)
Still holding strong in my toolkit as a must-have tool is Chengyin Liu’s, WhatFont bookmarklet and Chrome/Safari extension. Once enabled, you simply hover your cursor over any HTML text on a page and a small tool-tip window displays the font family, style, size, line height, hex color, type specimen and, if the site uses TypeKit or Google Web Fonts, where the fonts are being served from (so you know where to go look). Seriously, stop digging through the inspector and just click and hover.
These two have been on my previous must-have lists and really should be presented together as a single resource. With Randy Jensen’s invaluable CSS3 Generator, everything you would have normally needed to use your brain for has been turned into a simple form that—with a few numbers and clicks—generates both prefixed and un-prefixed CSS3 tags. The screen for each tag (transform, for example) even tells you the minimum browser version for support, saving you a trip over to Quirksmode. Colorzilla’s Ultimate CSS Gradient Generator doesn’t disappoint either. If you’re used to Photoshop-level gradient controls with a boatload of sample presets ready to be copied and pasted then look no further. Again, no brain power required, just clicking and dragging. Simply beautiful.
Save to Google Drive (Chrome extension)
While I am a passionate SnagIt user, I’ve recently stumbled upon this handy, one-click screen grabber that automatically saves a snapshot of your current screen to your Google Drive account. Made by the official Google Drive team, Save to Google Drive has options for grabbing the entire (scrolling) or currently visible (viewport) page, outputting it as PNG, HTML, web archive or Google Doc, and specifying the default Drive folder. Easy peasy.
QR Codes are one of those things that, well, you don’t need them until you need them. While it seems like only yesterday I was saying how flash-in-the-pan these unsolvable crossword puzzled seemed, I’ve had four requests for QR codes just in the past month. With the meteoric growth of mobile web browsing I should have realized that these little checkers weren’t going away any time soon.
So, how do I generate QR codes and—more importantly—reliably track their performance…for free? With a little help from my two friends, Kayawa QR Code generator and trusted URL shortener, bit.ly. Wait, why use bit.ly and not just Kayawa by itself? That’s where the free part comes in. Kayawa will allow you to generate QR codes for free, but you need to pay a monthly fee if you want access to analytics, among other features. By shortening the landing page URL with a bit.ly link (for free) and then generating the QR code from that shortened URL, I’m able to see how many folks snapped the code and successfully made it to my landing page. And by adding Google Analytics source, medium and campaign tags to the landing page URL before shortening it, I’m able to track a whole lot more.
There you have it. My current must-have free web design and development tools I actually use. Have a few tools of your own? Please let me know via the comments below. I’m always looking for new tools to help improve the workflow.