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.
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.
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.
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.
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.
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.
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 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;
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 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.
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.
Quite simply, at W3Schools you can study everything you need to learn, in an accessible and handy format. Well said.
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.