In every industry, there are a few tools that a professional cannot live without. In Web Design, those tools are FireFox, Coda, and Photoshop.
FireFox
Sure there are a lot of great browsers out there, like Safari and Chrome, but they cannot compete with FireFox’s add-on library. For Web Designer’s, you MUST check out ColorZilla, FireBug, FireFTP, Web Developer and the MeasureIt add-ons (thanks to Fábio ZC for the MeasureIt suggestion).
ColorZilla. ColorZilla provides a color picker that you can use to sample any color on your browser window. Additionally, you can customize the settings so that you can copy the HEX code of the color you’re sampling and paste it right into the Photoshop color picker. Before I used this tool, I was taking screenshots of my browser window and opening the image in Photoshop to sample the color. Major time saver.
Firebug. Firebug is an extremely powerful tool. It allows you to easily “inspect” items on a web page to see what CSS is applied to them, as well as isolating the HTML. This is just a fraction of what this plugin can do. Check it out!
FireFTP. FireFTP is an amazing FTP client, considering it’s free and built into FireFox. While it obviously cannot compete with other FTP programs that you can purchase, it’s perfect for the beginner web designer who doesn’t have a big budget for software.
Web Developer. Web developer, like Firebug, is an enormously powerful plugin. It allows you to do numerous things, such as disabling CSS, images and javascript. One thing that I use the most is the resize tool. Just specify dimensions and Web Developer will resize your browser window. Very cool!
MeasurIt. MeasureIt allows you to easily draw an outline around elements to see their pixel dimensions. Very useful for those times when you need to double-check heights and widths when you’re writing your CSS.
Coda
Among all the HTML/CSS editors I’ve used (for both Mac and PC), Coda is by far THE best. It truly is “one window web development”. It has a built-in FTP feature, and even has an easy-to-use resource library. I also like the fact that I can store common snippets of code so that I don’t have to keep retyping stuff over and over. Oh, and did I mention it’s only $99!
NOTE: this is a mac only program. Sorry PC’s.
Photoshop
What would the web be like without Photoshop?!? It’s scary to even think it. Photoshop is the only place you need to go when creating your next design for a website. In fact, Photoshop has become such a major design tool (in any design industry) that I don’t even know why they still have the word “photo” in the name. I mean, with all that this program can do, they should change the name to something that encompasses all it’s abilities, like “FreakingAwesomeShop”. I know. Doesn’t have the same ring to it.
Did I miss anything?
I would add CSSEdit by macrabbit to the list. I’m a big fan of Coda as well, but still find myself launching CSSEdit when making changes to style sheets. I also find the FTP capabilities built into Coda to be a bit limited in some cases and still regularly use the Transmit FTP software.
What features does CSSEdit and Transmit have that Coda does not?
I find the CSSEdit interface a bit more intuitive and convenient. Perhaps it’s partially due to the fact that I’ve been using CSSEdit for a while and that it has become a familiar tool.
Coda’s main shortcoming on the FTP side is lack of support for folder shortcuts/bookmarks. I frequently use the sidebar in Transmit for convenient access to both local and server folders and miss having this functionality on Coda. Hopefully this will be beefed up a bit in a future release. I would think it would be fairly trivial as Coda and Transmit come from the same developers.
I know what you mean about tools being familiar.
With any tool that tries to incorporate multiple features, like Coda, it’s likely that one of the features will lack in some capacity. For me, Coda has the perfect balance of features and usability. Not too many features and not too few. Plus, you really can’t really beat the price point.
I agree with you when u talk about Coda and Firefox. But I use Fireworks instead Photoshop (and FW is about 700 U$ more cheaper than PS).
FW is perfect for design layouts for web, fast layers, fast path tools, slices, and much more.
Obvious that you can make site with PS.. but on the same way that you can edit photos with FW.
And I use another extension for Firefox called “Measure It”, its very usefull.
Wow, you’re right! “Measure It” is really cool! Thanks for sharing. I’m updating the post with this item ;-)
I read an interesting article about Photoshop vs. Fireworks with regards to image compression…
Check it out
I used to use Coda. Then I tried Espresso.
Holy God, the difference is like night and day. Have you tried Espresso’s FTP interface? It blows Coda not just out of the water, but out of the f***ing ocean. And that’s hilarious since Panic (creators of Coda) make a dedicated FTP client.
Also, Espresso’s “workspace” feature beats Coda’s tabs HANDS DOWN. I can’t go back. Coda looks like a retarded 5 year-old after using Espresso for a week.
And let’s not forget that Coda can’t fold code and probably won’t until version 2.0. That’s a killer.
And finally, Espresso is FAST. Opens in 1 second flat on my 2.5 Ghz Macbook Pro. Coda takes 6 or 7 seconds. Opening files in Espresso FEELS faster, too.
That said, Espresso has some very irritating shortcomings:
1) You can’t drag an image from the sidebar and get an auto IMG tag. Yes, really. They forgot that. Might as well have left out the “save” command in my opinion.
2) Customizing colors for the editor is WAY easier in Coda. Espresso uses “sugar” nonsense that tries to copy CSS, but ends up being much more difficult to use.
Ha, thanks for sharing ;-)