Free Tools for Joomla Design

Tutorial 3: Free Tools for Joomla Design

Reprinted with permission from Compass Design: Valid W3C joomla template designs for your website
So we are about to begin design the site for real, but first we need a few tools. Now, everyone probably has their own favorites, but here is a list I have been working on of all the tools you will need to design a site. The good part? They are all free for the downloading.
Important Note: Where a download link is shown I have give a direct link for the download to make the download as easy as possible. Where mirrors have been linked to I have chosen US ones. More experienced users should examine the link and truncate it to go to the actual site.

Free HTML/Web Design editors

Two choices here, Nvu is one I found recently and I have been playing around with it. It seems pretty good, has built in validation (important for us) and also a Mambo/Joomla extension which will be helpful. Nvu is 100% open source.  This means anyone is welcome to download Nvu at no charge, including the source code if you need to make special changes. You can get the extension from Mamboforge. The complete forge project is here.
Another choice is actually more of a validator. The "CSE HTML Validator" is an all-in-one HTML, XHTML, CSS, link, spelling, and accessibility checker. You can get the free version html validator here.
Out of these two, the CSE Validator is probably better, but Nvu has the cool extension. Ahh, what to do!
Note that neither of these are "WYSIWYG" html editors. In an editor such as Dreaweaver you can create a web page without even seeing the html code. However, this is perhaps not the best way to make a Joomla/Mambo page. Its important to be able to see the html and css styles and the page in the index.php (as you saw in the last article) is not really very long or complex.

Standards Compliant Browsers

Now we need a decent browser. Now if you are still using Internet Explorer, goes outside and slap yourself around.
Finished? Good, you deserved it. Quite apart from the fact that IE is the most buggy, security-hole ridden browser to ever be installed (or was that Netscape?), using it has one big problem when designing to standards. We talked a little in the last article about how support for CSS is not consistent across browsers. IE has some of the worst support. To make a page look the same you have to use CSS "hacks". These are snippets of CSS that can only be seen by certain browsers. Its very very important when trying to design to web standards to use a browser that is standards compliant, then you make allowances for browsers that aren't. Doing it the other way around makes it difficult to say the least. "Design for the best and then for the rest" goes the saying.
OK, so my choice is Firefox, and while you are at it, download the developer toolbar, it will be essential for our design work. Note that its easiest to get the toolbar after installing firefox by actually using Firefox to browse the link, then the installation is somewhat automated.
Right, so next time I look at my web stats, I don't want to see any IE, right?

Free Graphics Editor

In keeping with our cheapskate theme, there is actually a decent graphics editor out there and its free. Its called GIMP and your can download it here. You also need another piece of code which you can get here. More information is at http://gimp-win.sourceforge.net/stable.html.
Note that if you go to the actual gimp.org web site, you can't really download much of use there. Its all the source code (its open source like Joomla). You need to go to another site like the one above to find something you can actually install.
So make sure you have all those downloaded/set up and then we are ready for the Basic Joomla CSS Template

A preview from our next joomla tutorial
Tutorial 4: A Blank Template CSS file for Joomla
In an earlier section, we discussed a slightly different design process. Instead of creating the design and then doing the CSS layout, we will be doing it the other way round, the Joomla CSS first. We are doing this because we want to make an blank CSS template file that can be reused by anyone.