6 Tools for Web Design
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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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!
Chris Ryan on February 27th, 2007 at 10:59 am
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
Chris Parker on February 27th, 2007 at 11:19 am
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.
Chris Parker on February 27th, 2007 at 11:53 am
oh! and since your including websites, don’t forget devguru.com for all your language reference needs!
Chris Ryan on February 27th, 2007 at 12:31 pm
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…
Twist on February 27th, 2007 at 12:34 pm
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).
dave on February 27th, 2007 at 12:34 pm
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?
anon on February 27th, 2007 at 12:48 pm
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!
J Phill on February 27th, 2007 at 1:05 pm
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.
Fabien Penso on February 27th, 2007 at 2:07 pm
I would add rails on the list.
azzamallow on February 27th, 2007 at 4:26 pm
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.
azzamallow on February 27th, 2007 at 4:32 pm
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.
paul on February 27th, 2007 at 4:37 pm
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?
Claytron on February 27th, 2007 at 7:10 pm
I can’t stop loving SubEthaEdit for text editing. Textmate is cool but SEE does it for me.
Adam on February 28th, 2007 at 12:15 am
W3Schools isn’t associated with the W3C, btw.
John Mead on February 28th, 2007 at 12:28 am
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.
Aptana is nice but not yet a dreamweaver… on February 28th, 2007 at 12:40 am
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
Thoth on February 28th, 2007 at 1:02 am
@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.
Tondar on February 28th, 2007 at 1:30 am
Only MS Expression Web!!
Honza on February 28th, 2007 at 2:46 am
I use textwrangler for all programming. This has got to be the best fully featured editor out there thats free.
OBH on February 28th, 2007 at 3:35 am
This site holds all the help resources for web development:
http://gotapi.com/
JocuriFlash on February 28th, 2007 at 3:38 am
I use NVU for html editing. It’s open source and it’s great.
deprisa on February 28th, 2007 at 3:38 am
I like Color Scheme too, and smultron to edit text really quick
Svenjick on February 28th, 2007 at 4:03 am
Boring! Useless article.
LGR on February 28th, 2007 at 4:16 am
Take a look at the Adobe Kuler tool at http://kuler.adobe.com/. It is great for helping with colors as well.
ulimatbach on February 28th, 2007 at 4:27 am
I prefer notepad
Kuswanto on February 28th, 2007 at 5:01 am
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.
pondhopper on February 28th, 2007 at 5:03 am
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.
Don't forget Cyberduck! on February 28th, 2007 at 6:09 am
AWESOME free FTP software. Transmit may be cool, but Cyberduck has a great interface and an awesome price: http://cyberduck.ch/
Don't forget Cyberduck! on February 28th, 2007 at 6:09 am
AWESOME free FTP software. Transmit may be cool, but Cyberduck has a great interface and an awesome price: http://cyberduck.ch/
Leo on February 28th, 2007 at 6:27 am
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.
drwho on February 28th, 2007 at 6:27 am
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!!!
azzamallow on February 28th, 2007 at 7:06 am
@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
Paul French on February 28th, 2007 at 7:12 am
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!
gibbitz on February 28th, 2007 at 7:25 am
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.
James on February 28th, 2007 at 7:40 am
No, it’s a great article.
I’m already using TextMate, but subversion looks useful so many thanks.
Logotipos VON Design on February 28th, 2007 at 7:49 am
Thanks for sharing!
Profpan on February 28th, 2007 at 8:08 am
Interesting article, but please — spell-check is also a crucial tool for putting together websites.
Tod on February 28th, 2007 at 8:54 am
Textmate for webdesign? I guess that textmate is a tool for coders or bloggers.
cheers, tod
Brandy on February 28th, 2007 at 8:59 am
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
Cole on February 28th, 2007 at 9:38 am
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.
Tony on February 28th, 2007 at 10:17 am
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.
TheMacThinker on February 28th, 2007 at 10:58 am
I thought this would cover some pretty good tool to optimize web design productivity but I guess I came to the wrong place.
Matt Hurne on February 28th, 2007 at 11:00 am
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!
Jonathon VS on February 28th, 2007 at 12:52 pm
Matt and Allan:
Just to confirm, you’re right. W3Schools is not run by the W3C. It’s owned by a private company.
flip on February 28th, 2007 at 4:27 pm
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…
Jason on February 28th, 2007 at 9:56 pm
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.
Matthew on March 1st, 2007 at 2:34 pm
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.
Vanapagan on March 2nd, 2007 at 5:20 am
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)…)
Vanapagan on March 2nd, 2007 at 5:23 am
By the way, Tod #37, webdesign is coding… at least for a lot of us.
WebpageFX on March 2nd, 2007 at 1:48 pm
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.
Steve Simitzis on March 3rd, 2007 at 5:54 pm
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
Chris24 on March 3rd, 2007 at 11:03 pm
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
anon on March 11th, 2007 at 9:07 pm
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.
Tom on March 12th, 2007 at 12:00 pm
I use NVU for html editing. It’s open source and it’s great.
Fred333 on December 21st, 2007 at 1:48 pm
Those are some great tools. Thanks for the list.
website design on May 5th, 2008 at 12:51 am
No, it’s a great article.
I’m already using TextMate, but subversion looks useful so many thanks.
simon on May 25th, 2008 at 1:08 am
find out more pelase visit http://www.buntymaharana.co.cc
Danhbaweb20.com on July 10th, 2008 at 2:21 am
Great post. Thanks so much !
YouYap - Web Design on July 20th, 2008 at 6:59 pm
i use most of these tools for my website design business. but always want to see if there are more better ones out there.
Anthony on September 23rd, 2008 at 8:09 pm
Nice post!great article, I learned a lot thank you very much
XSitePro Reivew on October 2nd, 2008 at 10:55 am
This is one very good resource for newbie like me.
Thank you.
aalmeida71 on November 6th, 2008 at 8:33 am
This is really cool for wewb design. http://www.artdigitalonline.com
Webdesign Rosenheim on December 22nd, 2008 at 6:26 am
Nice article! Thank you! Subversion helps a lot in the daily work.
balabo3_rk on February 5th, 2009 at 8:14 am
division 2 college basketball prescription diet pills brazil scope rings for my mini 14 ranch rifle esse est percipi catholic cemeteries
Ronnie on February 12th, 2009 at 12:11 pm
Thank you from a long time designer learning more about programming.
Pixel Groups on March 21st, 2009 at 3:07 pm
well i have never heard of text mate so will check that
but is that for windows or mac…
Dan Jenkins on March 31st, 2009 at 6:14 pm
Thanks for clarify info about w3schools.
Daniel Jenkins
Craig Fowler on April 6th, 2009 at 5:02 am
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)
Jono on April 16th, 2009 at 12:47 am
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.
Jono on April 16th, 2009 at 12:50 am
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
SaaS Development on October 21st, 2009 at 5:59 am
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.