The GigaOM Network: Cleantech | Tech Insider | Gadget Gurus | Online Video | Open Source | Web Life | Research | Live Events | About | Contact

6 Tools for Web Design

Written on February 27, 2007 by BJ Clark and 88 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!

Leave a comment

Comments (71)

  • 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

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

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

  • 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…

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

  • 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?

  • 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!

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

  • I would add rails on the list.

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

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

  • 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?

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

  • W3Schools isn’t associated with the W3C, btw.

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

  • 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

  • @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.

  • Only MS Expression Web!!

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

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

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

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

  • Boring! Useless article.

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

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

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

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

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

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

  • 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!!!

  • @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

  • 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!

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

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

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

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

    cheers, tod

  • 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

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

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

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

  • 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!

  • Matt and Allan:

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

  • 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…

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

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

  • 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)…)

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

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

  • 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

  • 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

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

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

  • Those are some great tools. Thanks for the list.

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

  • Great post. Thanks so much !

  • i use most of these tools for my website design business. but always want to see if there are more better ones out there.

  • Nice post!great article, I learned a lot thank you very much

  • This is one very good resource for newbie like me.

    Thank you.

  • Nice article! Thank you! Subversion helps a lot in the daily work.

  • Thank you from a long time designer learning more about programming.

  • well i have never heard of text mate so will check that
    but is that for windows or mac…

  • Thanks for clarify info about w3schools.

    Daniel Jenkins

  • Please don’t promote w3schools anymore.

    1) They are not affiliated with the W3C, and their site should NOT be taken as official or canon. People incorrectly assume they are official because of their name.

    2) A number of areas of their site are actually incorrect (I mean, factually wrong) – I have personally begun to move away from relying on them so much because of the mistakes and inconsistencies. Here are some examples of inaccuracy on their site:

    * http://xrl.us/bfxwd
    * http://xrl.us/bfxwf
    * http://xrl.us/bfxwf

    Better sources for reference include:

    * http://www.htmlhelp.com
    * http://css-discuss.incutio.com
    * http://www.brainjar.com
    * http://www.htmldog.com
    * http://css.maxdesign.com.au

    (and yes, these were all grabbed from #html on Freenode, I know they keep a list of w3schools errors as well as suggested alternatives)

  • Only one program i use for web development and that is Notepad++. it is the best program i have used simple yet packed with cool features that are clean and simple. Also there are some plug-ins and it can run off your flash drive.

  • O and i agree with the guy above, Craig Fowler, i did not notice they were not affiliated but i have noted there incorrect statements.

    Plus here is the link for Notepad++ (try it out): http://notepad-plus.sourceforge.net/uk/site.htm

  • No doubt that w3Schools.com is one of the best source to learn anything in WWW, however i like macromates.com, thanks for sharing with us.

Linkbacks (17)

Subscribe to the comments feed

Leave a Reply