Cheap and Free Web Design Software Pick of the Week

Web typography is something that many web designers forget about. And leading (line-height in CSS) is often the last thing they think of even if they think of typography. But coming up with a rhythm for your typography is important. This tool lets you try out different line-heights and rhythms for your headlines and paragraphs. The only thing I miss from this tool is the ability to change the font-family and the column widths to find good leading for different measures and fonts.

If you try to get your web pages to look the same in all browsers, you probably have gotten frustrated by the way that HTML forms end up looking. For example, you might see a monospace font for textareas and borders can be styled differently and so on. Formalize.me is a CSS framework for forms. All you need is a JavaScript library (like MooTools, jQuery, or YUI) and the formalize CSS and JavaScript. Nathan Smith has created an excellent and easy-to-use tool for getting our forms to look good across browsers—even IE 6!

CSS3 is the latest version of CSS, and while not all of it has been approved as a standard, web browsers have a lot of support for it. But often you have to use browser extensions to get them to work. The CSS3 Generator helps you add CSS3 styles to your documents, shows you what they will look like and tells you the browsers and versions they will work in.

There are lots of new specifications coming out, but it can be overwhelming to try to determine the browser support for each feature you might be considering. Does this HTML5 element work in IE? Does that CSS3 property work in Firefox 3? But now you can find out with this really great site. It covers CSS, HTML5, JavaScript, SVG, and some other things.

You can set up your site to accept credit cards through Paypal. This is a fairly easy way to add a shopping cart to your site. Other ecommerce systems can be expensive and challenging to install, but a Paypal payment system is possible for most of us to install without a lot of trouble. You don't even need an SSL certificate—Paypal handles that part of the transaction.

Stripes are a great way to dress up the backgrounds of your web pages. While I don't recommend using stripes with text written right on top, by putting stripes in the background you can create a nice looking design without overwhelming the text. But while horizontal and vertical stripes can be very easy to create, diagonal stripes are trickier. But Stripemania is here to help. You can adjust the background color, add as many stripes as you wish in different colors, change the width of the stripes and the spaces between them, and even add gradients to your stripes. All to create interesting effects in your stripe patterns. I created this candy-cane stripe in about 3 minutes with Stripemania.

You will be amazed at the different types of buttons you can create with CSS. What's unique about this generator is that you can start with a preset button that you like and then modify it or start from scratch and create a whole new style. You can modify the background and text color, the font size and face, the text and box shadows, the borders and the corners to get a button that is exactly the way you want it to look.

Knowing where the fold is on a web page is important, as that will give you the idea of whether the page is scrollable, what parts of the page are visible to the most people and so on. Many studies show that web readers will scroll on web pages, but they have to know that they can, and that is affected by what is visible when they first arrive. This site, Where's the Fold?, shows you the portions of your page that are visible to various percentages of the web browsing population. For example, when I view this site in it, I learn that 90% of people see my photo above the fold, but only see one blog headline. But at least that gives them a hint to scroll.

If you are trying to speed up your web pages one thing you can consider doing is minifying your CSS file so that it takes up as little space as possible. This online tool will help you do that. The basic version does it automatically, with only a few options. But if you want to have more control over what is done, you can go to the advanced version to control the compression minutely.

Yesterday I opened a project I'm working on, only to find that the file had somehow become corrupted and most of the work I'd done on Friday was gone. In the past that would have been devastating to me—having to re-do an entire day's work is not appealing. But I didn't panic or even get upset. I just went to my backups, restored my project from Friday night, and kept working where I'd left off. There are lots of different personal backup options out there. I'm on a Mac, so my first choice is TimeMachine. But sometimes that doesn't cut it (what if there were a fire—my TimeMachine disc is in the same room as my computer). This is where a service like Mozy becomes really useful. You can set up a system to back up up to 50GB for only $5.99US per month. Six dollars isn't too much to pay for peace of mind.