Premier Web Designer’s Toolbox

Web Designers Toolbox

Over the years as a web designer I have used MANY different tools, programs, apps, etc. Some were good, some were meh, and some were downright horrible. Today I’m going to share with you a few of the good ones. We are going to cover everything from compilers & WordPress plugins to auto-generators & speed test tools.

Design Tools

Color Scheme Designer

IcoMoon
Probably one of my favorite tools. You can make your own custom icon fonts choosing from hundreds of free individual icons. I now use this on pretty much every site for a few months now and it saves so much on file size, bandwidth & speed. To implement these fonts into your site you will also probably need this resource: http://css-tricks.com/html-for-icon-font-usage/.

Color Scheme Designer
This is great when you are in the planning stages of a website and trying to come up with a color scheme and having a hard time finding complimentary colors. You can also then save these templates on Colour Lovers for storage and sharing.

ajaxload.info
Ajaxload.info is a ajax loading gif generator. I’m sure not many people need this but its good to have in your bookmarks just in case you do one day!

0to255
0to255 is a simple tool that helps web designers find variations of any color. Really great if your looking for the perfect color to use for hover effects or when creating a color palette.

Dynamic Dummy Image Generator
Dynamic Dummy Image Generator is what it says it is. It helps you quickly create dummy images you can use for development sites, mockups & placeholders.

CSS-Trick’s Button Maker
Helps you create good looking CSS buttons really fast.

Compatibility Tools

IE Testing

modern.IE
This tool is very useful in identifying issues that your site may have when running on earlier versions of IE.

CSS Gradient Background Maker
This little tool which is hosted on microsoft.com has saved me the time of memorizing all the different browser specific CSS gradient terminology. You just input the colors and it outputs the gradients. Copy & paste and done!

W3C Markup Validation Service
I know this is kind of an obvious one, but I bet most people skip this step when making a website on a budget. Also there is a CSS Validation Service & MobileOK Checker

Performance Tools

Google PageSpeed Insights

Google’s PageSpeed Insights
PageSpeed Insights analyzes the content of a web page, then generates suggestions to make that page faster. I have used this on almost every one of my sites to identify what is slowing it down. After a while you start proactively making your site faster so by the time you use a speed test most everything is already optimized.

GTmetrix
Another speed test tool that goes a little deeper than Google’s PageSpeed Insights and also gives you YSlow speeds.

Pingdom
Pingdom tests the load time of a page giving you a breakdown of what is being loaded and how long it takes to load. Also give you a performance grade and page analysis.

WebPageTest
I know your thinking… another speed test tool? The thing about this tool that differentiates itself is the fact that it runs to back to back speed tests and gives you a good idea of how well your page is caching files. Gives you a “first view” speed and a “repeat view” speed. Very insightful stuff when your trying to identify what to optimize.

Load Impact
Load Impact offers free load testing and reporting. They do have paid plans as well, but you can load test your site here for free. This is great if you are worried about a spike in traffic and if your servers can handle it.

Mobile Tools

Detect Mobile Browsers

Detect Mobile Browsers
Ever try to redirect people coming to your site from mobile devices to another URL? Its not the simplest thing in the world. Detect Mobile Browsers is an open source project that simplifies this for you and gives you the scripts you need to just copy and paste right into your file. I’ve used it on a few sites and it works flawlessly (so far).

Responsivator
This tool gives you a side by side view of your website in multiple screen sizes. Very handy when designing responsive layouts!

Offermobi Preview
Cool tool that allows you to view your website on most mobile devices out today… although it doesn’t run the browser, just emulates the screen size & resolution.

WordPress Tools

Wordpress Custom Post Type Generator

Themergency’s WordPress Custom Post Type Code Generator
There are a few WordPress plugins that help you make custom post types easily, but if you want to put the code directly into your theme’s functions.php file or make your own plugin this little tool will save you so much time because of the size, complexity and redundancy of the custom post type code required.

Compression Tools

Tiny PNG

Tiny PNG
This is the best PNG compressor out there. Other image compression tools don’t compress png’s that great. This tool will drastically reduce png file size while keeping the same quality and in addition the transparency will work in IE6. How about that!

Smush.it
Smush.it is a free online image compression tool that losslessly compresses your image files. Found it really useful until I started using a Mac app called “Image Optim”.

Closure Compiler
I’ve only used this a few times, but plan to use it more! The way I use it is I grab external javascript loaded from 3rd party plugins, compile it and then put it locally on my server and delete the 3rd party link to the outside javascript file so that there isn’t a request to another outside server. Works for some things but not others. Otherwise its a good tool in general but there are a lot of compilers out there.

Random Tools

FreshBooks
FreshBooks is a paid invoicing service, but they have a free plan for up to 3 clients. I HIGHLY recommend them. I have been using them for 3 years now and I’m very happy with them and the quality of service they offer.

faxZero
Even web designers have to fax things from time to time. Here is a free service to do so!

So I guess thats it for now. I just went through almost all of my bookmarks and I got thousands of them lol. Hope you guys found a few “gems” here. If you guys/gals have any tools that I missed (which I’m sure I did) please leave them in the comments below. Thanks!

How to Autoplay a YouTube Embedded Video

YouTube Help

In order to have a embedded YouTube video autoplay on load add this to the end of the URL (right after the video unique string): ?version=3&autoplay=1.

i.e. http://www.youtube.com/embed/JP9ZH6EuTrA?version=3&autoplay=1

At https://developers.google.com/youtube/player_parameters#autoplay

it states that:

autoplay (supported players: AS3, AS2, HTML5)
Values: 0 or 1. Default is 0. Sets whether or not the initial video will autoplay when the player loads.