How the Pros Do It:
Profile of a Web Master
(The Net, April 1996)
By Lynda Weinman
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
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:
1. Macrone takes an image and saves it as a GIF. He starts at
four-bit (16 colors), goes up to five-bit (32 colors), and continues all
the way to eight-bit (256 colors)
in order to find the right balance of image quality and file size.
2. He also makes several JPEGs of the image, in Max, High, Med, and
3. Macrone inserts all these different versions of files into his
HTML BBEdit document, and views them in Netscape.
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
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
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,"
"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.
– 30 –
First published in The Net magazine (April, 1996)