Episode 47

The Web Behind with Jen Robbins

January 15, 2013

Jen Robbins joins Eric Meyer and Jen Simmons for another episode in The Web Behind series. They talk about the early days of web design, O'Reilly, GNN, wrestling with technology and more.

Download
Open iTunes Read Transcript Subscribe

The fact that they, my designs, were just light or bytes was very peculiar to me and that was sort of what I remember from that time. The transition was that just guttural response to not having anything tangible.

Transcript

Thanks to Jason Neel for transcribing this episode.

Jen Simmons

This is The Web Ahead, a weekly conversation about changing technologies and the future of the web. I’m your host Jen Simmons and this is episode 47.

I want to first say thank you so much to today’s sponsors: An Event Apart, Shutterstock, and the Google Developers Live Chrome Channel, which I will tell you about each of those later in the show.

This week is another episode in The Web Behind series, co-hosted by Eric Meyer. Hi Eric!

Eric
Hey Jen! How you doing?
Jen Simmons
Good!
Eric
Did you have a good New Year?
Jen Simmons
I did. Seems like it was a really long time ago. [laughs]
Eric
Well, half a month. Come on!
Jen Simmons
Yeah.
Eric

Anyway. Today we’re going to up the confusion quotient by having two Jens. It’s Jen and Jen. We were just talking about that before we came on.

Our guest today is Jen Robbins, who has been working on the web for quite a long time: since early 1993. We’ll get into that in a little bit. She was a book designer at O’Reilly in 1993. And then in 1996, she went off to be a freelancer, an author. She did some really cool projects—including Cooking with Rock Stars, which I hope we get a chance to talk about before we’re done here, just because that’s too awesome—and is currently a co-founder and involved with the Artifact Conference, and is also a digital product designer at O’Reilly again, which she describes as being a designer for anything that is not a book or a website at O’Reilly. So, I’m really happy to welcome Jen Robbins. Welcome, Jen.

Jen Robbins
Thank you! I’m really happy to be here with you guys.
Jen Simmons
Welcome back actually, because she was on episode 33 of The Web Ahead, where we talked about an hour and 22 minutes about the basics of web design, like Web Design 101 if this stuff is new to you, because we talked about your book: Learning Web Design.
Jen Robbins
Mmm-hmm.
Jen Simmons
Your awesome book.
Eric
Yeah!
Jen Robbins
Thank you!
Jen Simmons
Pimped it for an hour and a half. [laughs]
Jen Robbins
[laughs] And thank you for that!
Jen Simmons
Because I think it’s awesome, that’s why. Anyway, for people who haven’t listened to that and you want to, it was kind of a Web Ahead version of the series. I just realized most of The Web Ahead is very intermediate or advanced. I wanted to do an episode that was super basic. So, I could think of no one else better than Jen Robbins to come do that.
Jen Robbins
It was fun!
Eric

Yeah, and of course that expertise comes from many, many, many years on the web as many of the guests on this show have that claim.

Let’s back up. So you were at O’Reilly and that’s, as I understand it, where you were first exposed to the web. So what was your first experience beholding the web? What was your reaction? What were you doing at the time that caused you to be shown the web or to find it?

Jen Robbins

Well, like I said I was a book designer there, and I guess it was early ‘93 that Dale Dougherty, who was one of the editors there, came in and said, “Hey, you know there’s this new part of the Internet, and it’s called the World Wide Web, and it has pictures. So I think I want to publish a magazine and have ads on it about what’s new and cool on the web.” And since the web had graphics, he figured he needed a graphic designer, and I happened to be at the right place at the right time.

So I got on that very first team of designing what GNN, Global Network Navigator, would look like. It was like an early portal site. So we had all different topics we published. There was a whole Internet catalog. There was a forum. There was news. We published the NCSA What’s New page. So that was all the new websites each day. So there might be like six or seven new websites every day [laughs] to publish.

Eric
On a good day.
Jen Robbins

Yeah. I’m going to give you a little more background then I’m going to get to that first impression.

So when we started, I’d looked into stats on that there were 130 websites or web servers in the world. And then by the end of ‘94 there were 10,000 websites, and that seemed like a lot [laughs] from when we started.

But my first impression, my tour guide was this guy, Rob Raisch, who was pretty instrumental in early stylesheets and stuff at the W3C and he’s built and sold a lot of companies in the meantime. He’s an old-timer on the Internet. They brought us into an office because there was only one browser—it was like Mosaic—and it only ran on Unix. I had a Mac, so I couldn’t see it in my own office. So we went into the room that had the browser in it, and I was all excited because Dale gets you excited about stuff. He had this vision of this web and it sounded so cool! You know, like way cooler than a book! [laughs] So I went in, Rob’s first words were, “You know, you probably can’t do what you want.”

Eric
[laughs]
Jen Robbins
I was like, “Okay…” [laughs] “That’s kind of a downer, but let’s get started here.” But when I looked, I was like, “That’s it?” [laughs] It was just like some clunky word processor, and there was just gray page with a column of black text and some blue words. And you clicked on that and another page was there. And, I don’t know, I do remember that I was confused by what I was looking at, like where the document ended. “Were those buttons at the top a part of the document, or…?” It took me awhile to separate the browser from the document.
Eric
Interesting.
Jen Robbins

Yeah. What’s kind of nice is that I wrote my first web book. I started writing it in ’94. So, I started writing it when these memories were really fresh. So I have a nice trail of my thought process at the time. Which I think if I hadn’t done that, I don’t think I would remember seeing my very first webpage, because it’s been a few years now.

In fact, GNN is celebrating its twentieth anniversary this year. So we’re going to do something to commemorate that. I’m not sure what yet. But we’re very excited at O’Reilly. We’re all excited about that anniversary coming up. It’s going to serve as a nice touchstone like where we are now.

But then as I got into it, I started thinking well maybe Rob was right because I couldn’t control anything that I was used to making decisions about. There was no control over fonts or colors or alignment. It was frustrating. You couldn’t put any text next to a graphic. There were also no image maps, or no way to put two graphics together. There was always a little space them. It was very crude.

So the original GNN homepage, when I look at it now, it looks so sad and forlorn. But it was pretty cool at the time, compared to all of the university web server pages that were out there. At least they had colorful graphics. And I came up with the hot air balloon that looked like a globe to be the symbol for it. Dale said that was when it really became like a thing, was when he saw that globe-alloon—as we called it [laughs]—one that’s traveling around and surveying things in this global hot air balloon.

Eric
Right. Do you have perchance a link to what that looked like?
Jen Robbins
Not handy, but I—
Jen Simmons
oreilly.com/gnn.

Eric
Okay—
Jen Robbins
I don’t know if that’s the first one.
Eric
We’ll get that into the show notes. When someone visits the show page and listens to this they can follow a link to see it.
Jen Simmons
By the way, you can go to the show notes—for people who haven’t heard every 5by5 podcast ever [laughs], you can go to the show notes for this show at 5by5.tv/webahead/47 (now thewebahead.net/47). And there are people who are listening live in the chat room collecting all kinds of links.
Jen Robbins
That’s awesome!

Jen Robbins
I just gave an Ignite talk about this very experience of seeing my first webpage and making the transition from print to web, and it’s surprisingly hard to find good pictures of what it looked like back then.
Eric
Yeah. I’ve discovered that too when we had Tom Bruce on a few episodes ago to talk about Cello, and there are very few screenshots of Cello.
Jen Robbins
Yep.
Eric
Let me see if I get this right: the original vision for GNN from Dale was a magazine, right?
Jen Robbins
Yeah, that was the model. Yep. Original content, article format, funded by advertising was how he foresaw it. And then it grew to include things like the NCSA What’s New page and some online forum things. But there was a ton of stuff. We had sections on money. There was a marketplace. There was stuff on travel and movies. I had a section on it for a little while called the Internet Kitchen. I went under the name Miss Quiche Lorraine [laughs] or Miss Lorraine Quiche. So I was trying to find all cooking-related resources that were going up on the web.
Eric
Were there many?
Jen Robbins

Not at the time. There were just like Gopher [laughs] repositories of recipes. There wasn’t a lot out there.
Eric
Yeah. I’m struck by two things there: you mentioning the Gopher links is what sort of made me think of it. You know, at the time a lot of what websites—yours—would point to would actually be Gopher resources because there were lots of Gopher resources and not that many web resources. But the other thing that struck me was that the first thing that Dale said to you is that there’s a new piece of the web, and it has images! Which was huge at the time, right? There’s images in it! You can do pictures! You know? Wow!
Jen Robbins
Right! That was it. Yeah.
Eric
Yeah. It’s interesting. I’ve had my own interactions with Dale over the years. He always seems to be able to see ahead of where things are and get everyone really excited about where they can go. Just to seize on that with the ad model. It’s interesting too because like you say— I remember visiting GNN because when I got on the web in late ’93 it was one of those very few sites that was available, right? And it was probably the one that had the highest graphic design level of pretty much any site, because like you say most of them were university sites that was like faculty go here, students go here, staff go— You know, that kind of thing.
Jen Robbins
Mmm-hmm. Yeah.
Eric
And it did. It came off as a portal. It didn’t really come off as a magazine, from the user point-of-view. It felt a lot more like Yahoo! would in later years, where you would hit a homepage and then you could go to this top-level area or that top-level area. And once you get there, there’s stuff and you can drill down. Did you eventually come to think of it in the team as a portal rather than a magazine? Or was there always really— Internally, did it feel more like a magazine to you?
Jen Robbins
You know, I think that was his initial idea. I think what we ended up building did feel like a portal. But then we immediately started, or nearly immediately started a section in it called Web Review, which was definitely a magazine. In fact, I metaphored the heck out of that thing. [laughs] I think I might have put the first curled paper turn on a webpage. But it was definitely a magazine model with a cover instead of a homepage and a table of contents like you might see on a print magazine and definitely articles. So, Web Review ended up being the magazine and that probably started in ’95, if I had to guess.
Eric
Yeah, that sounds about right.
Jen Robbins
Yeah. So Web Review was part of GNN. And then GNN was sold to AOL and we continued on with Songline Studios, where we published Web Review and a couple of other pretty experimental, out-there products. We did a thing called Ferndale, which was a live online soap opera, developed by Tom Arriola, where they had actors and the actors were publishing to basically blog pages—which didn’t exist then—but they were sharing all of their experiences online, and it was all scripted but there was video and people could email with the characters. It was really interesting stuff. So yeah, lots of experimentation back then in formats to see what people wanted to do there on the web.
Jen Simmons
That’s interesting because O’Reilly is really well known these days for books, software, resources on learning how to make websites or how to be a web developer or be a web designer, and I just didn’t realize that O’Reilly had this history of being a web content company and sort of making content for the web or experimenting with the web itself.
Jen Robbins
Yeah. Those early days, Dale was just pulling in projects that were doing all different things. It was really fun. It was just tons of fun.
Eric
Yeah. And Web Review eventually became sort of a standalone. It became a magazine as we would think of a magazine site now. People who had been around long enough might remember that it had come from GNN but by ’96 or so, when it was fully under the Songline umbrella, it was just Here’s this online magazine called Web Review.
Jen Robbins
Yeah, and it was staffed like a magazine. We had people definitely on the staff who were journalists and editors. That was definitely a magazine model.
Eric
Yeah, and that’s where I had my first paid writing gigs was actually with Web Review doing columns.
Jen Robbins
Is that true?
Eric
That is true.
Jen Robbins
I did not know that!
Eric
Yes.
Jen Robbins
I had no idea!
Eric
Dale again, because he just emailed me out of the blue one day about my CSS support charts and said, “We would love to have you publish those on our site. We would like to host them for you and give you the resources to expand them outwards basically.” I said, “That sounds awesome! Would you be interested in someone writing a monthly CSS column?” And he said, “That would be great! Here’s what we pay!” And I was looking at the email that I got thinking, “Wait, they’re going to pay me for this?” [laughs]
Jen Robbins
[laughs]
Eric
”That sounds acceptable. Thank you.”
Jen Robbins
You were writing CSS support charts in ’96?
Eric
Yes I was.
Jen Robbins
Wow!
Eric
Yeah. Anyway. But this is not about me. But you know, my point being that at that point by ’96 certainly it was when I got the email as, “Hi. I’m Dale Dougherty, editor of Web Review Magazine,” you know?
Jen Robbins
Mmm-hmm. Yeah.
Eric
It was that kind of a deal.
Jen Robbins
Yeah, by that point GNN was an AOL product. AOL was trying to have AOL be its old fashioned walled thing, and GNN was going to be its presence on the Internet, the open. And then they realized in pretty short order that there was no sense in keeping them separate, that everything needed to be open and web accessible.
Eric
Yeah, well.
Jen Robbins
There’s a lesson in that.
Eric
Well, it’s interesting in that they realized that and yet it seems like their model never really adapted to that. They never really seemed to fully accept that,…
Jen Robbins
Yeah.
Eric

…which is kind of a shame.

So what were some of the other stuff that came out of GNN? Because maybe we should go back for a second before we talk about that for a minute. Just talk about what an impact GNN had and how you saw that from the inside.

Jen Robbins

I’m not sure I was really aware of the impact from the inside to be honest with you. I was trying to keep up with the demands of doing all of the graphics for GNN and also still keeping my book design job. So I was working the 80, 90 hour weeks trying to keep it all going.

In the early days, I didn’t do anything with the HTML. There was a team of people who were handing all of the files. And when I first started, I was giving them my PICT files or TIFF files or something. And then they were using a conversion program that would convert them to GIF and then input them in. As my personal involvement grew, I think it was Photoshop 3— I had gotten GIF Converter. I still have the manual for that.

Eric
[laughs]
Jen Robbins
I saved it as a relic. I’m like, “This will be funny someday,” and now it is! But I think Photoshop 3 is when I could start really easily making my own graphics. And then we used a separate utility called Transparency to make areas transparent. [laughs]
Eric
Oh yeah! That’s right!
Jen Robbins
And then I started, when Web Review came along, that’s when I really started handling HTML. I would do basically the designer version where the layout of every article had its own masthead and structure and its own look and feel. I really designed every feature article to have its own thing going on. So that’s when I actually started using the code underneath. Otherwise I was just making a lot of icons and header graphics.
Eric
Huh. Okay, so every article was art directed.
Jen Robbins

Every feature article. There were a lot of columns on various themes that we left alone. But the cover articles, there was one on VRML, Virtual Reality Markup Language. I remember that one. There was one maybe on online fraud, maybe. I’m trying to remember. See, I got all up to date, up to speed with GNN stuff but I did not go back into Web Review. [laughs] I should have done that.

But yeah, it’s a little hard to remember. But I do have visual artifacts on old drives I had to go through that showed some of those old covers, and an article by Tom Arriola actually, who did the Ferndale project. He did like an online murder mystery website. So there was this article that he wrote about doing that, I think, where I started using Netscape extensions to do backgrounds and text wrap. So, we had the background that looked like a notebook and some handwritten text in graphics for the questions and made it look like a detective’s notebook, and he was writing down the evidence and did super-designed stuff for that one.

But it all looked so quaint and hilariously naive from our perspective now, but at the time it was really fancy.

Jen Simmons
Yeah, there was a whole era in there where it felt like many, many, many websites reached for a physical metaphor, and then did all of the artwork, all of the images on the website to emphasize that physical metaphor. Like, oh, this website is like you’re dialing a phone! Here’s a picture of a phone! And you click the buttons, and each button is a link to a different page inside this website. The things we completely forget. It was sort of like you can’t have a website without having a physical metaphor. It’s a book. It’s a calendar.
Jen Robbins
Yep. The very original O’Reilly website—and I think it only lasted a couple of months, tops—was an old-fashioned radio [laughs] with buttons, which doesn’t make any sense for a book publisher at all. But, yeah it was a little old-fashioned radio graphic. We made all of our graphics then 515 pixels wide.
Eric
Wow.
Jen Robbins
I don’t know why that was. I found my spec sheets that I would give to freelancers for how to make graphics for GNN, and also to some advertisers. But yeah, 515 pixels, which is by the way 5.75 inches at 88 dpi.
Eric
Huh!
Jen Robbins
[laughs] 88 dpi! Which is because being from a print background, I wanted to know the resolution of the images, right? Like, that was my model for graphics was you had a dpi you’d count. So I went to somebody at O’Reilly. I don’t think it was Rob Rache. It was someone with a coding background and said, “Okay! So what resolution do you need graphics for the web?” and they said, “Well, let’s see. PCs have resolution of 96 ppi and Macs have 72, so why don’t you make them in the middle, like 88?” And I did! [laughs]
Eric
Wow! Okay!
Jen Robbins
And it took me a while to realize it’s just numbers of pixels that matter. In all of my specs I’m like, “Make them 88 dpi.” It’s kind of embarrassing, but you know.
Eric
You know.
Jen Simmons
I still get that question. [laughs]
Jen Robbins
Part of the learning process—
Eric
Yeah! I mean, no body knew, right? [laughs]
Jen Robbins
Yeah, no body knew! Yeah! Although, you know, when my book came out, I guess it came out in early ’96, but just before mine was Lynda—lynda.com Lynda—Weinman. Her book, I read it and I’m like, “Ohhhh. I clearly don’t know as much about this as I should know.” [laughs] But I don’t think I put 88 dpi in the book. Thank goodness.
Eric
Yeah. [laughs] Seriously.
Jen Robbins
But it’s sort of a funny part of my personal history with it. Really, at the time, what was freaking me out was that like none of my designs were hitting paper. It was really freaking me out that everything I had ever made as a child, all the books I made when I was little, everything I have ever done—including being a book designer—the end result was something tangible and paper. And the fact that they, my designs, were just light or bytes was very peculiar to me and that was sort of what I remember from that time. The transition was that just guttural response to not having anything tangible.
Eric
Hmm.
Jen Robbins
So as a designer that was the biggest adjustment for me, I think.
Eric
Yeah. I think a lot of people went through that.
Jen Robbins
Yeah.
Eric
So, how many inches wide were those images? 88 dpi? ppi?
Jen Robbins
I think it was 5.75.
Eric
5¾ inches. It’s interesting too because 515 at the time, we would have expected 640⨉480, maybe 800⨉600, right?
Jen Robbins
Definitely not 800⨉600.
Eric
Not at that point? Okay. I get a little fuzzy when that started to come out.
Jen Robbins
No. It started to come out, but still the vast majority were 640⨉480, and the Macs that were coming out then were 512. So I think we were aiming for something that wouldn’t be completely cut off for monitors that were just over 500 pixels, but it was the 640⨉480. And the chrome took up a tremendous, a lot of horizontal space back then. So, there were borders and scrollbars and I think by the time we got done 515 pretty much filled the browser window.
Eric
Hmm. Yeah, it almost seems like you guys were pushing it a little bit because I would think most people, especially on a Mac, Mac users had a tendency to not fill the entire screen with a window, because their operating system didn’t really require that sort of thing. And so, I would think you would have been getting lots of horizontal scrollbars, but apparently that wasn’t an issue. Like you didn’t think of that as a problem at the time.
Jen Robbins
No. I think we were really designing for— I would look at things on my coworkers’ screens. Of course, they had the 640⨉480. Some of them had black and white monitors. Some of them had grayscale monitors. I looked at it on PCs. I remember designing this really cool drive-in image for a section on GNN, called At the Drive-In, and then I went and looked at it on Dale’s computer and everything that was dark blue and dark green was black. Like it was just a big black graphic. And that’s how I learned about gamma.
Eric
Right.
Jen Robbins
You know, it’s like, Ohh, the stuff on my Mac looks so bright and pretty. And then I was aghast because it was published. It was like, “Oh my gosh! So every PC user is seeing this as just a black image with white words on it?” So I had to make adjustments there and learn how to design for a darker computer.
Eric
Yeah. I mean, the nice thing there of course is that you replace the image and then it’s fixed.
Jen Robbins
I know! That was a nice part of it, too: that instant gratification side of it.

Eric
So do you remember which areas of GNN were the most popular?
Jen Robbins

I wish I remembered. No, I don’t know. NCSA What’s New was big. The Traveler Center, I seem to remember putting a lot of my energy into it, but I don’t know if that was the most visited. I bet Dale would remember some of that.

We had a section called Netizens, which was I think just people on the Internet.

Eric
Right. Was that like interviews?
Jen Robbins
I’m trying to remember. Maybe it was interviews with important people, movers and shakers.
Eric
Right. All 17 of them responsible for 130 websites. [laughs] Whatever.
Jen Robbins

But I remember the one thing that was interesting that we were doing back then was advertising, which I think we were the first people putting ads on pages. And some of the decisions there were also pretty naive. [laughs] We had to decide what’s an ad going to look like and be in this new medium. And the way we thought about it in the early days was so idealistic. It’s like, “Oh, it’s not going to be like print advertising, where it’s just a big flashy picture. What we’ll have is you’ll click Buick and you’ll get all the details and all the information about the car.” We really thought this was a place to get informed about products not just eye candy.

The approach was putting the banner on the page and linking to things. I don’t know if we were also hosting the thing that it linked to, because I can’t imagine that some of the places that were advertising had sites. I’m not sure about that. But I wonder if we had a link that went to a page of information that was also on our server.

But the funny thing was I have a spec sheet about advertising [laughs] from back then that says, “We’re very concerned that these graphics—“ You know, there’s only one column of text and everything filled the same width. You couldn’t wrap text around graphics or anything. So, if we put an ad in the page it was going to be in the flow of our article. And we were a little concerned that it would be mistaken for editorial content, or that you just wouldn’t know why suddenly you’re reading an article and there’s a graphic there that says Computer Express [laughs]. So what we did initially was I made these blue frames that were the GNN blue that went all the way around the banner ad, and at the bottom it said, “GNN Advertisement.” [laughs] “This is an ad. Don’t mistake it, our GNN sponsorship,” which was such a heavy-handed way to handle it. We had that concern. Then I think that concern fell away because then the next round of those were the GNN blue frame was sort of branded but we took away the text at the bottom. It was just like this branded frame that surrounded the banner so that it was sort of visually somehow stood out as something special in the flow of text. And then eventually we just ended up with the banners themselves without all of that dressing, and I think it worked just fine.

Eric
Yeah. Well, again of course at the time you had to worry about if users would understand, right? Because it was new to everybody, right? The idea of putting an ad on a page that hadn’t really featured in the physics papers and the university websites. Yeah, I can see where that would be an experimentation. So did you at GNN define the 486⨉60 or whatever size that became standard? Or did you have a different size and it got larger?
Jen Robbins
No, we had 515. Nobody had jumped on that bandwagon. [laughs] So we had all of our specs for advertisers, and I think that’s some of the specs that I was finding were describing how to make ads that go on GNN.
Eric
Right. I would actually be, personally and I think anyone listening to the show, would be really fascinated to see scans or copies of that stuff if you were able to put it up online just because it would be really interesting to see how a pioneer in advertising grappled with these issues with no help, right? This is the vast and uncharted land, and we must now forge a path through it. And so we’re going to this way! Because no body’s ever been here before and why not? We can put up guideposts.
Jen Robbins
Yeah. And I remember the first time I started seeing just eye candy ads on the web, that were just big, flashy images with no information behind them. And I felt a little let down. I kind of bought into that we’re going to inform people. That’s going to be the value is that you can get all the specs on the car. Which of course you can do on a website now, but I just remember the advertising we really thought we were going to provide more of a service or rich information, not just a distraction from the content.
Eric
Yeah.
Jen Robbins

Another thing that Dale came in one day, he’s like, “You know, why don’t you figure out what it would be like to buy something from a webpage?” [laughs] “Like, what would the steps be?” I don’t know. It didn’t really go too far. I don’t have specs and stuff on that. But I do remember spending about a week or so, “Okay, what would you do first? How would you get the credit card information? And once you got it—“ Going through the experience of what it would be like to purchase something from a webpage. Then that was figured out by other people very soon after that.

And I remember the first thing I bought on the Internet.

Eric
Which was?
Jen Robbins
It was movie tickets.
Eric
Ohhh!
Jen Robbins
And it was mind-blowing. It was like, “Oh my gosh, we can buy a ticket here and just go to the theater and it’s there waiting for us.” It was so cool. I think it was Movie Tix or something. I can’t remember the site, but you could buy movie tickets. It wasn’t even that more convenient. [laughs] It was just you get it because you could. It was one of the only things you could buy online at the time. Although there was some of the early sites I remember were like HotHotHot, a hot sauce website, was one of the very first websites. In fact that was out at the very same time as GNN. It might have been in that original 130. I know Mike Kuniavsky designed that site. He’s an Internet old-timer, too.
Eric
Yeah.
Jen Robbins

And I think L.L. Bean was online really early. They were one of the first sites. They were very early. I’m trying to think of some of those other early resources that we had.

But then the thing that was a little frustrating at GNN was since O’Reilly was really working closely with the W3C, and since they kind of knew they had the bigger picture, we used the available 35 HTML tags exactly as they were intended to be used semantically. So, all of our pages started with an h1 followed by h2s and h3s. Everything was used correctly, which meant that all of our pages had these big, honking HTML top-level headings [laughs], which you couldn’t change. Our pages were gray. We resisted using the Netscape extensions for a really long time, until we just couldn’t resist anymore. But everything was done perfectly semantically. And I remember seeing other sites like HotWired! and was it Suck that was out back then?

Eric
Yeah.
Jen Robbins
It would have like six words and a and six words and a and six words and a , and make this little narrow column down the middle of the screen. And it just looks so much better from a graphic design standpoint. It looked like a designed page. It had white space and our pages had no white space. We didn’t even have much gray space. [laughs] You know, it was just like all crammed in there! Just the natural, unadulterated flow of web content with the browser default settings.
Eric
Right.
Jen Robbins

And I just had such envy. Then when the Batman site came out, which I believe our pal Jeffrey Zeldman had something to do with, that was like so out there and state-of-the-art. I remember trying to figure out how they did all of that. They had a background image of a building, so when you scrolled down it looked like the building was really tall. It was a really cool new technique.

Then there were all of those techniques we had back then, like you could—I don’t know if it was done with tags, where you could push tags and make words expand on the title bar?

Eric
You mean the title bar at the top, right? Not the status bar at the bottom?
Jen Robbins
Yeah.
Eric
That was actually a bug in Netscape, because I remember this very clearly. And it wasn’t tags. It was multiple tags, and they were just processed in order.
Jen Robbins
Ohh. So you could make the words appear into the—
Eric
Right. So the first tag would just have a bunch of spaces and the second one would have a bunch of spaces and a letter. And then the third would have a bunch of spaces and two letters. You could have as many as you wanted and Netscape 1.0 or 1.1 had this bug and it would process them one at a time and just put it up there. It was never really meant to do that.
Jen Robbins
You know there’s another way that you could push colors, like change background colors. Yeah. Was that a Netscape bug thing, too?
Eric
I don’t know if that was a bug.
Jen Robbins
Make a page fade in over steps of colors or something.
Eric
Ohhh yeah. I don’t remember now what drove that one. It might have been the same thing. It may be you had six hundred tags and each one had a different color.
Jen Robbins
Yeah and each one had a different color. [laughs]
Eric
That’s probably how it was done. It was probably basically leveraging the same parsing bug.
Jen Robbins
Yeah.
Eric
I remember it because it was one of those things I remember clearly how it was done. More to the point, I remember when it was fixed, right? They realized a version that said, “Oh, by the way, we fixed this. So you can take out all of the extra s and s or whatever.” And I remember some grumbling [laughs] from people who were using that effect. “Don’t break my content! I had a thing and then they took it away and—“ You know? Anyway.

Jen Robbins

Do you remember Netscape protest sites, like people who were from the pure HTML community were upset about extensions to HTML, like background color?

So they would set their background color to black and the text to black, so if you looked at it on Netscape it was just a solid black page. But you could look at it on any other browser that didn’t have the extension and it would be fine. So there were funny little— I don’t know. That stuff is still going on, isn’t it? Just in different forms. [laughs]

Eric
[laughs] Yeah, pretty much.
Jen Robbins
[laughs] But it was just funny at the time. I remember those weird things.
Eric
Yeah, probably that would just have one little statement that was in white or gray or something.
Jen Robbins
Right! [laughs]
Eric
And it would say, “You can’t see content because Netscape is ignoring the W3C directive,” or something like that.
Jen Robbins
Right. Exactly!
Eric
Netscape is evil. I don’t remember that.
Jen Robbins
Oh I clearly remember those websites.
Eric
Oh I believe you. I totally believe you.
Jen Robbins
Well I think it’s because we were kind of grappling with the extensions as well, those presentational things. And in the end, I think what we settled on was we did set background and we did do text wrap. Oh! That’s another funny stat from my How to Make Graphics in 1994 was that you should make graphics wide not tall. You know why?
Eric
Interesting. Why’s that?
Jen Robbins
Because any space next to a tall graphic is just going to be wasted. You can’t wrap text around it.
Eric
Right.
Jen Robbins

So if you have a wide orientation to your graphics, you’re going to waste less space. [laughs] It’s funny things like that that people like. That was part of my Ignite talk, and there were a lot of people there who have only been working on the web for 10 years. And they were like, “Wow! I had no idea it was so clunky!” You had to jump through 30 hoops with all of these separate graphic utilities, and there was just so many limitations.

The other weird limitation that I set was that no graphic could have more than 10 pixel colors. And I think that was because we ran into a problem when there’d be more than 256 pixel colors total on a page, and 8-bit monitors couldn’t handle that many colors simultaneously. So you’d get lots of weird color shifting and pixelation, or dithering in the images. And I also didn’t allow any gradients. I didn’t allow any anti-aliasing. So all of the text in my graphics is all stair-stepped on the edge. They looked terrible! It’s really embarrassing to look at that early GNN work. [laughs] It looks so raw!

Eric
But what’s interesting about that is this is what fascinates me, actually. And it’s part of the reason why I started doing these shows, is to find out these things from people because you didn’t do that because you had bad design sense, or because you were trying to make some kind of retro 8-bit statement before 8-bit was retro. You were doing it because there was a technical limitation, right? You ran into a case where if you did antialiasing or made these graphics look like really smooth and awesome, then they look like complete crap on many of your users’ machines because you ran into a hardware limitation, or an OS limitation. Whatever it was that posterized all of this stuff and shifted all of the colors and made it look like your website had been sitting out in the sun for seven years, right? And I assume you had these in your artist and freelancer specs, like “You can only have this many pixel colors because otherwise everything goes to hell [laughs] in certain machines.”
Jen Robbins
Yeah. It also helped to keep the file sizes really small. That was dial-up days. The formula that we used to calculate the download time was two seconds per graphic plus one second per k. So for a 28k graphic, it would be 30 seconds to download.
Eric
Wow.
Jen Robbins
That was the formula that we used to estimate what it would be like for a dial-up user, which was a good percentage of the users back then. So that was another reason. We loosened everything up by the time we got to Web Review, and I remember I think we went up to allow 32 colors in Web Review graphics. And we still got complaints from people. I had the background of Web Review was like a craft paper, a scan of brown paper bag paper. And I scanned that and it had to be turned down to 32 colors, but they weren’t web safe colors. And then I was looking at it on my Mac and it looked great! [laughs] But I got letters from people who I guess it just looked like it had red speckles and it just looked horrible on other monitors. I probably should have tested that more than I did, but it’s too late now. [laughs].
Eric
Exactly. It’s funny, you put up a badge, “This page best viewed on the designer’s computer.”
Jen Robbins
[laughs] Right!
Eric
Come on down! You can sit in my office.
Jen Robbins
But yeah, you learn all of that stuff my trial and error, like seeing that graphic completely black on Dale’s. That’s a lesson in gamma settings. And getting the screenshot of that speckled background, not realizing there’s your color limitation.
Eric
Yeah, because you were probably doing things before there were maybe any books to help with that.
Jen Robbins
Right. There were no resources.
Eric
Right. And there was no Google or anything even remotely like it. It wasn’t like you could hear about it and type in “Why is my picture dark on such-and-such’s computer?” You had to know somebody who could tell you the reason or be able to figure it out yourself.
Jen Robbins

Right. And fortunately, I was at O’Reilly so there were a fair amount of technically-minded people around to tell me 88 dpi. [laughs] I trusted them! I did get answers to some of those things.

But that’s why I started writing books. It’s like, well I needed that first book. That first book was Designing for the Web. I wrote it mostly in ’95. It came out at the very end of ’95/early ’96. I wanted a book that was from a designer’s perspective. So, of course, I described all of the HTML tags in terms of what they looked like when they rendered, not their semantic purpose, although that was in there too. It was like, if you’re a designer here are your tools. And then by ’97, I was working freelance and I was doing client work. And I was finding in building websites, I was just looking up little tiny details constantly. I was spending so much of my time rooting around on the early web trying to find answers to all of these little questions, like “Is that an attribute?” Just all these little bits and pieces. And that’s when I proposed to O’Reilly that I wanted to write a Nutshell book about web design that was just answers to all those little things, all in one place. Like one book. And so I wrote that and it came out in early ’98. I wrote it for me. I don’t want to look this up online every time and I can’t remember it. I’m not just going to jot it down in a notebook. I want a reference of all those little fine details of the tools that are available.

And I don’t think there was CSS then. You were writing about it, so I think there might have been a chapter in the book about it but there wasn’t the full section that it’s grown into.

Eric
When did you write it again?
Jen Robbins
’97. I know that I mentioned it, but I it wasn’t supported enough to put it in there.
Eric
Right. Yeah, I mean let’s be honest: a lot of the early columns about CSS were, “Here’s what this property does but no browser actually supports it yet. It’ll be awesome in the future, though!” That’s what a lot of columns were. Once you got passed the initial “This is a selector and this is what a selector does. And next month in the next column, we’ll talk about what properties are.” Once you got passed those, colors and how to set font-family, there was a fair amount of, “So floats! Great idea! This is how they’re supposed to work. Good luck! Godspeed.”
Jen Robbins
[laughs] Yeah. We still need a fair amount of luck with those, don’t we?
Eric
Well, that’s true. But, let’s not get into that now. But yeah, a lot of early stuff was written by people because it was what they needed themselves. Most of the first several things that I wrote were, “Okay, now that I figured this out, I have to assume that there are other people in this word who need to know the same thing.”
Jen Robbins
Yep. That’s my operating principle as well in my role as educator. I don’t want to sell the conference too much but I started Artifact because that’s exactly the information I need now. I’ve been doing this for 20 years and all of a sudden I don’t know where to start to make a website now that everything has to work on an infinite number of screen sizes.
Eric
So what’s the mission statement for Artifact, or what’s the target audience?
Jen Robbins
It’s a conference for designers who need to adapt their workflows and their tools and their deliverables to a way that makes sense for a multi-device web.
Eric
Okay.
Jen Robbins
So we’re talking tons of takeaways, how-to information, shortening the learning curve. I like to call it more teaching than preaching. It’s very how-to oriented, covering everything from workflows, stylesheets, HTML prototyping. Our lovely hostess here, Jen Simmons, is going to be speaking. I’m very excited and she’s addressing the design process. I don’t want to say design thinking. [laughs] That’s overused. The design process. Jen, do you want to talk about it?
Jen Simmons
Yeah, I’m going to talk about responsive layout, like hands-on. You’ve been sold on responsive web design, but how do you actually approach creating a responsive layout for your content.
Jen Robbins
And that’s the kind of stuff I want to see shown to me. So I’m excited about it! But again, it was for me. I’m basically putting on this whole thing. And I’m going to sit there and I’m going to learn the stuff that I need to learn. [laughs] And again, I figure if I need to learn this stuff other people out there need to learn it too. It’s not like I’m a newcomer to this. Some people are new to the whole thing, and some people just have to change everything.
Eric
Okay.
Jen Simmons
May 13–15 in Austin.
Jen Robbins
In Austin, Texas, yes. And the website is going to go up very soon. It’s at artifactconf.com.
Eric
Oh cool.
Jen Robbins
There’s a mailing list there now. Soon we’ll have a full site with registration, and hopefully by the end of the week or next week.
Eric
Very cool. So you’ll be in Austin, music capital of the world, is it now? Musical capital of America, at least? Which, to me, is a great segue for asking you about Cooking with Rockstars.
Jen Robbins

Yes! That was another thing. That was like a combination of two things that I’m really passionate about: cooking and indie rock music. So I was trying to figure out a way to put that together. Initially, I was going to do like the hipster Martha Stewart show, that had music and food and crafts and technology [laughs] but it was much better to pare that down. Actually, a friend of mine—Jesse Blatz, who was in a band called The Fly Seville. I was telling him about that show and it was going to be cable access, even though no body watches that. He said, “I’ll be on your show, but I want to cook.” And then the light bulb went off. I’m like, “That’s it! It’s the rockstars cooking! That’s the show! Get rid of the crafts and the technology. That’s it!” But then it never got off the ground as a cable show because I’d have to have a whole staff of volunteers on my project and no body would watch it anyway.

So then I had a little epiphany I think at a Doves concert. It’s like, “You know what? I’ve got a video camera. I know how to make webpages. I’m just going to put videos online.” And that was before YouTube. That was around, I think, 2002. Pre-YouTube and there were no resources for doing that. So I was just putting little thumbnail QuickTimes embedded on the webpage. Like, I don’t know, 240 pixels wide [laughs] or something. I like to start everything I do really small and primitive and then build from there.

But yeah, it was really fun. My first one was Rilo Kiley. I ended up getting Jack Black on the show, and Spoon. St. Vincent was on my show. Who else? Robin Hitchcock, who was important to me but unknown to most. [laughs]

But yeah, I ended up doing about 30 episodes, I think. And boy, I’d really like to get back to doing that. My schedule just doesn’t allow right now, but if things ever calm down I think I’d have to— By the end of it, I was renting limos and doing all of my camera setup and breakdown in the limo and then just whisking them in to pour champagne and talk for three minutes or for 15 minutes, and then we’d send them off again and break everything down. But before that, I was trying to find a brightly-lit, quiet place at a rock club between soundcheck and show. [laughs] It was kind of impossible. So we did it on street corners, in broom closets, the managers office, and on some tour buses. I think Ben Gibbard from Death Cab for Cutie was on his tour bus. But that kind of felt like imposing, which is why we ended up in a limo. But the problem was it ended up each episode cost a lot to rent a limo and at a certain point it was clear I needed to have a project that made money and didn’t cost money. [laughs]

Eric
Yeah.
Jen Robbins
So that was part of the reason why it got put down. It would be really nice to pick it up again if my schedule settles down again. But low-fi. I think it would just be my phone and back in the broom closet. And just edit it on my phone and post it. Just gritty.
Eric
[laughs] Right.
Jen Robbins
Just to do it, you know?
Eric
Why not?
Jen Robbins
Yeah! Just doing it gritty is better than not doing it.
Eric
Yeah, pretty much. So is there a URL people can go to see Death Cab for Cutie guys and Jack Black and such?
Jen Robbins
cookingwithrockstars.com.
Eric
Intuitive!
Jen Robbins
Yes, straight forward.
Eric
Yeah, exactly. No mystery there. That’s awesome. So, looking back what do you feel like GNN meant to the web and to you?
Jen Robbins
I do remember that at the time, I think it was Howard Rheingold said that GNN made the web feel human, and it put a cheerful human face on it. Before that, it was very factual web servers with documents for particle physics labs and universities. And GNN was stories and human perspective, and then my graphics tended to be just sort of light and airy and a little cute and happy. [laughs] So, I think that in addition to providing that first portal experience, we really did go out and scour the Internet for what was interesting and put it all in one place. So, I think it was a useful service, but I also think it was just a little nicer place to be than most of the other parts of the early web.
Eric
Wow. Very cool. Well Jen, this has been a heck of a lot of fun. I thank you very much for coming onto the show and sharing those memories.
Jen Robbins
Thanks for having me! It’s fun to be an old-timer.
Eric
It is!
Jen Robbins
[laughs] You kids! Making your tall graphics like it’s nothing!
Eric
You kids get off my ROM!
Jen Simmons
With all of your millions of colors.
Jen Robbins
Yeah, that’s right! You and your five megabyte webpages!
Eric
Seriously.
Jen Robbins
[laughs]
Jen Simmons
Well, people can follow you, Jen Robbins, on Twitter: @jenville.
Jen Robbins
That’s right.
Jen Simmons

They can follow Eric, @meyerweb, and they can follow me, @jensimmons, and they can follow this show, @thewebahead. If they want to get on Twitter and keep track of all these people.

Thanks so much again to our sponsors for making this show possible. It really is with their help that we’re able to do this: An Event Apart, The Chrome Channel on Google Developers Live, and Shutterstock.com.

Yeah, so thanks so much Eric again for coming and hosting the show, and Jen for being on it yet again.

Jen Robbins
Thank you for having me back! This was really fun!
Show Full Transcript

Show Notes

Filed Under

The Web Behind

Browse all Topics