What’s In Your Design and Development Toolbox?

While working on a simple project today, I realized how much I rely on the many tools at my disposal that allow me to accomplish the things I need to get done very easily.

I'm always sharing these tools with friends and co-workers, and so I ask the question "What's In Your Design and Development Toolbox"? Here are a few of my favorites.

HTML Emails

Making HTML emails look good in every client is simply put, a pain in the a**. Web and email clients are just as, if not even more finicky than most browsers. Gmail renders differently than Outlook, Yahoo renders differently than Hotmail and so on and so on. There are many different practices to marking up emails, but the best way in my opinion is to unfortunately use tables (I know, I know) and inline styles.

Inline Styler by Torchbox

When it comes to styling I turn the page over to Inline Styler made by Torchbox. It converts CSS rules into inline style attributes so I can whip out the email, send it and be on my merry way. At first I was worried about it mucking up my code, but I was surprised it did exactly as specified and took all my styles in the head and correctly applied them inline with the HTML.

Browser Testing

Much like their email client counterparts, browsers are also a finicky bunch themselves. Everybody needs to test and test again in multiple browsers to get that cross-browser compatibility golden seal of approval. Here are a few of the tools I use for those purposes.

IE Tester and My Debug Bar

IE Tester is a free Windows only application that allows you to have the rendering and javascript engines of IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE in the same process and also has useful debugging tools built in that the real version of IE unfortunately lacks. I can not sing the praises of this little app enough, It's not pretty, but it has saved my butt many times.

Adobe Browser Lab

Everybody's favorite expensive design software monopoly, Adobe, offers the ability to preview and test your websites in multiple browsers and operating systems. Building a website that has to be cross-browser compatible is one of the more annoying aspects of the design process, but this flash web app makes it dead simple.

Code Snippets

Frankly, I can't remember what day it is let alone thousands of functions, CSS properties or what PHP whatchamacallit does what anymore. That's where my trusty friends the code snippets come in. If you aren't using some sort of library to catalog all the useful functions and everything else you use constantly, you're just wasting your time searching on Google.

Snipplr - Social Snippet Repository

As the title suggests, Snipplr is a social snippet repository. You can share and store your code, make snippets that others have posted your favorites, leave comments and follow other Snippler users. If there's a programming or markup language, it's on Snipplr.

If you're on or join Snipplr, stop by and say hi. I'm of course, VagrantRadio.

Texter by Adam Pash, Editor @ Lifehacker

Texter is a text replacement application that lets you define hotstrings that, when triggered, will replace that hotstring with a larger piece of text. By entering your most commonly-typed snippets of text into Texter, you can save countless keystrokes in the course of the day. Simply save your snippet with a hotkey and typing when the program is running will auto-magically produce your code snippet.

For example, I have a hotkey setup as "docrdy" for the document ready function in jQuery. Typing "docrdy" and hitting enter produces this little guy ready to go instead of typing out the entire thing;

<script type="text/javascript">

$(document).ready(function() {
   // do stuff when DOM is ready
 });

</script>

Concept and Design Feedback

So you think you just designed a hot new mockup and the client is absolutely going to fall at your feet and proclaim you god of design. You don't sound so sure about that, chief.

Every design or proof of concept is going to need some tweaking to get it to that final stage where you say, "damn, I'm good". What better way to get there than a community of your peers offering professional and constructive feedback on your designs?

Concept Feedback

Concept Feedback offers anyone who signs up the chance to share your website, advertisement, logos and more and have the community derived mainly from other designers give suggestions and feedback helping you to get to that final draft that the client or user will drool over. I can not say enough good things about this service, I've used it many times with great results.

You'll also see me kicking around offering advice and posting concepts from time to time.

Code and or Styling Questions

Everybody gets stuck from time to time on something they just can't wrap their head around. You could search all day long on Google, piecing answers together from site to site, or you could ask for help and get a prompt reply that pertains exactly to your problem.

For example, you ask "Jason, why do you use so many commas and misplaced punctuation in your badly worded, run-on sentences"? I would have to just slap you and call you a grammer (see what I did there?) nazi. But of course, if you had a problem with a div not floating properly or a list item moving upon hover, you might seek the advice of people who know what they are talking about on the sites mentioned below.

Doctype - Web Design Q & A

Stack Overflow

Refactor My Code

CSS, HTML, PHP and jQuery Problems

Last but not least, these are so obvious it hurts but they need to be mentioned, especially to those learning any of the above. These tools will save your life one day, not literally because if your life is in danger courtesy of a design or development project, you're doing it wrong or you need to run away really, really fast.

This collection of sites offers examples, tutorials, documentation and validation of everything you stick into your pages. When I was first learning, these sites were my bible and I still look to them from time to time to get me out of a hitch. I cannot stress enough, use them frequently.

W3Schools - Online Web Tutorials

Quite simply, at W3Schools you can study everything you need to learn, in an accessible and handy format. Well said.

W3C Markup Validation Service

The W3C validator checks the markup validity of web documents in HTML, XHTML, RSS/Atom feeds, CSS stylesheets and finds broken links.

jQuery API Reference

The jQuery documentation holds anything and everything you need to know about how it works from the core functions, CSS and manipulations. The site offers live tutorials and since the rework of the site to go along with the release of version 1.4, now offers a comment system where users can have questions answered by the developers and contributors of jQuery.

This Is The End, Beautiful Friend..

That's a small list of some of the most important tools I use on a daily basis. So now I ask "What's In Your Design and Development Toolbox"? I would love to hear what others are using and why in the comments. Thanks for reading!