DesignAday

IxDA Pittsburgh Workshop Open for Resgistration

My workshop, Sitting in the Driver’s Seat: creating production-ready CSS, which I led at Interaction 13 in Toronto, is getting a second run in Pittsburgh. All proceeds, beyond the rental of the space, are going to IxDA Pittsburgh for use in future programming. Since this is the first event to which we are charging admission, we’re keeping it very accessible. It’s only $100 for professionals and $50 for students. Spots are limited, so register now through Eventbrite. After you register, RSVP on IxDA Pittsburgh’s Facebook event page to let everyone know you’re going.

CSS 3 has handed the keys back to designers. With a syntax and structure that speaks our language and a fine-grained level of control, it empowers designers to not only prototype in the actual medium, but to contribute production-ready code. The days of pointing at the screen over the developer’s shoulder and trying to explain how something needs to shift three pixels are over. In fact, much of the JavaScript currently employed for simple UI behaviors can be replaced with well-architected styles. Take the driver’s seat, and make the CSS your UI specification document.

This workshop is intended for intermediate designers interested in gaining more control over their team’s final product. Participants are expected to possess a working knowledge of CSS. They should be able to read a stylesheet and understand what it is doing in the HTML page that references it. They should be able to write CSS styles and apply them to HTML elements to achieve a desired layout on a page.

As a participant, you will:

• Familiarize yourself with the tools you’ll need to integrate with your development team.
• Learn how Object Oriented CSS (OOCSS) can lead to cleaner, more maintainable code.
• Discover how to replace heavy-handed, inefficient JavaScript with CSS-driven behavior.
• Get started on your own library of CSS components.

About Jack Moffett
With a BFA in Graphic Design from West Virginia University and a Masters in Interaction Design from Carnegie Mellon, Jack has been designing web, desktop, and mobile applications for over a decade. He has worked in both research and industry environments and has been teaching design part-time for more than eight years at WVU. As Senior Interaction Designer at Inmedius, a Boeing Company, Jack’s responsibilities cover the gamut from initial user research and product conceptualization through to implementation and testing. As such, his skill set includes visual design, information design, and front-end implementation. He has designed software tools for Lockheed Martin, Shell, DaimlerChrysler, Eaton, and many organizations within the U.S. military, including Joint Service Explosive Ordnance Disposal, Naval Reactors, and NCIS. Jack has spoken at conferences and led workshops to teach designers how to integrate with their development teams and participate in implementation. He writes about design on designaday.tumblr.com.

Sitting in the Driver’s Seat… in Pittsburgh

Some weeks ago I mentioned that I would be holding my workshop, Sitting in the Driver’s Seat: creating production-ready CSS, for IxDA Pittsburgh. Plans are firming up. The workshop will be held in East Liberty Carnegie Library on Thursday, May 30th, from 5:00 to 8:30 pm. There will be 15 seats at $100 and 10 student seats at $50. Mark your calendar now. I’ll let you know when we have registration set up on Eventbrite.

While I’m at it, let me throw in a plug for our Interaction 13 Redux this coming Tuesday, April 16th, at Brillobox from 6:00 to 9:00 pm.

Unforeseen Benefits

It seems obvious now, but when I was working on my conference workshop of Interaction 13, I really wasn’t thinking about it being of particular benefit inside my company. I’ve been the sole interaction designer for so long, I don’t give as much thought to knowledge sharing as I probably should. Since the acquisition, however, we’ve had an influx of work, and due to a number of mostly unrelated circumstances, I’ve recently been charged with training a junior graphic designer to assist in front-end implementation. The exercises I developed for Sitting in the Driver’s Seat are perfect for this purpose, and she is quickly coming up to speed on OOCSS and the standards I employee.

On a related note, IxDA Pittsburgh is currently planning to put on my workshop in May. If you are in the area and interested in learning how you too can participate in implementation and contribute production-ready CSS, stay tuned for an official announcement.

Interaction 13: Program

Having attended all of the Interaction conferences so far, and having helped plan one of them, I can’t help but compare each to those that have gone before. The program for every single one has been very good. This year’s program had a lot to offer, from PechaKucha and posters to 45-minute keynotes. I think it’s safe to say that it had the most variety of all the conferences. Every morning began with a short presentation by OCAD students and faculty. There were a few panels, a debate, and the newly introduced ReDux Live, in which design industry journalists gave their interpretations of what happened during the week. I’m afraid I missed the latter two, due to sickness, but I’ve heard really good things about them. I’m looking forward to the videos.

45-minute presentations were often run in one track while three 10-minute presentations ran in another. While I understand now the way they set this up, it was not represented well in the Shortlist application that I used to create my schedule. I had selected a mix of 10-minute and 45-minute talks that didn’t line up. As such, I ended up seeing some that I hadn’t intended to see while missing some that I wanted to. It was easier to see the parallelism in the printed program, once you realized that’s what they were doing, but it wasn’t immediately obvious.

In the Details: Microinteractions

The hardest choice I had to make at Interaction 13 was the first multi-track session on the first day of the conference. Pittsburgh’s own Matthew Powers was presenting Smart and Beautiful: Designing Robots and Intelligent Machines. He actually had presented it a week before for our local group as a practice run for the conference, including a tour of the robotics lab at CMU. I really wanted to attend that, but had an obligation to be somewhere else. In the other corner was Dan Saffer with Microinteractions: Designing with Details, a preview of sorts for his soon-to-be-released book by the same title.

Of all the 45-minute talks to be presented during the week, these were the two I most wanted to see. It figures they would be scheduled for the same block. The deciding factor I typically fall back on in such situations is which one I could more easily make a case for directly applying to my daily work. Microinteractions won out. Actually, it’s a topic that I’m particularly interested in. If you have been reading DesignAday for any length of time, you’ll know that I regularly make posts in my In the Details series. These are exactly the types of interactions Dan is talking about.

It’s the little things that make the difference between a good digital product and a great one. In this insightful book, author Dan Saffer shows you how to design microinteractions: the small details that exist inside and around features. How do you turn on mute? How do you know you have a new email message? How can you change a setting? These moments can change a product from one that’s tolerated into one that’s treasured.

I couldn’t agree more. Perhaps I shouldn’t have been surprised to see one of the examples I wrote about fairly recently on screen towards the end of his presentation. In fact, when I spoke with Dan afterwards, he mentioned that he had mined my posts during his research. It’s good to know they’ve been of use, and I’m looking forward to reading about all of the examples he has included when the book releases this May from O’Reilly Media.

Interaction 13: Food

The first four Interaction conferences were real treats for foodies. Every reception/party had enough food to make a meal of. The selected caterers provided a wide variety of cuisines plated with artistic flair. I remember a dessert table in 2009 that ran the width of the hotel ballroom. I remember shucking oysters in 2010. I remember eating an orchid in 2008, and there was the street vendor outside the Boulder Theater in 2011.

The conference food in Dublin was mostly forgettable. The food served during the closing party at the Guinness Storehouse was fantastic, but there wasn’t a lot of it. Interaction 13 was worse. The happy hours had nothing to munch on, and the appetizers at the parties, while tasty, were not meal-worthy.

The lunches were beyond lame. Each day gave us progressively less meat. In fact, the only meat on day three was some crumbled bacon you could put on your salad. The main course was macaroni and cheese. They made a big deal of the fact that we were not to visit the vegetarian table if we did not request it when we registered, and I really questioned whether I was at the right table. The only explanation I can think of is that a vegetarian planned the menu.

The one positive was that when I checked in at the Radisson, I was issued coupons for free breakfasts (tip included) every morning for myself and my wife. That was a great start to the morning, and it was the most protein I got a couple days.

I guess we were spoiled the first few years while the conference was small. Now it has grown to the point that a conference center is required to fit everyone, and conference centers require that you use their own catering. Here’s hoping that Amsterdam has more to offer.

Interaction 13: Workshop

Upon arriving in Toronto Saturday night, I discovered that the conference organizers had provided me with a list of attendees, including their job titles and the companies they worked for. I was very interested to find that they ranged from the standard “Interaction Designer” up to managers and directors. I was a bit intimidated by the fact that there were two software engineers registered. This was going to be interesting. What would they think of my push to get designers involved in implementation, and how would they receive my approach to replacing JavaScript DOM manipulation with simple class swaps? Would they actually find the workshop valuable, or would it all be old hat? I would soon find out.

I presented my workshop, Sitting in the Driver’s Seat: creating production ready CSS, Sunday afternoon at Interaction 13. There were nine attendees, and everyone seemed to have learned something useful from it. Their technical abilities varied, but they were all able to follow along and understood, at least in concept, if they weren’t able to complete the more involved exercises on their own.

I began with an introductory slide deck that I’ve posted on Speaker Deck. I explained why I think it is important for designers working on web-based applications to not just understand HTML and CSS, but to master it, so that they can contribute directly to the production codebase. I talked about the tools they should be using, and then we got into the code. We started with a simple CSS formatting exercise in which they had to fix a CSS file to adhere to the formatting standards proposed by Nicola Gallagher in his Idiomatic CSS. Then they used a diffing tool of their choice to compare their work against my corrected version.

After that warmup, we dove into OOCSS. I used Amazon’s homepage as an example, challenging them to reformat the “Get yourself a little something” component so that with a single class swap, it could be changed from the horizontal layout to a vertical layout, matching the “Best Sellers” column also found on Amazon.com.

Finally, we went over the benefits of defining state through CSS, rather than JavaScript. The attendees had to write CSS that would change the display of entries in a contact list, showing and hiding various elements,

In the end, while I could have used a little more time, I successfully fit the content into the three-hour event. Reactions were very positive, and I’m looking forward to giving the workshop again. So, what did the developers think? I’ll let Anton tell you about that in his own words. 

Interaction 13: Badge

I arrived at OCAD Sunday morning and registered before having lunch and getting ready for my workshop. In addition to the schwag I detailed yesterday, I received my program book and badge. It’s a program book. It’s a badge. These are not two different items.

I’m wearing a book #ixd13 flic.kr/p/dQUGpn

— Jared M. Spool (@jmspool) January 30, 2013

The design of the program book was alright. It could have been better, but it sufficed. The design of the badge, on the other hand, was pretty bad. The cover of the book displayed my first and last name, my company, and three words I used to describe myself when I registered for the conference (passionate, dedicated, creative). These words were directly below the company name, which made them appear to be a company slogan. Then, below all of that was my Twitter handle, @jackmoffett, in a small, light font. An orange sticker at the very bottom labeled me as a speaker. The book had a hole punched in the top-left corner so that it could be hung from the lanyard in our schwag bag.

Of course, this meant that at least 50% of the time, the book was hanging with my name against my stomach. When it was out, it was difficult to read. The name wasn’t quite large enough, and since the background was gray, the contrast was low. To make matters worse, you couldn’t easily read the book while it was hanging around your neck. There wasn’t enough lead on the lanyard for the size of the book.

It didn’t take long for the conference organizers to acknowledge that we didn’t like the badges. They hinted at some problem they had in production, but they wouldn’t give us their excuse. Instead, they challenged us to “hack the badge”, turning it into a competition. I’m not sure how many entries they received, but not many used the #hackthebadge hash tag. I’m afraid I came down with a stomach flu early Thursday morning and missed the entire last day of the conference, so I haven’t heard who won.

Interaction 13: Schwag

I’ll be spending this week (at least) reporting on Interaction 13, which took place last week in Toronto. It was another great conference, but rather than diving into the details, I’m first going to give my annual schwag inventory.

The “bag” this year was not actually a bag, but a slipcase for an iPad or other tablet. Made of a dark gray felt and screened with the conference logo in white, the case features two leather loops that pivot around the top corners to hold the tablet in. It was a really good idea and genuinely useful. It contained the following:

• A ballpoint pen branded by YehID. That is going in my drawer o’ pens that I rarely use.
• Jauntful Toronto map of Tom’s Selection of Amazing Foodie Finds. I didn’t use it, depending instead on my iPhone apps.
• Field Notes 48-page memo book. It’s a nice little book, and it’s going in the same drawer as the ballpoint pen on a stack of similar little books.
• A metal Android V1 stencil by UI Stencils. It’s 150% actual size, which I won’t find nearly as useful as if it were actual size. It has a couple button shapes, but is mostly icons. It would allow you to mark the four corners of the screen, and it can be used as a straight-edge. It also has some embossed icons for interaction techniques, but I’m not sure of their utility. The stencil came in a plastic slipcase and was accompanied by a Zebra HB 0.7 mm #2 mechanical pencil.
• A coupon for one free ebook download from O’Reilly. That’s something I’ll definitely take advantage of, as soon as I figure out which one I want to get.
• Lanyard, printed with the Ix13 logo.

As far as conference schwag goes, it was pretty light, which is a good thing: less refuse.