HTML5, CSS3, UX, Design: Links from An Event Apart Boston 2011

Meeting of the Minds: Ethan Marcotte and AEA attendee discuss the wonders of CSS3. Photo by the incomparable Jim Heid.

Meeting of the Minds: Ethan Marcotte and AEA attendee discuss the wonders of CSS3. Photo by the incomparable Jim Heid.

THE SHOW IS OVER, but the memories, write-ups, demos, and links remain. Enjoy!

An Event Apart Boston 2011 group photo pool

Speakers, attendees, parties, and the wonders of Boston, captured by those who were there.

What Every Designer Should Know (a)

Jeremy Keith quite effectively live-blogs my opening keynote on the particular opportunities of Now in the field of web design, and the skills every designer needs to capitalize on the moment and make great things.

The Password Anti-Pattern

Related to my talk: Jeremy Keith’s original write-up on a notorious but all-too-common practice. If your boss or client tells you to design this pattern, just say no. Design that does not serve users does not serve business.

What Every Designer Should Know (b)

“In his opening keynote … Jeffrey Zeldman talked about the skills and opportunities that should be top of mind for everyone designing on the Web today.” Luke Wroblewski’s write-up.

Whitney Hess: Design Principles — The Philosophy of UX

“As a consultant, [Whitney] spends a lot of time talking about UX and inevitably, the talk turns to deliverables and process but really we should be establishing a philosophy about how to treat people, in the same way that visual design is about establishing a philosophy about how make an impact. Visual design has principles to achieve that: contrast, emphasis, balance, proportion, rhythm, movement, texture, harmony and unity.” In this talk, Whitney proposed a set of 10 principles for UX design.

Veerle Pieters: The Experimental Zone

Live blogging by Jeremy Keith. Veerle, a noted graphic and interaction designer from Belgium, shared her process for discovering design through iteration and experimentation.

Luke Wroblewski: Mobile Web Design Moves

Luke’s live awesomeness cannot be captured in dead written words, but Mr Keith does a splendid job of quickly sketching many of the leading ideas in this key AEA 2011 talk.

See also: funky dance moves with Luke Wroblewski, a very short video I captured as Luke led the crowd in the opening moves of Michael Jackson’s “Thriller.”

Ethan Marcotte: The Responsive Designer’s Workflow (a)

“The next talk here at An Event Apart in Boston is one I’ve really, really, really been looking forward to: it’s a presentation by my hero Ethan Marcotte.”

Ethan Marcotte: The Responsive Designer’s Workflow (b)

Ethan’s amazing talk—a key aspect of design in 2011 and AEA session of note—as captured by the great Luke Wroblewski.

An Event Apart: The Secret Lives of Links—Jared Spool

“In his presentation at An Event Apart in Boston, MA 2011 Jared Spool detailed the importance and role of links on Web pages.” No writer can capture Jared Spool’s engaging personality or the quips that produce raucous laughter throughout his sessions, but Luke does an outstanding job of noting the primary ideas Jared shares in this riveting and highly useful UX session.

An Event Apart: All Our Yesterdays—Jeremy Keith

Luke W: “In his All Our Yesterdays presentation at An Event Apart in Boston, MA 2011 Jeremy Keith outlined the problem of digital preservation on the Web and provided some strategies for taking a long term view of our Web pages.”

Although it is hard to pick highlights among such great speakers and topics, this talk was a highlight for me. As in, it blew my mind. Several people said it should be a TED talk.

An Event Apart: From Idea to Interface—Aarron Walter

Luke: “In his Idea to Interface presentation at An Event Apart in Boston, MA 2011 Aarron Walter encouraged Web designers and developers to tackle their personal projects by walking through examples and ways to jump in. Here are my notes from his talk.”

Links and Resources from “From Idea to Interface”

Compiled by the speaker, links include Design Personas Template and Example, the story behind the illustrations in the presentation created by Mike Rhode, Dribble, Huffduffer, Sketchboards, Mustache for inserting data into your prototypes, Keynote Kung Fu, Mocking Bird, Yahoo Design Patterns, MailChimp Design Pattern Library, Object Oriented CSS by Nicole Sullivan and more!

An Event Apart: CSS3 Animations—Andy Clarke

“In his Smoke Gets In Your Eyes presentation at An Event Apart in Boston, MA 2011 Andy Clarke showcased what is possible with CSS3 animations using transitions and transforms in the WebKit browser.” Write-up by the legendary Luke Wroblewski.

Madmanimation

The “Mad Men” opening titles re-created entirely in CSS3 animation. (Currently requires Webkit browser, e.g. Safari, Chrome.)

CSS3 Animation List

Anthony Calzadilla, a key collaborator on the Mad Men CSS3 animation, showcases his works.

Box Shadow Curl

Pure CSS3 box-shadow page curl effect. Mentioned during Ethan Marcotte’s Day 3 session on exploring CSS3.

Multiple CSS Transition Durations

Fascinating article by Anton Peck (who attended the show). Proposed: a solution to a key problem with CSS transitions. (“Even now, my main issue with transitions is that they use the same time-length value for the inbound effect as they do the outbound. For example, when you create a transition on an image with a 1-second duration, you get that length of time for both mousing over, and mousing away from the object. This type of behavior should be avoided, for the sake of the end-user!”)

Everything You Wanted to Know About CSS3 Gradients

Ethan Marcotte: “Hello. I am here to discuss CSS3 gradients. Because, let’s face it, what the web really needed was more gradients.”

Ultimate CSS3 Gradient Generator

Like it says.

Linear Gradients Generator

By the incomparable John Allsopp.

These sessions were not captured

Some of our best talks were not captured by note-takers, at least not to my knowledge. They include:

  1. Eric Meyer: CSS Anarchist’s Cookbook
  2. Mark Boulton: Outing the Mind: Designing Layouts That Think for You
  3. Jeff Veen: Disaster, DNA, and the Fathomless Depth of the Web

It’s possible that the special nature of these presentations made them impossible to capture in session notes. (You had to be there.)

There are also no notes on the two half-day workshop sessions, “Understand HTML5 With Jeremy Keith,” and “Explore CSS3 With Ethan Marcotte.”

What have I missed?

Attendees and followers, below please add the URLs of related educational links, write-ups, and tools I’ve missed here. Thanks!

Questions, Please: Jeffrey Zeldman’s Awesome Internet Design Panel today at SXSW Interactive

HEY, YOU WITH THE STARS in your eyes. Yes, you, the all too necessary SXSW Interactive attendee. Got questions about the present and future of web design and publishing for me or the illustrious panelists on Jeffrey Zeldman’s Awesome Internet Design Panel at SXSW Interactive 2011? You do? Bravo! Post them on Twitter using hashtag #jzsxsw and we’ll answer the good ones at 5:00 PM in Big Ballroom D of the Austin Convention Center.

Topics include platform wars (native, web, and hybrid, or welcome back to 1999), web fonts, mobile is the new widescreen, how to succeed in the new publishing, responsive design, HTML5, Flash, East Coast West Coast beefs, whatever happened to…?, and many, many more.

Comments are off here so you’ll post your questions on Twitter.

The panel will be live sketched and live recorded for later partial or full broadcast via sxsw.com. In-person attendees, arrive early for best seats. Don’t eat the brown acid.

Ava’s Story

Here is a story my daughter wrote in school today. I’ve corrected the charming first-grade spelling.


I was going to school with my Dad. I did morning meeting lunch recess and I went to Miss Vickie’s. We made stories. I wrote about Toys-R-Us. It was the end of the day. My dad picked me up from school. I played with my cats and with my Smurfs. I watched a movie. My Dad made me dinner. I rang my neighbor’s doorbell. I asked for a play date but I couldn’t ’cause she was taking a bath. So I watched the Simpsons. My Dad read me a story. I kept on wanting my water. I tried to sleep but I could not. One of my cats bit my hair. So my Dad put him in the kitchen. But I still couldn’t sleep. I got scared but my Dad held me tight. So I wasn’t. I looked at the ceiling. My Dad was snoring so I went to sleep.


Migrating from a conventional Facebook account to a public figure (“fan”) page – a report from the trenches

BECAUSE FACEBOOK LIMITS USERS to 5,000 contacts, I had to migrate from a conventional user account to what used to be called a “fan” page and is now called an “Artist, Band or Public Figure” page. (Page, not account, notice.)

There’s a page on Facebook called “Create a Page” that is supposed to seamlessly migrate from a conventional user account to a public figure (aka “fan”) page.

The page says it will only migrate your connections—it will lose all your content, photos, apps, and so on—and Facebook means it. After migrating, all my stuff is gone. Years of photos, wall posts, blog posts, tweets, you name it. Even the “help” page link is gone once you’ve migrated, so you can’t refer to any help documentation to find out where all your stuff went and if any of it can be saved.

Custom URL breaks on migration

Because of an idiocy in the database, you can’t keep your existing custom URL, since, when you request it, Facebook tells you it is “taken.” My Facebook page was “jzeldman,” but that URL is “taken” by a fellow named “Jeffrey Zeldman,” so I can’t use it on my Jeffrey Zeldman page. So I had to change to a new URL (“JeffreyZeldman”) and now all my admin links (for instance at facebook.com/happycog) are broken, as they point to the old user page instead of the new fan page. At the very least, Facebook should seamlessly redirect from facebook.com/jzeldman (my old URL) to facebook.com/JeffreyZeldman (the new one), but it does not.

So all my other social media sites that point to the old Facebook account need to be updated by hand, and any third-party links will now be broken because Facebook doesn’t let you keep your custom URL during a migration.

Third-party apps disappear completely

Likewise, none of the third-party functionality (Twitter, Tumblr, Flickr, RSS, and so on) has migrated from the user page to the fan page, and there is no information explaining how to reconnect these apps.

No reasonable app like the ones I’ve mentioned appears in the “apps” section of the sidebar on my new page. When I look for additional apps, I get treated to a bloated browse of crappy apps nobody on earth uses, whose creators probably made deals with Facebook in hopes that newbies would be persuaded to hook up these contraptions. You can find “PhotoMyButt” but not Flickr.

I, however, use Flickr.

So, since I can’t find it in the big dull browse, I resort to Facebook’s Apps’ “Search” box. Typing Flickr in that box is exciting. Instead of being taken to the Flickr apps on Facebook, I’m treated to endless redirects courtesy of a broken PHP script that loops infinitely forever suffering like Christ on the cross world without end amen while never actually resolving. Each new partial page that loads for an instant before being replaced by the next is undesigned and unbranded and contains only the sentence fragment, “Please stand by, redirecting…”

The devil will see you now.

So much for content

My photos are gone. My existing writing is gone. Facebook does seem to be migrating human beings who were “friends” on my old page, but nothing else works.

Oh my God, I can’t Admin my own page

I can’t Admin my new Facebook page because the “Admin” is “jzeldman” (me at the old account, which Facebook deleted). Perhaps this is why it’s impossible to post content, no apps work, etc. Nice.

Kids, don’t try this at home

All these bugs are probably known to Facebook, and there are probably nice people at Facebook whose job is to execute known secret internal workarounds when helping an actual “celebrity” migrate his or her page. I’m just guessing of course, but it stands to reason that Ashton K or Lady Gaga, if they want a Facebook page, probably don’t have to deal with all this frustrating brokenness. They have people for that.

But I don’t. I’m a web guy. And web stuff should just work.

A Very Short Story

MY DAUGHTER sat laughing in the dark, her face and hands covered in blood. Just a nosebleed but it aged me 10 years.


Reality Check.

HERE’S A REALITY check for those of us who can’t believe fax machines are still necessary in 2011. I have just learned, to my astonishment, that half the lawyers in New York create their documents in WordPerfect. That is not a typo.

The version of WordPerfect they use saves in its native format. It can also save as RTF, but it loses formatting when it does so. It can save as a particular version of Word ’97 for Windows which is not compatible with other platforms, and which also loses formatting. And it can save as ASCII, because, well.

If the lawyer wishes to preserve the document’s formatting while saving a copy for someone (say, a client) who doesn’t own WordPerfect and hasn’t seen it since DOS ruled, said lawyer and said client are out of luck.

But what of PDF, you ask?

There is no option to save as PDF. Maybe Adobe charged a licensing fee that the makers of WordPerfect weren’t able to afford (hampered as they are by the fact that nobody besides New York lawyers buys their product). Or maybe the makers of WordPerfect died before PDF became ubiquitous.

Advanced Windows users can probably finagle a PDF out of WordPerfect, say, by buying Adobe Acrobat Pro and installing a plug-in, but the lawyers in New York do not seem to be advanced Windows users.

Oh, also, IE6 is the cat’s pajamas in this world. Twenty-three skidoo!

And you ask why we still use fax machines.

Foreknowledge of things trivial – or, the lamentable desk clerk.

I KNEW THAT MORAL PIPSQUEAK of a desk clerk would forget my wake-up call. Knew it, knew it, knew it. When I told him our room number and said we’d need a wake-up call at 7:00 AM, and he said, “No problem, sir,” but didn’t look me in the eye and didn’t repeat my room number or the requested time, I knew what I had told him would not lodge in his small, distracted brain. Knew he would forget. Knew, knew, knew. And sure enough, there was no wake-up call. If my internal clock hadn’t alerted my unconscious, causing me to have nightmares about adultery, I would not have awoken and we would have missed everything.

Because that bloody teenage desk clerk didn’t give a shit and is going on to bigger and better things someday and this is a nice hotel that subsists on a prep school parent business and wasps don’t complain when fucking desk clerks fuck up their wake-up calls. (Wasps never complain; they just quietly buy your company to destroy it, or, with a mere gesture, make sure your kid never gets into the university she’s qualified to attend. But I digress.)

Might have missed our morning appointment. Might have missed our train. But desk tosser cares fuck-all and will never be called on it. Certainly not by me. I’m not going to be the one guest here in 100 years who complained. (“Did you hear? The man in Room 211 actually lodged a complaint.” “No, really? I thought there was something, well [John Cleese eyebrow gesture] about him.”)

And I knew when he didn’t meet my eye that he was not going to write down anything, not going to take care of it. Knew when he said, “No problem, sir,” like the thing he wasn’t even going to bother to do was a favor to me instead of his job. Knew from his fucking haircut.

But I didn’t want to be the jerk who says, “Would you mind repeating my room number and the time I’ve requested?”

If I’d done it, the fucking prick would have done his job and my phone would have tinkled at 7:00 AM on the fucking dot.

But to do it, I’d have to be a testosterone-fueled middle-aged self-entitled business prick, and I’m not that. Not externally, anyway. I pride myself on being nice. Or stoic. Or self-effacing. Or something. They gave me lollipops for it at the pediatrician’s. What a good little patient, didn’t even cry when the nurse jabbed him over and over again. You could see his little eyes watering but he didn’t say a word and didn’t even complain to his mother. Have a lollipop, you’ve earned it, son.

That’s the deal I’ve made with life. I’m nice. I don’t confront. I don’t demand. I don’t judge, at least not publicly, except right here where I’m publicly judging jurying and executing this poor pimply fuck of a desk clerk. Who, had he raised his eyes, would have seen a harried traveler and his adorable, exhausted daughter. And if he possessed an ounce of desk clerk skill or even a jot of humanity, le clerk manqué would have smiled and exchanged a pleasantry with the little girl—bringing a moment of real human connection to the simple business transaction of setting a wake-up call, which he would have been sure not to fuck up, because you don’t want to disappoint or inconvenience a nice little family like that.

Now I understand how Laurence Sterne wrote Tristram Shandy.

Anyone still here? So the moral, I guess, is two-fold: 1.) Trust your judgement, and if you know the desk clerk isn’t paying attention, exert the necessary moral pressure. 2.) Create a web app that tracks hotel wake-up call failures (or help someone add this feature to a check-in app) because it’s a real problem for business travelers. Who are probably smart enough, unlike me, to travel with clocks.

P.S. The iPad alarm clock app failed also. La de da.