Wonderful Tools for Web Developers

I love the initial stages of creating a great new website. The part after the planning, when we know the objectives and some of what the website users want, and before we start building the system. Usually I am sitting down over at a coffee shop with a nonprofit and my geeky developer friends, and we are furiously brainstorming on paper, old receipts, napkins - drawing lots of sketches of pages as we explore what is effective.

There are many terrific tools that make it really easy to bring the sketches to life online. I used to turn to Visio, Illustrator and Photoshop to get our thoughts into something beyond a sketch, but found these tools just too complex to whip out depictions of what we had discussed, and difficult to share and collaborate with the files created.

After my latest napkin sketch session, I discovered Twiddla. Although it lacks the energy and ambiance of the coffee shop and its napkins, it is a wonderful tool for groups to collaboratively view and sketch on top of web pages and other uploaded images. The people I invite do not need an account, and can quickly join an audio conference through the computer, without dealing with call-in codes and other login nonsense. We happily set about defacing websites and brainstorming design directions, and can do screen captures to preserve the digital graffiti for later use.

After twiddla-ing, I want to take all the great ideas and extend them in different ways. Visiting the same websites we defaced earlier using the FireFox browser, I use the ColorZilla and Firebug extensions to view and manipulate how the web page actually looks, as though I were editing the page. ColorZilla is a free extension to FireFox that gives you a simple point-and-click tool to discovering what the color is of anything on a web page, in RGB, hex and other codes. I can use Firebug to view all sorts of things about how a particular web page is coded, including its stylesheet, and edit this code right in the browser. While sometimes I wish I could change some of the terrible sites that are out there, Firebug only changes the site for you at the moment. I can copy the code for a color I like on one web page, then visit another and change the stylesheet to use that new color, and see right away how it looks online. If I messed up the page, no worries, just reload and it all comes back to normal. Great stuff!

I love how Gliffy takes Visio and strips it of almost everything complex, leaving a simple flowcharting tool that just works. I can draw lines linking boxes and triangles with ease, and label quickly, and when done, share this with the whole team. I can also use the available templates to start with a web page frame, and adjust the columns, drop in boxes representing features we discussed and have a variety of sketches ready in no time.