How the Pros Do It:

Profile of a Web Master (The Net, April 1996)

Exceptional design is not easily found on the Web. The online visual arts magazine @tlas is a breathtaking exception. The site houses the work of illustrators, designers, photographers, and journalists. Each page is also a running advertisement for superior Web design. Every link that one clicks on is stunning, and the attention to detail makes most other Web sites look utterly lackluster by comparison.

Macrone wrote all the HTML on the opening screen of the @atlas site. Note that everything is aligned using tables. The navigational art was designed by Amy Franceschini, and is a large image map file. The amber lines are a repeated custom-generated JPEG file; the background and link colors are defined by hexadecimal body tags.

I tracked down one of the three partners who created @tlas, Michael Macrone, and picked his brain to scavenge useful design tips for readers of The Net. Macrone, like the other two partners in @tlas, Amy Franceschini and Olivier Laude, works on the @tlas site in his spare time, without pay. Franceschini creates the screen graphics and navigational icons, and Laude selects the visual and editorial content of the site. Macrone is the Web master/site designer who puts the results of Franceschini and Laude's ideas and images onto their web pages.

Getting Started

When the first beta of the Mosaic Web browser was released almost two years ago, Macrone was a subscriber to San Francisco's renowned online source, the WELL). At that time, WELL discussion groups were on fire with excitement over the potential of the World Wide Web. In response, and as a free service to its subscribers, the WELL offered Web space to anyone interested in using it. Macrone immediately went to work creating his first site.

Each department of @tlas—Multimedia, Design, and Photography— has its own image map, and consistent alignment created by tables.

Macrone taught himself HTML by browsing the Web and viewing the source codes of Web pages he liked. In the beginning, he spent a lot of time on the home page of the National Center for Supercomputing Applications, studying Web page design tips and learning about HTML tags. It was easy to learn everything there was to know about HTML in those days, since there were relatively few tags in existence. When Netscape was released, the light bulbs went off. Macrone instantly recognized the significance of Netscape-initiated alignment and table tags.

Macrone recalls: "Tables were the answer to my alignment frustrations — they offer a grid paradigm that's much like what visual designers use on a printed page. Without grids, magazine design as we know it today would be impossible. Without grids, decent Web design was nearly impossible as well." Given Macrone's love for tables, it's not surprising that tables are used on every page of @tlas. They make it possible for Macrone to align elements perfectly from one link to another, and they're one of the reasons for @tlas' design continuity. They're also a fundamental reason for the site's visual success.

The Creation Process

Macrone is aware that Netscape is the only browser to fully support tables. "We made the decision that anybody who is bothering to look at @tlas probably already has Netscape. We used to put a disclaimer on the first page (about viewers needing to use Netscape); it linked our viewers to the Netscape site so they could download the browser, but we stopped. We're not in the business of selling browser software for Netscape." Faced with the decision to design for Netscape or make two separate sets of pages — one for Netscape, and another set for browsers that don't support alignment and table tags — Macrone decided to go the solo Netscape path. "Anyone who is interested in aesthetics on the Web will have Netscape. I hate to exclude those coming on to the Web through America Online, for example, but it's the choice you make. If you want to design something that looks really nice, you'll have to write off some percentage of the audience."

Macrone has a set of Web pages that publicize his books. The type of alignment you see here is extremely tricky—it involves detailed table and alignment tags.

Macrone works on a Power Macintosh 7500 with 16MB RAM, and RamDoubler, a software utility that tricks your system into thinking it has more RAM. His primary software applications are Photoshop, Netscape, and BBEdit.

Web Authoring Methodology

There are no standard rules of thumb in Macrone's Web authoring methodology. He typically takes Franceschini's images through many iterations before he decides which best suits the page it's intended for. Here's how he works:

According to Macrone, "This [process] allows me to try all the options, and confidently choose the best-quality image with the smallest possible file size."

Macrone is not a huge fan of background tile patterns (which he feels can easily clutter a page) or transparent images (which often load improperly and impose dithering, since the images then have to be eight-bit). He usually chooses solid-colored backgrounds (and seems to favor black and white as his predominant choices), and uses hexadecimal code to generate the background colors of pages, text, and links. He uses an FKey shareware program, called "GetColor FKey," which converts the eyedropper selection in Photoshop to its RGB values and stores them on the clipboard. He then uses HTML Color Picker to convert the RGB to hexadecimal code and places the resulting hex into his BBEdit HTML document.

Utopia Redux is composed of pages designed by Macrone. Here's an example of a finished screen.

Macrone swears by BBEdit's search and replace features, which can batch-process an unlimited number of HTML documents within a folder. His work with table and alignment tags makes it possible for him to create consistent graphic navigation bar placement on each page. Each page contains its own navigation graphic, which has an associated image map.

Paying Attention to Detail

There are more than 150 image maps on the @tlas site. They pose a staggering file management challenge. Michael uses WebMap to generate the image map definition files.

By using BBEdit, Michael can easily make changes over multiple files, which becomes critical when one deals with a high volume of pages and image maps, such as are contained within the @tlas site. He is also very precise and careful with his naming conventions. If an artist has 10 pages devoted to his or her section, the map file will be called by the artist's name, page number, and file type. This makes it very easy to work on large volumes of documents and keep track of everything.

Another of the Utopia Redux screens. The unreadable element of text on the left if part of a background tile, and the HTML text on the right is aligned using table tags.

Macrone takes pride in the attention to detail he pays to each page and design challenge. He recently created a series of pages for an article called "Utopia Redux" on the word.com site.

He spent hours changing the pixel dimensions of a GIF file on one page so that it would perfectly align to the vertical stripes of its page's background pattern. This level of dedication is evident in all of his work.

Macrone is an advocate of viewing the source code of anything and everything that appeals to him. "I pay special attention to my own HTML code readability," Michael states.

"If I were to die tomorrow, someone could pick up and carry on with @tlas pretty easily by studying my source code. I make sure it's neat, and use lots of comment tags and underscored lines for separating text. I don't want to be the only one doing this job forever, so I'd rather not make myself indispensable and trap myself."

A Jack of All Trades: Michael Macrone

Macrone writes books for a living on subjects as far away from Web authoring as imaginable. His book titles, which range from Eureka!: What Archimedes Really Meant and 80 Other Key Ideas Explained (HarperCollins 1994) to Brush Up Your Shakespeare! (Harper and Row 1990) are all displayed on his personal site. He even links his It's Greek to Me! (HarperCollins 1991) to Barnes & Noble online for impulse buyers who happen to be surfing his Web site and want to purchase it. He and the other two @tlas partners would love to get paid for their work on the Web, since they spend all their time creating @tlas and other sites. For the moment, they have put their effort into Web site design, rather than into recruiting sponsors and/or business managers for the @tlas site. All three @tlas partners—Michael Macrone, Amy Franceschini, and Olivier Laude—are available to design sites for other clients. It's doubtful any of them will be out of a job for a long time to come.