For now I’d just like to invite you to see the new TouringPlans.com.

For reference, here’s what the site looked like when they first contacted me:

Betaloft

First, I’ll let you know about the launch of one of my own projects. The re-branding and site design of an absolutely killer coworking facility in Salt Lake City called Betaloft.

If you work independently and, like me, often find yourself talking to your dog during the work day, Betaloft provides a wonderful way to keep your sanity and meet cool people. There really is nothing like the spark of creativity and inspiration that comes from face-to-face time with other humans.

I could go on for hours, but I’ll let you check out the site for more about all that.

Jessica Hische

I was first introduced to Jessica’s work when I ran across her Viney Alphabet in my feed reader. I became an instant fan.

She’s launched a new site full of hand-lettering goodness, and a store full of drool-worthy goods. A must see for type fans of all ages.

On a side note, don’t miss Jessica’s Daily Drop Cap for more beautiful lettering.

Ligature, Loop & Stem

This new site has a small, but wonderful, catalog of type related goods. They’ve just released a white version of their wildly popular Ampersand Test Print that I can’t help but love.

…and just look at that site. lovely.

Teuxdeux

A brand new web app by swissmiss that puts a slick designy spin on the todo app. I love the way it looks, and I’ll spend the next week or so giving it a try.

Mighty

Design hero of mine Jason Santa Maria resolved to work on “stuff that matters”, and he’s launched a studio to do just that. Meet Mighty.

I, and the rest of the web/design universe, will be watching closely for the stream of wonderfulness that is sure to emerge from this little studio.

Prep & Landing

Last, but not least, a beautiful bit of animation hit the airwaves this week. I was skeptical when I heard about it, but last night I watched it on Hulu while I worked. Disney’s Prep & Landing very quickly seated itself as a Christmas classic with me. It’s a creative little story with a ton of heart that will be played right alongside Christmas Vacation and A Charlie Brown Christmas.

If you haven’t seen it… get over to Hulu and check it out.

So I guess that’s about it. I wish the very best to everyone launching something new, something they care about. It’s a difficult but wonderful thing.

Now… back to work.

This will be huge.

Check out this totally cool no-flash inline audio player they’ve created. I like it.

A really great write-up by Douglas Bowman about the thought and process he’s putting in to reinvent browser button controls at Google.

Paul Boag tells it how it is. Don’t let those damn pixel pushers take control.

It’s such a simple little thing but it seems to have struck a chord with several website visitors. It feels a little strange to write a whole post about it (as it’s not in any way groundbreaking)… but enough people have inquired, that I thought it might be nice to write up the process.

The motivation

I spend my day working for a huge global company with email at the center of our communication universe. Email is a way of life in our business, it just sort of comes with the territory. This, in and of itself, is not a problem for me. The problem is that a vast majority of people in this universe have no idea how to send an effective email. I may go into more specifics on this another time… but for now let’s call this enough information to understand why I styled my contact form this way.

I really just wanted a nice way to guide the hand of anyone writing an email from the website.

… and so, this fill-in-the-blank paragraph style form was born.

Write your prose

I thought I’d write the form like I write an email. With a structure that I like.

1. Tell me what you’re going to tell me (Subject)
2. add some detail about what you’re telling me (Body)
3. tell me how to reply to you, or find out more about you
4. say thanks, and send

You, of course, could make this say anything you want. Of course I know that this can be used for other types of forms. But for this example I’ll stick to the ‘contact me’ type form.

Simplest way to start is just write an email like you’d want to get it. Whatever the data is you’re collecting, just imagine someone saying it to you out loud, and lay out the paragraph that way.

Hi Rustin,
I’d like to talk to you about [something really cool].

[This is the really cool thing I'd like to talk to you about and I was hoping you might have something cool to say back to me.]

You can contact me by email at [foo@bar.com] or visit my website at [bar.com].

Thank you,
Fake Person

[ ] denotes the bits I’d like the user to fill in

The markup

Now we need to take that paragraph, and turn it into a form.

<form action="#" method="post">
<p>Hi Rustin,</p>
<p>I'd like to talk to you about <input type="text" name="your-subject" value="" size="40" />.</p>

<p>Thank you,<br />
<input type="text" name="your-name" value="" size="40" /></p>
</form>


I just replaced the items I had in brackets with an appropriate form field.

The style

This is where we make the text fields look like blanks with a dotted underline.

First make sure the text entered in the boxes has the look you want.

input, textarea {font-family: "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif; font-size: 1em; color: #000;}


Next, lets tell the browser what the empty text boxes should look like.

input {
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px dashed #9EA6AA;
}
textarea {border: 1px dashed #9EA6AA;}


And finally we specify what should happen when the curser goes into the text box. I like to have the dashed underline turn solid.

input:focus{
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid #000;
outline: 0;
}
textarea:focus {border: 1px solid #000; outline: 0;}


Ready to roll

Really.. it’s as simple as that. I sort of wish there was some awesome magic making this happen, some secret I could let you in on. But all-in-all this is one of the simpler items that went in to creating this site.

Feel free to link over to the example and view source to see it in action.

I hope you’re able to use this technique in your projects. Feel free ask any questions you might have in the comments.

Some words of wisdom and encouragement in potentially troublesome times. As expected from Mr. Storey, well put and perfectly timed.