Scarleteens of Yesteryear

First ST design
As we're rolling out some redesign we've been working (and working to fund) over the last year or so, we thought we'd celebrate by sharing some of our history.

Mind, it's probably more fun for our readers than it is for me, since showing designs from times when the tech to do design blew, and one's (notice how I avoid saying my?) skills were less honed is a bit like streaking naked through a busy city street, or winding up at the ER after an accident when wearing the rattiest undies in your drawer.

Thank goodness, I came to web design with some solid design skills already -- though some not-at-all-solid coding skills, I pretty much had to learn that by the seat of my pants -- so I was better equipped than a lot of people making sites, but that still doesn't mean everything was awesome, and that I don't shudder a little bit to see some of my designs of yore.

However, I've at least resisted the attempt to embarrass myself less by showing screenshots of other sites at the time so I could be all, "This was kind of crappy, but dude, look at CNN's page back then! Theirs was really fugly." And yes, I do expect props for walking that high road, thank you very much. (If you're deadly curious about any sites of yore, you can always lose many hours to the Wayback Machine at the Internet Archive -- or as I call it, the Web Designer's Walk of Shame -- which is where I grabbed these shots of our old designs.) I mean, designing for the internet back when was kind of like walking through the snow several miles barefoot, backwards, without any mittens and... oh, you get the picture.

Fair warning: This blog entry is being written in the midst of total exhaustion, including the very special kind of exhaustion that happens after a long time working on web development while doing everything else one does for work on top of that.

Thus, silliness, the oversimplification of many a larger issue and a longer story and/or many nonsequiturs may follow. Revise: will follow.

Scarleteen: 1999
When we first started Scarleteen, it wasn't Scarleteen at all, but instead a little branch-off site from another site, Pink Slip, and it was sexuality information that, at the time, was only for girls. That's because when the site was started, it was because it was girls, and only girls, writing into us with questions. And questions. And more questions.

At the time, there really was little to nothing else on the internet where anyone could do that -- of any age, not just young people, though the pickings were particularly slim for young people online when it came to any kind of site. So, it's not surprising that for every question we answered, a pile more came in.

To give you an idea of the difference in Internet traffic between then and now, the amount of backbone traffic in 1998 was 5,000–8,000 terabytes; in 2011, it was 3,400,000–4,100,000 terabytes. In 1998, there were around 1.5 million public websites online (a big jump, too, from even a couple years before), and in 2011, there were around 555 million.

The internet was a very different place. It was much easier to get found and to find what you wanted and there were far fewer people on it to deal with.

Scarleteen: 2000ish
There was no social networking, and when you told people you did something on the Internet for work, they usually looked at you funny and then asked when, exactly, you were going to go back and get a real job.

At the end of 1998, we took the micro-site off the other domain it was sharing and got it it's very own, Scarleteen.com. Because people ask what on earth a "Scarleteen" is -- as they would! -- we called the site Scarleteen because the site people initially found us with was called Scarlet Letters, and one of the young people who originally wrote us asking for advice said that we really should have a Scarlet-teen. We thought so, too, so, that's what we did.

We also thought we should open it up to more than just girls, so we did that, too. And in no time at all, we were getting users of all genders to the site.

Within a year or so, to make room for ever-expanding content and users, we did another redesign (personally, I think this one was my personal fave of all our past designs). As we'd done with the previous designs and style of the site, we pulled from a lot of retro styles and imagery to keep things pretty light and fun, something we've always felt was important when dealing with so many issues that can make so many people feel so uncomfortable.

Around that time, we were able to get hooked up with a great network of sites through the (dearly departed) ChickClick network, which also gave us the ability to be funded really well for around nine months until the bottom fell out of the internet financially in 2001, and all the people who had put big bucks into internet startups, got way bigger bucks because we all made them great content to make big bucks with -- but then lost them, or just took what they had and skeedaddled -- went home and the rest of us whined. We whined a lot.

But we soldiered on, which included my perpetual fiddling with the design now and then, even though my loud howls of frustration with the limitations of doing it after many sleepless days on end at a time made more than one neighbor in my apartment building deeply nonplussed.

Scarleteen: 2002-2005
Around this same time, a few other teen or young adult sex education sites started to show up. That was neat. We felt less lonely. But our traffic kept growing, what we offered and the way we offered it was still then -- as it remains now -- a bit different than other sites and resources offered, so we kept working on improving, including adapting our design, especially since the tools we had to work with for both design and programming getting better and better, thank goodness.

In 2002 or so, we did this version of the design, which brought out what will now forever be called the "cozy pajama stripes." A user once lovingly called them that, and ever since that design, when we've consulted users about new design, it's common for people to make clear they are vary attached to said-cozy-pajama-stripes, and they'd be sad if they went away. As anyone who knows me can tell you, that's also happy news for me, since I tend to coat everything I can in stripes: if it were up to me, nothing on the planet would be stripey-less.

Side note: so used to the yellow stripes of Scarleteen did I get, that without even realizing I was doing it, I painted a whole room in my last rental place in yellow stripes nearly identical to what we have had here at Scarleteen for almost ten years now. This was only brought to my attention by a volunteer who had come to visit as a guest, and came down to coffee the following morning mentioning how freaking weird it was to have literally slept inside the website. Whoops.

Internal Sections: mid-2000's
If you were around back then, you might recognize some of these internal pages from the design at the time, too, when the different sections all used to each have their own super-special colors and design, rather than being the same or similar for each section.

Some years later, right about the time that the very talented and very generous developer Garrett Coakley began working with me on moving the site from something I had to hand-code every single page of (no, I'm not kidding, and if you've done any hard-coding now you see that this business about walking in the snow barefoot and backwards wasn't all that dramatic of me, after all), I believe it was pointed out to me that while the graphic artist in me must think all these different graphics and designs were very shiny and nice, they kind of tended to make pages load VERY FREAKING SLOWLY. I cried, but I got over it.

(I so didn't cry. Now I'm being dramatic.)

So, for a very nice change, I only needed to do the design, while someone else tended to the development. This was lovely, even though getting used to some things I couldn't do in Drupal -- which is the open-source content management system we were shifting the site to then, which we still happily use now -- that I could do in plain old HTML was a sticky wicket.

And all of that gets us to the version of the site that we had up until...oh, about five minutes ago.

The design that, now that it's gone, and I feel less mortified saying it out loud, I can tell you I privately called The (Not at All) Great Wall of Text-a.

Scarleteen: 2005 - 2012
Ultimately, over the last few years, the challenge that we faced was how to make as clear as we could all of what was inside the site right from the front, a challenge when you've got thousands and thousands of pages of content, and not a page of it fluff or filler. Then we'd add some new feature, and there would be one more thing we'd want on the front page: it was a neverending battle, one fought with an awful lot of hyperlinks.

Over the years, I've futzed and I've futzed, trying to move blocks to make it work a bit better, but still kept facing the conundrum of that one big ol'block of text.

Around a year ago, kickass designer and illustrator Martina Fugazatto (if you're interested in urban gardening, you can also see her cool urban garden site, here) offered to volunteer some of her time to Scarleteen, and after we'd worked out an update for our logo, she and I started working on the front page. As we have in the past, I asked some of our users what they liked and didn't, would or wouldn't want changed to figure out where to get started and what was most important to keep and most important to ditch or adjust.

Of course, there's also this thing with web design that's a lot like clothes in your closet. If and when you wear the same t-shirt, and nothing else, for many years, you tend to grow to hate a t-shirt you once loved. I had things like that with this site, like, for instance, the dashed lines that divided sections, which I had begun to develop a very unhealthy and completely unreasonable resentment for.

Martina and I tossed versions back and forth between us for months until we jointly came up with something we both really liked (if you most know, until we both were on either side of the continent we're on simultaneously shouting YAY! loudly in email and WAHOO! over Skype). Then I took it to the folks helping in development for us at the time, and they gave me an estimate which they told me in advance would give me a heart attack. It totally did. So, our funding not being even remotely able to pay for new development at that level, it sat, poor shiny new design that couldn't come out to play.

Until... our new developer Casey Faber came on board! Working with Casey, we were able to come up with a way to get the site changes we wanted and could also afford. So, I went back to the dusty drawing board, fiddled some more with the work Martina and I had done, and created some additional elements, including for internal pages. Casey did her own work, I fiddled and adjusted as we went, and at long, wonderful last, we're able to offer our readers what we all think here at Scarleteen is a pretty darn spiffy, and much more useful, update of our last design, keeping the elements of previous designs we know our users and readers have loved the most, ditching some of them they haven't, adjusting others, and adding some new colors and elements to make it all look (if we do say so ourselves) awesome and be a lot easier to use.

We're still finishing up some final touches here, and with design or programming changes, there are always little things -- sometimes big things, but here's hoping for the best -- that come up you didn't find out about until it went live despite weeks of testing. We hope you like the changes as much as we do, and look forward to having it for a long time before we start groaning about it.

(And by all means, if you're having any trouble or issues with the redux of the site, please let us know! You can leave a comment right here, in our suggestion box, or email us. Cheers!)

Comments

I love the new design so so so so so soooooooo much... it also for me makes a comeback of vibes of the older designs which I nostalgically missed (honestly I lurked on the way back machine to enjoy the previous deisgn). Also despite your purported total exhaustion, I'm loving reading this blogpost, it's either the new design or the general sense of newness in how you're joking about the general history of it.

Also also, I definitely don't miss serifed fonts in articles... my dyslexia will be a lot happier now, and can go sit in it's basket instead of gnawing my ankles.