We both grew up in a little-known city on the East coast of Florida called Vero Beach. The main reasons Vero exists are tourism, retirees, and citrus. Our beaches are beautiful, but most tourists come because they’re less crowded - which is why you’ve still never heard of it. Retirees give a boost to the local economy, but don’t make it an exciting place to grow up - unless you enjoy golf & shuffleboard. The real reason I’m proud to be from Vero Beach is because we have the best citrus in the world. That’s right California, you’ve got nuthin’ on our juicy fruits. While you’ve probably never heard of Vero Beach Citrus, you may have seen Indian River Fruit before. Vero is in the heart of Indian River County, and Indian River County is to Citrus what Napa Valley is to wine.

So yes, Amy and I have deep rooted & geographically influenced opinions about OJ and we both strongly agree that the best orange juice on the planet comes from one place: Hale Groves. Hale Groves’ orange juice is like heaven in a cup. It’s so good that they drive traffic to their retail store with signs that say “Free Orange Juice”. They have fountains inside that are constantly flowing with ice-cold, fresh-squeezed OJ. Beware though, for if you partake, you will leave with a gallon of the stuff and will never look at OJ the same again. The only problem with Hale Groves OJ is that their 1 store (they had several when we were growing up) is the only place you can buy it.

Living in South Carolina, it’s hard to find a comparable substitute for Hale Groves’ orange juice. We used to buy Indian River Select’s 100% Valencia Orange Juice which is available at several grocery stores. It’s no Hale OJ, but the taste was as close as we could find….until this week. Publix, a Florida-based grocery chain, recently started carrying Natalie’s Orchid Island Orange Juice so we decided to give it a try. Wow! The orange juice snobs were impressed! On a scale of 1-to-10, I’d give it a 9½. After reading through their “our juice” page, it’s easy to see why. They’re all about the pulp:

Oddly enough, a good indication that your juice is Fresh Squeezed is to observe some separation. Technically speaking, Fresh Squeezed juice separates because of the interaction between enzymes in the fruit and the pectin in the juice. When the juice is pasteurized or concentrated, the heat neutralizes enzymes, thus preventing separation. By allowing the enzymes to stay in their natural state, Fresh Squeezed juice tastes great and gives it the “FRESH” taste customers love.

Tropicana and other national brands try hard to make good, fresh juices but they rely on some pretty intense pasteurization processes to extend shelf life. As a spoiled Vero Beach native, the “Pure Premium” OJ simply doesn’t cut it. Until the next time we make it home and get our Hale Groves fix, we’ll probably be buying Natalie’s.

March 6^th, 2008

I was coming down the stairs with a basket of laundry at night on March 5^th. I tripped near the bottom and landed on the tile floor. Hand looked pretty funky, so off to the emergency room we went. Whee. The next day, they put me in a cast. Amy never approved of this color.

March 7^th, 2008

The very next day I flew out to Austin for SXSW, barely making it to the convention center in time for my book reading. I’m sure I sounded a bit nervous/unrehearsed because I hadn’t even looked at my slides for the 3 days prior to my presentation. (Thanks to Veeses for taking this photo.)

March 13^th, 2008

I went in for a followup Xray the day after getting back to Columbia and the Doc said my bones had shifted and that I had 2 options: I could have surgery, or he could rebrake it and put another cast on it. Epic Fail. I opted for the rebraking, and the rest of that day was a pain-pill haze. Ugh. The next day I was feeling well enough to go back to work and started learning how to code with one hand and a pointer finger. Amy was much happier about this cast color. So much for Cyberwoven Orange.

March 29^th, 2008

On March 29^th I served as a groomsman in Brian & Colleen’s wedding. I couldn’t drive go-karts at the bachelor party, and Amy had to un-stitch the arm of my tux jacket, but it was great to see old friends and former college roommates.

April 21^st, 2008

I had an 8am appointment this morning to get my cast sawn off and this is what my hand looks like right now. Gross. I have very little movement in my little finger and ring finger, but it feels great to have that thing off my arm. The xrays looked good, but it’ll take 3-6 weeks of physical therapy to get my hand back to full-functionality. In the mean time, I look forward to taking showers without a plastic bag, sleeping without a sledgehammer, and getting to exercise again.

The moral to this story is NEVER BREAK YOUR HAND.

The image above is the third in a series of collages from a childhood sketchbook.

A few weeks ago, Ames and I drove down to Orlando to see one of my best friends from college get married. While I was in town, I managed to find time one morning to head over to the UCF campus to check out my old stomping ground. A lot has changed in 5 years. The stadium is AWESOME, roads have been completely moved, and construction is still going on everywhere. The Visual Arts building however, where I spent the better part of 4 years, is eerily the same. I checked the schedule in the department office and saw that my favorite graphic design professor, Chuck Abraham, was in the middle of a full-day Digital Illustration class, so I decided to rudely pop in and sit down. I’m glad I did. He was talking to the class about the illustration work of Burne Hogarth, which was fascinating and new to me. After the lesson, he left the students to work on an Illustration assignment and took some time to show me around and talk about what’s going on in the art department.

One of the stops in our impromptu tour was the UCF Art Gallery. Seeing the type and calibre of work that was displayed in the MFA Thesis Exhibition really made me miss being in such a focused, creative environment. If you ask Amy what I want to do when I grow up, one of the many occupations that she’ll list - some more ridiculous than others - is a college professor. My experience at UCF had a lot to do with that, and being back on campus made me seriously think about getting my masters. It probably won’t be while Amy is still in school, and I have a lot of other competing life goals, but getting to teach people about something I love to do is just as fun as doing it in my opinion. In the mean time, I’ll just keep doing what I love and loving what I do and I’m sure everything else will fall into place.

I’ve been there, done that, and built out enough standards-based designs to diagnose (and/or avoid) just about any rendering anomaly. As useful as that skill is though, I still occasionally find bugs that leave me completely bewildered. Last week for instance, I had the same mind-melting problem pop up on two different sites. While the individual cases were very different, the common denominator was that they were absolutely-positioned links that weren’t clickable or hoverable in any version of IE. I didn’t write the code in question on either of these sites, but there was nothing wrong with it. Here’s a quick example:

HTML

<a class="clickme" href="#">Why can't you click me? :(</a>

CSS a72c5a68e8154da099cd70b2c61f3374

If I were doing something like the above example, I would typically put a background image in the link because, well, that’s what text-replacement is all about. This particular link was placed over an image with a clickable area and therefore needed to be transparent. No problem in Firefox, Safari, or Opera…but when I checked the site in IE, the link wasn’t working.

In troubleshooting the issue, I put a border around the link and there it was in the right position with the right dimensions. Next, I added a background to the hover state and attempted to hover the link area with the mouse. Nothing happened, so I added a background-color to the non-hover state and it worked fine. I took the background-color off and it was broken again. Of course, the block needed to be transparent so at this point i was getting irritated. That’s when an idea came to me that I’m sure I’ll catch a lot of flack for: that’s right, I used a spacer gif.

I can think of several ways to avoid doing the link this way, but given the constraints of it having to be a transparent, absolutely positioned link, this seems like a good solution. Please check out the demo in IE and let me know if I’m crazy (you probably already knew that) and what you might do differently.

Update 4/2/08: Ok folks, show’s over, move along. WHAT? You really want the 90s April Fools version back? Just go back to the homepage and select “1998” from the dropdown on your right.

I couldn’t exactly encourage you all to get experimental last week without doing something a little off the wall myself. If you saw me speak at SXSW or at the Webmaster Jam Session, you’ve probably seen this version of my personal site straight from Geocities in 1998:

Inspired by Cameron Moll’s classic suggestion to steal from my own work, I’ve extracted the late nineties flare from the above design and injected it into my current site. Rather than starting with a clean slate on this site, I thought I’d update (or revert in this case) the CSS alone. Yes that’s right folks, the glorious design you see before you was possible simply by swapping the stylesheet. I was tempted to bring in the good ole’ blink and marquee tags, but that would have violated my self-imposed rule of not touching the existing HTML. I hope you’ll find that the site is still quite functional. You can even swap the stylesheet back to the original default by returning to the homepage and selecting “Contemporary Home” from the dropdown in the sidebar.

For those of you who are suddenly inspired to redesign your own sites - Really now, who isn’t? - I’d like to encourage you to check out my book: “The Principles of Beautiful Web Design”. I’m sure my tips about layout, color, texture, type and imagery will be just the help you need to tweak your own website design into something of this level.

I believe my work here is done. I’m gonna go rummage through the attic now to see if I can find my Garbage Pail Kids stickers, Soap shoes, Hypercolor shirt, pogs, and slap-bracelets. Peace!

In the words of Levar Burton, “Don’t take my word for it!”

For the last few years, it seems the web-design community has been in a bit of a rut. I’ve seen a lot of unique design flicker through the CSS galleries, but we (myself included) have been relying too much on cozy conventions. We know the principles of beautiful design, but we’re too stuck on standard site structures, browser limitations, and popular opinions to really put those principles to test. It seems the times they are a changing though as Bryan isn’t the only high-profile blogger pushing the envelope:

• In January, Dan Cedarholm realigned with a gridlastic (grid-based, but scalable) version of his current site design.
• Then, in February Jeff Croft unveiled a redesign consisting of brown, pink, and yellow. While that isn’t a color combination I recommended in my book, he pulled it off and it looks great.
• Finally, Nathan Smith created a whole new CSS Framework in response to a personal “design itch”, and has announced that he’s using that new framework in his latest redesign.

That’s by no means a cumulative list; I’m just saying that exciting, industry-changing experimentation is coming back into style. I’ve personally had the redesign bug crawling around on my back for over a year now, but the desire to do something “different” has been keeping my mind churning and my hand from moving. Recent redesigns like Bryan’s are definitely fuel for the fire, and I’d love to see this glimmer of change flame up into a revitalization of the personal website. I think it’s time for us all to take a a step back and realize that, “We are the music makers, and we are the dreamers of the dreams!”

The Design Process

Hand-Scribbled Calcite Pro

One-Color Vector Design

T-Shirt Preview & Official Entry

The image above is the second in a series of collages from a childhood sketchbook.

Over the years, I’ve met, been inspired by, and become friends with many of my fellow web weavers. Getting to meet a lot of those people in person at my first SXSW last year and then again at The Webmaster Jam Session last Summer has been an awesome experience. Despite what anybody says about the size/growth of the SXSWi conference, being there really shows you what an intimate, tight-knit, and amicable group the web design/dev community really is. I can’t wait to see some familiar faces and meet tons of new ones. Here’s a list of fellow bloggers I hope to run into in Austin and their Pre-SXSW commentaries:

• Douglas Bowman
• Jared Christensen
• Dan Cederholm
• Jeff Croft
• Rob Weychert
• Lea Alcantara
• Dave Shea
• Paul Boag
• Jeffrey Zeldman
• Richard Rutter
• Matthew Pennell
• Cindy Li
• Andy Budd
• “Rands”
• Anton Peck

Of course, there are many other people attending that I’d like to see again or finally meet in person; those are just the ones I could find blog posts from.

Here’s my tentative schedule for the panels and parties I plan to attend. For many of the time slots, I’m double or even triple booked. This just means I either: a. Haven’t made up my mind which panel/event to attend or b. Plan to try to check out more than one in the same time slot. If you’re going to be there too, whoever you are, I’d love to get a chance to say hello. Just drop a comment here or swing by my book reading. I’ll be giving a presentation featuring a practical example of how to apply the information from my book and then hanging around the book store to sign copies - if anyone wants their book signed. (Sorry for the “-” disclaimer…it still just feels so weird/humbling to say I’ll be signing copies of my book.) Fell and broke two bones in my left hand last night, so it looks like I won’t be signing anything unless you want some right-handed chicken scratch. :( Also, I have a special treat for the first 74 people who can tell me “…some trivial bit of info that can’t be found online…” There was 75 special treats, but I ATED ONE. You won’t know if you don’t go…

Update: got a cast to match my business cards.

This probably requires a little explanation. While I was cleaning the office last weekend, I came across a sketchbook that I used when I was a kid. I’m guessing the first few drawings are from 7th or 8th grade and the last few marked pages are from my senior year in high school. For me, browsing through the pages of this book is like reading an old journal. In it are loads of experiments in pencil drawing, charcoal, watercolor, stippling, colored pencil, and even some aerosol airbrush. Artistically, the contents are mediocre at best, but it was astonishing to see how engaged I once was in learning how to make art.

As I was flipping through that tattered old Mead Sketch Diary, I came across several pages containing collages of cut and pasted typographical compositions. They’re all fairly simple and rough, but that was intentional. At the time I was in my sophomore year of high school and had a very specific source of inspiration: a local zine called Delusions of Grandeur. Each photocopied issue was filled with music reviews, poetry, drawing, and witty collages of random typographical nonsense. I’m not really sure who was behind it, but it rocked.

So that’s it, really. I was inspired by something I thought was cool and wanted to do it my own way. I think that’s a lesson we could all use to re-learn every now and then. I’ve scanned the pages from this section of the old sketchbook and I’ll try to post a new snippit every week or two. I thought this particular composition was interesting as the phrase “User Friendly” has become a lot more commonplace since the mid-nineties.

• Sam Brown announced that Sidepath is now FREE!
• Andy Budd began a not-to-be-missed series on Design Artefacts
• Rob Goodlatte and Dan Romero released their creative Twitter app: Strawpoll

Of course, there was a lot of other great posts, podcasts and articles this week, but in trying to keep away from the M$ bashing and ensuing flame-wars, I found a few good laughs in the recent Photo Basement post: 41 Hilarious Science Fair Experiments. As I scrolled, laughed, pointed, scrolled and laughed again, I couldn’t help but think how similarly nerdy and awkward I was myself at that age and remembered a particular science fair project I did back in my junior high days.

The title of my experiment was What are the odds of extracting a blue M&M from a “Fun Size” bag of M&Ms? I originally wanted to do a project about BBS games, but this was a much hotter topic in 1995 as the blue M&M had just been introduced. Somehow, my piddly, bean counting project won the 1st place prize in the math category; this could be because there were only 3 math experiments that year. It was also very well received by my classmates; mostly because I let them eat the candies they helped me count. And of course it was ground-breaking statistical research! While I never published a paper on my findings, I remember that there were way more brown M&Ms than any other color, and I managed to find this flattering image in an old box of photos.

A few interesting things to note in the photo above.

• It took longer to staple all those empty bags to my board than it did to plug my numbers into Excel.
• I designed that masthead for the “School Zone” section of our local newspaper as part of a design competition the previous year.
• Yes, that’s a genuine Ironman Triathalon watch on my arm there.
• See the check on the ribbon? I apparently won some money for getting 1st place. I’m not sure, but I probably used that extra moola to buy a hackey sack or some sweet Airwalks.
• Über. Nerd.

So, there. I’ve shared with you a little glimpse into my childhood. Does anybody else have any embarrassing childhood pictures to post?

Ames and I have really been enjoying the exercise and competition, but it’s also been fun to design a shirt together each semester to go with our goofy co-ed team names. Last year, our team was Not in the face, we’re models and this is the design we came up with:

This year, our team name is Oldies but Goodies. Our friend Ashley came up with the idea of an old guy in a walker, and this is what I drew in Illustrator. The free font, Team Spirit helped to finish the design:

We actually had so many girls from the ChemE department come out this year that my wife and her close friend Eyma decided decided to branch off and start a girls only team. I suggested the name War Kittens, Eyma suggested the lolcats picture and we all agreed that the Chinese Take Away font added a lot to the design.

Pretty intimidating if you ask me…as much as we love lolcats though, the true inspiration behind that team name was this most-excellent Capital One commercial.

In case you’re wondering, the Oldies but Goodies were victorious over a bunch of law students last night, winning 9-8 in overtime. The War Kittens are getting together tonight to iron on their t-shirt transfers and have their first game tomorrow evening. Should be a fun season.

A common solution to this problem is to use javascript to show and hide “hints”. This is one of those tasks that has a dozen different (perfectly acceptable) methods, and everyone tends to stand behind their choice as boldly as they do their favorite presidential candidate. I’ve tried a few of these methods, but because I tend to do it a bit differently, I thought I’d share.

Most of the solutions out there either insert a value into the textbox or they move around a label. Inserting a value into a textbox is the most obvious/common solution and has its pros and cons, but the deal breaker is the fact that a value inserted into a password box will still display as dots/asterisks. As far as I know, you can’t dynamically change the type of an input from password to text, so that solution is out. Moving around a label tag is something I first read about on the ALA article: Making Compact Forms More Accessible. It’s an ingenious idea really, but:

1. I usually only need to make compact login forms, so it doesn’t have to be portable across other types of forms.
2. The area for the form typically won’t accommodate leaving the labels in place for users without javascript.
3. Occasionally I like to use a different font for the login box hints to make it jive with a home page design.

With those things in mind, I decided to try using a background image for on the textbox instead of the label. Also, I tend to incorporate jQuery into most projects lately, so it made sense for me to write it in that - although it could just as easily be rewritten as straight Javascript if necessary.

Check out the working demo.

After listening to part of the show, Ames jokingly said “You sound so serious.” Despite my austere demeanor, I had a great time geeking up the air waves with my thoughts on layout, color, texture, typography, and imagery. The entire interview was really just a quick rundown of the key points in each chapter of the book, but it gave me an opportunity to bring up some resources and trends that have developed since the book came out.

Toward the end of the interview, Paul said
The Principles of Beautiful Web Design is:

…a perfect book for a lot people that listen to this show if you are starting out in any form of design and don’t come from a design background.

I’m always happy to hear positive feedback like that about the book, especially from people like Paul who do so much to keep the masses up to date on the latest resources and trends in the industry.

Be sure to check out the show.

2007 Highlights

In no particular order…

• Principles of Beautiful Web Design
  Whenever I wasn’t working during the last 2/3 of 2006, I was writing and editing. Meeting the deadlines I agreed to was quite a task while working full time, but all the effort seemed worthwhile when I had the finished product in my hands.
• Snow
  Being from Florida, Amy and I haven’t seen much snow in our lives. Prior to 2007 we had only seen non-manufactured snow once. It was much more exciting to see it at our home, which provided for some hilarious home video funnery.
• Together for 7, Married for 4
  Ames and I have been friends for a very long time, but we “officially” started dating on July 16th, 2000. I remember that day and the one prior to it pretty vividly, but that’s a story for another time. We got married 3 years later on July 19th, 2003. On July 19th, 2007 I posted a poem I wrote for her that I wrote the year we started dating.
• Cyberwoven
  I started working at Cyberwoven in February of 2007. While I enjoyed my previous telecommuting position, it’s been great to be back in an office atmosphere again. Practical jokes, trips to Starbucks, and lunch breaks just aren’t the same in a home office.
• SXSWi 07
  I’ve long known that the SXSW Interactive Festival is an essential event for many web workers. I had been hoping to attend for several years prior, but I finally made it happen in 2007. The experience was life-changing. I met many of my long-time web design heroes, made tons of new friends, and promoted my book. I am definitely looking forward to making the trek back to Austin again in March.
• Cooper Rive Bridge Run
  Before 2007, the longest distance I had ever run was about 4 miles. In the beginning of the year I started training for the Cooper River Bridge Run 10K (6.2 miles). I finished at a respectable 1 hour and 3 minutes.
• Guest Lecture
  One of the many awesome people I met at SXSW was Aaron Walter. Aaron is an instructor at the Art Institute of Atlanta and the author of the upcoming book: Building Findable Websites. Aaron recently invited me down to Atlanta to speak to his User-Centered Interface Design students about some of the concepts in my book.
• Webmaster Jam Session
  I’ve always been interested in the idea of one day teaching graphic design, but I never really thought about the possibility of speaking at confereces. Regardless, I was excited about being offered a chance to present a panel at last year’s Webmaster Jam Session in September. While I was obviously nervous on stage, I had a great time and would love to speak again in the future.
• Kitchen Remodel
  When Amy and I first moved to SC in 2005, we were looking for a “fixer-upper” of a house. We really couldn’t afford something fancy and new, but most importantly, we wanted a place we could put our own stamp on. We’ve been making cosmetic improvements since we moved into our house, but in June we started on a major kitchen remodel. While there’s still some detail work to do, we’re happy that we were able to transform this into this.
• DIYalogue
  I guess one thing really led to another in 2007. While Ames and I were busy working on our kitchen, I started thinking about the lack of DIY home improvement communities online. I had been interested in the Ning platform for a long time, and it seemed like the perfect tool for setting up a social network for do-it-yourselfers. The result was DIYalogue.

2008 Goals

• Amy Time - Spend more time hanging out with Ames and less time doing demolishing kitchens with her. :) Lately we’ve been avoiding home improvement projects by playing Super Mario Galaxy together on the Wii in the evenings.
• Travel to Italy - We’ve been saving up credit card points since we got married and we finally have enough for 2 tickets to Europe. We haven’t made any specific plans yet, but we’re thinking some time in June.
• 10K in < 1 Hour - Ames and I are already making plans to attend the Cooper River Bridge Run again in April. I’ve seriously slacked off on the long distance running since last year’s 10k, but I’d like to beat my time by at least 3 minutes to get under one hour.
• Workout at least 3 days per week. - Along the same lines as the 10K, I’d like to be/stay in better shape. I sit in front of a computer 8 hours a day, so I really need to make some commitment to staying active.
• Enjoy our Improvements - I think having friends over at least once a month reasonable goal. It’ll be tempting to overhaul the master bath and the yard, but I think both of these can wait a year while we enjoy what we’ve done so far.
• Remodel Jasongraphix - Much of the site you see before you was coded way back in 2004. I did redesign it back in October 2005, but I did so solely with CSS. You can actually still see my original 2004 style if you go back to the homepage and choose 1900s from the dropdown. While that was an amazing feat at the time, the whole site is due for an overhaul from the ground up.
• Blog Posts - The frequency of my blog posting has been on the decline pretty much since I started blogging. Seriously. In 2004 I made 90 posts. In 2005, that dropped down to 80. In 2006 I only posted 44 times. Last year I dropped down to 30. I think getting in 50 posts for this year is a reasonable goal. This would be post number 1.
• Public Speaking - I probably should have submitted a panel idea for SXSW this year. I even talked to a few people last year about presenting with them, but the deadline came and went. I’ll be going as a spectator rather than a speaker, but I’d really like to arrange at least one speaking gig for 2008. I don’t think I could spare enough vacation time for more than one given the goal of traveling to Italy, but I’d love to speak again.
• Become a Happy Webby - To quote one of Jeff Croft’s recent tweets: “I’m not even gonna front: having my own HappyWebby is one of my primary goals in life.”

They’re going to start shipping the these babies on Dec. 17th and there is apparently only 50 left, so get’em while you can, folks. …and for those who’ve asked: no, I didn’t individually sign each one. Sorry to disappoint. :)