Skip to main content

Tools of the Trade, Part I

Tools of the Trade, Part I
Any person in the web design and development industry has a set of tools that he or she cannot live without. The same goes for me. I have a bookmark folder on my Firefox Toolbar which is my go to when thinking, creating, testing, or deploying. This segues perfectly into my first tool of the trade:

Bookmark synchronization

XMarks (formerly FoxMarks) is a handy Firefox Plugin that manages and syncs your bookmarks across computers. I have a Dell laptop for when I’m on-the-go, an iMac at my home office, and a Dell XPS at the office. It’s imperative that my bookmarks are synced between all of these sources. A creature of habit, I tend to know exactly where to click to find something, but really couldn’t tell you the name of the site or app. I simply know “where” it is in my bookmarks.

XMarks also supplies a handy web interface for when you need to reference a bookmark and don’t necessarily want to sync to that particular computer.

Price: Free

Cross-browser testing

Everyone in this industry loves the bastard child that is Internet Explorer 6. Essentially obsolete the day it was released, IE6 is the dinosaur that simply won’t go away. Unfortunately, IE6 still has quite a large user base thanks in large part to corporate networks who lag years behind on updating software mainly due to proprietary software that depends on older software releases. Since its user base is large enough, it can’t be ignored.

IE6 is the cowboy. It translates CSS and HTML however it pleases and often times to its own tune. Cross browser testing is an absolute must. The big ones to check for are Internet Explorer 6 and below, Internet Explorer 7 and above, Firefox, Safari, and the newcomer Chrome.

Browsershots.org is a great utility that lets you choose to display your site in a wide array of browsers on different operating systems. Once rendered, Browsershots.org allows you to download all of your previews as .jpgs and bundled as a .zip. The one major downfall is the time it takes from submission to render, often greater than 30 minutes if you choose a particularly popular browser. However, you can purchase expedited service for a small fee.

Price: Free, optional $29.95 for 1 month of priority processing
www.browsershots.org

For Internet Explorer only service, look no further than IE Net Renderer. This service allows you to choose versions 5.5 to 8.0 and gives you a jpg preview, often within seconds.

Price: Free
netrenderer.com

Adobe BrowserLab looks like a promising product which has yet to hit the market (in beta testing now). With Dreamweaver CS4 integration, this may be the most complete tool to date. However, with anything Adobe touches, expect extreme quality and a steep price.

Greeking

If you’ve ever seen a website concept before, more than likely you’re familiar with the concept of “greeking.” Substituting “greek” text as a placeholder for actual copy is standard practice as all-too-often, copy comes after design (somewhat of a strategic no-no: hopefully discussions of what content and type of content was a part of the discussion before designing). The end result often looks like this:

Lorem ipsum dolor sit amet, valetudo, abico commodo luptatum esse ut. Abico lucidus tum tation antehabeo, transverbero vulputate sit in capio causa fatua appellatio odio. Ratis proprius dolore letalis gemino, macto os enim duis. Minim jus voco, euismod gemino duis nisl ea refoveo, multo, abdo. Metuo capto veniam virtus pagus pneum dolore plaga, humo aliquip iriure magna quibus. Nutus antehabeo delenit neque ut hendrerit vulputate. Humo feugiat vulputate oppeto, scisco cogo ingenium ratis.

And the fruits of being #1 in Google when searching “greeking” is this nice little app by Duck Island.

Price: Free

Javascript Frameworks

Client-side development can sometimes be monotonous and frustrating. Using javascript to develop for the client-side yields a few obstacles given the number of platforms and operating systems that must be taken into account. Here is where two very important frameworks enter the conversation: Prototype and jQuery. Both of them essentially accomplish the same thing but in different ways. They both make javascript code shorter, simpler, and easier to use and repeat. They give some great base classes that make javascript development a lot more pleasureable to accomplish. Many plugins have been written for the frameworks that are easy to implement such as modal windows, animation effects, form processing, etc. They also both have solid AJAX implementations that make AJAX as easy as a one-line call.

Price: Free (although I feel like I’m stealing every time I use them)
www.prototypejs.org
www.jquery.com

Content Management

I’ve written before on content management and our goto solution in WordPress. Thanks to the huge developer community of WordPress, plugins are plentiful and readily available. One plugin I can’t live without is the More Fields plugin.

More Fields turns WordPress into a full content management solution instead of a blogging platform. The tool allows the administrator to add fields to the Wodpress “posts” pages giving you an added ability to segment data across a single page in the particular site. For example, if you had a site that needed a user defined image header to be chosen from a set of 5, you could easily add a field to the WordPress post screen giving the user a dropdown menu asking which header they wanted. A click of a mouse would give the user the ability to change the header on each page he or she wishes. That’s a very low level example as the power packed inside of that plugin is great.

Here’s the best part.

Price: Free

Debugging

Again hitting on the client-side scripting angle, it is imperative to have a decent debugging tool. That’s where Firebug, a Firefox plugin becomes make or break. It’s also great at debugging AJAX, watching post variables from page to page, managing page load times, and tweaking CSS on the fly.

Price:  Free
www.getfirebug.com

Share this article on

Related Content