DesignAday

Lazy Genericism

Bootstrap is a beautiful piece of work, no doubt. It makes flexible and responsive grid-based layout a piece of cake. It provides transitions and dynamic behaviors without a sweat. It even provides clean, contemporary aesthetics in pre-made components. Add Glyphicons or Font Awesome and you have a web app that will satisfy the CEO built in no time flat.

Of course, you used an accordion panel instead of coming up with something better, because it was easy to do. And the select widgets aren’t exactly what you had in mind, but they were there. Add you used a non-descript document icon for “Add Properties” because there wasn’t a better icon in the set. Oh, and it looks like every other site built with Bootstrap because you started with one of their templates, and you just didn’t take the time to do much customization.

Yes, Bootstrap and its cousins are wonderful things. We should take advantage of them. But please, I beg you, don’t fall into the trap of quick and easy. Don’t forget that your user interface is your brand. Excellence will not be found in lazy genericism.

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: 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 - Bring it!

Tomorrow, I’ll be driving up to Toronto where I’ll be attending Interaction 13 all next week. I will kick off my conference experience by presenting my workshop: Sitting in the Driver’s Seat: creating production-ready CSS. I have my slides ready (well, mostly), and I’ve created a number of CSS exercises that we will be working through. There are still seats available, by the way. I’ll be encouraging attendees to get involved in the implementation of the web applications/sites they design. To do so, they really ought to know how to create good, clean, maintainable, reusable HTML and CSS components. I’ll be showing them how to do just that.

One of the great things about giving a workshop is that I’ll have it done and out of the way before the conference proper starts, so I’ll be able to fully enjoy myself. There are a lot of people I’m looking forward to seeing, and a lot of food I’m looking forward to eating. Oh, and there are those presentations I’ll be attending, too.

If you are going to be at the conference, please find me. I’d love to meet you.

Sitting in the Driver’s Seat

I have some exciting news that I’m finally able to share. The Interaction 13 program has been announced, and I’m part of it! I’ll be running an afternoon workshop on Sunday, January 27th. Registration for the workshop costs $200 through November 30th, after which the price rises to $300. There are only 30 seats, so book it now.

Sitting in the Driver’s Seat: creating production-ready CSS
workshop with Jack Moffett

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. 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.

It’s Away!

There are only a couple days left until the deadline for Interaction 13 submissions. I just got mine in. In addition to my talk, “Working with Developers for Fun and Profit”, I achieved my goal of submitting a workshop. In fact, I submitted two. Hopefully, one or the other will be selected. With my teaching experience, I do believe that conference workshops would be an excellent fit for me.

Introduction to Typography

Typography is one of the foundations of design. It should be part of the fundamental training of a designer, whether pursuing Graphic Design, Interaction Design, Industrial Design, Information Design, or Service Design. Unfortunately, due to the limitations of technology, especially on the web, typography was given short shrift. Designer’s control of type was hamstrung, so the importance of learning the finer points of working with type diminished. A large percentage of Interaction Designers don’t have a visual design background and have not been exposed to typographic training.

Now, with the advent of web fonts and services that provide them, typography on the web is seeing a resurgence. CSS 3 provides fine control of type, making it, once again, a powerful tool in the hands of those that know how to wield it. We are the caretakers of an art that has been under development since 3200 BC (cuneiform)—the very architecture of visual communication. As such, it is our responsibility to become proficient in the use of type as a method of communication, a means of expression, and an element of usability.

Intended primarily for typographic beginners, the goal of this workshop is to:

• Provide a basic vocabulary with which to discuss typography
• Give a historical overview of typographic evolution
• Instill a foundational understanding of how type works in print and on screen
• Demonstrate the implementation of type with contemporary web technology
• Elicit an appreciation of, and passion for, well-executed typography

Sitting in the Driver’s Seat: creating production-ready CSS

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. 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.

Less JS

As I have become more and more proficient with CSS, and as support for CSS3 selectors has improved, I have been making a concerted effort to implement as much behavior as possible through CSS rules, rather than JavaScript. Historically, it has been up to the developers to update UI element states through DOM manipulation. I have found, however, that I can do an awful lot with a single class placed on a high level element.

For example, let’s say you are implementing a copy/paste function within a web application. There is a tool bar containing buttons to delete or copy a selected item and a visual representation of the item on the clipboard. There is also a paste button that will show up at specific locations within the content when the cursor hovers over containers that can be pasted into.  The toolbar buttons enable only when an item is selected. The clipboard is hidden until populated, and the paste button only displays when the clipboard is populated. The way this functionality would have been implemented in the past would be to run through a JS sequence of events each time an item was selected to enable the buttons by changing the classes assigned to them (or worse, write inline styles). When an item was copied, JS would change the style applied to the clipboard, and every time a container was hovered over, it would check a variable to see whether or not it should show the pasted icon, and then manipulate it’s style.

While I can’t get rid of JavaScript, I can limit its complexity. By placing a class on an HTML element high in the hierarchy (e.g. the body tag), I can easily drive complex state changes throughout the UI. In the above example, JS could be used to add the class ”selectionTrue” to the body, and selectors keyed off of that class would style the delete and copy buttons to appear enabled with their corresponding hover and active states. Remove the class on deselection, and both buttons go back to their disabled states. When an item is copied to the clipboard, a single class on the body, say “clipboardTrue”, can be used both to display the clipboard in the toolbar and show the paste button wherever it occurs on hover. JavaScript is reduced to adding or removing a single class in an easily accessible spot, rather than combing the DOM.

The result is less complexity in the JavaScript that requires a developer to maintain. The complexity is in the CSS, which the designer is responsible for. This is appropriate, since the designer is the one who should be responsible for the behavior in the first place.

Fixed Positioning Fixed

I know all the cool kids are designing for mobile first these days, but when I redesigned the website for my church, given my lack of knowledge about the specifics of implementation for Mobile Safari, I felt it more important to get the new site up as quickly as I could and worry about mobile later. I didn’t realize, however, that Mobile Safari didn’t support fixed positioning of elements. I was quite surprised to see the entire page scroll, including the bottom bar, which covered an entire line of text. I put off doing anything about it, mainly because I didn’t have the time to research the issue, but also because I knew from Google Analytics that we hadn’t had much mobile traffic. So, I was quite please to learn that the release of iOS 5 included support for fixed positioning. Now the site works the same on iPhones and iPads as it does on the desktop.

However, I don’t agree with Apple’s treatment of fixed elements when zooming. Upon zooming in on a section of the page, all of the fixed elements redraw themselves at their zoomed-in size relative to the borders of the browser pane. This means they end up covering a large percentage of the content that you zoomed in on to read. My site has been rendered useless in a zoomed-in state. It would work much better if, when zoomed, fixed elements were placed relative to the full page, rather than the viewing area. I may end up having to create a mobile version of the site, something I didn’t want to do.