Fri 12 March 2010
Rotoscope Cannonball Productions Meticulous Boboroshi & Kynz

masthead image

boboroshi.com - fitter. happier. more 70s wallpaper.

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?”

The new InfoEther website design

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.

A shot of the Richmond Sunlight site

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

A screen shot of Twistori by Amy Hoy and Thomas Fuchs

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.

Sara Bareilles at Parish in Austin, Texas during SXSW 2008

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 site

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

Gary Vaynerchuk is one of our clients and a brilliant promoter and people person. While down here at SXSW this weekend, he got fed up with the crap lines outside the overcrowded official parties and sent out a ping:

"Huge free wine event at mariott lobby …. Sorry 16 bit"

...and the masses showed up mighty quick As the article says, it wasn’t on the event listings, it wasn’t an official party, and it got shut down by the hotel for being too loud. And it was one of the most enjoyable parties of the week.

Now that, my friends, is how rockstars do it.

My business partner Amy just put up a new article at Vitamin that discusses product pages and how to make them not suck so much. It’s a great and quite in-depth read along with some nifty flow charts and screen capture skadoodle action. It’s a great overview on why user experience can make or break a web site and specifically a product page.

When Honor by August goes out on the road, it’s generally on the Eastern Seaboard between Boston and Atlanta along the various stretches of I-85, I-95, I-40, I-64 and so on that exist east of the Appalachian Mountains. We, like most bands, have a conversion van. We don’t even have a trailer. All the gear [fig. 1], clothes, and four guys pile into “Murdoch”, our lovable Ford E-150 Conversion Van, and head out on the road.

In the last 16 months of being on the road with the band, one thing has become abundantly clear: we are internet addicts.

It’s not just surfing DListed or Perez Hilton or checking on the Weather. We like being connected. I will put in four plus billable hours from the van per day I’m out on the road. Sometimes, on the long hauls, I can get a full day of work done just from the van. One of the best features of the MacBook Pro plus Verizon EV-DO card setup that we utilize is a nifty feature called “Internet Sharing”. This allows us to take the connection on one laptop from the EV-DO card and create a closed wi-fi network using one of the laptops as a base station.

It’s quite simple to setup. Plug the card in, open the system preferences and go to “Sharing” and set it up like this:

Screen shot from Apple System Preferences Sharing tab

And with that simple setup, three of four band members are online. If it were four out of four band members, there would be serious concern about the proper operation of a moving vehicle, so we shall stay firmly fixed at the 75% mark. This connectivity allows not only the guys to stay in touch with friends, but to also work last minute show promotion, route around traffic accidents (yay Google Maps drag-to-alter-this-route feature), and get some work done as well. I’ve many a time made a poster and emailed it off to our booking agent, or updated tour dates on the website, etc.

Now, this isn’t perfect, as there are some drop out areas. All the major cities are usually Broadband speeds. I-26 in South Carolina is a wireless deadzone. West Virginia into Ohio drops down to dial-up speeds for most of the trip. However, most of I-76 through Pennsylvania is actually quite speedy on the download rate.

At the end of the day, it’s about maximizing the effectiveness of everyone in the band. If you can get three people to put in a few hours of promotion a day, that equates to a lot of exposure for the band, and hopefully a better show draw because of it.

The city of Newport News has released the software that runs their website free of charge to any organization or individual. The series of Plone-based products is not the only thing they are releasing. Andy Stein, the IT director for the city, is also releasing the knowledge base, their best practices, documentation, standards, retrospectives/lessons learned, experiences on converting to a CMS, training materials, hardware and software configurations and setup, and various other things. These are released under the GPL.

“We intend to provide a low barrier to entry,” said Stein. “It should be simple and inexpensive to assess the level of fit with an organization’s needs. The same efficiency should apply through the entire product life-cycle: test period, deployment on intranet and/or Internet, maintenance, support and enhancements. ( from govtech.com )

Newport News isn’t a large city in the sense of Boston or Chicago, but it’s a decent mid-level American city with a diverse voter base and has a lot of the problems facing many post-industrial American cities. Newport News Shipbuilding is one of the main shipyards for the US Navy and has a downtown that’s a bit run down. I see this system as being a boon for many cities that are the size of Newport News or smaller that don’t have the funds to get this level of a site online. This also encourages more interaction in government, something that is sorely lacking in the one-way communication of the television era.

The code is available on the city website.