Archive for ‘technology’ category

DingBit

I’m pleased to announce a new product shipping today over at the IconShoppe. Chameleon16 is a new pixel font for Mac and Windows, hand-crafted using only the finest pixels available. It’s based on the Chameleon Original icons that we’ve been hocking over here to support our growing latte addiction.
Chameleon16 sampleInitially, I’d thought to just convert the GIF images to a bitmap font so that the customer could change the color and add effects at will. The minimalist nature of the icons begs of it, and having the 16×16 icons in font format would sure be handy. But while I was at it, why not create new _alphanumeric_ characters to go along with it, and create a real font in the same style?
As the name suggests, Chameleon16 is designed to be used at 16px. And like its pixel font predecessors, it also works at multiples of that base (32px, 48px, 64px, etc.) for retro, extra blocky goodness.
Chameleon sampleSince each character is a 16×16 tile, it admittedly has limited use for setting large chunks of text. You’re not going to use this font to display client invoices or proposals. But interesting things can happen when you start playing with kerning and line height, and I’m excited to see some interesting applications where it could be used creatively.
The TrueType font includes standard alphanumeric characters as well as the entire Chameleon Original icon set as alternate characters and costs just $39 bucks. As a special promotion, the first three orders also get a free copy of Bulletproof Web Design, Second Edition that hit store shelves last month First three orders received!.
h4. Special technical geek notes
The process of creating the font was a learning experience, and I would compare it (at times) to removing stubborn wallpaper. I first created the characters in Photoshop, then used a program called BitFonter to turn those into a bitmap font, assigning each character, adjusting metrics, etc.
Over the course of the last six months or so I began chipping away it, navigating the spotty documentation, and teaching myself the wonders of font metrics, character encoding and more. In the end, I needed to create additional outlines of the bitmap characters and export these into TypeTool which could then generate a proper TrueType file (after having problems letting BitFonter do this). If I knew what I was doing this wouldn’t have taken long.
I avoided using something like Fontographer (also by FontLab) because I was creating a bitmap font and BitFonter’s pixel editor seemed a natural choice — and for creating and editing _pixel_ fonts, it’s great (or at least slightly more intuitive). It’s the output and documentation that was confusing, and my respect for _real_ type designers has grown tenfold after this little project.
So, my advice for those looking to create their own pixel fonts: learn Fontographer, or remember that you’ll need TypeTool in order to generate a TrueType file from BitFonter’s outlines.

Cork’d Finds a New Home

When “Dan Benjamin”:http://hivelogic.com and I launched “Cork’d”:http://corkd.com a year ago, our primary goal was achieved immediately: building something we _personally_ wanted to use to discover and share wine. Twelve months later, it turns out other people wanted to use it as well, and we’ve had a blast listening to the community, improving the site and watching it grow (to over 20,000 users today).
One thing became clear throughout the evolution though: that the site always deserved far more attention than it received from its founders. We were building Cork’d on nights and weekends, and keeping up with new site features, member requests, etc. often took a backseat to other client work and dayjobs. Cork’d needed a new home — but not just any.
h4. A New Home
After talks with companies large and small, we realized we didn’t want Cork’d to become just an advertising bucket for a media company that would most likely let it fizzle out. It was important to us to find a home that would _get_ what the site does and how it uniquely fit in the wine world. We’re happy to announce today that *Cork’d has been acquired by a newly formed company* with “Gary Vaynerchuk”:http://www.corkd.com/people/garyvaynerchuk of “Wine Library TV”:http://tv.winelibrary.com/ at the helm.
“Gary”:http://twitter.com/garyvee has been changing the wine world as host of WLTV has built a rabid following of wine fans (“Vayniacs”, they’re called — myself included) with his energetic take on making wine _fun_ — this is precisely the same mantra we had building Cork’d. But Gary also really _knows_ wine — something Dan B. nor I can really claim. The recycling guy in my neighborhood knows how much I love wine (and regularly) — but that doesn’t mean I _know_ wine. You know? To get an idea of the show, be sure to check out “this video summary”:http://tv.winelibrary.com/2006/11/09/the-wine-videos-that-sum-up-wine-library-tv-instant-classic/.
Gary really _gets_ community. And with his mix of knowledge, energy, fresh take on wine, and his embracing of technology and the web, we’ve found a _perfect_ fit. And that’s really what’s most important for the site — that Cork’d continue to grow under an organization that gets wine, gets the web, gets what Cork’d was trying to do, etc.
We’re excited that Gary along with “Rails”:http://rubyonrails.org/ whiz “Erik Kastner”:http://metaatem.net/ will be able to take the site to the next level (something it’s always deserved), integrating Cork’d and live tasting, having a real wine authority behind it. Cork’d will not only continue on — but it’ll get even better. For the last month or so, we’d been helping transition the site over, and out of that came some cool new features:
* A switch to the more widely used 100-point rating system.
* “Cork Board” on every profile page to start discussion between members.
* Easy import of wines for CellarTracker members.
* New identity and layout for Wine Library TV, to further tie the two destinations together.
Gary and team have more things in the works like support for “OpenID”:http://openid.net/, mobile and more. Dan B. and I will remain on as advisors, but we leave the site in very capable and enthusaistic hands. Cheers to WLTV and the future of Cork’d!
h4. A Learning Experience
The last year has been a tremendous learning experience on so many levels. Sure it’s just a little wine site that Dan B. and I created in our spare time — but the process of building, maintaining, and transitioning was filled with lessons and “ah, so that’s how this all works” moments.
Working with Dan B. taught me volumes about how Rails can be a fantastic environment for designers to create in. I’ve talked about it before — but the concept of using “Subversion”:http://subversion.tigris.org/ (SVN) and “chipping” away at the interface _in real time_ made it a bit like sculpting the application. I’m hooked.
I credit Dan B.’s talent as a developer for being able to easily handle the real brunt of the work here — having spent most of my time handing over XHTML and CSS templates to clients and then walking away, seeing and _learning_ how everything falls into place by watching Dan work his magic was invaluable. And fun.
Read more about “the Cork’d acquisition over at Hivelogic”:http://hivelogic.com/narrative/articles/corkd-acquired.
h4. What’s Next?
It’s been a busy Spring, with the Cork’d transition, large client projects, and a book revision in the works. But I’m looking forward to the Summer to brainstorm on the future. An office move, expansion and a new SimpleBits-branded product are all probable — we’ll just see how all the juggling goes.

SXSW 2007

John Allsopp said in Vancouver last month, “you bring people together and stuff happens”. He was referring to Web Directions North at the time, but you could certainly apply that to any good conference. And it’s true, there’s no substitute for meeting with like-minded people in physical space. Stuff happens that wouldn’t happen otherwise on either end of bits and bytes.

SXSW 2007 came to a close earlier this week, and the reasons for returning have been confirmed yet again: going to SXSW is about people. The panels and presentations are a bonus — but it’s primary asset (for me) is about connecting and reconnecting with people. People who share a common thread about the work we do and the stuff that matters in relation to that work.

SXSW was big this year. I missed the previous year, and so it seemed _really_ big compared to 2004 and 2005. An overwhelming schedule, not enough time to see everyone, etc. Surely they’ll reach a point of maximum capacity — but it doesn’t appear there’s a cap on attendees. This year, I put far less pressure on myself to stick in panels all day. Instead, I chose a few I couldn’t miss, then didn’t mind skipping a few because lunch (and interesting conversation) ran later than expected.

In terms of the overall vibe of the conference, I think Jeremy Keith nails it here

… technology is being relegated to its correct role: a tool for allowing people to connect and share their stories. Whether it’s Ruby on Rails, Ajax, tagging or the World Wide Web itself, I got the feeling that what really matters now is personal communication — storytelling by any other name.”

It didn’t occur to me until after reading Jeremy’s post — but there was a _real_ quality to the things people were excited about, talking about, working on, etc. That was motivating and inspiring.

I’d be on any panel with Brian Oberkirch. The guy just makes it easy. It was fun talking about something other than CSS, and our _power session_ panel ran more like an interview about working remotely, outside the Bay Area and what that means in creating for the web. I wish we had time for questions though, as several people came up to the stage after the session ended and we all had some really interesting discussion that would’ve been great for the whole room. Ah well. I’m half-hoping they ditch the 25 minute sessions next year.

I was also honored and flattered to introduce Andy Clarke and Jason Santa Maria: Bullet Tooth Web Design: Plan Your Web Site like Pulling off a Robbery. The room was _packed_ (and rightfully so to see those dudes) and the gag was a funny one. The best part was the continuation of the metaphor throughout all of the Q&A, with the audience framing their questions as if the entire thing was rehearsed.

All in all, good fun. I’m getting more and more out of the smaller, more focused conferences these days, but in getting the most bang for your buck, you can’t beat Austin in March.

Do the Collapse

“Pretty soon you’ll be using your iPhone”, said the attorney in the elevator just five minutes ago. He’d glanced at me checking things on my (now terribly outdated) Blackberry Pearl. Everyone’s talking about the iPhone. No, _everyone_ is talking about it. Just goes to show how big an announcement it really was.

There are so many thoughts about this thing, but rather than add to the noise, here’s one I hadn’t yet seen mentioned: with a _reliable_ browser on the iPhone (Safari) and all that it brings in terms of standards support, JS, DOM, etc., will we start looking closer at resolution dependent layouts (Clagnut: Variable fixed width layout) (or other methods) for sites that _would or could_ function as well as their larger screen counterparts?

We’re essentially talking about a fully-browsable web and everything that comes along with that in Safari. Just on a smaller screen. I realize that already exists to a certain extent with Webkit on the Nokia, Opera, and probably others, but the typical screen dimensions on a mobile phone are tiny. Seeing Steve Jobs turn the device and browse “widescreen” was eye-opening. That extra horizontal space could really increase the readability of non-mobile-specific sites as is.

The vulcan-death-pinch-squeezy thing for zooming looks great, mind you. Fluid layout for screens this small isn’t optimal, while multiple columns could just get too narrow (in the absence of min-width) — but I could see where leveraging the browser to adjust layout based on screen resolution could make things interesting in certain situations. And it’ll of course be fun to find out what this all means.

Free vintage SimpleBits sticker to the first person who names (without Googling) the band for which the title of this post is named after.

Reasons I Like Twitter

  • I am a sporadic IM’r. At times, I find it incredibly distracting. Twitter is like the lazy-person’s IM. Post if you want to, listen if you want to. Or not.
  • The character limit. For SMS of course — but limitations can often nurture creativity.
  • Learning things about your pals that you otherwise would never hear. As mundane as they might be.
  • Half conversations: “@dude55: you are so totally right on, and I believe what you just said was the most poignant, important, compelling sentence that has ever been posted to the internets.” I sure wish I had a friend named dude55.
  • It’s lucky enough to have an “e”.
  • It’s simple, focused and immediate.
  • Because blogging requires too much time and thought.
  • Yes damnit, I do want to know when you go to bed, or when you’re eating a burrito.

Pearly

Earlier this month I asked for advice regarding phones that can send and receieve email. Only two people in the comments mentioned the BlackBerry Pearl, but that’s what I ended up purchasing and have had it now for about 24 hours. What follows is a mini review of the device, this coming from someone who is new to the BlackBerry, new to the mobile web, and new to sending and receiving email using tiny keys. The short version: loving it so far.

BlackBerry PearlThere’s several reasons I ended going with the Pearl, rather than the other great suggestions (like the Palm Treo, or Nokia e62, for example).

  • I realized I needed to stay with T-Mobile as a provider. I have a pretty great, grandfather’d plan that was too good to give up going somewhere else. Isn’t a shame that devices and providers are so locked together?
  • T-Mobile’s unlimited web and email BlackBerry plans are cheaper than their normal internet plans. You don’t get access to HotSpots, but I figure as long as there’s carrier service, that won’t be difficult to miss.
  • The Pearl is _tiny_ for a phone that packs a decent screen and 1.3 MP camera. I knew if it was bulky, I wouldn’t enjoy using it as often. It had to fit in a pocket.
  • I’m left-handed, so the normal-sized BlackBerry’s would’ve probably been awkward to navigate with the scroll wheel on the right side. The Pearl’s trackball works great, and it’s in the middle for either thumb.
  • My mobile phone is my business phone, so the call quality has to be good. It’s been fine so far — in fact audio coming in has been clearer and louder than previous phones I’ve owned. I’m not sure how I sound on the other end. I’ll have to call myself (wow, what should I say?!).

It took me a bit to get used to how Push email works. I have my main IMAP account set up and assumed I’d see everything in my inbox. Instead, it’ll push emails to the BlackBerry, where they’ll be until you delete them. You have the option of the delete also removing them from your mail account. But there’s a cool feature that lets you “Delete Prior” messages from your inbox. It’ll make them disappear from your BlackBerry but not your main IMAP account. Handy if you want a clean slate, and want to only see new incoming messages when you’re away from your desk.

As far as the keyboard on the Pearl goes, well that’s the tradeoff for the tiny, candybar form factor. It has what BlackBerry calls a “SureType” keyboard setup. There’s two letters per key, but they’re set up in a QWERTY formation. It really works quite a bit better than I thought it would. If you ignore what’s happening on screen while you type, it’ll get the right word nearly every time based on the letter combinations. I’m impressed. It’s not like typing on a normal keyboard, of course. But short replies will be no problem — something I’d never attempt on a normal phone keypad.

Finally having a decent web-enabled phone to really play with has been eye-opening. Seeing what sites have a @media=”handheld”@ stylesheet, or which sites sniff and serve a mobile-friendly version of their site automatically. From my limited time playing with it, it’s clear that there’s so many different methods for handling mobile content. One thing’s for sure, lean, unstyled markup sure is helpful, even when there’s not specifically a mobile version of the same site. We really need Cameron’s book.

So all in all, I’m quite pleased with the Pearl. It’ll take some getting used to, but it’s certainly a helpful improvement. And will hopefully help me work less, stay away longer, etc.

During my tenure at a failed dot com in early 2000, in between margarita parties, all the VPs where saying “the mobile web is going to change the world!”. This was 6 years ago. Everyone believed them of course, and dumped millions into mobile products that weren’t ready for primetime. But now (and I’m admitedly late to the game) it really feels like there’s momentum here — real stuff happening, “affordable” access, etc. Interesting times.

Mobile Email?

So I’ve been thinking of getting a mobile device suitable for sending and retrieving electronic mail. Here’s how I imagine it’ll help me work less: simply knowing that I don’t have an important email sitting in my inbox while I’m away. I don’t plan on reading email everywhere I am, but rather just having the ability to put out any fires, or attend to urgent stuff from time to time might allow me to stay away longer. Maybe there’d be some peace of mind knowing I don’t have to hurry back to my inbox — then again, maybe it’d drive me nuts.

So I wonder what your experience is with mobile email. I’m looking into something that:

  • Can connect to IMAP
  • Is a decent phone as well
  • Has a QWERTY keyboard (tiny tiny of course)
  • Isn’t gigantic

Blackberry? Treo? Sidekick? Nothing? Let us know, o’ untethered ones.

One Hundred

Maybe it was the antique car show we drove by this past weekend, but something got me thinking: what would I be working on _100 years ago_? In other words, today I design web sites and other related web things for a living. In 1906, I doubt I’d be doing the same (and if I was I’d be insane).

One hundred years ago, radio was in it’s infancy, so there’s an obvious parallel there: a new, exciting technology that increases communication. But really what we’re doing is _creating_ stuff, and I’m not sure I’d be building radios or telegraph equipment. I’m not smart enough for that.

Typesetting? That could be closer than radio, but typesetting was far from being something _new_ in 1906. So maybe it’d be something less obvious, like a “Wheelwright” or a “Confectioner” or even a “Newsagent” — actual professional titles for the early 20th century. And don’t they sound cool?

Regardless, it’s interesting to look back and draw similarities, especially if you do the same looking _forward_. Will anyone be designing web sites in another 100 years? Will I be doing this in 10 or 20? Who knows.

Pairing Wine and Microformats

While working on Cork’d, I realized this was a perfectly fine excuse to implement some microformats. What goes great with a nice 2003 Pinot Noir? Meaningful markup, naturally.

We’re currently using three microformats on Cork’d:

  • hCard (for member profiles)
  • hReview (for wine reviews or “tasting notes”)
  • rel-tag (for indicating tag links)

Our implementations aren’t perfect, but it’s a start. The rest of this article will talk about how we implemented hReview for member-entered tasting notes (example) and specifically how I used CSS to style the markup.


(more…)

Cork’d Update #2

I’m going to try not to post general Cork’d news here, instead saving it for the Cork’d Blog, but we’ve just rolled out some new features that are too big and exciting not to talk about. I’m looking forward to sharing more design-specific stuff here at SimpleBits, but I’m not looking to bore those that aren’t interested in wine (and/or wine web sites).

We’re (Still) Listening

Member feedback has been enormously valuable since we popped Cork’d (now just 2 weeks ago). We’ve been listening to what you guys want to see implemented, evaluating what makes sense, and acting on it. So far, every new feature we’ve added has been a direct response to member feedback. Dan B. has been working feverishly on turning “it would be really cool if…” into reality. And that’s been really fun. A true wine community has been born.

There’s a real difference between being a hired hand on a project for a specific amount of time and someone who has ownership as well as passion for what they’re working on (ownership and passion can be exclusive as well, but combined, they pack quite a punch). The short-term, part-time attention of a freelance designer or developer can often lead to clunky, duct-taped solutions after the contract is over and the site is actually being used by real people. Cork’d has been the complete opposite situation, where we’ve been able to launch a product that would be considered “done” under most circumstances and then react to member feedback using the same attention to detail that went into the initial construction.

Now, on to the brand-new features that we’ve just rolled out to help make Cork’d even better.

Browsing and Advanced Search

Many members requested an easier way to browse wine on Cork’d. Now you can find wine by category, varietal, region, winery, year, price and more. If you want to look under the hood to see all the great wines being added and reviewed on Cork’d, here’s the place to start.

Speaking of finding wine, there’s now a brand new advanced search that allows searching a term in addition to refining by any of the categories mentioned above, and sorting the results as well.

Buddy Messaging

messages tabAnother frequent request was the ability for members to communicate with each other. Now they can with the new buddy messaging, built right into the site. Send messages to your buddies or other Cork’d members. Tell them you love them. Tell them often.

Bottle Quantities

Own more than one bottle of the same wine? Then you’ll probably want to denote and keep track of that in your Wine Cellar (a list of wines that you own). Now you can add and edit quantities for wines both in your Wine Cellar and Shopping List (a list of wines you want to buy). Managing your wine collection just got a whole lot easier.

Etc.

As with our first update, there was also more than a handful of other tweaks and improvements, like showing more information in wine lists, suggesting related wines on wine review pages and more.

A sustained “thank you” to all the members for continued feedback and suggestions. You’re helping us make Cork’d better and we think that’s pretty cool (plus, we like making Cork’d better). Stay tuned here for more nuts-and-bolts thoughts on the design of the site, and be sure to subscribe to the Cork’d Blog RSS feed for future updates and other cool news.