10 tools I can’t WORK without

10) IETester

IETester is a free web browsing tool that allows you to have the rendering and javascript engines of IE8 beta 2, IE7, IE 6 and IE5.5 on Vista and XP. As much as we find it a pain to make everything work as intended on IE, specially IE 6, we do strive to make them work because a large chunk of users still use the browser. This is where a tool like IETester comes in. You might be working on a newer version of Windows and have a later version of IE installed, but you can still test how the site will function on IE 6 or even IE 5.5 with IETester. It can be downloaded for free at http://bit.ly/9DLANO.

9) Google Calendar

Google Calendar is a strange entry if we expect this to be a list of web design related tools, but I do use it a lot and would like to mention how it helps in my workflow. I mainly use it to organize my timeline, appointments, and generally to remember stuff I need to do. I have added it in Gmail and have tweaked the settings to receive email and SMS notifications prior to a deadline, event or appointment. Here’s how you can configure Google Calendar on Gmail and receive notifications:

i) On Gmail, Go to Settings, choose the Labs tab and enable Google Calendar gadget (by Ben K and Garry B). This adds the Google Calendar box on the left of your Gmail from where you can easily add and see upcoming events, appointment location, time and other details.

ii) Next up, click on Options and click on Open Calendar on the Gmail Calendar gadget you just added to the left column of Gmail.

iii) Your Google Calendar opens in a new tab where you can add more details, drag things around and so on. But to configure notifications, you need to click on Settings on the top right of the calendar page and then click on Calendar settings.

iv) In Calendar Settings, visit the Calendars tab (currently the second one after General), and click on the link called Notifications on the right of your account name. On this notifications page, under the Event reminders section, click on Add a reminder choose Email and set the time before each event when you want the email reminder. For me, an email notification 1 day before works well. In the same way, click on Add a reminder again, select SMS this time and specify the time for SMS alerts. I get an SMS alert about an event 1 hour before it. Now Save the settings by clicking on the Save button on top left.

v) Finally, go to the Mobile Setup tab (beside the Calendars tab we just used), and enter your country, mobile phone number, mobile carrier, and click on the Send Verification Code button. You will receive a verification code as a text message on your mobile. Enter this code in the mobile setup settings and click on the Finish Setup button. And you are done!

8 ) Firefox

For a long time the blue e that came bundled with Windows WAS Internet for many. Internet Explorer has been the most widely used browser for over a decade but in the last few years it has lost a lot of ground to the other players, mainly Firefox which is fast, stable, and open. There is a whole plethora of Firefox extensions available to enhance your experience, some of which even feature on this list. When I first migrated to Firefox as an user, I remember two basic features won me over: the tabbed interface and the ability to restore the sites I was browsing, if I had to restart my computer. Of course later when I started developing websites I began to realize how forgiving and reliable Firefox was compared to the glorious inconsistencies and lack of support rendered by the various versions of IE. These days when I talk about websites or discuss my work with anyone who has IE as the only web browser on their computer, I often find myself installing Firefox for them voluntarily by the time we are done. While Microsoft is betting on version 9 to make using IE cool again, really, the stylized fox on fire icon is all you need to enter the world wide web.

7) GBookmarks (Google Bookmarks for Firefox)

I use Google Bookmarks all the time to store and tag links I come across on the web. There’s Yahoo!’s Delicious too, which is a pretty popular bookmarking service, but hey, you’re talking to a Google fanboy here. There are countless wonderful web design, coding and hosting related articles and blog posts published every day and you can’t read them all then and there. It helps to be able to bookmark them for future reading and makes sense to use online bookmarking so that you can access them anywhere, anytime. Coming back to GBookmarks, it is a third-party plugin for Mozilla Firefox users allowing them to bookmark a page and put them in respective folders from a menu item on the browser itself. Install it from here: https://addons.mozilla.org/en-US/firefox/addon/2448/

6) MeasureIt

MeasureIt is a nifty little ruler extension that sits on the browser and lets you measure width and height of elements on the page in pixels. It can be very useful to get a quick idea of a block’s width or the spacing between two blocks from the browser itself during conversion of design mockups to XHTML / CSS, instead of having to set rulers and measure in a tool like Photoshop. Install it from here: https://addons.mozilla.org/en-US/firefox/addon/539/. There is also a Google Chrome version available at https://chrome.google.com/extensions/detail/aonjhmdcgbgikgjapjckfkefpphjpgma.

5) jQuery

jQuery, the “write less do more JavaScript library” is responsible for a lot of those eye-popping effects you see on the web that are not Flash. My love affair with this open-source software began when I started designing my portfolio site www.smarajit.com, and have been using it extensively in a number of work projects thereafter. jQuery is not just about effects and animation, it can be used to develop different kinds of user interaction-related features and applications, is cross-browser compatible, and has a huge (and growing) directory of wonderful plugins up for grabs. There is a neat library called jQuery UI (yup, a library of a library) with pre-built jQuery components. The way this mainly script-based jQuery library is luring web designers, I can almost see a GUI version of it with drag and drop functionality coming soon.

4) ColorZilla Color Picker

Yet another handy browser extension, ColorZilla is an advanced eyedropper, color picker, and palette viewer tool. All these features are already available in an image editing package like Photoshop, but then there are times you want to know the RGB or hexadecimal color code of a shade quickly and without having to wait for Photoshop to open. Saves a lot of time, trust me! Download at: http://www.colorzilla.com/firefox/

3) Adobe Dreamweaver

Yes, you can develop websites without it or any WYSIWYG editor for that matter. Yes, it can be considered redundant and expensive, but if you have it, I won’t blame you for getting addicted. I have been using Adobe Dreamweaver for a while and feel at home using it, though I have also handcoded websites. It makes life easier, and does a lot of your work by opening a list of applicable options the moment you type a character in the code view. It lets you create drag-and-drop libraries from your own code, and (my favorite) let’s you create and manage Dreamweaver “sites” from your project files – which is great when it comes to searching files, code and content within the project, especially in a big project with lots of files such as one using a content management system (CMS).

2) FireBug

Firebug is just wow! It is a DOM inspector that let’s one inspect HTML and modify the cascading style sheets (CSS) and web layout in real-time. Come to think of it, Firebug is just another Firefox extension but it is one tool that has clearly made the greatest impact on my web development skills of late. I had only heard of it a year ago and started using it several months back, but ever since then I have never worked on a website without Firebug-ing it! It has taught me more CSS than any book or online tutorial ever did. Moreover, when it comes to building a site by modifying existing themes and templates of a CMS such as Wordpress or Joomla, a tool like FireBug feels God-sent.

1) Adobe Photoshop

Photoshop is king! Photoshop is not just a tool, it started out as a game changer, then a market leader, and now its acceptance has made it almost incidental like having a pen. From the neighborhood DTP guy to the Hollywood VFX wizard, they all have it in their arsenal. Cheaper alternatives and Fireworks-can-do-it-too rants aside, let’s face the fact that Photoshop has remained peerless for two decades. Amidst cynical opinion like it has cheapened the art or made photographic evidence a farce, it has perhaps gone on to create the greatest impact on design since pencil and paint brush and can be called the greatest gift to photography since… well, the camera! Photoshop has made its presence felt in web, print, broadcast, photography, fashion, and so on. Almost every visual on the web has gone through some touches in Photoshop at some stage. It makes me nostalgic to realise I have been using this Thomas Knoll invention for almost half my life now, and then I continue to be surprised by the stunning new additions introduced in version CS5. It may not be the easiest tool to learn, but when you have sunk your teeth in, you really don’t feel the need for an alternative.

Here’s a fascinating documentary released by Adobe marking the 20th Anniversary of Adobe Photoshop, aptly called “one of the most influential technology innovations in history.” Enjoy the video as the makers take you down memory lane: http://tv.adobe.com/watch/photoshop-20th-anniversary/startup-memories

—-

And feel free to tell us about the tools you can’t do without!