Review: Sass for Web Designers

I’ve been reluctant to dip my toes into the waters of CSS preprocessors. I don’t like the idea of having to compile my CSS for it to render, of having non-standard compliant code in my files, of introducing a new standard that none of the developers will know anything about. Of come up with all kinds of reasons not to even try Less or Sass. Dan Cederholm felt much the same way. Then he dove in head first and ended up writing a book about it.

Sass for Web Designers is another great, little book from A Book Apart. I’m a big fan of Dan’s previous book, CSS for Web Designers, so when I saw his name on this one, I figure I ought to give it a shot. At just under 100 pages, I figured that even if I decided it wasn’t for me, I wouldn’t have to sink much time into it. I wasn’t disappointed, and I’m now itching to put it to use.

There is a lot to love about Sass, but the two main advantages to my mind are variables and mixins. Variables allow you to, for example, define a color once, give it a name (the variable), and then use it in multiple rulesets by name, rather than having to repeat the hex value. If you need to change it, change the variable’s value, and all references to it will be updated. Mixins basically do the same, except with chunks of CSS, rather than a single value. Define your drop shadow with all the various vendor prefixes and give it a name. Then you can use that name in any ruleset.

That’s just scratching the surface. If you are Sass-curious, I recommend Sass for Web Designers.

Design Axioms

Erik Dahl has spent a little over a year crafting a list of UX Axioms. An axiom, by the way, is a statement or proposition that is regarded as being established, accepted, or self-evidently true. Erik is continuing a custom at his company, Involution Studios, that has twice before organized collected knowledge into axiom card decks: once with design axioms, and the second with health axioms. In its current incarnation, his list is composed of 26 axioms, whittled down from an initial 150 concepts. It’s a good list, ranging from very practical tips, such as #4, Pay attention to patterns, to broader philosophies like #15, Everything is designed and everything is a design challenge.

I haven’t had the opportunity to see Erik’s talk on the subject, but the slides he has up look like a good show. I’m looking forward to the cards.

The Right Skills

The Digital Life is a great podcast created by Jon Follett and Erik Dahl. I dare say it is one of the best podcasts currently being produced about Interaction Design and User Experience. If you haven’t listened to it, I highly recommend giving it a try, and the latest episode, number 56, is an excellent one to taste test. Titled “Design Education and Building Teams with the Right Skills”, it deals with topics near and dear to my own design practice, teaching, and general mindset. Here’s their episode summary:

User experience is an amalgam of information architecture, visual design, interaction design, user research, prototyping, coding, and a host of other skill sets. Combine this complexity with the rapid rate of change in technology and techniques, and it’s no wonder that there’s a gap between the skills required by the industry of UX designers and those taught by design programs in colleges and universities. In this episode of The Digital Life, we discuss the state of design education and how to build teams with the right skills to ship digital products with Jared Spool, Founding Principal of User Interface Engineering.

The program begins with an insightful overview of the current situation from Dirk Knemeyer. It’s a very relevant, historic perspective. The interview with Jared Spool about his new Unicorn Institute is fantastic. As usual, Jared has the research to back up the approach he and Leslie Jenson Inman are taking, and he paints a picture of design education serving the needs of the companies that will be hiring the graduates. Check it out.

Review: Responsive Web Design

I was on a business trip last week (training the crew of the USS Carl Vinson) and made good use of my travel time. During take-offs and landings, when I couldn’t have my laptop out, I read Ethan Marcotte’s Responsive Web Design, published by A Book Apart. It’s one I’ve had sitting on my desk for months now. The book itself is well designed with full color screenshots. The code is nicely formatted with just enough syntax coloring to improve readability without painting every page a rainbow. Ethan did a fantastic job explaining and demonstrating fluid and responsive layouts. He walks the reader through the design of a webpage, starting with a Photoshop mockup from “a designer” on their team. His writing style is easy on the brain with a good dose of humor.

I highly recommend the book, not just for front-end developers, but for designers that contribute production code. I’m looking forward to putting media queries to use in my own work.

Bento So-So

I’m the drummer in a worship band, and I participate in the planning of our services. We select five songs every week to support a theme or scriptures that the service will be based on. Our repertoire is well over 100 songs, and it continues to grow. To make it easier to select songs, I want to create a database that I can easily search. I should be able to find a song based on its key, tempo, related scriptures, keywords, and a general search of its title and lyrics. To this end, I’ve downloaded a trial copy of Bento. I have read that it is the best option on the Mac for a low-cost database that is easy to use.

It is proving easy to use, but I’m running into limitations. Specifically, there is no good way to add a collection to a record. By a collection, I mean a list of distinct items. For example, I would like to add a list of keywords to each record. There are two ways I could do this, but neither is satisfactory. I can enter them into a single field separated by commas. They will be searchable this way, but I won’t benefit from auto-completion while I’m entering them. Auto-completion is desirable for keyword entry, as it helps maintain a clean list without variations of the same keyword. The other method would be what they call a Simple List, which I thought would be perfect, but for some reason, Simple Lists aren’t searchable. I don’t understand that at all. Why would you have anything in a database that can’t be retrieved with a query?

Designer’s Toolbelt: iMac

I’ve now had my new 27” iMac for a couple months, so I think it’s time to give a short review. The screen is absolutely gorgeous. It is, bar none, the best computer display I’ve eve seen. It’s bright, sharp, and the colors are brilliant. It makes the two older Apple LCDs that straddle it seem dim and muddy, and I’ve always considered them to be good displays. Of course, it’s huge, which is fantastic for both Photoshop and World of Warcraft.

The iMac is fast. I beefed up the RAM and the graphics card, and I got the top-of-the-line processor, so I would expect it to be, but I think the Fusion Drive is making a big difference. That’s the hybrid drive that intelligently combines solid state storage with a standard mechanical drive, automatically moving the most often used files and applications onto the solid state portion for optimized performance. System startup and application launching is noticeably speedy.

There is no DVD drive. So far, this has not been a problem. I still have an iMac in the house with a DVD drive, and it’s set up to share it, so the one or two times that I’ve had to mount removable media have been a very minor annoyance.

The biggest issue was the removal of the Firewire ports. My Drobo was connected to the Mac Pro via Firewire, but it is now connected to one of the iMac’s USB ports. I’ve definitely observed a decrease in its performance, especially when starting iPhoto or when the screensaver kicks in and accesses my photo library on it. I also had an external Firewire hard drive that I’m currently not able to use.

Eventually, I hope to make more use of Thunderbolt, but it only has two of those ports, which are currently occupied by two 20” Apple Cinema Displays. So far, I haven’t seen any good options for a Thunderbolt hub. I’m sure there will be such a thing eventually, but they’ll likely be expensive.

In conclusion, I’m very happy with my purchase. I consider it to be a professional-grade machine, and I expect it to serve me well for the next four years or so.

Laudable Audible

Another of my favorite sessions from Interaction 13 was Trip ODell’s If UX Can Kill it Probably Will: Designing for the 70 MPH Interface. And what interface might that be? I had the fortune of making Trip’s acquaintance a couple days before his talk and learned that he has worked for both Microsoft and Adobe, but he wasn’t speaking of work he did at either company. He is currently at Audible, a company that I have a lot of respect for. He convinced the company that, even though their customers had a very high satisfaction rating with the existing Audible app for mobile phones, it had to be redesigned. That, in and of itself, is impressive, and the fact that the company put the time and money into the effort shows that they really do care about their customers.

What was so bad about the Audible app that it had to be redesigned?

This is what the old app looked like with all of the controls exposed. All the icons and the progress bar at the top could be shown and hidden with a tap on the screen. The volume slider and the row of buttons above it could be displayed or put away by dragging the ribbed tab. But let’s think about the use of audiobooks. As Trip pointed out, you almost always listen to them start to finish. You don’t skip parts, and you certainly don’t jump back to re-listen to a previous chapter. That entire row of rewind/forward controls, while useful when listening to music, are not only useless for audiobooks, but a source of extreme frustration. If someone is driving, or even walking, and they attempt to pause the book, but accidentally jump back to the beginning of the chapter, there is no good way to recover from the mistake.

Trip’s focus was use while driving, and he said that they determined that the play/pause button was the most important, followed by the 30-second rewind and bookmark buttons. Everything else could be minimized for non-driving use. The new design, which released this week, is a brilliant example of simplification done right.

There are a number of other laudable improvements to the app, and it’s getting rave reviews. I want to congratulate Trip and his team on some outstanding work. They should submit it to the IxDA Interaction Awards next year.

Designer’s Toolbelt: Kaleidoscope

Black Pixel recently released the tool for diffing—that is, finding differences between two documents. I’ve made good use of TextWrangler, a free text editor from BareBones, in the past, and I’ve used the FileMerge tool that comes in Apple’s Xcode extensively. Versions, Black Pixel’s Subversion client, integrates FileMerge, which is quite handy. They are both good tools for finding differences, comparing them, and merging documents.

Black Pixel has designed Kaleidoscope to be the single most useful file comparison tool available. It has three different layout modes for displaying differences in text documents with good search and navigation functions. It integrates with Versions, as well as SourceTree and Tower (both Git clients). This alone makes it a match for other tools, but they didn’t stop there.

Kaleidoscope can compare two different directories as well. In this mode, you can filter the content to find what’s important, clone files between them, and drill down into enclosed folders. Of course, you can double-click any pair of files to compare them.

But wait, there’s more! This tool isn’t just for those of us that can pound out code. Kaleidoscope can compare images. Four layouts allow you to view images one at a time, side-by-side, in a split view, or differenced. It supports PNGs, JPEGs, and Photoshop files.

Until the end of January, they are selling Kaleidoscope at half price: $34.99, and there is a 15 day trial if you want to try it out first.

Interaction 13 Shortlist

In past years, the Interaction conference has used Crowdvine to allow people to connect, communicate, and plan what to attend. A couple of the conferences have included custom mobile apps with such functionality. This year, there’s something new: Shortlist.

Shortlist recommends people to meet based on your unique set of goals, professional background and social media connections. We call it “accelerating serendipity.” You’ll call it “amazing.”

Shortlist is also an information hub for essentials like sessions, exhibitors and maps. Everything you need to make the most of your time and opportunity is now at your fingertips. So the only question left to ask is, “Who’s on your Shortlist?”

I can’t say I care about the recommendations too awfully much. I already know a lot of people that will be attending, so I’m more interested in seeing who that I know will be there, rather than a list of people I don’t know. But, the functionality I’m most interested in is the ability to select the sessions I’m planning on attending and then display my personalized schedule.

Crowdvine would allow you to indicate people you considered friends separately from those you would like to meet. Shortlist only seems to allow me to add people to my “shortlist”. Crowdvine would notify you if someone marked you as a friend or someone they want to meet, allowing you to then go and do the same. It allowed you to see each attendee’s list of friends and see who was planning to attend which sessions. As far as I can tell, Shortlist doesn’t make that information public. There is a page for “My Connections”, but it is currently empty, and I don’t know how to add anyone to it.

Of course, all of this is of limited value without the ability to access it on my phone during the conference. I searched for an iOS app and didn’t find one, but Shortlist is optimized for mobile use, so I saved it to my home screen for easy access. That should be sufficient for viewing my schedule as I move from session to session. The only thing missing there is the ability to view one day at a time, rather than having to scroll through the entire week’s worth of events.

Shortlist is less robust than Crowdvine, but it is a solid start for a competing service.

Book Review: Playful Design

In preparation for the course I’ll be teaching this semester, I read John Ferrara’s Playful Design: Creating Game Experiences in Everyday Interfaces. John did a good job with the book. The writing is very accessible, and it’s broken up into relatively short chapters, making it easy to reference. John’s target audience is the User Experience (UX) community, so the book approaches the topic from the perspective of applying game design principles to interaction design. Having already read Jesse Schell’s The Art of Game Design, I didn’t find value in Part II of Playful Design: Designing Game Experiences, but that part of the book will be quite useful to any designer new to the subject. Parts I and III I enjoyed more, with the latter, titled Playful Design in User Experiences, being most beneficial. Here are the descriptions of the chapters in that part of the book:

Chapter 11: Games for Action surveys a variety of ways that games have been applied to influence people’s actions in the real world.

Chapter 12: Games for Learning takes a look at games that have been designed to help people learn new concepts and skills.

Chapter 13: Games for Persuasion describes how games can convince people to adopt a different point of view.

Chapter 14: How Games Are Changing concludes the book with a speculative look toward the future of games, as suggested by current trends in design.

While Schell’s book touches on such topics, it doesn’t do so in great detail, as his book primarily deals with the “how” of game design. Spending a chapter each on learning and persuasion gave Ferrara the opportunity to cover a number of examples I wasn’t previously aware of. Note, also, that Challenges for Game Designers by Brenda Brathwaite and Ian Schreiber has similar chapters with even more examples.

If you are seriously interested in designing games, I would first recommend The Art of Game Design, and it will still be the primary text for my class. If you are a designer looking to add game design principles to your tool belt, Playful Design will be perfect for your purposes. I am already sprinkling my lectures with notes from it.