Development & Debugging

Screen Shot 2016-05-09 at 10.47.20 AM
Support Details
Support details is a great debugging tool when you get clients whom tell you that they see a bug that you just can’t seem to replicate on your end. Understanding the OS and browser environment your client uses will help you to pinpoint exactly what could be causing the errors. http://supportdetails.com/

BrowserStack
Browserstack is useful to see what your site looks like on different platforms and multiple browsers like safari, firefox, chrome, mac, pc, etc… https://www.browserstack.com/screenshots

BuiltWith
Once you in awhile you will come across a cool site or feature on a website, or have a client who has no idea what kind of site they have and you will be thankful for this tool as it analyzes what plugins/themes/cms a site is built with. http://builtwith.com/

Dirty Markup
I love this tool. I often don’t code css in a very clean manner. This tool allows me to copy and paste my css, and it automatically cleans it up for me. It also gives me warnings if any of my code might not be formatted or used correctly. http://www.dirtymarkup.com/

Color & Design

Color Scheme Designer
Paletton
I use paletton because It calculates the exact colors on the spectrum that compliment your color of choice. It’s very useful when trying to come up with color palettes or finding similar colors to the one you are using that work will well with one another. http://paletton.com/

Colourlovers.com
Colour Lovers is a great place to organize a collection of your own color pallets. You can also create color palettes by uploading a photo and selecting the colors from the photo. The community of Colour Lover user’s rank each others palettes or you can even save pallets of others that you like. This place is awesome for creating colors, pallets and patterns. http://www.colourlovers.com/

Coolors.co
This is a very simple color generator. Just hit the spacebar to see randomly generated color schemes. Pretty cool 🙂 https://coolors.co/

Pinterest
Pinterest is full of color idea if you simply search “color palette”. It’s chock full of web design inspiration images from websites around the world. https://www.pinterest.com/

Website Optimization

Screen Shot 2016-05-09 at 11.49.59 AM
Compressor.io
Optimize images with this free online compressor. I like using it for PNG’s. https://compressor.io/

SmallPDF.com
Optimize the size and download speed of your PDF’s with this cool free compression tool. This website also has a lot of conversion tools like PDF to JPG or PDF to Word document. And two of my favorites, the Merge PDF and Split PDF tools. https://smallpdf.com/

Pingdom
Speed test tool which I use often. Shows you detailed information about all the content on your site and how it affects the speed. I like this tool because you can sign up and add your website which will record your uptime/downtime and even send you messages when your site is down. http://tools.pingdom.com/fpt/

Google Speed Test
Another speed test tool available from Google. If something is causing your page to be slow, you can pinpoint exactly what it is that is causing that reduction in speed. https://developers.google.com/speed/pagespeed/insights/

What cool tools and programs do you use when developing or designing websites?