Spinning a Better Web

More Stories in this Series

Development software

The Web pro’s tool kit

The open-source revolution has produced plenty of powerful programs for the Mac. It has also provided some of the fundamental—and free—tools that run the Web, including Apache (the world’s most popular Web server) and MySQL (the relational database system that’s used by Yahoo, NASA, and a bunch of other huge organizations that could afford to pay for software).

While professional Web developers use such big-name open-source applications as Apache, they also freely sample from myriad smaller open-source projects—bulletin-board programs, blogging apps, content-management systems, and other tools available at sites like SourceForge.net.

Professional Web developers aren’t the only ones who can benefit from software produced (or at least inspired) by the open-source movement. The Web is bursting with Mac resources that can help anyone who runs a Web site. Here are a few of the best.

In living color

Selecting just the right colors—ones that will enhance your Web site’s message rather than detract from it—can be a daunting task for any designer. Years of disciplined study and practical experience might make the process easier. But for people who need a little push in the right direction, there are several free Web tools that help you generate palettes of compatible colors, ranging from the bright and loud to the somber and subdued.

Does Magenta Go with Puce? If you’re trying to pick colors for your Web site, Color Schemer Online can help. Give it one color, and it’ll suggest 15 others that go with it.

Color Schemer Online provides a simple interface that lets you select a color and instantly see 15 other harmonious colors (see “Does Magenta Go with Puce?”). Color Scheme Generator 2 takes a more scientific and complex approach; it includes tools for viewing monochromatic, contrasting, and analogic color schemes.

If a photo is providing your inspiration, feed its URL to DeGraeve.com’s Color Palette Generator. The app will return two color schemes—a “vibrant” one and a “dull” one—based on the image’s colors.

Inexpensive images

A picture may be worth a thousand words. But to a designer, free photos may save a thousand bucks. Stock photography can be expensive—it’s not uncommon to have to pay a few hundred dollars per image, and that can quickly erode a design budget.

Fortunately, there are plenty of online sources for low-cost or free imagery. MorgueFile, for example, organizes its collection of free high-resolution photos into simple categories such as Animal, Objects, People, and Still Life (see “From the Morgue”). Stock.Xchng has a massive selection: more than 150,000 photos. iStockPhoto isn’t free, but each image costs just $1 to $3, and the quality of the photos is better than what you’ll find at most free sites. And you can search the Web with YotoPhoto, a search engine that scours the Web for free images.

From the Morgue The name is ghoulish, but the service isn’t: MorgueFile offers free photos in many categories.

When you’re searching for and using free imagery, keep in mind that you get what you pay for, so you may have to wade through dozens of bland vacation snapshots before you find a real gem. Most free photo sites let contributing photographers define a photo’s usage rights: in some cases, you must credit the photographer; in others, commercial use is limited. Make sure to read the fine print on each site and for each photo you want to use.

ASCII-style

Anyone who remembers daisy-wheel printers knows what ASCII art is about: images created with chunky black letters on white paper. If you’re looking for that retro-tech look, check out ASCII Art Made Easy. Provide a photo, and this Web page can quickly turn it into a series of symbols and letters that simulate the various shades of gray. Squint hard enough, and the results look like the real thing. You can even add a modern touch of color.

Building on a Budget

Macromedia Dreamweaver and GoLive may be the reigning champs of Web design, but not everyone can afford them. If money is tight, NVU is worth a look (see “Page Design on the Cheap”). This open-source program runs on Linux, Windows, and the Mac, and it provides many of the features of an expensive Web design application—a WYSIWYG view, word-processor-like text tools, integrated FTP, template support, a CSS (Cascading Style Sheets) editor, and even a spelling checker.

Online measuring tape

CSS gives Web designers the power to accurately control their page layouts. With pixel-accurate placement, you can dictate where a banner, sidebar, or graphic should be placed on a page.

Page Design on the Cheap NVU provides many of the features you’ll find in more-expensive Web apps such as Macromedia Dreamweaver.
(Click image to open full screenshot)

MeasureIt, a Firefox extension by Kevin Freitas, is a simple tool that can help refine your design process. While viewing a page in Firefox, you drag a rectangle across the page—over a graphic, for example. A shaded box appears giving you pixel values for the width and height. It’s a helpful diagnostic tool, perfect for making sure your designs add up.

All-purpose tool

Web Designers spend a lot of time asking questions: Why doesn’t the design look exactly the way I planned it? How will my site look if visitors don’t have JavaScript turned on? Is my HTML and CSS code correct? And there are many ways to get the answers. But for all-around usefulness, you won’t find anything better than the Web Developer extension, by Chris Pederick (see “Swiss Army Knife”).

This Firefox add-on provides countless useful tools for analyzing Web pages. You can turn off JavaScript to see how a page works without it; add a graphic outline around all block-level elements to quickly identify layout elements on a page; display the size (in pixels) of any block or image on the page; view any cookies currently set for the current Web site; make sure all the links on a current page work; validate HTML and CSS; and plenty more. Web Developer belongs in every Web designer’s toolbox.

How does it look in Windows?

Swiss Army Knife Chris Pederick’s Web Developer extension gives you all sorts of tools for analyzing your Web pages.

Mac Web designers face the uncomfortable fact that most people browsing the Web use Internet Explorer (IE) on Windows computers. Because IE is relatively old and doesn’t adhere to the same standards as Safari or Firefox, you’ll often find that a design that looks beautiful on your Mac will fall apart on IE for Windows. If you don’t have a Windows machine lying around, you can get a little help on the Web. Browsershots is a free Web-based screen-capture tool that lets you see what your Web site will look like on different Web browsers and operating systems. It can take screenshots of IE 5.5 and 6 for Windows, and it can even take them at different screen resolutions and with different color depths. Since this is a volunteer effort, you may find that it takes a few hours and sometimes days for your screenshots to be completed. If you’ve got more money than time, BrowserCam provides a commercial alternative.

Net administrators rejoice

If you’re neck-deep in the Web, you probably have to deal with a lot of hassles—registering domain names, making sure your Web server is still up-and-running, and fighting spammers. There are plenty of tools available in OS X’s Unix core that’ll help you with all that. But if you want a one-stop shop for much of your Web administrivia, check out DNS Stuff. There you can find out who owns any domain on the Web, whether a mail server (including your own) is listed in a spam database, and many more ways to track down network problems.

Desk(top) reference

Keeping up with the Web’s changing trends and technologies can be a full-time job. But you shouldn’t have to waste your time looking for the best sources of information. The Web Developer’s Handbook is a compact Web page loaded with hundreds of links to some of the most useful Web-design resources on the Web. From design inspiration to the latest technical tips and tricks, you’ll find plenty of sites that can make you a better designer.

[ David Sawyer McFarland is a Web developer. He is also the author of Dreamweaver 8: The Missing Manual (O’Reilly, 2005). ]

recommended for you

Web browser roundup

Read more »

Subscribe to the Create Newsletter

Comments