Thanks to everyone who came out to the NovaRUG presentation of my HTML/CSS/Rails Views talk. Here’s my slides from the event:

Beautiful Markup (10.7MB PDF)

Thanks to Gregg Pollack a video of my RailsConf 2010 Talk, Curing DIV-itis with Semantic HTML, CSS and Presenters is now online at the EnvyLabs site. I’ll be expanding and giving this talk again on June 29th at NovaRUG.

Thanks to everyone who came to the talk at the conference and for those of you who watch it online!

Chad Fowler asked me to put together a quick site for the RubyConf 5k that will occur during Ruby Conf in San Francisco in November. If you’re there, please think about running, as it benefits Leukaemia and Lymphoma research. Need to get up to 5k from walking up the stairs making you winded? Look at Chad’s link that he sent me: Couch to 5k

The new MacRuby website is alive and kicking with a new look and feel (courtesy of me) and a nice Webby-based backend (courtesy of Rich Kilmer).

Webby is a Ruby framework that allows the user to work with model files to build a static site. We have a lot of helper methods and ERB that ends up dumped out as HTML when we run the deploy command. It’s similar to WordPress in that way, and it is a phenomenal tool for building static sites that feel dynamic. While it does support things such as HAML and SASS, we relied on good old Textile to get the job done.

The site is run without a database. It uses structs and helper methods to generate everything. For example, if Rich wanted to add someone to the “Project Team” list, he would simply update the Ruby array of people objects and the helpers loop through and make it all nice and styled. There was more info presented on this page initially, being the name, URL, focus and company affiliation, but it was simplified down for some of the presenters. The Special Thanks are handled in the same way.

We’ve been very happy to see some of the recent press about MacRuby as well. If you haven’t seen it, please check out:

Upcoming MacRuby Implementation to be Substantially Faster (at ArsTechnica)

Hello, friends. We’re your usability consultants.

Is your web app tired? Run down? Listless? Does it poop out at diggings? Is it unpopular on del.icio.us?

The answer to all of your problems is in this little bottle consulting package. Hyphenated People Prix Fixe. Yes, Hyphenated People Prix Fixe contains vitamins, meat, vegetables, and minerals and 150% of your daily dosage of usability expertise.

Yes, with Hyphenated People Prix Fixe you can buy your way to web application health. All you do is take a big dose after every meal once. It’s so tasty, too. Tastes just like candy. So why don’t you join the thousands of happy peppy people and order your Hyphenated People Prix Fixe today. That’s Hyphenated People Prix Fixe.

Hyphenated People Prix Fixe

Over at Hyphenated People, we’ve been spending the summer cooking up something new: a fixed-price deal. Fun and challenging for us, and affordable for you.

For a flat rate, you can choose either:

• The Inspector. In which we explore and analyze your entire application¹ and deliver to you a fancy report including a written analysis (including callouts and sketches) and suggestions for improvement. Topics considered include application structure, flow, individual screens’ usability and layout, insights about targeted users, and aesthetics (aka “the pretty”).
• The Drive-By Design. In which we explore your application, and thence, with that knowledge, take any single, full page of your choosing and redesign it from the ground up to be more effective. In this case we deliver to you a fully-realized design, original design source files (PSDs) and a written explanation of our recommendations for that page and its situation in the entire application.

Either package is ideal for smaller companies and startups, and anyone who is having a difficult time loosening the purse strings for hiring usability consultants for a long-term project.

There’s no further obligation. Our reports and advice are yours. We will happily make ourselves available for further assistance (availability permitting), but you can implement our suggestions any way you want, and with whomever you want.

That Price, Which is Fixed

The price for either package is just $3,500 USD. If you’d like further details, drop us a line at yo@hyphenateme.com with your preferred method of contact and we’ll give you a prompt return call or email.

Write us now. You know you want to.

Nota bene: We’re only budgeting the time for a few of these projects this summer. It’d be a clever marketing tactic to make that up and then urge you to contact us now if not sooner, but it’s actually true. This is something we’ll be doing in addition to our normal, larger jobs. We will of course deliver our very best (as we always do), but this is an experiment for us from a business standpoint.

[1] This assumes a fairly typically sized application: similar to or bigger than Basecamp, smaller than Salesforce.

This past week, my business partner, Amy Hoy and her fianceé, Thomas Fuchs, created something so simple and so damn cool based on the twitter API and some great javascript. It’s called Twistori

They built it and launched it in one day and announced it solely with one post on twitter each.

Check it out. You’ll be hooked.

The talk that Amy Hoy and I gave at SXSW this year is now online at behyphenated.com. Check it out!

Our talk pitch: Zen masters taught it. Isaac Newton knew it. Scott Adams writes about it. Now you can know it, too. We’re talking, of course, about the manifold benefits of being a n00b (at something). And, of course, about all the good stuff that happens post-n00bishness: the excellent side effects of being good at multiple things, even if they’re not related – heck, especially if they’re not related. So many of humanity’s important discoveries, innovations and beautiful leaps of logic have been made by people whose brains were leveled up by the cross-fertilization of multiple interests and disciplines. Nano-thin specialization is out, a broad understanding of life, the universe, and everything is in. It’s time to synergize, baby. So, reach outside your comfort zone, be a beginner again, and you’ll be smarter, sexier, better at your job… even more valuable. With the wisdom of the ages (and a little bit from modern pundits), we’ll talk about how, why, when, and where you can go about it. You won’t regret it.

Amy and I have been accepted to a new thing at SXSWi coming up in March in Austin, TX. It’s called a “Core Conversation” and we’ll be holding one on our concept deemed “Career Rev 342: Dabble Dabble, Toil and Kick Ass”. The basic premise revolves around a lot of what Amy and I have been through: broad, multi-faceted learning, generally out of the classroom, and lots of nose to the grindstone. It’s also a discussion about how mutliple facets improve team interactions (as opposed to specialists who don’t understand each other’s specialties).

We don’t have any details yet, but we’ll update you as we move towards March.

DHH posted about the new version of Ruby on Rails that is currently a preview release. The exciting things are just the simplification of a lot of things, especially Migrations. Also, a lot of the acts_as functionality is being extracted to plugins. Lighter, faster, and more streamlined.

Also, one of the elements of RESTful that was implemented with the semicolon functions has been changed back to slashes, which seems much more logical and proper anyway.

Looking forward to the final release.

The incomparable Amy Hoy and I are pitching a panel for SXSW this year about being a dabbler. We’re both pretty much ADD dabblers, but this is actually a prepared presentation, not a five person Q&A session gone wrong.

We’ll be chatting about things like

• constant learning,
• why it’s good to have a guitar next to your desk,
• pushing your team members into renaissance-man land,
• and some good “Now Everyone Hug” motivation.

Amy will be recording and I will then spend four weeks “EQing and Mastering” it in ProTools, by which time she will have just put it out anyway, forcing me to resort to releasing the Criterion Collection edition. Of course, no one will notice any significant difference. :D

So, yeah, vote early. Vote Often.

Our client, Gary Vaynerchuk is going to be on Late Night with Conan O’Brien tonight. For those of you who haven’t seen Gary’s Wine Library TV webcast, you are missing out. We’ll be launching a new project with him soon and then moving on to more world domination with the man.

For those of you who missed it, Gary was also recently profiled in TIME magazine by Joel Stein.

UPDATE Here’s the full video from Conan (the NBC site cuts the beginning and end) and Gary was recently featured in Slate as well!

(This article is part two in a multi-part series on design process, which started with my article on Why?!)

For those of you who have seen Chasing Amy you’re aware of the famous line delivered by Jason Lee: “Tracer? Your Mother’s a tracer!!!” This follows taunting by a comic book fan that he’s not really doing anything creative.

The taunter was totally wrong.

Towards A New Paradigm

I went to Architecture school. Not information architecture, but the “we make buildings and stuff” variety. One of the big tenets of the program I attended was that one should not be using a computer unless they already knew how to do the traditional technique. The computer is simply a digital version of the drawing tool or a different tool that needs to be integrated into a set of traditional tools. How can you draw in a computer if you don’t know how to draw in the first place?

The rationale behind this is easy. Computers are finite, sketching is representational. When in CAD, it’s a very precise line length, angle, color, etc. Paper can be as simple as a parti diagram (just showing the basic line strokes of a design) or can be super shaded and detailed. But regardless, at the end of the day, it is not finite. It is a representation of an idea.

Take this story from my college interning days. I was working for a small design/build shop in Newport News and I had the opportunity to design sketch a small addition. I came up with two different ideas and the owner asked me to present them to the client. So I drove over and sat down at the table with them in their house and showed them what we had come up with. They weren’t sold on either completely and did a typical client move: “We like this from A and that from B.” Okay. I whipped out a role of trace and drew that with them right there and asked “something like this?” They were ecstatic and joined into the creative process and I left the house with a finalized design.

This works very well for web work, whether it is within a team or with a client, this rapid sketch process gets everyone to a shared understanding (and buy-in) very quickly.

Sketching for Web

Currently, when one starts designing a product (web app) or web site, most will start with either a database model in Visio or OmniGraffle (if they are a programmer) or a look/feel comp in Photoshop, Fireworks, or Illustrator (if they tend to the design mentality). These are far too detailed approaches when you know not what you are trying to accomplish. So let’s go with that age old adage of everything you need to know you learned in Kindergarten.

This is what is so great about this approach. EVERYONE on the team: Designer, programmer, client, business owner, investor, heck, even your accountant, can all be part of this process. It can happen on a white board, post-it notes, an easel, printer paper, a sketchbook, and even pen tablet systems (but again, computer wants things precise).

This isn’t a new idea. Jakob Neilsen sang the praises of paper prototyping in 2003:

With a paper prototype, you can user test early design ideas at an extremely low cost. Doing so lets you fix usability problems before you waste money implementing something that doesn’t work.

Ryan Singer, of 37Signals, also uses an extremely high-level paper prototyping system (which he discusses in Getting Real). They even scribble the text and then jump straight into HTML, using a graphics program only to create needed graphics. This obviously doesn’t work for everyone, but the core concept is simple: get the idea of the interaction that occurs designed very simply. Then start plugging and chugging it into your framework.

So, we have a theoretical system, paper prototyping, that allows us to get ideas developed quickly. But why should you use trace paper?

Why Trace?

When an architect is designing a building, trace comes in handy. First off, revisions. Floor plans change. Secondly, repetition. There are core elements that stay the same, such as the exterior walls and stairwells, but individual floors have different elements. Trace facilitates rapid copying of elements from other already completed layouts.

Now let’s apply that to a website.

The global elements, such as a header, a footer, navigation, and the basic framework (e.g. two vs three column) typically stay the same. The body content changes.

In real world practice, we used the trace process on two sites recently: CityCliq’s redesign and the initial design for Gourmet Library. In both cases, a large amount of high level design was accomplished very quickly by using trace paper. Once we kicked into a flow, a new page could be completed in 15 to 30 minutes. With CityCliq, we were doing product design/redesign and finished 24 wireframes in two relatively relaxed days at their offices in Jacksonville, FL.

Scan and upload to our Basecamp account? Bam.

“But I Can Do That in [Visio|OmniGraffle|Illustrator|Indesign] Faster!”

Well, in a production sense of making edits, etc. sure you could. But it’s the wrong tool. You’re trying to imply pixel perfection to an idea. You are spending time on the wrong thing (how things exactly line up) versus the important idea of what that page or that piece of interaction is. You get the important user experience information on paper and discuss how things flow. Then you can start dialing down into other tools. I personally go from paper to Photoshop. Ryan Singer at 37Signals goes from paper to HTML (or so he did when I attended the Getting Real workshop in Chicago in 2005).

So break out an index card, a post-it note, a roll of trace, a sketchbook, or a sketch-a-doodle even. As Michael Buffington twittered as I finished this article: paper prototyping turns out to be a lot like Kindergarten.

Let’s break out the finger paints.

Further Reading

Jakob Nielsen’s Alertbox on Paper Prototyping
Paper Prototyping (The website to accompany the book)

Supplies

12" x 150ft. Creme Trace paper
Staedtler Lumocolor Pens (I prefer the 318-9 Black Fine point)

Here’s a bunch of links that came through from the guys at EightShapes in regards to some of the Ajaxification we’re about to being on our storefront at Wirefly / InPhonic.

Yahoo Graded Browser Support | This is Yahoo’s assessment of which browsers are capable of more advanced features. A good way to plan what you are going to support.

AJAX SEO and Accessibility Considerations | If you’re like me, the idealist in you thinks everything should be usable and accessible. Here’s some notes on issues with advanced web applications.

AJAX and SEO | What to do about SEO on your AJAX site?

Adobe Flash Player Version Penetration | Eh, numbers from the horses mouth, but pretty interesting never the less.

Unobtrusive Javascript | Write better code, now!

Progressive Enhancement | What it is and Steve Champeon and Nick Finck’s SXSW03 Presenation

Now most of you are probably reading the title of this post saying “what in the hell is Athayde talking about?” Well, it’s complicated. But it’s an error that Justin and I have both hit and I keep forgetting to write down how to fix it. So I’m writing it down.

It was a relatively quiet Saturday night, and I was working on cleaning and recovering with some nice Knob Creek and Code Coke when suddenly, a shot rang out, a door slammed, the maid screamed! Suddenly, a pirate ship appeared on the horizon! Justin posted to Twitter that he was fighting with rMagick on Athena (our main production server). So I offered to help. Diving in we hit this error:

Fatal error 'Spinlock called when not threaded.' at line 83 in file /usr/src/lib/libpthread/thread/thr_spinlock.c (errno = 2)

Hmm. Looked familiar. Hit this before, we have. So I began to dig around. Upgraded ImageMagick to 6.3.3. Nope. rMagick from source! Nope. “But yay for new software,” I said jovially. Hankins was not amused. He found some google fu that started to point us in the right direction. Eventually we found out what it was.

Libraries compiled against other libraries that conflicted with each other and refused to play nice. For those of you who are looking for the fix, here it is. You need to create and hack /etc/libmap.conf to say this:

# /etc/libmap.conf
#
# candidate     mapping
#
libpthread.so.1         libpthread.so.1 # everything uses 'libpthread'
libpthread.so           libpthread.so

libc_r.so.5             libpthread.so.1 # everything that uses libc_r
libc_r.so               libpthread.so   # now uses libpthread too!

And then the rmagick make and make install commands ran perfectly fine. And everyone was happy.

The young intern sat by himself in one corner of the coffee shop. he had learned about medicine, but more importantly, he had learned something about life.

Here’s some stuff I’ve found or re-read in the last few weeks that I just want to put out there.

Understanding the Rails Initialization Process: Part I | Rick’s write up lets you see how things load up, which can help identify where some of those hiccups occur in your Rails app.

Understanding Ruby Symbols | Moving into Ruby from PHP is a bit of a jump, and took me some getting used to Ruby’s symbols and how they are used in the grand scheme of things. Kevin Clark’s article on this is great.

Using the Sphinx Search Engine in Ruby on Rails | Sphinx is a full-text search engine that integrates with SQL databases. And it appears to be the bomb.

MySQL Proxy | Jan Kneschke put out this new tool that allows you to make requests via a proxy (and therefore alter or inject the query or fix bugs on the fly). Eventually he will be building in load balancing to the proxy.

Chad Fowler’s Talk on Quick & Clean | Chad’s talk from the UK on Quick & Clean, or “well-factored Rails” code.