91 Comments

Summary:

Today I came across an article with a few ‘tools’ for web design and frankly, I thought it pretty lame and unexciting. There were 2 things on there that I felt were actually good information, Color Schemer and Typetester. The other, information was either lame (a […]

Today I came across an article with a few ‘tools’ for web design and frankly, I thought it pretty lame and unexciting. There were 2 things on there that I felt were actually good information, Color Schemer and Typetester. The other, information was either lame (a “handy dandy” notebook) or untrue (“Mountain Dew“).

So, here are 6 tools that I find to actually be useful. A few of these apply to web design as a whole, while others are more mac related.

  1. w3Schools.com – I’m still shocked on a daily basis by the number of people that don’t know what the w3 is or have ever heard of w3schools.com. The w3 is basically the governing body of web standards. They are the people that define what is XHTML and CSS. Now, what is w3Schools? It’s free, complete documentation for all things web. If you don’t know your <pre> from your <ol>, this is the place to go. If you still rely on dreamweaver to sort out your <div>s or, heaven forbid, you still code with tables, the w3schools is a great place to start learnin’ yo self some real code. It takes a second to get past the design (it’s aweful, ironically), but there’s a metric ton of good information there.
  2. Apache – Oh Wait, it’s already there. Just click that “Personal Web Sharing” check box in your Sharing system preferences and you have everything you need to build a basic static HTML site. I get all my software updates from entropy.ch and there are a hundred good tutorials out there for installing PHP, Ruby On Rails, django, or whatever software you plan to use.
  3. subversion – Subversion is amazing, to say the least. Once you go “version control system” you can’t go back. Basically, subversion is a way to keep all of your sites (or your blog theme, etc) backed up and versioned. You install subversion server on your computer or a remote server, and then check in your site to the server. Then you can checkout your site to your webserver and always have an updatedable, but also revertable site. If you break your design, roll it back to the last time you checked it in. Want to move webhosts? It’s as easy as 1 command. And want to update your site to that new design you’ve been working on, “svn up” and your good-to-go. For a great tutorial on installing subversion, check out this great tutorial from Hivelogic.
  4. Textmate – Put down Dreamweaver and step away from the handholding. Seriously people, it’s really not that hard, and you’ll make so much nicer sites because of it. Textmate is a god send for web site designers. Yes, you’ll have to code by hand, but you can also post to your blog, get live updating previews of your code, and use the aforementioned subvesrion, straight from inside Textmate. And, with code competion and bundles, a well experienced ‘mater can type 2 or 3 characters and complete entire lines of code.
  5. Firefox – Ok, this one seems like low-hanging fruit, but if you add Firebug, Web Developer, and Colorzilla to Firefox 2, you have one sweet testing/debuging environment. Firebug is like sending Firefox to medical school, seriously slice and dice capabilities. Web Developer extesion is like buying one of those nice big red Snap On tool chests full of tools, and shoe horning it into your browser and Colorzilla is just that, a color picker as powerful as Godzilla. I can’t imagine doing webdesign with out these great little pieces of kit.
  6. Safari from O’Reilly Publishing – Safari from O’Reilly is amazing, that’s about all I can say. If you can’t tell, I’m big on documentation, and Safari is like having a bookstore in your computer. You can search through hundreads of REALLY REALLY great books (sorry about the caps, Safari gets me hot). My favorites on there are Bulletproof Web Design, The Zen of CSS, and Eric Meyer on CSS.
  7. BONUS – Here’s all the other mac only software that I use and abuse that is worth a mention: xScope, CSSEdit, Transmit, Linotype FontExplorer X, Xyle Scope.

I hope that helps a few people out (and you find it better than suggesting a “handy dandy notebook”) and turns someone on to some awesome new tools. It’s not all Mac only software so pass that along to your PC friends too. I’m sure there are other great tools out there, if you know of one I missed, make sure you post it up in the comments so I can learn about it.

Happy Developing!

  1. Couple other useful tools:

    - Paparazzi (Great for Web Screen Shots)
    - ColourMod (Dashboard App to generate Hex Colors)

    Also is great to have both Safari and FireFox 2.0. This way you can get different Perspectives of your site. Even better is to use this site when you want to see your site in different browser/resolutions: http://browsershots.org

    Share
  2. I’d like to add some indispensable tools i use for web design:

    - skEdit
    Wicked cool lightweight CSS editor with intellisense and code formatting.

    - Aptana
    The best JavaScript editor/debugger available. great for finding DOM methods you cant remember!

    - Parallels. Browser testing. ’nuff said.

    I would be completely lost without these tools. I’d also like to second you on FireBug, another tool I couldnt do without! Makes me wonder what I did before FireBug existed.

    Share
  3. oh! and since your including websites, don’t forget devguru.com for all your language reference needs!

    Share
  4. Don’t forget the Cheat Sheet at:

    http://www.ilovejackdaniels.com/

    Great to hang in your Cubical/Home Office… The HTML one is pretty good…

    Share
  5. For me the must haves are Apache (both local and on my web server), PHP configured on my Mac to as closely match the server configuration as possible (which means enabling it inside of the httpd.conf and getting a php.ini file since last time I check it doesn’t ship with one from Apple), BBedit, Photoshop (even if a layout is going to be pure CSS I like to prototype it and test colors in this first), Transmit, the W3′s CSS level 2 and 3 references, the online function reference at php.net, Firefox, and from time to time my Sam’s Teach Yourself PHP in 24 Hours book (because sometimes I can remember the chapter a function I don’t often use is covered in but not the name of the function).

    Share
  6. pipette for grabbing colors, text edit and others for simple code…

    BUT what are you seeing as a major difference between cssedit and xyle scope?

    Share
  7. I definitely use colourmod, along with Safari Books Online and several of the other utils mentioned! You may want to check with your institution/organization/university to see if they have a subscription to Safari – the greatest thing ever.

    Also see CharacterPal for easy access to special characters. I have to say I use

    http://www.natural-innovations.com/wa/doc-charset.html

    for special characters, since it’s been the first Google search result for “html characters” (quotes or not!) for years! Always handy.

    I also use OneButton for my FTP needs.

    Finally, I have to say, TextMate is great but vim is king!

    Share
  8. The actual Color Schemer app is one of the best apps I’ve used for designing. It’s great for putting together color schemes. You can even import images into the app to pull color schemes out from the image. Very useful.

    Share
  9. I would add rails on the list.

    Share
  10. Your missing the most important piece of software: Internet Explorer.

    Whether we like it or not, IE is still the most widely used browser in the world. Put aside all the plugins you can get for firefox (these things are cool and may help with web dev – im not saying scrap firefox), simply using firefox and “assuming” your website will look fine in all other browsers is completely untrue. You will need to see what your website looks like in IE. IE does not render HTML/CSS in the ways you’d expected.

    Share

Comments have been disabled for this post