6 Tools for Web Design

91 Comments

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!

91 Comments

drwho

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

Leo

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.

pondhopper

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.

Kuswanto

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.

Honza

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

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.

Aptana is nice but not yet a dreamweaver killer

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

paul

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?

azzamallow

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.

azzamallow

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.

J Phill

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.

anon

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!

dave

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?

Twist

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

Chris Parker

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 Ryan

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

Comments are closed.