In 2000, TCS America, a US subsidiary of India based Tata Consulting Services was contracted by the State of New Mexico to build an unemployment insurance benefits website - to offset bottlenecking in the Department of Labor’s phone system and office locations. The site needed to provide useful resources, answer questions and allow users to apply for benefits. Their current site (originally contracted for $3.6 M, and due by 2002) left us wondering what had gone wrong.

“Let’s just build it!”

No one can remember who exactly to blame, er… credit for that statement, but it wasn’t long before we’d defined a challenge for ourselves. We had a couple organizational meetings, assembled a great team, and on Sunday Jan 28, 2007 a group of 10 designers and developers came together in an office for 12 hours to see what we could come up with. The goal? Concept, design, code and perhaps even launch a website that exceeds the requirements and capabilities of the current site.

Good stuff takes time.

There’s a process and a workflow involved in web development. It was challenging, and at points comical, working through our improvised “simultaneous development strategy”. We knew before we ever started this wouldn’t end up a shining example of what’s possible working together, with modern technologies and practices. That’s simply not going to happen in one 12 hour day. This exercise was about the journey.

Why’d we do it?

Our motivation was not to win a contract (Method Arts is not interested in that piece of work). And it certainly wasn’t to make anyone at the State look foolish. We wanted to illustrate some of the opportunities that had perhaps been overlooked on this project, such as user experience, valid CSS/HTML, web standards, accessibility, technologies and frameworks like AJAX and Ruby on Rails. Also, we wanted to highlight some of the capabilities of our collaborative working model, and that companies need not go to Bangalore to find great talent.

So what did we accomplish, and what did we learn?

Well… (taking a deep breath) we: developed user personas, outlined ”deconstructed wire-frames”, created a site map, developed visual wire-frames, designed page templates, wrote working CSS/HTML markup, wrote part of a custom CMS using Ruby on Rails, created a secure login, user registration, and an AJAXy questionnaire (for weekly filing) that dynamically determines the next question, and simultaneously logs everything into a database (that we designed).

A few highlights - Developer Andrew Hedges got a crash course in Ruby on Rails from Programmer Daniel Lyons. And CSS guru Brian Warren got to try out and implement sIFR 3, although we didn’t use it in our finished templates (in the interest of keeping things simple and lightweight). That’s all going to come in handy on future projects!

Some design changes.

In the end it was a marvelous day. Experts working together solving problems, feeding off each others’ energy, learning… We’ll discuss as a group where to go from here. Perhaps we’ll finish the site and launch it as a demo. Or perhaps we’ll find another opportunity for a similar exercise, where we can afford more time, and maybe even create a website for a charitable cause.

Regardless, it seems we all got what we needed out of the day, and are looking forward to the next Method Arts Sprint. Hear the team wrap up HERE!

UPDATE!

Some Linkage:
An immidiate reaction in Daniel’s Post
An account from Reid Givens’ Post
A great reaction in the comments over at The Duke City Fix
A long week relived in Andrew’s Post
Another P.O.V. over on Brian’s Post

Dev Team...

Vincent Thome - Project Coordinator
Mark Bixby - Creative Director
Brian Warren - Web Developer (CSS/HTML, PHP, Javascript)
Andrew Hedges - Programmer, Manager (JavaScript, AJAX, JSON, PHP, MySQL)
Daniel Lyons - Lead Programmer (Ruby on Rails)
Lance Sanchez - Programmer (Ruby on Rails)
Kelly Patrick Robinson - Web Developer (CSS/HTML, PHP)
Reid Givens - Designer/Developer, Audio Engineer
Joshua Sallach - Film Director, Video Production
Christopher Anderton - Video Production

Special Thanks.

We want to thank Mudhouse Creative for offering up their offices on a Sunday. Thanks also to Chama River Brewing Company for hosting our rather noisy after-sprint party. 

I presented on CSS and Typography. My background is in print, and one of my passions as a print designer is typography. I love seeing well-set type printed on a page, I love that at the end of every Harry Potter book they mention it was printed in Garamond. Moving to web was a struggle for me in the type arena. Discovering CSS was wonderful, but immediately the limitations of the web presented themselves and frustrated me.

Once I discovered Flash I was giddy. Just the idea of being able to embed fonts in a site got me rushing off to tell my friends about it. Naturally, as many web designers did, I discovered some of the limitations of publishing websites with flash and I ran back to CSS and tried my best to make websites with the limited web-safe fonts, and felt a little bit of my typographic soul die.

Not all is lost though; in my presentation at Barcamp I talked about two techniques you can use to incorporate some custom typography, at least in headlines, on your website.

Image Replacement

The first is image replacement. I’ve heard a few people refer to this idea as “dead” or at least “a bad idea”. However, I submit that, if used judiciously, image replacement can do feats no other technique can manage.

Let’s start with how how to use it. Here’s a perfectly obvious headline:

<h1>Method Arts Fall Badminton Spectacular</h1>

Instead of using text, we want to use something fabulously designed, so in the CSS, you give the text a negative indent, and then put in a background image behind the h1 element.

h1 {
margin:0;
text-indent:-32697px;
background: url(graphics/head.jpg) no-repeat 0 0 ;
width:508px;
height:173px;
}

Poof! The image is there, but the HTML remains having text in an h1 tag. (Why the odd number for text-indent? That’s Opera’s maximum value that it will understand for text-indent. Thanks to Steven in the comments for alerting me to the problem.)

I’m not dead yet

Why is this better than just using an image tag? I agree it does seem like using image replacement is a lot of work. There are a few reasons that this is worth it.  For one, what Google sees when it comes to the site is some text in an H1 tag, rather than an alt tag. Google may or may not interpret that alt tag to be an important headline. Next, when you print that page, instead of printing a graphic that wastes ink and is blurry anyway because it’s at screen resolution, you print text. This requires a bit of extra work in that you need to use print style sheets, but it’s work you should be doing anyway.

Image replacement isn’t a silver bullet. The main limitation is that it only works for static headlines and areas. To jump that hurdle designers need to employ something more sophisticated.

sIFR

sIFR is a pretty clever little tool that uses flash and javascript to dynamically replace any text in the page with the font of your choice. I know, it sounds too good to be true, but it works. sIFR also accomplishes the daring feat of being both completely valid and accessible. Going through code examples here will be too tricky, so I’m going to link to my code from the presentation. You can also read up on sifr here.

sIFR, too, has its drawbacks. It’s trickier to implement, it’s more work and it uses javascript. Still, the payoff is that you get to use your custom fonts in dynamic headlines. That’s hard to beat.

Soup Up Your Toolbox

All in all these are great tools to have in your toolbox when making websites. We use both of them right here on the Method Arts website. One of the most fun uses of them is on the party invite that we did. Sure, it looks just like a bunch of images, but it’s actually replaced text. It seemed like a silly geeky thing to do, but it actually worked. Google indexed the page, and people were finding the invite based on search terms in the replaced text.

Neither tool is a silver bullet, but these days it doesn’t seem like one exists. Nonetheless these are essential tools to have in your toolbox for getting great typography on the web.

Downloads

Podcast of my presentation (with interview) (thanks to Reid Givens from ALR Marketing for podcasting the entire event).
PDF Presentation
Code Examples

Flashback to March of this year, when Mark put out the call to give away some free java in exchange for hanging out and chatting about blogging, design, etc. It was a great success. That’s how I met Mark and that’s where we first started talking about doing some work together.

Back to the IM chat from August. It took us all of five minutes to decide maybe we should put out the call again to hang out with some folks and give away more than just coffee…

Brian Warren: alriiiiight. bought my ticket.
Mark Bixby: super cool
Brian Warren: i’m committed now. heh
Mark Bixby: hehe
Mark Bixby: you should be
10:25 AM
Mark Bixby: hmmm…
Mark Bixby: may have to put a call out to the nerds.
Mark Bixby: not free coffee this time
Mark Bixby: something else
Mark Bixby: afterall, I AM traveling with “9ruler and celebrity blogger Brian Warren”.
Brian Warren: That’s a good idea.
Mark Bixby: hmmm....
Brian Warren: Yeah - a Method Arts open house or something
Mark Bixby: ooooooooooooooh!!!!!!!
Brian Warren: we’ll be at such and such bar offering free pints for business cards
Brian Warren: ooooh it could be a launch party for the site!
Mark Bixby: hmmm… mebbe we could print some t-shirts
Mark Bixby: my thinking wheels are thinking…
10:30 AM
Brian Warren: i’m liking the direction this is going
Mark Bixby: “2/3 of Method Arts wants to buy YOU a beer!”

And that’s how you plan a party in five minutes.