Tools I Use

41 comments | Posted: 8 April 06 in Tutorials, by Tim Bednar

Tools I Use

One of the designers on my team recently asked how I know about so many “tools” for web design. I thought and decided that basically I am lazy. I hope lazy in a good way. My feeling is that the best tools help me work faster, cleaner and better.

I know that everyone has their favorite tools, and equally tools that they despise. Hopefully, you will agree with most of my picks and possibly discover something that will improve your work. So, here are the tools that I use to code, debug and manage projects.

Coding tools

Although I code XHTML and CSS by hand, I hate to admit that I still use Dreamweaver as my primary application. It does a great job color coding tags. Until I learn something else, it is the environment I use to develop web applications in classic ASP using VB Script.

I also like NoteTab Pro It is lightweight, clean and affordable. The other editor I use is HTML-Kit because it highlights matching { } [ ] ( ) pairs when you cursor over them (very nice when debugging JavaScript). When working on a redesign or with legacy code, I often use WinMerge which allows me to compare code from two different files.

I code CSS in Dreamweaver (I do not have 8), but the real work is done in FireFox using the Web Developers Toolbar extension. It allows my to edit live CSS in FireFox.

To tackle Explorer CSS issues, I still use and hit refresh. The new Internet Explorer Toolbar is the Microsoft clone, but it does not allow you to edit live CSS. I have used TopStyle and Style Master especially when I was first learning CSS, but rarely find them useful anymore. I am still looking for the killer, cross-browser live XHTML/CSS editor.

Browser tools

I am a FireFox extensions addict. Here are the ones I have found most useful for either debugging my own code or editing legacy code:

For more information, I recommend reading Rapid Web Development and Testing with Mozilla Firefox.

Management tools

The side of web design that rarely gets discussed is how to manage a successful project. I can code clean code, but if my client is not happy what have I gained. This is the most important aspect of any project and is especially important to those of us trying to convince churches to create better web sites. Use should use standards, but also run a good business.

I use Gmail. I often e-mail myself reminders, stray pieces of information, phone numbers or small files. They never get lost; I can find them from any computer. I can not imagine working without it.

As my primary project management tool, I use mostly the free version of Backpack, but also have a subscription to Basecamp for large projects. They are valuable tools for keeping records, messages, milestones and files. I can not tell you how many times these web based applications have saved my skin when I am not at my primary computer.

Office tools

I just started using Box.net to help me remotely store files. I wrote this article using Writely from two different computers and just convinced a client develop all their content with it. The last piece to this puzzle is a new application called Vyew which is a web-based remote meeting tool. I will start work for a client 400 miles away and will use this to train them on my Content Management System. I now use Sunbird as my calendar because it supports iCalendar.

Learning tools

I am self taught. I learn everything by searching Google, using free tutorials or simply hacking code I find. For instance, I plan to learn Ruby on Rails this year through tutorials and resources I find online.

To this, I rely on Google, but also on my RSS Reader. I just switched readers. I used Newsgator Online for two years (view my opml feed), but just started using Rojo. I also listen to of podcasts on the bus. I would recommend the Web 2.0 Show, TalkCrunch and audible Ajax.

I choose these tools because they are open source, web-based and affordable.

Discuss This Topic

  1. 1 Josh Owens

    Hey,

    Josh from the web 2.0 show. Thanks for listening and recommending us!
    —Josh

     
  2. 2 Natalie

    Some great tools there. I wouldn’t have thought of listing a podcast as a tool, but it is, isn’t it? I listen to web 2.0 too, and I would also recommend Paul Boag’s awesome podcast. He speaks directly to people who have to deal with websites in mainstream with little experience or time for web standards.

    One other thing… for code editors, I really love jedit because it color codes everything and you can specify the colors too as well as make things bold and italic. It even knows the difference between an HTML, CSS and PHP file and color codes them differently. It’s a free tool and has made life sooooo easy for me!

     
  3. 3 Yannick

    I listen to both the Web 2.0 Show and Paul Boag’s podcasts. Definitely good ones.

    As for tools, I use Dreamweaver at work, but Context at home. I also use the free version of Backpack and as for FF extensions, the Web Dev Toolbar I use quite frequently.

     
  4. 4 Erwin Heiser

    Nice one, had never heard of the “formatted source” extension.
    Cheers!

     
  5. 5 ko

    I’ve recently started to use notepad++ (http://notepad-plus.sourceforge.net) which I’ve found to be very useful. Benefits for me include it’s free, source highlighting, tag completion and brace/bracket matching. I think it’s going to become a notepad replacement for me.

    Also, thank you for that “Rapid Web Development” link, it’s been a very useful source of a couple of firefox extensions that I didn’t know about.

     
  6. 6 Tim Bednar

    Ko,

    I’m going to try notepadd++ this week. I think that I might have been told about this before and thought it was the same as NoteTab Pro. But it is not.

    I’m also going to add Paul Boag’s podcast to iTunes—I think I’ve listened to it before.

    Also I case someone interested, I’ve linked to some valuable Carson Workshop mp3s. I have only listed to Ryan Carson talk about the costs behind building DropSend, but that alone changed my whole outlook on what I can do…

     
  7. 7 Nathan Smith

    Tim, good article. There are quite a few things in there I hadn’t hear of before. Oh, and I love Notepad++, and use it for pretty much everything now.

    I wanted to add to the list another nice freeware program called Screenhunter. It’s great for taking screenshots in Windows, and can be mapped to a variety of keys. Right now, I have it set to override F1, because I often use F2 to rename files, and can’t stand accidentally hitting F1 and launching Windows help.

     
  8. 8 Yannick

    Tim,

    I have listened to all of the Carson Workshop Podcasts. They were all pretty good in my opinion.

     
  9. 9 Tank

    Great Stuff!

    I use Dreamweaver 8, mainly because it can manage files for a project very well and the latest release cured a whole bunch of FTP issues so it makes using FTP within Dreamweaver very easy. I mainly use the text editor portion with a bit of the layout mode but not much. I like it becuase it supports code highlighting for a variety of languages.

    But when I have to make a quick change to a file I use Notepad++ because it has so little overhead and launches in less than a second.

    Thanks also for those podcasts. I’m always looking for new ones. One that I listen to is Pro_PHP and Security Now. I understand about 1/2 of what is said but its great! Inside The Net is a good web 2.0ish podcast that interviews the people that have created many of the great Web 2.0 aps that we use.

    I use Google Homepage for my RSS reader. It’s not as robust as I’d like but I’ve used it for a while and am used to it.

     
  10. 10 Ryan

    After Rails, my favorite tool is Textmate.

    For taking pictures of websites I use Paparazzi.

    For recording movies of your screen you can’t beat Snapz Pro X

    Another little gem is Webseecon, which turns your Mac OS X internet shortcuts into little web page preview icons.

     
  11. 11 Tim Bednar

    I just worked using Notepad++ tonight for the first time; where has this been all my life! It is great.

    For taking images of web pages, I use a FireFox plug-in called Perl Crescent Page Saver which saves entire or partial pages as png files (enabled by right click contextual menu).

    I agree is lots to be learned from the Carson mp3s.

     
  12. 12 Adam Spooner

    Wow! I’ve been using FireFox for a while now because of its standards compliance, but I had no idea there were so many good plug-ins for it. I mean sure, I use FasterFox and the del.icio.us plug-in, but you turned me on to some very cool plug-ins! Thanks a ton! It’s always neat to see what other guys in the field are using. Helps us that want to learn all the time (true, I’m a nerd…straight up, hard core nerd – eg: my dad, a programmer, called me on Saturday and I was messing with my linux box, and he called me a nerd). Anyways, rabbit trail over.

    Thanks for the tools list! More of these would be cool, just to see what everyone in the filed is using and finding useful.

    Cheers!

    PS- I’m a hand-coder and still use Dreamweaver…I fear there are too many of us that still do it this way. Though I am starting to use SKEdit on my Mac…along with CSSEdit.

     
  13. 13 Rick Curran

    Hi,
    Yep, the Firefox tools are really helpful in web development, all the ones you’ve mentioned are definitely worth using.

    I still use Dreamweaver (MX2004) for general site management and structuring but I also use SubEthaEdit for all hand coding stuff:
    http://www.codingmonkeys.de/subethaedit/index.html

    It’s a great text editor for Mac OSX and has multiple code highlight formats (You can create your own) for various languages, PHP, HTML, CSS, Javascript, Lingo etc etc. It also allows you to collaborate on documents either through the local network or the web which is pretty cool too.

    Anybody got thoughts on using version control tools such as Subversion for web development?

     
  14. 14 nate klaiber

    Tim,
    Good read! Its always nice to check out some new tools for different tasks. I am a Mac guy, so some of these just dont apply to me (Well, I am getting a new iMac at work…could use boot camp…oh wait, nevermind – I will still never have a need for windows – hehe). For me personally, I have found the following tools to be the best.

    1 – Textmate for programming, hands down incredible.
    2 – Transmit for FTP – the use of droplets, favorites, and tabbed FTP is incredible.
    3 – Aqua Data Studio for all my SQL needs. I connect to several different database types, so this has worked perfectly for me.
    4 – Safari is my main RSS reader
    5 – I am definitely going to check out some of those podcasts
    6 – Firefox with all of the extensions you have mentioned, they are a blessing – hehe.

    Before Textmate/Transmit – I was a dreamweaver guy. I spent most of my time in the code view – as layout view didnt render with the Frameworks I was using and the included files (and their mappings). However, I LOVED dreamweaver – it is still a great tool – for beginner or professional. I chose Textmate for the simplicity and ease since I spend the majority of my time programming PHP.

    Peace,
    Nate

     
  15. 15 Tim Bednar

    I would like to hear about any version control tools tool; I also would love to hear about any “bug” tracker tools that are being used successfully. Especially those that are easy for clients to use.

    I also came across another podcast that looks worthwhile.

    Web Standards with Imagination with Dustin Diaz.

     
  16. 16 Josh

    Tim,

    Nice list. I appreciate you sharing it with us. Can you tell us about your experience with Vyew? I hadn’t heard about this and while there is some info on their website there aren’t any screenshots to see exactly what you can do with it.

    I’ll add my favorite apps for OS X to your list.
    1 – skEdit – a great xhtml/css editor with code completion and syntax coloring.
    2 – iPick – a great little color picker.
    3 – Macromedia (Adobe) Fireworks – for layout and design mockups.
    4 – Transmit – the best FTP client for Mac OS X.
    5 – Omnioutliner – the premier idea organizer.
    6 – Omnigraffle – powerful diagraming and charting.
    7 – Process – another outline app good for project management and has iCal integration.

    PS: how do you add links to comments? My links were stripped.

     
  17. 17 Scott

    For windows I use EditPlus, it has great ftp integration.

    For Mac I use TextMate, not only does it allow you full access to the directory (something truly lacking in every other program) but it also has full subversion controls.

    For version control, obviously, I use Subversion. It is quite the lifesaver. I use svn for the mac and the command line for the pc. Can’t find a decent gui for Windows.

    Don’t have Dreamweaver installed, never even come close to wishing I did.

     
  18. 18 Dan Perdue

    I fell in love with BBEdit once I switched to the Mac. It’s simplicity and power are just awesome.

    As far as live editing of CSS for both Firefox and IE(Internet Explorer), there’s a program that you might want to try called CSSVista (Windows Only). I haven’t had a chance to try it out yet, but it looks promising and is free.

     
  19. 19 Jeremy Flint

    My weapon of choice when coding is HomeSite. Yes, it is now the code editor for Dreamweaver, but I don’t really need the WYSIWYG stuff.

     
  20. 20 Matt Barker

    Great information; thanks.

    What’s the problem with Dreamweaver? I love it myself. I don’t understand the hangup developers have with WYSIWYG editors. It seems to me more of an ego thing. While I can do development straight from Notepad if need be, there are definitely times I like to see the results while I am doing some editing.

     
  21. 21 Tim Bednar

    I still find Dreamweaver very useful and is my primary coding tool. The problem with it is that because of its WYSIWYG design mode; often it enables “not well-formed” code.

    I’m still experimenting with Vyew; but I’d suggest just signing up and plucking about with it.

    I tried CSSVista once; it was buggy and did not really work the way I should—however, THAT is the type of application that would be killer.

    Right now, I’m working on project to migrate a very large e-commerce site that is all tables based to a XHTML (transitional)/CSS layout. I can not tell you how frustrating it is to try and replicate a legacy design pixel perfect in both browsers. So I might give CSSVista a chance again…

     
  22. 22 Adam Spooner

    Lots of people are making a tools – here’s what I use:

    [PC]
    1 – Dreamweaver – [haven’t used the WYSIWG view for a few years…nasty looking code – trying to break this habit]
    2 – Notepad++ – [slowly migrating – love it’s features!]
    3 – Visual Studio 2005 – [all things .NET – do more than just web at work]
    4 – Eclipse/RadRails – [all things Java/Ruby/Rails – a beautiful product]
    5 – Firefox plug-ins mentioned above – [thanks a ton! just started using and am loving them!]
    6 – WS_FTP – [only FTP I’ve ever used…any suggestions?)]

    [OS X]
    1 – SKEdit + CSSEdit – [all things web – very nice stuff]
    2 – Textmate – [all things Ruby/Rails – trying to use it for web too, but am stuck on SKEdit for the time being]
    3 – Cyberduck – [nice FTP client]
    4 – CocoaMySQL – [nice GUI for MySQL]

    [BOTH]
    1 – Photshop / Illustrator – [all things graphical]
    2 – iTunes / iPod – [gotta have tunes…] =)

    I’m a college student, so I get the good ol’ discount on my software. I’m realizing that as I get closer to graduating I won’t get those discounts any more… So I’m trying to start using OpenSource and lower priced software. Does anyone have any good suggestions on Adobe/Macromedia products? I’ve tried using GIMP, but am not a fan.

    Cheers!

     
  23. 23 Tank

    The problem with dreamweaver is that most people (read: self proclaimed web designers) have relied on it’s “push the button” functionality and developed some sub-par code and not cleaning it up or checking for cross browser compatability. The fact is that with the recent release of DW8, it’s GUI has been drastically improved to display a view with standards in mind (the code building features are still somewhat lacking) . And while it’s still not 100% there, it as close as most browsers are. I believe like the person above in that for the most part it’s an ego thing and/or a $$ issue. It has become trendy for coders to say that they “code in notepad”. Big deal. I code in the code view of DW and I can view what the output is, in real time, in the view window. Saves tons of FTP and refresh time of viewing them each time in the browser after saving in notepad and refreshing a seperate program. And when a big chunk is done, you can upload it and tweak through cross-browser compatability. Most people continue the DW sucks debate basing their opinions on something like DW4 or MX. It’s like saying CSS breaks across browsers and basing it on Netscape 4 or IE 5.0.

    I, by no means, think DW is the best product out there. But for what it is, it is a great tool.

     
  24. 24 Dennis Bullock

    Great piece. I love articles like this because they bring so many great free tools to light. It seems every day new things come to the surface. Here is my tool set.

    Dreamweaver
    TextMate
    Transmit for ftp
    News Gator for feeds
    Photoshop CS

    A new area I am diving into is Podcasts….any good tools for this that anyone knows about?

     
  25. 25 Chris Harrison

    Didn’t see it mentioned… for invoicing, I’d recommend BlinkSale. I’ve been using it for quite a while now, and it’s been an awesome way for me to keep organized in the financial aspect of being a freelancer. It’s defintely worth a look… plus… if you sign up now, you can take advantage of current pricing levels before they roll out a major upgrade in the coming weeks, where they’ll be bumping up the prices significantly.

     
  26. 26 Nathan Smith

    While I agree with Tank about the self-proclaimed thing (having been one myself), I don’t use Dreamweaver simply because it’s so slow and clunky (on my work computer with 2 Gb of RAM), eating up system resources. Most of the time, I have an idea, immediately want to write the code, but by the time Dreamweaver starts the moment of inspiration has passed. Notepad++ is great because it launches just as quickly as the standard Notepad. I use it to jot down notes to myself in *.txt format too. I agree though, that any hand-coding program will probably do the job, so long as we stay away from wizzy-wigs.

     
  27. 27 Tim Bednar

    DW is a resource pig—I have “heard” that 8 is even more so. It is also expensive, very expensive.

    Great idea about Blinksale. I still invoice the old fashioned way. I’m going to try it with this next set of clients.

    Oh, and if you use Firefox—I have also used FireFTP and liked it. No sound effects though…

    http://fireftp.mozdev.org/

     
  28. 28 Scott

    Yeah, my biggest gripe with DreamWeaver is the size…well, two gripes, the size and the price. If you are using DreamWeaver to hand code your sites and don’t use the WYSIWYG at all, it’s a waste of money and processor. The live preview is available on most decent text editors (ie: TextMate, SubEthaEdit) and they have a FAR smaller footprint and price.

    Also, I am so sick of people calling themselves ‘web designers’ because they have DreamWeaver. I only got my job because I hand code cleanly, if I told them I built my sites in DreamWeaver, I wouldn’t have been hired.

     
  29. 29 Damian Karlson

    I use Photoshop, Editplus, FileZilla, WinMerge, WinSCP, Firefox/IE/Opera.

    EditPlus is great—I searched high and low for a decent text editor. It does syntax highlighting and has FTP support (as mentioned above). However, it doesn’t do code-folding or search & replace across all files.

    I’m d/ling jEdit right now—it does code-folding! :)

    Thanks for all the tips and suggestions.

    Praise God!

     
  30. 30 Tank

    Resource Hog? You’ve been reading too much online.

    Right now on my PC per the process log:
    Dreamweaver.exe 9,656K
    explorer.exe 15,252K
    Filezilla.exe 2,652K
    firefox.exe 86,140K
    googletalk.exe 18,388K
    IEXPLORE.EXE 11,020K

    It’s no more of a resource hog than any other program. 10Megs on any modern machine isn’t that much. Of course, compared to something like Notepad++ is uses alot more memory. But it also does quite a bit more too. And there is no contest that it takes longer to load up, but when you’re working on a project then you can just leave it open. I agree with Nathan in that when I want to do something quick I just use Notepad++ which usually uses around 1K of memory while idle and launches in less than a second.

     
  31. 31 Mike Montgomery

    I use Textpattern, Photoshop 7, PSPad, FileZilla, and of course I love Firefox with these extensions: WebDev, Adblock and CSSViewer.

    Also Gmail, Bloglines, del.icio.us, Basecamp, Sidejobtrack.com.

    About text editors: tried html-kit and Notepad++ (btw, does Notepad++ have a desktop or quickstart icon?)

     
  32. 32 Mark Priestap

    Regarding Dreamweaver 8, which I use, performance is remarkably better than MX 2004.

    In MX 2004, there was always a problem with memory when using it for FTPing files. It seemed to hog resources when FTPing was going on. when it was done FTPing it would go back to normal. It was sort of like a big fat guy getting up from the couch to get a beer and then sitting down again.
    —————————————————————————————————————————-

    Software: Dreamweaver, Photoshop, Fireworks, FileZilla, GoogleTalk, Skype, Flash, Illustrator, and Pandora.

    Personal Homepage on my designwise server with links to everything I need access to on a daily basis. I have a local copy too.

    Firefox plugins: HTMLTidy, Firebug, WebDeveloper Toolbar

    Podcast Aggregator: Portable Playlist Beta. It’s slightly buggy but it’s awesome. It’s web-based (portable) and easy to use.

    RSS Reader: SharpReader. I’d prefer something a little more portable, but it works pretty well for me.

    Screengrabs: Snagit. I’d be SO unproductive without it.

    AJAX Wireframing: It’s a secret. Not sure when/how to unveil it. I took my stupid blog down. lol.

     
  33. 33 Pedro

    I want to give the thanks for your give us your tools as a FULL TIME web developer. But I agree with you in create churches’ sites with a professionalism like any other multimillionarie company.

    Its good for me found someone who belive in Jesus and is a professional web designer.

     
  34. 34 Steven

    If you’re on Windows and use Dreamweaver, use Dreamweaver MX (5).

    Dreamweaver MX 2004 and 8 take FOREVER to instantiate. I don’t like leaving an empty window open or minimized all the time just to avoid that. MX is extremely quick to launch after the first time, so I can open files, edit them, and then quit the application until I need it again, confident in knowing it will open up within a second. MX2k4 and 8 are notoriously slow to start up.

    I can’t stand Dreamweaver’s FTP anyway. WS_FTP is great and I don’t mind using a GREAT ftp app in addition to Dreamweaver rather than using Dreamweaver’s subpar ftp app just to avoid having to applications open.

    But, I digress because I have my Powerbook that I’m developing RoR stuff on now and Textmate is the jam. :)

     
  35. 35 Steven

    “just to avoid having to applications open.”

    should read “two applications” not “to applications” ;)

     
  36. 36 Tank

    Stevan.. what is subpar about the FTP program in 8? Everything prior to that is junk in how it connects and it process transfers. In 8 it runs in the background so you hit a button and continue to work. I’m not saying to use DW as an FTP client if you are in another program doing code or whatever. But if I’m in the program and working I see no drawbacks. It supports SFTP and transfers at least as fast as Filezilla. It also supports syncronizing projects but not that great. I move around to much and it seems as if the timestamps get messed up at somepoint.

     
  37. 37 Tim Bednar

    I just started using Blinksale; I think I’m in heaven. Although I don’t really like its price structure—free is 3 invoices a month; basic is 50 invoices a month ($12). Add that to my Backpack ($5) and Basecamp accounts ($12/mo).

    I’m still at free—lets you know how busy I am, but I expect to upgrade to $12/mo for Blinksale; although the invoices don’t display nicely in Gmail which might keep me from using it enough to pay for it.

    But these are all amazing tools for managing projects. I absolutely love Backpack—and after my current projects on Basecamp are done; I might just use Backpack. It is simpler.

     
  38. 38 Kris

    Wow, im at the bottom of the list! Great place to be.

    I use a variety of applications, but my core are:

    1. Zend Dev Environment (not cheap, but the best, especially if you manage group projects)
    2. CVS (Free BSD gave us this wonder!!!!)
    3. Photoshop CS (resource hog of love)
    4. Flash Studio 8
    5. Standards and Non-Standards compliant browsers

    Now I agree with everyone that Gmail rocks, but MyAereus kicks its butt to the curb!! I couldn’t get though a single project without the use of MyAereus. Its free. Its Web 2.0 in all its wonderful newness.

    Check it out and try it out: http://www.myaereus.com/

    kris.carter@myaereus.com

     
  39. 39 Space Gorilla

    Just a point about web design. The tool I use for web design is a pencil and a few sheets of blank 11×17 paper. Then I use Photoshop to create what I have sketched in a format that can be presented on the Web. But the design ‘lives’ as a layered Photoshop file.

    I use other tools to assemble a website design, but pencils, paper, and Photoshop are my design tools.

    I do get a little annoyed with people calling themselves website designers when they have few real design skills and have only a functional knowledge of Photoshop.

    Which is why most websites are not well-designed. Too many people start the design process by firing up Dreamweaver, when they should be getting out a pencil.

     
  40. 40 Tim Bednar

    I somewhat agree with the pencil and paper; my designs live in FireWorks mostly because it supports vectors better and is more intuitive for me who came over from Freehand (although I do use Photoshop).

    However, I do jump to CSS/XHTML fairly quickly to get a better handle on how it will be in the browser. I find that jpgs or pngs of sites are not the same as the actual HTML.

    I am writing an article on my process right now in fact…

     
  41. 41 fred

    Hey Tim,

    Thanks for the post on Vyew. Glad to see you found it so useful.

    I just wanted to let you know that we have redesigned the site and added a host of new features (desktop sharing being the most significant).

    Feel free to let me know your thoughts.

    Thanks!

    Fred

     

Comments closed after 2 weeks.