This Is (Web) DIY

In was the fall of 1994, and I was but a lowly intern at Salem, MA-based record label Rykodisc. Specifically, I was the “online” intern, primarily responsible for maintaining the label’s forum on the Delphi ISP1. Commercial online services like Delphi were essentially separate from the then-nascent web, and only the largest services had fancy, proprietary graphical interfaces. So Delphi’s forums were text-only, though ours had downloadable cover art, plus a few rudimentary sound clips. And since I had interned for Delphi that summer, I was already pretty comfortable with my forum management duties and was looking for a new challenge.

So while my boss Lars frantically tried to get us a spot on the then hip-and-happening online place2, I decided to attempt creating a page on this new thing called “The World Wide Web.” A Delphi co-worker3 had shown me a bit of the web a few months earlier, and I, like many others who stopped by his computer to take a peek, were immediately seduced. It wasn’t just that there were pictures, though that was indisputably cool. It was the whole, hyperlinked way of interacting with information, the self-published free-flowing-ness of it, which left the green-text-on-a-black-screen, press-a-number-to-select, BBS-style interface and walled-garden paradigm we were used to in the dust.

Armed with a SLIP connection4 to a local ISP and a 14.4k Modem, I fumbled my way around creating my first page, starting by viewing the source HTML code behind the web pages I visited, and pasting the contents into my text editor to mess around with and preview in my Mosaic browser.5 Then I bought a book, one of the first on HTML6, which helped me build upon the fragments of knowledge I’d picked up by trial-and-error.

And since creating a web page was free7, my boss was all for it, even if, as I warned, I wasn’t sure how many people would be able to view this page. It might only be visited by students and academics, the only large demographic groups likely to have Internet access. The vast majority of the online population then, including anyone using the major ISPs — AOL, Prodigy, CompuServe — still did not have access to the web.

It was in this atmosphere of “what the heck?” that I created my first professional web site, in fact my first web page ever, for Rykodisc. My toolbox was limited, as there was no CSS and no JavaScript. The first iteration of HTML didn’t even allow for using different fonts, any page background color (beyond the default gray), or tables, which, in the pre-CSS era, would be used (and abused) in the service of visual design.

What I did have: a collection of links to web pages for Rykodisc artists I’d gathered via web searches, digital album artwork scavenged from the art department’s file server (including that nifty Dan Clowes piece from a Ryko sampler CD), and witty, brand-appropriate copy written by Lars. That’s right, early web pages were all about the content, if only because there was precious little design one could apply.

But I did my best with the design, as well as the code. And it all came together in the page you see below, with historically-appropriate gray background added in via CSS prior to taking this screenshot. While I didn’t save the exact first iteration of that page, this one, from the very beginning of 1995, is essentially the same design and content. (You can also view a full-size version.)

It may not be a pretty web page, but it served its purpose and started me off on a path I continue to this day. Figuring out how to build something from nothing, even when I hadn’t a clue… that was heady stuff. And it’s one of the reasons why I continue to preach the power of prototyping to other UX and design folk. That is to say: I did it, and so can you.

Rykodisc Home Page - January 4, 1995

1. Delphi’s two main claims to fame in the footnotes of Internet history: a) Edging onto the list of Top 5 nationwide Internet Service Providers, and b) Getting purchased around that same time by Newscorp, in one of their first in a string of ill-fated online forays.

2. AOL, of course.

3. Renowned writer Jimmy Guterman, who I also recall assisting in what would now be called his “liveblogging” of the Rolling Stones’ “Voodoo Lounge” tour kickoff for Delphi.

4. Serial Line Internet Protocal. Pre-PPP, yo!

5. This was just before the first Netscape beta was released.

6. Laura Lemay’s Teach Yourself Web Publishing with HTML in a Week (Sams Publishing, 1994)

7. Even — believe it or not — the domain registration at that time. Also free.


The Illusion of Control


photo: P Hansen

My father took a lot of pictures. Photography was a hobby and, for a short while, part of his professional life while an engineer at Polaroid. I grew up loving the click-whoosh of an instant photo being taken, slip of murky proto-photo being ejected into waiting hands. Pulling to expand, then snapping flat the brushed metal and leather-paneled slab… just getting to handle the camera was almost as fun as staring at that inky square, waiting for the image to appear.

Photos would get pinned to the fridge by magnets or to the cork board in the entryway with pushpins. Most of those would eventually make their way into one of the large, three-ring photo binders that collectively served as our multi-volume Family Album. And there each photo would sit, layered in plastic against an adhesive-backed, card-stock page, waiting patiently for that holiday visit by relatives. Not long after their arrival, binders would be taken down off the shelf and rifled through for collective reminiscing and occasional moments of embarrassment. (Plaid bell-bottoms!)

Of course nowadays, I can snap a funny photo, upload it to Flickr or Twitter or MLKSHK, and quickly get comments (or “likes”) from my friends. Or I could go a step further and toss it up on a different kind of site, like Canvas, where my photo would serve as raw material for a cycle of remixes and captioning that ends only when all the lulz have been wrung out of that particular creative sponge.

Now, some people might dismiss the purveyors of silly photo mashups as nothing more than juvenile mouth-breathers killing time between flamewars. And many people want nothing less than to have their personal photos subjected to (often ridiculous) manipulation by strangers. But somewhere between that static photo album and the photo-free-for-all is the space in which most of us probably play. We want to share our pictures, and solicit comments, approval, acknowledgment. We’re willing to release them out into the world to be viewed and experienced in many different ways.

The web is not a photo album. It can’t be. It shouldn’t be. I put up content, you read it, view it, share it using a phone, a computer, a tablet, a PC. Then you might print it out, repost it somewhere else or make it your computer desktop image. You might even decide to make a CafePress t-shirt from it. (Though let’s hope in that instance I’ve released that image to the public domain or used a liberal Creative Commons or similar license.)

As part of sharing my content with you, I implicitly agree to your, at minimum, experiencing it in a different context than I might. After all, you might use the Flickr Android app to view a 320-pixel-wide version of my image, even though I might blanch at the thought of browsing my own photo library in anything less than full-screen mode using iPhoto on my 22″ widescreen monitor.

But as soon as I release that image onto the web, that’s my problem, not yours. I’ve relinquished a certain degree of control.

And such is the case for any content I, you or anyone might choose to put on the public web. Yet so many web designers seem to, if not actively fight against this notion, be made uncomfortable by the fact that you might choose to browse their shiny new web site using a netbook, or a phone, or just a smaller-than-fullscreen web browser on a computer. We need less “my design is meant to be viewed” and more “our content is meant to be enjoyed.”

So how to begin changing the conversation? While many of the ideas will be familiar to those who followed the aims of the Web Standards Project (“simple, affordable access to web technologies for all”), established in the early part of the past decade, the web thinkers, designers and developers rallying under the current banner of “Future Friendly” have summed things up quite succintly in three basic points. The first one, in particular, makes a rather nice manifesto in and of itself:

Acknowledge and embrace unpredictability.

In other words, get comfortable with being uncomfortable. Accept there will always be a new device, a new technology, and entirely different way of experiencing content. And step two is, naturally, to carefully consider and prepare anything you might unleash onto the web accordingly.

Perhaps unsurprisingly, most of the people behind Future Friendly are largely approaching this from having done a lot of work in the mobile space. Quite frankly, the explosion of mobile has been a much-needed kick in the pants to further dissemination and adoption of these broadly-applicable ideals. When mobile Internet usage is growing at such a fast pace that, by current estimations, its volume will exceed that of desktop Internet usage by 2015 (if not sooner), it becomes impossible to deny that web sites unfriendly to mobile use are simply unfriendly. Period.

Things that may be a minor annoyance when experienced in a desktop browsing context — minimum browser window widths, plug-in downloads and long page-load times — often become intolerable in a mobile one. Attempts by designers and developers to shape the experience by elevating form over function only serve to drive users away.

Sites like Media Queries strive to highlight some of these newer, adaptive designs that change to suit your screen size in the same way CSS Zen Garden did for site using web standards almost ten years ago. And there’s movement away from plug-ins towards web-native experiences, as evidenced both in an announcement by SlideShare this week that they were ditching Flash in favor of HTML5, and a report last month that more top web sites are now using web-native-technology-leveraging jQuery than Flash. And mobile web pioneers like Yiibu (Bryan Rieger and Stephanie Rieger) continue to not only evangelize for better context-appropriate web experiences overall, but share actionable insights in amazing presentations like this one about some of the ongoing issues with serving that right experience, at the right time, in the fastest possible way.

In these ways, we’re still figuring out the mechanics of how to harness certain technologies and approaches, and when to discard others, all in the service of removing barriers to truly delightful experiences.

And it truly was a delight, using that Polaroid camera. I may not longer own it (and getting more film for it would be a challenge in and of itself), but that kind of connection is something that I’ll always seek out, in experiences both tangible and digital. Designers and developers who strive to be future friendly should end up being user friendly, which gives them that much more of a chance of wowing me. And that’s a challenge I’d love for more of us web professionals to take on.


Ignite Seattle 15: Field Guide to Record Collectors

Last month, I spoke in front of a few hundred people, at night, outdoors in a large parking lot in Fremont for Ignite Seattle 15. It was a blast, both speaking and watching others’ presentations. Though I’ll admit to being relieved at not having to go on right after the one-armed chainsaw juggler, or the trapeze artist who gave her presentation entirely in mid-air.

For once the topic was not UX, but something that I’ve actually been involved with for far longer, dating back to high school: record collecting. Yup, those things in the bookcases behind me in my profile photo? Rows and rows of my LPs. In fact, creating my own data model and database for my collection of 7″ singles was my first real taxonomy project, pre-UX career.

If you’re curious about some of the attributes of the Record Collector, you can view my slides and transcript below.

Transcript

[Slide 1]
Record collectors. In the age of the MP3 who are these people who insist on clinging to such fragile objects? I’ll try to explain, as I went from mere music lover to yes, record collector.

[Slide 2]
I was first infected with a love for vinyl while working in a used record store in high school. I was a 17-year-old suburban girl working with a bunch of cranky, music-obsessed, late twentysomething guys.

[Slide 3]
But the first thing I learned about record collectors was that, like the staff, most are dudes. In fact, I was once interviewed for an article about female record collectors, that’s how rare we are.

[Slide 4]
That said, what defines a collector is not his gender, but that he (or she) is willing—is indeed eager—to spend hours digging through thousands of records, squinting at record labels and run-off grooves.

[Slide 5]
And collectors need to be masters of that minutiae: first pressings, audiophile editions, colored vinyl, and foreign releases. And web sites for bands popular with collectors, like The Smiths, will give you every detail about every release.

[Slide 6]
These sites, and reference books, act as part organizational aid, part shopping list, and part collector porn, stoking a desire to own each and every artifact listed.

[Slide 7]
And magazines like Record Collector have long combined detailed articles about entire artist and label catalogs with pages of sale listings and advertisements for the latest rarities. But sometimes they’re not so easy to get.

[Slide 8]
For example, take the famous Beatles “butcher” cover for Yesterday & Today: an original copy of that album can go for almost $40,000 – if you can find one. In fact, that album has an interesting history, one that collectors love to share.

[Slide 9]
The cover art was so shocking, Capitol Records pulled all copies from U.S. stores after a single day. Most copies were destroyed. Some sleeves were pasted over with different artwork, leading some to try peel them to see what lay beneath.

[Slide 10]
At the record store, I learned stories like these, and developed my eye for detail, so I could see the little things that made one pressing of a record worth a dollar, another far more. But some of what I learned was far more mundane, but absolutely essential.

[Slide 11]
Such as how to cram a room full of records. They start out in the living room, next to the stereo. But like Tribbles, they multiply…and eventually must be contained.

[Slide 12]
Soon enough, a spare bedroom is required. As well as proper record furniture, the kind that is built to stand up to the weight of all that vinyl. Think all-wood, and nothing from IKEA.

[Slide 13]
And with that many records, it becomes essential to organize them properly. And everyone has their own personal system. I was inspired to create my own database, with custom fields and categories, to make it even easier for me to track my collection.

[Slide 14]
We’re also highly competitive. With the arrival of eBay, bidding wars became a professional sport, in place of stalking the New Arrivals bin, or jockeying for position at record fairs in search of that lost 45.

[Slide 15]
Me? I prefer doing things the old-fashioned way, making hitting record stores a part of any travel itinerary. I became master of the Yellow Pages in any new city, writing down the names and addresses of all stores under the “Records, Tapes & CDs” heading.

[Slide 16]
But with all that dusty, thrift store vinyl, collectors need to revive and care for it. We break out our accessories: record cleaning fluid and brushes, fresh new inner sleeves and outer plastic sleeves. Anything to make the music sound its best (and not wreck our turntable needle).

[Slide 17]
Finally, collectors hate moving. But there comes a day when you need to move. God forbid across the country. During my move here from New York, I packed, lifted and shifted over 65 boxes of LPs, and even more CDs and 7″ singles.

[Slide 18]
Though actually, I had some help from friends. And any friend who is gracious enough to help with moving your record collection any distance — even just down the block — will never, ever volunteer for that job again.

[Slide 19]
Those are but some of intriguing, and sometimes baffling markers of we record collectors. While I may have started learning to spot these signs as an observer, I ended up just as obsessed, with the house full of vinyl – and cassettes, 8-tracks, reel-to-reels — to prove it.

[Slide 20]
But no matter how much we may obsess about the physical characteristics of bits of vinyl and paper, it’s what’s below the needle, and coming out of our speakers, that really matters.


What’s Awesome? CSS3

CSS3isawesome.com page header

Too many great links pass through my Twitter stream and RSS feed, some haphazardly archived via (re)tweeting, favoriting, bookmarking or saving to Pinboard. And when I’m coding pages or sites from scratch — something I’ve been doing more and more lately — not having those resources about the latest dev and design techniques organized in an easily comprehensible fashion is a definite handicap.

So I decided to put a domain name I registered on a whim some time ago to good use: css3isawesome.com is now my new central repository for those kinds of links. CSS3 is the obvious focus, but there are a few broader web design-related links in there, too. I want to constantly be adding new things to the list, so email me or @ me on Twitter if you know of a great link that would fit in one of my four categories:

  • Demos
  • Articles & Blog Posts
  • Tools
  • Grids and Page Layout Systems

At some point I’ll better organize everything, with tags and maybe some kind of CMS. But, as always, the content itself is the most important element.


Baking a 3-Layer-Cake Prototype

3-Layer Prototype screens
I clearly didn’t make myself hungry enough putting together the cupcake bakery mini-site for my prototyping talk last month, as I’ve spent the past few weeks polishing that prototype — and staring at chocolate frosting — in order to make that code a proper, release-ready framework. And I’m now happy to say… the 3-Layer-Cake Prototype is now ready for your (ahem) consumption!

Genesis

The prototype builds on a technique I’ve actually used for many years, one I first read about in late 2004 in this Invasion of the Body Switchers article on A List Apart by Andy Clarke and James Edwards. I remember finding it instantly useful for a project I was doing at Coinstar, where I was tasked with developing an updated kiosk interface that could accommodate touchscreen and keypad interfaces, in either Spanish and English. Using IOTBS, I was able to create an interactive prototype from a single set of HTML pages that effectively simulated the various interfaces and served up different language content.

But it wasn’t until sometime last year, fiddling with WYSIWYG prototyping tool Axure and seeing their in-prototype annotations that I realized… hey, I could do that, too!

Evolution

First I tried absolutely positioning individual labels over each page, something which was pretty effective, but slightly wonky cross-browser and -platform. Plus, it was incredibly time-consuming having to both position the labels (nudge, nudge – save – refresh x 1000) and create all the additional markup and CSS to support them.

Then I discovered CSS3 Generated Content and realized that it could be used to create an almost identical set of annotations, but in a way that was much simpler and scalable. In a nutshell, here’s how it works:

The Annotation Technique

  1. Elements bearing a class of “x” in the HTML page will be tagged with a numbered note, to be shown in annotations view.


    And if the element has one or more classes already, just add it to the existing one(s), as multiple classes are A-OK.

  2. In the switch.css file that defines view-specific styles, a counter is defined for all elements tagged with the “x” class when in Annotations view.

  3. Then the counter is started, its results styled and set to appear as generated content before the start of each “x”-tagged element in Annotations view. From this, the note labels appear onscreen next to each of those elements.

  4. Finally, the annotations themselves are inserted into the notes panel in the HTML page, written up and formatted as an ordered list, with one list item for every “x”-tagged element on the page, in the order in which they appear in the code.


    The notes and the annotations lists aren’t yoked together, so this is the only place where you’ll need to manually match up the count/order of elements to list items.


And that’s the heart of the annotations functionality, explained. You could (and should!) strip out whatever you don’t need, if, say, you want the annotations without the complete 3-Layer-Cake Prototype framework. Non-commercial re-mix and re-use is very much encouraged under the Creative Commons license under which I’m releasing this work. And if you end up using this and posting something online, please let me know, as I’d love to check it out!

Get the 3-Layer-Cake Prototype