Web designers need good editors and graphics software to do their work, but there are also other software tools we can use to make our lives easier. Things like color managers, FTP Clients, domain registration tools, and invoicing systems.
Every week from January to October, I will post a free or inexpensive (less than $50 US) software tool for web designers. Do you have a favorite editor or software tool? Recommendations are always appreciated, especially of software other than HTML editors. The best way to let me know of your suggestion is to review it.
Screen shot by J Kyrnin—courtesy Baseline Rhythm Calculator
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.
Screen shot by J Kyrnin—Formalize.me
Screen shot by J Kyrnin - courtesy CSS3 Generator
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.
Screen shot by J Kyrnin courtesy When Can I Use...
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
, and some other things.
Screen shot by J Kyrnin - courtesy Paypal
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.
Screen shot by J Kyrnin courtesy Stripemania
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.
Screen shot by J Kyrnin - courtesy SciWeavers
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.
Screen shot by J Kyrnin - courtesy Where's the Fold
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.
Screen shot by J Kyrnin - courtesy CSS Drive
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.
Screen shot by J Kyrnin - Mozy
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.