6 Tools for Web Design

Written on February 27, 2007 by BJ Clark and 68 people have commented

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!

Share This

Filed in: Commentary, Development, Software and Tips

Related Entries:

Trackbacks/Pingbacks (Trackback URL)

  1. Pingback by Your title here » Blog Archive » 6 Tools for Web Design
  2. Pingback by Basement Tapes » 6 Tools for Web Design
  3. Pingback by Web Messenger » 6 Tools for Web Design
  4. Pingback by Lawton Chiles Graphic Design Minute: Design Training, Links and Resources You Need » 6 Tools for Web Design
  5. Pingback by links for 2007-03-01 « Steve Miller’s Blog
  6. Pingback by Charles Gnilka’s Blog » Blog Archive » 6 tools for web design
  7. Pingback by error is the mother of all inventions
  8. Pingback by SAINT » Blog Archive » 6 Tools for Web Design at The Apple Blog
  9. Pingback by j david macor.com | Best Design Week Ever: # 1
  10. Pingback by HuertoSaga » 6 Tools for Web Design (EIP)
  11. Pingback by Best of March 2007 | Smashing Magazine
  12. Pingback by Webdesign (css, grafica e altro) » Blog Archive » Best of March 2007
  13. Pingback by Technical Related Notes » Blog Archive » links for 2007-03-01


Comments RSSComments

  1. #1 Chris Ryan says:

    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

  2. #2 Chris Parker says:

    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.

  3. #3 Chris Parker says:

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

  4. #4 Chris Ryan says:

    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…

  5. #5 Twist says:

    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).

  6. #6 dave says:

    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?

  7. #7 anon says:

    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!

  8. #8 J Phill says:

    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.

  9. #9 Fabien Penso says:

    I would add rails on the list.

  10. #10 azzamallow says:

    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.

  11. #11 azzamallow says:

    Also I want to add that w3schools is a good place if you want to learn about the areas you have no idea about e.g. if you’re vague on XSL, this is the place to go. But for more complicated web development, w3schools is not sufficient. It will only teach you the basics and give you the foundations, you will have to go elsewhere to get the complex examples/answers.

    Figure out how to read the HTML/CSS standards. That will take you a long way.

  12. #12 paul says:

    I actually like the site management tools in Dreamweaver. Does Textmate support that as well? If not, does anyone know of a tool that does?

  13. #13 Claytron says:

    I can’t stop loving SubEthaEdit for text editing. Textmate is cool but SEE does it for me.

  14. #14 Adam says:

    W3Schools isn’t associated with the W3C, btw.

  15. #15 John Mead says:

    Great list!

    I’d like to add Serverskine (http://www.serverskine.com/) to the list, I use it to keep track of all of my website’s login info.

  16. #16 Aptana is nice but not yet a dreamweaver killer says:

    When you start dealing in a dozen sites a week, and need to track the associated folders, files, do global searches for obsolete functions, variable searches, plugin handling, global search and replaces, and then publish the 20 different files you just changes with out over writing the guy next to you, then tell me you basic html editors hold a candle to Dreamweaver. I like Aptana, it already rocks, and I hear it plugs into eclypse, but it isn’t quite ready to take out dreamweaver.

    - Will

  17. #17 Thoth says:

    @azzamallow:
    Macs no longer have IE installed. Not everbody has an older Mac or the luxury of being able to install Windows on their Mac (legally - parallels, bootcamp or otherwise).
    Nobody cares if sites render correctly in IE anyway.

  18. #18 Tondar says:

    Only MS Expression Web!!

  19. #19 Honza says:

    I use textwrangler for all programming. This has got to be the best fully featured editor out there thats free.

  20. #20 OBH says:

    This site holds all the help resources for web development:
    http://gotapi.com/

  21. #21 JocuriFlash says:

    I use NVU for html editing. It’s open source and it’s great.

  22. #22 deprisa says:

    I like Color Scheme too, and smultron to edit text really quick

  23. #23 Svenjick says:

    Boring! Useless article.

  24. #24 LGR says:

    Take a look at the Adobe Kuler tool at http://kuler.adobe.com/. It is great for helping with colors as well.

  25. #25 ulimatbach says:

    I prefer notepad

  26. #26 Kuswanto says:

    English is not my mother tongue. Isn’t it w3shcool supposed to be called a reference instead of a tools?

    Accoding to the Dictionary.
    Tools : a device or implement, esp. one held in the hand, used to carry out a particular function.

  27. #27 pondhopper says:

    QUOTE:
    “#18 Thoth

    @azzamallow:
    Macs no longer have IE installed. Not everbody has an older Mac or the luxury of being able to install Windows on their Mac (legally - parallels, bootcamp or otherwise).
    Nobody cares if sites render correctly in IE anyway”
    —
    THOTH….? You obviously don’t design websites for a living. Your advice is good if you design websites in your underwear at home for your own amuseument. If you design for others, you must make certain your site looks as you intended on other configurations of browsers and pcs.

  28. #28 Don't forget Cyberduck! says:

    AWESOME free FTP software. Transmit may be cool, but Cyberduck has a great interface and an awesome price: http://cyberduck.ch/

  29. #29 Leo says:

    If you are looking at svn you MUST also look at svk http://svk.bestpractical.com/ -
    this acts as the client against an svn server - but it has loads of extra features compared to the standard svn client, this biggest one of which is you can check in and out locally (so if your working on your laptop on the train, you can still do change tracking) and then merge back to the svn server when you have an internet connection again.

  30. #30 drwho says:

    digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!! digg suXX!!!

  31. #31 azzamallow says:

    @thoth
    Nobody cares if sites render correctly in IE anyway.

    Right…..lets all be little Mac geeks and completely ignore the rest of the IT world. Im sorry, but the majority of net users care how sites render in IE, and for those who are out there that completely ignore IE are thought of as bad web developers becuase their websites look like crap.

    I know it sucks, but this is reality. You want to be a good web developer? being narrow is not the answer

  32. #32 Paul French says:

    A little credit where credit is due. Safari is a joint venture between O’Reilly and Pearson Technology Group (Que, Sams, Peachpit, Addison Wesley, etc). An important point, since the three books you referenced were all published by Peachpit. That aside, I completely agree with you. They are indispensible references!

  33. #33 gibbitz says:

    You forgot a PC or an intel mac with paralells. 60% + of the population is using IE on the PC which, by the way was always a completely different animal than IE on the mac (more like netscape 4 than IE on the PC). And since we should say have a PC, get multiple IEs it has IE 3.0 through IE 6.0 and allows you to install IE 7 in addition.

    I just wanted to give a shout out to simple css and taco too.

  34. #34 James says:

    No, it’s a great article.
    I’m already using TextMate, but subversion looks useful so many thanks.

  35. #35 Logotipos VON Design says:

    Thanks for sharing!

  36. #36 Profpan says:

    Interesting article, but please — spell-check is also a crucial tool for putting together websites.

  37. #37 Tod says:

    Textmate for webdesign? I guess that textmate is a tool for coders or bloggers.

    cheers, tod

  38. #38 Brandy says:

    If we’re talking about plugins for FireFox, then FireBug ought to be mentioned.

    As far as Internet Explorer is concerned.. it is too bad you can’t install more than one version on a PC, that I know of. :P

  39. #39 Cole says:

    I second the recommendation of SubEthaEdit; as a free, lightweight programming editor I’ve found it can’t be beat. I picked it up when I was too poor to upgrade BBEdit and haven’t gone back.

  40. #40 Tony says:

    I don’t really see an issue with using Dreamweaver. Even when I use the software, which isn’t all that often anyway, I find myself using the manual coding section of it… not the WYSIWYG interface. It’s laid out decently, its CSS reminders are helpful and there’s some good tools in it.

    I’m still perfectly capable of making my sites validate, look good in other browsers and work properly. I don’t think “poorer” websites are something that can be blamed on software like that. You either know the coding or you don’t. I say use whatever tool suits you best, who cares.

    I can go back and do all of my coding in notepad on Windows, as some people seem to intent on telling me, but what’s the point. Anything that helps isn’t a bad thing. If anything, the main drawback of Dreamweaver is the price.

    Personally, I use HTML-Kit most of all, but thats for Windows.

  41. #41 TheMacThinker says:

    I thought this would cover some pretty good tool to optimize web design productivity but I guess I came to the wrong place.

  42. #42 Matt Hurne says:

    As far as I know, w3schools is not associated with the W3C in any way. Just throwing that out there. But it is an excellent site!

  43. #43 Jonathon VS says:

    Matt and Allan:

    Just to confirm, you’re right. W3Schools is not run by the W3C. It’s owned by a private company.

  44. #44 flip says:

    mtn. dew doesn’t actually have that much caffeine in it. by the time a person drank enough mtn. dew to have any of the caffeine overuse problems in the link (and it would have to be over a relatively short time period), they would already have other adverse health effects just from consuming that much liquid. the hfcs, on the other hand…

  45. #45 Jason says:

    Saw that same article and was also disappointed with the lack of actual tools so thanks for your list.

    Didn’t realize subversion could be used in that way and will definitely be checking it out.

    And put me down as another user of SubEthaEdit and Cyberduck though I may finally make the dive into Textmate.

  46. #46 Matthew says:

    I found out a few months ago that Seattle Public Library users (i.e., library card holders,) can access Safari for free via SPL’s website. Pretty sweet.

  47. #47 Vanapagan says:

    MAMP is essential for me. Otherwise TextMate, CyberDuck, FireFox (with FireBug, Web Developer, EditCSS, X-Ray, Total Validator and some more…) and Q to check IE for Windows (haven’t got an Intel machine yet (sob)…)

  48. #48 Vanapagan says:

    By the way, Tod #37, webdesign is coding… at least for a lot of us.

  49. #49 WebpageFX says:

    A favorite at http://www.webpagefx.com i didn’t see on the list was:
    Jruler: http://www.spadixbd.com/freetools/jruler.htm
    A free virtual ruler for your computer screen, which is great for exact px measurement.

  50. #50 Steve Simitzis says:

    Source control is great, though there’s no reason to install SVN, when CVS is already installed on your Mac. CVS is the source control system that people have been using for years, and is perfectly adequate for most projects. Textmate has a CVS bundle, and there are plenty of other tools and applications out there for people who would rather avoid the command line.

    SVN is newer but it’s not “better” than CVS - it’s just different. http://www.pushok.com/soft_svn_vscvs.php

  51. #51 Chris24 says:

    Hey, I Love TextMate Especially. I Love it as a text / code editor. I Just Recently realized a lot of its “short-cut” features in the bundle section of the app! Great Application, Worth the Money! It’s GREAT!!

    -Chris
    Host of the All About Mac Podcast

  52. #52 anon says:

    Oh, I just thought of another one (cause I just had to use it!): free ruler by Pascal:

    http://www.pascal.com/software/freeruler/

    Also I have just installed a trial of CrossOver with IE6 to do some cross platform testing, though I guess not all sites render the same via CrossOver from what I hear … still interesting.

  53. #53 Tom says:

    I use NVU for html editing. It’s open source and it’s great.

  54. #54 Fred333 says:

    Those are some great tools. Thanks for the list.

  55. #55 website design says:

    No, it’s a great article.
    I’m already using TextMate, but subversion looks useful so many thanks.

Leave a reply

NOTE: Keep comments on-topic and lighthearted. Off-topic and inflammatory comments are bad for everyone and will simply be deleted. Let's be friends.

Subscribe without commenting

Close
E-mail It