was Mozilla born
The story of the first mascot on the Internet
Netscape Communication Corporations Official Mascot
by Dave Titus with assistance from Andrew Wong
Andrew Wong, art director with Poppe Tyson Advertising in Mountain View, California, asked me to help create Netscape's first Web Page in September of 1994, then known as Mosaic Communications Corporation. It was a few weeks prior to the Netscape project that Curtis Fukuda, a photographer in Mountain View had introduced me to Andrew. A meeting was arranged where Andrew reviewed my portfolio and pulled samples. Dave Carlick, President of Poppe Tyson, Mountain View, CA, saw the samples when they were assembling the team to work on the Netscape website, and especially liked an illustration I did called "The Junk Food Junkie" (he actually pictured using the creature on the Netscape web site; an early sketch Andrew did of the Mosaic home page has "The Junk Food Junkie" on a mosaic tile riding a unicycle)
I was brainstorming with Andrew and Nathan Rapheld, the development teams project lead at Netscape in charge of the production progress and the go-between on the Netscape/Poppe Tyson Advertising creative relationship, and Andrew came up with the idea of using a mascot/user surrogate character to guide the user through the site. "Space boy," an intergalactic cross between Calvin and Ren, was born.
"It was extremely well drawn and the character exuded charm and personality. It had exuberance but also curiosity and innocence," according to Andrew. However, when Marc Andreesen saw the drawings, he went along with the concept of using a mascot/user surrogate, but insisted that it had to be Mozilla (which first started as "killer Mosaic" and became the "Mosaic killer" after they couldn't take over the name "Mosaic"). Our team was disappointed with this news. This was 1994, and "Jurassic Park" was "last year's" thing! We didn't want to do a dinosaur, but we didn't have a choice. The first drawings showed a less streamlined, T-Rex-like dinosaur that resembled Roger Corman's "Carnosaur." It was after the next revision that I arrived at Mozilla's final look.
The First Mozilla
This second set of sketches contained the original rough drawing that was selected by the web development team as the official mascot. From here Mozilla slowly evolved into his current form that today is known all over the world. "Mozilla" was the code name given to the browser software by the programmers at Mosaic Communications Corporation. The Web browser was first called "Mosaic" from "Mosaic Communications Corporation," then became "Mosaic Netscape" where "Netscape" was the name of the product and not the company. They lost the rights to use the name "Mosaic" - the name of the Web browser Andreesen had helped create as a student at University of Illinois' National Center for Supercomputing Applications - and changed the company name to "Netscape." It was only months later that the name "Navigator" became the product name. The software later became known as Netscape Navigator to the general public. The name "Mozilla" was a hybrid of sorts combining the company name, Mosaic, with the screen star, Godzilla. I guess because the programmers felt the code was a monster that had to be reckoned with. I believe Jamie Zawinski actually came up with the name in an executive meeting at the Netscape headquarters. The design group asked for section headers that would appear at the top of each page on the site. Each header would have Mozilla doing something that helped emphasize what that section or page was all about. To put our artistic challenge into perspective, the web team was creating the new web site in the days before the Mosaic Netscape product was even out for release. The only widely available Web browser out there was NCSA Mosaic, which did not allow for "transparent" images. (Transparent images allow an artist to create images in non-rectangular shapes by turning the background transparent.) Furthermore, all clickable images had to have a heavy, blue outline around the perimeter. As a result, all of the first Mozilla images were rectangular banners across the tops of each page or section. Most of the first-generation pages were formatted, coded, and maintained by Nathan. The first web site had many drawings of Mozilla in action. He is rough and tough with his grainy, scaly texture, but still loosens up and laughs at his own imperfections.
The Home Page
The opening page of the site was concepted by Andrew Wong and is based on the original Mosaic Communication Corporation logo. The logo was an "M" with a circle around it and different sized square tiles scattered behind. I believe the tiles were a reference to the capabilities of the software to tile images into a patterned background. The idea was to build the page in more or less a 3D look in cyberspace. The circular shape became a lens and magnified the logo and the squares that appeared behind it. The squares became dimensional tiles that would move forward when clicked on and display a simple representation of the section or page you would access if clicking on that tile again.
Tiles forward page
It's too bad the mouse over interactivity wasn't achieved yet. It would have been a great addition to this page in helping the user get around easier. The various squares, when moved forward, had embossed images of Mozilla that were pulled from the actual headers on those sections. The first full color image of Mozilla that dictated his looks throughout the site was the "Welcome" header image.
The "Welcome" image
Here Mozilla is asking you to enter the site and enjoy yourself. He seems a bit sly as if he has some secrets to reveal and is anticipating the viewers arrival. This header had the Mosaic logo and the word "Mosaic" built in because the name "Netscape" had not yet been adopted. When the new name became official Netscape had not designed a new logo and the "M" with the circle was left in place for lack of another concept as well as time to develop a new logo since the deadline for the official launch of the Web site was looming ever closer.
Welcome no Mosaic image
Cool Mosaic Tricks was a section that was devoted to showing how to do cool effects via Web programming.
Cool Mosaic tricks
I tried to give the feeling of magic to this header. Mozilla has produced a glowing M that has an M. C. Escher-like anomaly. This may be a good place to point out that all these images were sketched by hand first with pencil then scanned into the computer and painted with color in photoshop. The backgrounds were made with the additional help of Kai Power Tools texture editor. I made the original images slightly larger than the finals and reduced the size to fit the header dimensions. The first actual color images of Mozilla were completely digital and exist only in cyberspace (on the computer). The first Netscape homepage included 8 or 9 main sections that you could access from the tiles page. Then there were another 10-12 sections that required Mozilla header images. Each of these sections had numerous links to various sites on the web as well as more Netscape content. Each header graphic had Mozilla doing something that related to the content of that section. Andrew and I sat around for hours brainstorming to come up with concepts for all of these sections. Some were easy and some a lot harder to develop. How to Give Feedback seems to be a favorite of Mozilla fans and one of my favorites as well.
How to Give Feedback, like many of the sections, was a basic tutorial on how to give input to Netscape on the functions of the browser. This one depicts Mozilla breathing fire which is an analogy to giving feedback, or speaking your thoughts, or making your presence known. These are the kind of analogies that we strived for in most of the Mozilla imagery; ways of portraying activities that people do with a funny twist or an interesting metaphor.
How to Get Support is another image that plays on a metaphor of a crowd holding up a hero.
The hero could be you or me or any internet user that needs support. It was
the intention to make the Netscape customer feel more important. We hoped that
customers would relate to Mozilla and see some of their own personal qualities
in him. There are some other strange creatures in that image as well and I was
hoping that someday maybe some of these would come to life and play more important
roles on the Netscape pages, but the nature of the internet is an ever evolving
entity and Netscape's focus changed so rapidly that the idea was lost in the
shuffle. You may notice the original Mosaic Communication Corporation logo on
a flag in this image. Many of the headers still had the Mosaic M since the Netscape
name was adopted at the last minute and there was no time to revise these images.
They never were revised before the site took on a totally new direction.
What's New is definitely my favorite of all the original Mozilla headers.
It's so wacky and weird. It comes from the cliche' knocking your head against
the wall for an idea. Sometimes it is very hard to pull an idea out of thin
air and What's New can be very thin, conceptually speaking. I love the expression
on his face. It's a surprised look and also a realization that the concept is
right in front of him. The apple actually plays off a different metaphor; that
of Isaac Newton and his famous apple. In this image the apple is being thrown
sideways instead of dropped out of the air; a very new concept indeed.
Many of the sections contained somewhat mundane information. For instance, Registration.
Not the most exciting of pages, but when Mozilla appeared in the header it made these kind of sections a little more fun and interesting. Here Mozilla drops off a letter in a mailbox, an everyday activity that most people can relate to, but signifying much more on the web by creating an analogy to e-mailing information. The headers for Version Info, Ordering and Training all try to accomplish the same effect with Mozilla at work trying to liven things up.
A few other sections headers still had reference to the Mosaic Communications Corporation logo even after the web site was launched. We didn't have time to go back and modify these images to reflect the new logo before the official release of the new browser. "Killer Products" has a mozilla etching something into a tile, taken from the tiled motif behind the "M" in the original Mosaic Communications logo.
Netscape Handbook shows Mozilla trying to construct the Mosaic logo and referring to the instruction manual.
"How to Create Web Services" has Mozilla, the artist, sculpting an M out of rock with his bare hands.
Some of these original header images make use of visual puns like the eyeball poking out of the telescope in About the Internet
and mozilla somehow getting stuck in an ice cube for What's Cool.
Others require a bit more thought in order to understand the meaning but are mainly images that introduce the user to various sections of the Netscape web site with Mozilla as a guide to adventure. Mozilla is definitely friendly and evokes a feeling of comfort and familiarity. Who We Are shows that Mozilla is almost human and has an ego.
He's taking a picture of himself and looks like he is about to brag about his good looks, a reference to Netscape's (at the time) incredible graphical innovations. Customer Solutions shows Mozilla again having fun.
He's like a little kid concocting some kind of scientific potion, excited to see what it does. I think most internet users at the time were just stumbling around on the web trying to figure out what it was all about. I know I was. I really like the Internet Directory image.
Mozilla is kind of confused about which way to turn next. I think the alien scarecrow confuses him even more. It must be the three eyes. Frequently Asked Questions gives Mozilla many options to choose from.
He can choose a number of different doors and is pictured in contemplation about what his next move is. This image, like many of them, shows how easy it is to get somewhat lost or sidetracked or confused when using the internet, but also that there are many paths to follow and none of them are the wrong path. It's the adventurous soul that makes the most out of the internet experience. Internet Search shows Mozilla finding his way in the dark with a flashlight.
He has a bit of a sneaky and devious look on his face. I think this is more of a defensive posture for Mozilla. He's not so sure about what he'll find. Nathan instructed Andrew Wong and I to come up with some interesting alternatives to the, soon to be, archaic HR or horizontal rule that was a mainstay of the old way of separating copy or sections within a web site. It was decided that we would make some graphics that would float around the page in various places and be used as separator elements for subcategories on each page. These would be little Mozilla drawings, a way to add interest and a touch of warmth to the web. The concept is reminiscent of the small cartoons in MAD Magazine by Sergio Aragones depicting slapstick gags happening to all sorts of people and animals.
In the beginning the Mozilla HR's were built as part of the original HR element, the first of which depicted Mozilla peeking over the top of the thin line and his tail draped over behind him. These were nothing more than just fun little graphics to intersperse throughout the site to help get away from the old text-based way of doing things. I tried to think of ways to incorporate Mozilla into the existing HR's. One has Mozilla hanging form the HR on a scaffolding and washing the wall of the site like a window cleaner.
Another shows Mozilla with snow skis riding a chair lift like at a ski resort.
It was during this phase that I moved to Mammoth Lakes in the Eastern Sierra Nevada Mountains. Mammoth Lakes is a town full of sports enthusiasts ranging in diversity form skiers and mountaineers to triathletes and bull riders. It was after moving to this resort town that Mozilla really became, in my mind, who he is today. I began depicting Mozilla in all kinds of sports situations for the HR's. A rock climbing Mozilla,
a mountain biking Mozilla,
a water skiing Mozilla,
a scuba diving Mozilla.
I literally tried to think of every sport reference I could when coming up with Mozilla images. I sketched hundreds of ideas. Some just popped into my head others I worked a little harder on, but each one was just as fun to sketch as the next. Some made use of other types of separator elements like Mozilla pulling on a rope like in a tug-of-war where the rope acts as the horizontal rule (HR).
And a Mozilla running the sack race with a motion line behind him showing the path where he bounced across the screen.
I also developed a fireman Mozilla with a hose spraying water
and Mozilla getting electrocuted by accidentally sticking his finger in a light socket.
As the sports references started to become harder to devise Netscape decided that they wanted an entire library of these kinds of images; small low resolution graphics that they could call upon and use randomly for various purposes. They began requesting certain images. For instance, they were quickly developing corporate locations overseas, in France, Germany, Japan, and elsewhere. They wanted Mozilla in foreign postures. I made Mozilla riding a scooter carrying a baguette and wearing a beret for France
There was a French garn carrying a tray of spirits and a towel over his arm,
a German yodeler,
and a Ninja Mozilla too. Somebody decided to make a lot of these into animated .GIF files. I don't know who but many simple animations were built from the original .GIF files Netscape also asked for more patriotic images of Mozilla for the American side of the company. Mozilla with a sparkler and Mozilla lighting a giant firecracker on the fourth of July complimented the Colonial Mozilla playing the flute and holding an American Flag in his tail.
And there were other holiday type Mozilla images for Halloween and Christmas.
Mozilla is an acrobat too. He juggles balls while balancing on a chair,
he walks a tight rope, he twirls a lariat.
Mozilla has just pitched a ball, the ball has been hit hard, a line drive up the middle of the diamond, and Mozilla, unlike his predecessor Charlie Brown, leaps up as the ball rockets by below him. He avoids being hit and does so for the sake of poor old Charlie Brown who just couldn't seem to get out of the way. I created another image as a kind of tribute to some animation that I always admired.
Mozilla is leaning against the toe of Godzilla. They are friends and get along well. When creating this image I was thinking about the wonderfully clever animated short, Bambi Meets Godzilla. Bambi is quietly grazing in a field unaware of any type of danger that might threaten. pleasant music is playing quietly in the background when, out of nowhere, a giant foot crashes down and flattens the poor deer. I laughed my head off when I saw this cartoon short but always felt kind of sorry for Bambi and thought that maybe Mozilla should become friends with the big G. As Mozilla evolved so did the interest of the Netscape employees. I began to get requests for Mozilla images from many departments within the company to use on T-shirts as employee motivational items as well as just cool shirts to wear around the premises. Kathy Clark (Jim Clarks daughter, who was a Netscape employee and a marketing specialist) and Hugh Hemple started a line of Mozilla merchandise that was put up for sale on Netscape's web site. Netscape was one of the first major sites to do electronic commerce, and they were the first to come up with a secure transaction server with real-time credit card validation.
As a demonstration, they devoted a section of their site to selling Netscape merchandise. Mozilla images were printed on ceramic travel mugs, boxer shorts, hats, shirts, towels, bags, sweatshirts, scarves, clocks, magnets, golf balls, stuffed animals and kids clothing, and sold along side Netscape logo products online and later at the on-campus Netscape store that was built at the main offices in Mountain View, CA.
lost his grainy textured look on this merchandise in order to make the printed
products cleaner and more consumer oriented.
I was later asked to build Mozilla animation for some employee motivational presentations.
I was also asked to supply Mozilla art to a company called Narrative Communications who had developed a streaming technology for the web and Mozilla became the first to come at you live with Enliven technology, voice and action, the whole nine yards. Other Mozilla images and references began to pop up all over the web including animations made by people that took the images of Mozilla I created and modified them for their own purposes. One in particular was the Mozilla breathing fire and coming up over the top of the Netscape "N". This was never endorsed by Netscape because it obscured the integrity of the corporate logo. I liked it a lot though and have always thought that corporate logos could stand to lighten up a bit and let loose sometimes. Other strange Mozilla references popped up here and there in the form of cookies and other types of art. The Mozilla Museum has an image of Mozilla wearing a leather jacket. Cool image, but I have no idea who did it. It does fit right into my idea of who Mozilla is.
of the later projects was an on-campus cafe at the Netscape offices in Mountain
View, CA. It was called the MOZ' Cafe.
The image of Mozilla riding a power surfboard around the rings on a planet, carrying a food tray and wearing a chef's hat was made for the sign and the menu's at the cafe.
Mozilla took on a new dimension in this drawing. He became more "disney-like"
in appearance with shadowing and a smooth clean look. How Mozilla fell off the
homepage is a story in itself. Andrew remembers when Mike Homer came on as a
VP of Marketing. He wanted Netcape to be positioned as one of the big boys,
like AT&T or some other big, corporate telecommunications company. They had
a new logo developed by Landor & Associates, and Andrew designed their new site
to go with their new corporate identity. Andrew also helped them re-organize
the site and came up with a typographical style that they used for several years
before they began building their Netcenter. When they released their new look,
they got tons of email messages asking what had happened to Mozilla. Rather
than easing into their new identity, they abruptly went too corporate. Mozilla
had to be brought back as little dividers and side art right away. It took a
few years but eventually all mention of Mozilla was gone from the Netscape site.
The last official image of Mozilla that I created before Netscape was bought pout by AOL/Time Warner was Mozilla in Australia cooking shrimp on the barbie.
It's kind of fitting that this would be the last one. The merchandise is gone, the HR's are gone and the fun that many people associated with Mozilla is gone.
I felt like Mozilla had his fun and went on vacation.Unfortunately, the Australian operation was downsized before Christmas in 1998 and the card was never printed. There is a site on the web now called Mozilla.org that has a red T-rex type dinosaur they call Mozilla.
I don't know who made this image but it just doesn't depict the friendly nature that the real Mozilla brought to the internet. There have been varoius Mozilla drawings since for in-house T-shirts and employee motivation that were commissioned by Netscape employees but nothing "official" to speak of.
I hope Mozilla continues to have a nice vacation and believe that one day he will be back and will treat us all to some fun and excitement in true Moz fashion.