• Personal Guidance - These types of emails usually require the most time, but are often the most rewarding to answer. Examples include students asking what types of courses they should take and amateur webmonkeys asking what skills they need to “make it” in the industry. I was once an amateur webmonkey, so I try to answer these when I can, even if that means they sit in my inbox for a week or two.
• Technical - Or, “how do I make this do that” emails. I try not to answer technical questions directly. I’ve learned most of what I know about website design through experience. Instead, I try to point people to places where they can learn the answers themselves. That leads to the last category.
• Additional Resources - The majority of questions I get are from people who simply want to know what they should learn next. I have a lot of respect for self-learners, so I do my best to suggest books and resources that I think will help. Here is an actual example of this type of email that I received today:

Hey Jason -

I just finished reading your book and I have to say kudos for a job well done. This was probably one of the most useful web design books that I have ever read.

However, now that I’ve finished your book I am ready to jump right into making my (somewhat) great new comp that I’ve made in Photoshop into a web page. Yeah, that’s where I get stuck. I’ve read a couple of the ‘dummy’ books for CSS, PHP, etc, but those don’t seem to help me take my design from the comp I’ve made in Photoshop and turn it into a functioning website. So there’s my question: can you recommend any books / sites / resources for doing just that? I understand the mechanics of CSS, for example, but I don’t know how to use it to replicate that beautiful design that is currently stuck in Photoshop onto the web.

Thanks in advance for any help you can offer. And again, great job!

John Doe

As I read this question there were several books that immediately came to mind: A few of the Sitepoint books, Designing with Web Standards, Bulletproof Web Design, Transcending CSS & Web Standards Creativity. I love all of these books, and the skills “John” needs are explained well in each of them, but the process of converting a Photoshop comp to working HTML/CSS isn’t something I learned solely from a book, but rather through years of reading online resources, viewing source code and tinkering. I remembered seeing a link a few months back to a series of screencasts that supposedly did a good job of explaining this process, so I started hunting. What I found was Chris Coyier’s CSS-Tricks.

Chris is currently up to 24 video screencasts covering a wide range of basic-to-intermediate web design and development skills. I haven’t watched all of the videos yet, but from what I’ve seen, Chris has a knack for breaking down the tasks he’s explaining into easily digestible instructions. I’ll definitely be adding CSS-Tricks.com to my list of recommended resources.

First and foremost, Refresh is a social group. No matter what you do for a living, it’s good to know people who do the same line of work. That type of interaction not only keeps people motivated, but it helps those people stay current with trends and best-practices. We plan to meet once a month to do just that.

Our hope is that Refresh will also become an educational hub. Walter Gropius founded the Bauhaus in Germany “to create a new guild of craftsmen”. I believe we have an opportunity to do the same thing here in the South Carolina Midlands. Because the Web is a constantly evolving organism, there is often a gap between what is taught in universities and the skill-set required to excel in this field. By gathering local professionals to give presentations and share their expertise, we can all grow more knowledgeable and fill that educational gap.

Are you with me? Head over to the new Refresh Columbia website and let us know. We’re currently trying to gauge the initial interest and decide when and where to meet each month. For those of you who aren’t in South Carolina, I encourage you to check the Refreshing Cities website to see if there’s a refresh group where you live. If not, maybe you can get one started.

You can click on the links below to see a 1024x768 version.

Current Color - Blech…

Scheme 1

Scheme 2

Scheme 3

Scheme 4

Help us out! Just let us know in the comments which color scheme you like the best and why. Thanks!

I’d like to see night-mode as an option for online mapping. I know that customized embedded maps are possible by overlaying tiles as described in the APIs of Google/Mapquest/Yahoo and the recent ALA Article. I actually like the fact that this is a little complicated to implement because the average user shouldn’t have the power to tweak standard base map colors - think MySpace profiles <shudder />. However, if you own a vehicle GPS, it probably has a day and a night mode. In night-mode, the color of the map tiles are inverted to decrease the brightness of the screen for nighttime driving. Why is this a necessary feature for online maps?

1. To embed on websites with dark backgrounds. - Embeddable interactive maps are a huge asset to website developers and Google has made these very easy to implement. If you embed these maps on a sites with dark backgrounds though, you’ll create quite a visual magnet due to the sharp contrast of the light colored maps. While an inverted map may not mesh exactly with a website’s color scheme, the reduced contrast would make an embedded map much easier on the eyes.
2. For nighttime users of the mobile web. - While I don’t have an iphone yet, I would love to have one simply for access to Google Maps. Imagine if Google Maps on the iPhone (or even the entire interface) could automatically switch into night-mode at dusk like a vehicle navigation system.

Seems obvious and increasingly necessary to me. To demo what this might look like, I’ve set up a simple HTML mockup - with a dark background of course. What do you think?

1. Typos
   My most common blunder (by far) in writing CSS is misspelling selectors and properties. I went on a rant about my tendency to spell position as positon back in 2005 and that one still gets me occasionally. Most of the time syntax highlighting saves the day, but there’s no help for misspelled selectors like #haeder, .waring, and .altarnate.
2. Missing Units
   When using negative text-indent for text replacement, the set dimensions are the only thing holding open the block. If you leave off a unit (height:335;) that block will completely disappear. As you might have guessed, this has never happened to me.
3. Z-idiot
   Z-index is a practical and powerful tool when designing with CSS. The number one rule to remember when working with z-index is that the position property has to be set to relative (not realtive…), fixed or absolute. I’ve been known to arbitrarily insert z-index all over my CSS…and then I realize the element I’m trying to stack doesn’t have a position declared.
4. Background Position
   Is it bottom 100px or 100px bottom? That question used to always trip me up. Then I’d get confused when it was broken in Firefox. The W3Schools’ documentation of the background-position property is fairly straightforward when it comes to similar units. When using % or position values, you declare the horizontal (x) position and then the vertical (y). When you use keywords however, the examples suggest to declare the vertical keyword (top, center, bottom) first. So, what if you want to mix keywords and values? In that case you follow the %/position convention and give the horizontal value first. To answer my own question, it should always be 100px bottom. For more info and examples, see my Background Position Compendium post.
5. Bang Important
   Cascading order and inheritance in CSS is a beautiful thing…until you start working on a large family of sites that inherits rules from multiple external stylesheets. I personally see the !important rule (.error {color:red !important;}) as a hack and therefore try to avoid using it. Occasionally though, it’s a handy tool and a necessary evil. Just remember what properties of which elements you’ve set to important or you’re bound to pull your hair out later when you want to override them. If you need a quick refresher course, David Hellsing has a great article on Cascading Order and Inheritance.

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?