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!

The kind people at NovaRUG have invited me to deliver my RailsConf talk on June 29th at NearInfinity in Reston, Virginia. I’ll be updating and greatly expanding the coverage of the talk, since we have a lot more time. I’ll get a decent presenter example worked up for you all as well.

If there are any things you’d like to see in the talk that I didn’t cover before or tools you think I should cover, feel free to email me or leave a comment here.

My RailsConf talk Curing DIV-itis with Semantic HTML, CSS and Presenters went off great, with a standing room only attendance and some great questions. I apologize for not having a decent presenter example in the slide deck. I was concerned about hitting my time limit with the slide count (but ended up coming in around 30 minutes instead).

You can get the slides from either the link above or here (9.7MB PDF)

Many of you know I helped run Nancies.org (which is no more) for 10 years and when I saw this video I was cracking up. Maybe it’s because I already had another band’s back catalog (that band being U2), ensuring that I didn’t suffer this same fate.

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)

Having grown up with pica sheets and crop slides with wax pencils, I come from a world of print design effectively dead with the advent of QuarkXPress, Pagemaker and InDesign. I still remember learning the rule types in high school yearbook design sessions and in some cases, I’ve recently implemented what’s known as a Harvard Rule line in a design.

What is a Harvard Rule? The old yearbook publisher I worked with defines it nicely:

A standard rule line is any printed line that is less than two picas wide. These rule lines can also add variety to your page. Common rule line weights are one, two, three, six, nine and twelve points. Rule lines are intended to unite design elements, not separate them. A Harvard rule line is two parallel lines, with one line wider than the other. Standard widths are one, three, six, nine and 12 points. When used as a border, the thin line is usually inside.

First off let’s get these terms right. A pica is 12 points. There are 72 points in a printed inch. (Sorry Windows users, someone back in the day thought 96px to an inch was better than 72. Apple is 72px/inch.) There are, therefore, 6 picas in an inch.

I didn’t want to use an image to do this, and wanted to accomplish it with html and css. Luckily, there’s an HTML element called “HR” that is a horizontal rule. These, in their basic implementation, are plain and simple ugly:

but some CSS can make it pretty:

That’s not nice to use. So with some HTML and CSS hackery, we can get something that looks a lot nicer. In your HTML, you first want to call the rule:

  <hr size="0" noshade />

Since it’s XHTML we’re using here, this is a self-closing element. The CSS for this isn’t too complex. We need to define the base colors to hide the original element. We then need to apply borders to finish the magic. You can alter the margins to space it out from other elements.

  hr {
    /* Faking a Harvard Rule */
    color: #fff;
    background-color: #fff;
    height: 2px; /* this is teh white space between the lines */
    border: 0; /* this removes left and right borders */
    border-top: 4px solid #aaa;
    border-bottom: 1px solid #aaa;
    }
  

With that in place, we can give these unique styles and flip the lines as needed.

You can also accomplish a double rule this way:

These are all being used in the forthcoming MacRuby redesign.

Enjoy!

About week ago Facebook changed its Terms of Use. Their Corporate Counsel, Suzie White, announced this on the company blog and explained what they had done and why in their minds the changes were necessary. This massive sweep up was to consolidate various documents into one central document and to “simplif[y] and clarif[y]” the terms and information contained therein.

They didn’t have to provide notice, but they did, and for that, I applaud them. You don’t have to agree to the terms, and they are non-negotiable. Use implies acceptance, and says so in the first paragraph of the Terms. If you don’t like that, you can go elsewhere.

We reserve the right, at our sole discretion, to change or delete portions of these Terms [of Use] at any time without further notice. Your continued use of the Facebook Service after any such changes constitutes your acceptance of the new Terms.

The new Terms document has some serious issues with the way it handles content that users upload. “Content is king,” as the old dot-com era adage states, and without content, Facebook wouldn’t really be all that. Why do we return to Facebook? Why do people spend inordinate amounts of time locked into the site?

Content.

We return to read about what our friends and family are doing. We check out their pictures from vacation. We comment back and forth over the most inane status messages. We used to engaged in Scrabulous tourneys, but of course, that was a copyright infringement. I’m sure something has replaced that in the past months.

So content brings eyeballs, and Facebook sells advertising to those eyeballs. That is how and where Facebook’s income stream resides. Advertising. Without content, that advertising stream would dry up. We post content and Facebook places advertising around it. We find that to be okay because the service is free and actually works pretty great. That seems to be a fair trade. I’ll look at the ads on occasion and might even click on one.

The Rub

So what happens with the content you post? Facebook, according to their new Terms, for all intents and purposes, owns it.

You hereby grant Facebook an irrevocable, perpetual, non-exclusive, transferable, fully paid, worldwide license (with the right to sublicense) to (a) use, copy, publish, stream, store, retain, publicly perform or display, transmit, scan, reformat, modify, edit, frame, translate, excerpt, adapt, create derivative works and distribute (through multiple tiers), any User Content you (i) Post on or in connection with the Facebook Service or the promotion thereof subject only to your privacy settings or (ii) enable a user to Post, including by offering a Share Link on your website and (b) to use your name, likeness and image for any purpose, including commercial or advertising, each of (a) and (b) on or in connection with the Facebook Service or the promotion thereof. You represent and warrant that you have all rights and permissions to grant the foregoing licenses.

This is the problem with contracts. Legalese and contracts are written in order to protect the interests of the individual (be it a person or a corporation, which is seen as an individual under the law) from legal issues. Contracts are supposed to stop people from going to court. Usually, these contracts are negotiated between two parties. When one term dictates the terms and you must accept (e.g. a software license, terms of use, etc.) you have what is, in effect, a contract of adhesion.

adhesion contract n.(contract of adhesion) a contract (often a signed form) so imbalanced in favor of one party over the other that there is a strong implication it was not freely bargained. Example: a rich landlord dealing with a poor tenant who has no choice and must accept all terms of a lease, no matter how restrictive or burdensome, since the tenant cannot afford to move. An adhesion contract can give the little guy the opportunity to claim in court that the contract with the big shot is invalid. This doctrine should be used and applied more often, but the same big guy-little guy inequity may apply in the ability to afford a trial or find and pay a resourceful lawyer.

The Consumerist and the Cnet have both taken the company to task [ 1 | 2 ] over this and it got the CEO to come out in an attempt to put out the fires. Mark Zuckerberg posted on the corporate blog saying that Facebook would never do anything of the sort and they just wanted to make sure they could deliver things appropriately to other users. The problem is that what Mark says here is not legally binding. The parol evidence rule clearly states that no matter what a party to a contract states verbally, the written contract is the determining factor. The Terms of Use, constituting the contract between you, the user, and Facebook, are the only things that matters. Let’s look at some examples:

The Musician

Effectively, as a musician, if I post an mp3 on Facebook of Juniper Lane’s new song “Don’t You Give Up”, and it becomes a big hit, Facebook can make money off that and I can’t say squat about it. Although, if it were a big hit, I’m sure my record label would take Mr. Zuckerberg, et al to the bar in short order and have more paperwork filed in the first 24 hours than most people see in their lifetime.

The Photographer

Let’s use a more common example. You’re a decent photographer. You take a picture. Facebook likes it. They use it commercially. You’d get paid right? Nope. That nifty little phrase “including commercial or advertising” covers them in that. You’re simply out of luck. All for uploading a picture via Facebook to show your friend.

The Reality

Most of us aren’t a record label, or Facebook, or have deep pockets for legal fees. We’re people. In modern courts, it comes down to paperwork. A friend of mine, working as a paralegal in downtown DC, described it as “it’s not who’s right, but he whole files the most paperwork that wins.” With things such as “boxcar discovery”, where a side will deliver, in effect, a warehouse of paperwork to go through, it’s almost impossible to take on a company like Facebook. WHile this can go in both directions, Facebook could simply bury a Plaintiff in an excess of paper, unending in the reply to simple requests for production.

So my challenge to you, Mr. Zuckerberg, et al: Say what you mean, exactly, in your terms of service. Strike overreaching phrases such as “including commercial or advertising” and remember that those people you have as your users provide every penny of your current valuation. Start driving them away, and you may have larger problems than content lawsuits on your hands.

UPDATE Facebook has decided to revert to their old Terms for the time being and established a public working group entitled the Facebook Bill of Rights and Responsibilities group. THis already has over 30,000 members but sadly already has drivel in the discussions of “Can someone give me one logical reason to believe in God?”

For those of you who don’t know, I started working at InfoEther last fall as their UI/UX/Design guy. One of the floating projects I had been tasked with was the redesign of the InfoEther company site. In light of getting me back into Ruby on Rails, they also decided that I should be the one to code it.

The site is done and up and will probably expand as we have time and new things happen. Now it’s off to work on wireframes for our new product.

You can see the site at infoether.com.

I designed a mockup for Waldo earlier in 2008 and today it launches on Richmond Sunlight. Erik Kastner did the HTML/CSS sexiness for it.

For those of you not familiar with the Sunlight projects, they are sites dedicated to increased transparency in the legislative process. This particular site focuses on the Virginia General Assembly. For more information you can read about the Sunlight Foundataion.

Check it out live: Richmond Sunlight

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.

Way overdue, but I finally have posted my SXSW photos to flickr.

Amy and I gave our panel on the first day of SXSW interactive and it was a blast. It was nice to have it out of the way so we could chill and enjoy the rest of the week. Despite a one day sickness that I warded off (and developed into South By Scurvy upon my return to DC) I was out and about at the conference center and Sixth Street Environs.

Here’s the breakdown of Photos:

SXSW Interactive

SXSW Music

Hotel Café Tour @ Parish

Sara Bareilles @ Parish

Honor by August (my band) at the 7th & Trinity Guitar Hero Stage (photos by our manager Trish on my camera)

and finally, but not least of all, Paramore at La Zona Rosa

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.

I sent Jim Bacon an email last night asking about why the Virginia Railway Express had not utilized the westbound rail corridor heading out towards Charlottesville (and through a lot of the boom area in Fairfax and Loudoun counties) as a new line. For those of you who follow the Virginia transportation mess, and care about sustainable development, you really should check out Jim’s blog Bacon’s Rebellion Blog and his bi-weekly e-zine of Bacon’s Rebellion.

Needless to say I was pleasantly surprised to receive an email from Jim saying that he had checked out Rotoscope (myspace) (via the link in my email signature) and liked it enough to put up a post on the Bacon’s Rebellion Blog. Looking at the comments, Waldo might have felt that he had stepped into the twilight zone when he opened up his RSS feed this morning.

I think I might need to gather my thoughts and write an article about the VRE…