photo credit: Török Gábor (nyuhuhuu)

I only listen to one podcast regularly*—the 37signals semi-monthly offering, which provides insights into the thoughts and processes at the seminal web shop.

The last three episodes from the 37signals podcast have been a design roundtable discussion with Jamie Dihiansan, Jason Fried, and Ryan Singer. In actuality, this three-part series has been some of the dryest of all the episodes I’ve listened to this year.

However, there was a great nugget in today’s episode—

The idea that you could make a website and not know HTML blows my mind. It’s like building a building and not knowing what a brick is. There’s definitely different levels with how deep you go, you can be a CSS wizard or you can know basics. But you should have at least have some foundation knowledge of what your building material is.

There are several reasons that I find that this argument works quite well, but each point has a very valid counterpoint. Let’s dig in:

Efficiency.

It is shocking to see how much time is wasted in design shops and agencies due to the constant reconstruction of ideas and layouts because the initial format wasn’t feasible in the online world. Layouts done in InDesign that need to be reconfigured at 72DPI RGB. An idea that would cost $10,000,000 to implement needs to be scaled back. The list really can go on and on.

But at what point do you foresake good ideas just because it doesn’t seem quite as efficient? I’m not so sure that a little bit of extra time in production is the worst thing in the world. A really capable designer, one who understands web design wholly, but doesn’t know how to implement the CSS is still really valuable. Who cares if the original idea needed to be shaped once brought to the team meeting? Or that the producer needs to build out a file that can be sliced properly for front-end coding.

In a lot of ways, this isn’t a new issue at all. A great creative mind who could draw up a brilliant TV spot on a napkin has relied on storyboard artists for the past six decades. Or an art director can get inspired with an idea that only lived in their head, and then they’ll work with the Studio staff to make a print idea come to life in production.

Quality.

Sometimes you visit a website and it just feels right. The buttons have thoughtful rollover states. Tooltip notifications are in the right place. The site loads quickly and you can get your bearings immediately to begin navigating. This only comes from designers who have experience coding. In Fireworks or Photoshop, your mind doesn’t immediately think about clean URLs. Or what a hover state looks like versus the over state of a link. Are the gradients and background images designed from the get-go to be as lightweight and repeatable as possible? It’s the little nuances that only someone who has coded understands. When designers know code, the quality of their product improves.

But you can also tell when a design has been limited by the designer his/herself. If you know that an email layout shouldn’t have too many background images because Gmail doesn’t support the CSS for it, a coder-designer would be thinking this through too much. A designer who is blissfully ignorant to “what’s possible”, can be the one who comes up with the great layout, the art director can come up with the great idea. If a designer knows too much, they may just put up imaginary walls and box themselves in. In a creative world, that’s one of the cardinal sins.

Experimentation.

If you know whats new, what’s on the horizon—and you truly understand the “building materials”—you can begin to experiment and do cool things. How can we toy with the Twitter API and bring in data? How can we use JavaScript or Flash in a cool way to take a design to the next level? The creative person who understands the underlying technology can also begin to think about the new ideas—and not ideas that are infeasible, ideas that are new, exciting and categorically creative.

But what’s better for experimentation than someone who doesn’t really care about the techno-nerd saying, “That’s not possible!!!”? Yes, you may get more zany ideas that are mega-expensive or plainly impossible to produce, but you also get ideas that are fun, interesting and can move the needle. Ideas that can achieve the strategic objective. The idea doesn’t need to be perfect. That’s why we work in teams.

What do I think?

From my producer standpoint, I absolutely love working with designers who understand that layouts aren’t much more than an intermediary until it gets in the browser. As a developer, I like that, too. And as a designer, I feel comfortable knowing what I’m designing is do-able.

But as a producer, I like it when a wild idea comes through the pipe that I never would’ve thought of because I’d boxed myself in. The developer in me loves a new challenge, one I wouldn’t have thrown at myself in a thousand years. And as a designer, I’m humbled by the person who forgoes the latest web trend and makes something beautiful and effective.

Resoundingly, this argument underlines the value of the team in the creative process. Positive, optimistic sessions where we work together to mesh technology, creativity and strategic messaging are really what gets the job done. Hugs.

What do you think? How much or how little do you agree with the notion that a web design needs to know HTML and CSS, even at some level, in order to be able to truly deliver great creative?

*I’m not sure why I the only regular podcast I listen to is 37signals’. I do find the podcast medium extremely compelling. It’s a cheap way for super-interesting people to give micro-niches great information about virtually anything under the sun. I guess this is to say I love podcasts.

photo credit: Anamorphic Mike

I’ve been back in the States for about two weeks. It’s been great. And tiring.

Seeing friends and family has been like a non-stop amusement park. I landed in Chicago, immediately went to a wedding in Des Moines, spent the week in Minneapolis, flew to New York, came back to Minneapolis, went up north to Brainerd for the Fourth … and I’m headed up to Winnipeg on  Friday … gasp, so much moving around!

Additionally, it has been wonderful to connect face-to-face with colleagues. I’ve really enjoyed working remotely while studying in Spain, but it is nice to see a face every once in a while. In some cases, I’m meeting people for the first time whom I’ve known for almost a year. That’s kind of weird.

So far, the thing I miss the most is the timezone difference. Do not underestimate the efficiency of working on a different timezone. It was nice to get files in the Spanish evening, work through the Spanish morning and afternoon, and have designs or projects delivered in the morning American time.

I’ll look forward to regaining that advantage when I head back to Spain in September.

Campaign Monitor wrote an inspiring post titled “What you can learn from Panic’s approach to email marketing” after Panic’s recent email regarding the release of Transmit 4. I highly recommend checking it out, as the always-informative David Grenier illustrates some of the cutting-edge approaches that Panic used in the recent email.

I also recommend reading the post because I’m a customer of both Panic and Campaign Monitor. I use their products and services because they’re great, and I listen to what they say because it makes me smarter.

But reading the Campaign Monitor post made me shuffle back through my inbox–I was sure that I’d received the Transmit 4 email, but I didn’t remember any of the cool stuff David was talking about. All I remembered was that the Transmit 4 email was poorly designed and left me confused.

Let me explain why.

In brief, virtually none of the enhancement mentioned in the CM post show up in my Google Docs-powered inbox (using Mac OS X and Google Chrome 5).

Cool airmail line at the top. Fail.

Background image in the purchase button CTA. Double fail.

As CM outlines what can be done in email design/dev with forward-looking lenses, keep in mind you audience. Initially, I came away confused that Panic sent out such a janky-looking email. Now I know it was Gmail’s fault, not the awesome folks at Panic.

But it’s something to keep in mind–how can you design against the lowest common-denominator and keep a high brand image with your design and development?

To be fair, the entire point of the Campaign Monitor article centered on how Panic targeted Apple Mail’s specific CSS3-redering abilities. And due to their audience, precisely as David writes, Panic can get away with using some great features in their emails.

Just be wary if you (a) don’t know your the spread of the email clients you’re sending to, or (b) want to hit a much wider audience. A nice way to know is to use Campaign Monitor, and you’ll have a nice report to show you how specifically you can target your email clients.

Do you target to specific email clients, or aim for the lowest-common denominator approach?

It’s been two years since I started blogging. You can read my first post here.

Updating a blog regularly isn’t easy—it can feel like a chore at times. Those of you with blogs I’m sure understand. As such, I’m proud to have kept mine going for two years, and to have added at least one post each month since April 2008. Pretty neat.

When I started the blog, it was the only piece of content at buchok.com. Just a blog. Starting this blog allowed me to get my hands dirty with WordPress. And the blog has undergone a few redesigns—from public templates, to custom designs based off Thematic.

Now buchok.com is the home of my business.

Over the past two years, I’ve grown quite a bit as an interactive producer where, in addition to producing and excecuting digital ideas, I am now doing quite a bit of design and development for my clients. It’s cool to look back and see how my thinking has changed and I’ve evolved professionally.

So, on to some interesting data:

TOP 3 POSTS (by visits):

• Testing banner ad clickTags—this post remains hugely popular, although the clicktester has been moved over to Bannerflow
• Fireworks template for wireframing—a simple PNG set up to get started with wireframing in Fireworks
• Determining bicycle wheel circumference—this post links to an ultra-basic Flash calculator used to determine a bicycle’s wheel circumference based on the wheel’s ISO number

My takeaway? Each of the above posts is a solution to some sort of problem—testing clickTags, wireframing in Fireworks, or finding a bike’s wheel circumference.

Others’ blogs often provide me with solutions to some of my problems—be it design, development or strategy. I’d like to make an effort to contribute so that buchok.com can be a resource as well, for example my  recent post of the BadWords AS3 class.

MOST COMMENTED POST

• Taking a new direction—(note: DISQUS wiped out the comments on this post)—when I posted about my decision to leave the agency world and move to Spain, I had a fantastic response from friends and colleagues. Both through this blog post, personal emails and my Facebook page.

What does this mean to me? While not my most-viewed post, adding my personal voice to the blog is a great way to connect with the people around me. I feel I’ve done a nice job posting on things that interest me and broadcast my thoughts. I will continue to do so.

Here’s to another few years of keeping up the blog!

Do you blog? Add your link in the comments, I want to check it out and read some of your first posts.

photo credit: timsnell

I’ve worked on several projects in the past where I needed to filter out swear / naughty / bad words that are input by the user.

Finally, I got around to making a class so that I didn’t have to rewrite the filtering each time. If you have a need to filter out naughty words, feel free to get started with this free class.

Download the BadWords class here »

The main guts of BadWords is the array which contains some common vitriol; you’re also sure to find some hilarious new words for your personal use.

I’ve included the two most-frequent two methods that I’ve used in the past—checkForBadWords and replaceWithAsterisks.

Using checkForBadWords returns true or false if any of the substring contains a bad word. Be careful, it’s pretty strict—for example, Buchok get’s filtered because if has “ho” in it.

As such, you may be interested in simply replacing badwords with asterisks. Use replaceWithAsterisks and the naughty substring, of any length, will be replaced with three asterisks—***. This function returns a string.

The class is pretty basic at this point, so have some ***ing fun with it! And let me know if you make any updates.

Most mornings before my courses, I check through my emails with a cup of coffee. Since the time zone difference between Spain and the U.S. is pretty significant, I usually get a good idea of how the day ended back in the States, and then a few hours in class to think about what I need to do for the day.

But on slower days, I get to spend the morning reading through some of the my mailing list subscriptions. And none is more enjoyable than the MyFonts Rising Stars monthly mailer.  I don’t know—fonts are just cool.

The March newsletter had a font called Sketchetica, and immediately I knew I needed to use it. So, where better than buchok.com? I was off to the races.

Having just read an excellent article eschewing the Holy “fold”, I also wanted to try a new site with more scrolling and less navigation.

I ended up with a two-page site that I’m pretty happy with.

I also added a couple other newer twists which I didn’t use on the old site—sIFR, for rendering the Sketchetica font in Flash, and Lightbox2, for showing some samples of my work via lightboxes.

Overall, it was a fun couple days worth of work—although now I need to update my Harvest, Basecamp and Bannerflow accounts with the new color scheme … :/

Let me know what you think below.

photo credit: dreamsjung

One my favorite parts about designing and developing web projects is that the end result is something. A shiny new site layout, a functioning web app–it’s gratifying.

But it’s essential not to get haphazardly lured into a project because of this gratification.

If I dive in and fire up Coda or Fireworks, I’ll undoubtedly waste a lot of time with false starts and backtracking. For me, this is one of the underrated similarities between development and design.

It’s important to take a step back and think about the project.

Think a lot.

In the design world, this includes looking at samples that inspire me, viewing photography or illustrations, even going through the thesaurus to find tangible words to express what I’m trying to design.

In the development world, I look at past samples to get an idea of the challenge at hand and samples of similar UX to ensure I’ve fully-scoped the problem—and finally searching to see what’s available to me in terms of public libraries, etc.

Sometimes it seems like research and thinking are a waste of time. But the reality is that if I fail to do any of the above, I ended up burning way more hours on a project.

As someone who loves being fast, I continually need to remind myself to think more before doing anything.

Einstein was famously quoted saying, If he had one hour to save the world he would spend fifty-five minutes defining the problem and only five minutes finding the solution. Good advice.

This past Friday, the relaunch of the Flip Cup World Championships’ website was completed. I’ve been a participant in this event for the past several year and it is easily one of the highlights of my year. It’s a great time, for sure, but it also serves a good cause–over $125,000 have been donated to charity in the past eight years.

While I won’t be able to attend this year, I’m glad to have been able to design and develop the site relaunch. Also, big ups to Kyle Simmons for the great video on the homepage, as well as management of the Flickr and Facebook accounts. No small task.

photo credit: cln_finch

Ryan Singer, product manager and designer at 37signals, talks about the company’s design process.

Download the MP3

I found this interesting as 37signals’ process relies on everyone pitching in at a variety of levels–information architecture, user experience, design and back-end development.

At times, I’ll hear that these types of a role demand a person with “hybrid” skills. But I’m not so sure that the hybrid label works anymore; it’s important essential that everyone in the shop can contribute at a variety of levels.

It’s both intimidating and exciting. What do you think?

photo credit: rutlo

Shopping in a grocery store in a foreign country is a scary, intimidating and often mysterious experience. You don’t have your bearings.

Not because of differing store layouts. I’ve circumnavigated U.S. stores like Safeway, Harris Teeter, Ukrop’s, HyVee, Wal-Mart, Lund’s, Schnuck’s, and Rainbow like my name was friggin’ Cristobol Colon.

Shopping abroad is intimidating because you have no idea what anything is—especially packaged goods. You lack the brand compass.

Foreign products are both scary and mysterious. The pictures are different. The on-package copy isn’t the same. And, most importantly, the brands are not even close to being familiar.

Living in Spain and shopping weekly amongst unfamiliar brands, I’ve realized the importance of all that branding work.

I’m alot more confident and happy with the bag on the right. Why? They’re identical. I’ve used both, and my chicken froze exactly the same.

It’s important to realize that brands you’re familiar with provide you with an extremely important compass when purchasing.

I work in the online side of marketing, and we often talk about engagement—via email, Twitter, etc.—and how our marketing service is important in this New World of Marketing and Advertising. This post is meant to give a shout out to the brand experts.

Mass media. Carefully tailored messaging. Protecting the brand.

Thank you. You have no idea how much happier you make me.

In the grocery store, you can’t try before you buy. That differs hugely from my world where I download trials frequently. In-store, I need the brand to guide me. I need the brand to help me quickly move through the store and get what I need. And, what’s more, I want to feel confident about my purchase without thinking.

Here’s one of those extreme examples—a few years ago in London, I once asked for Band-Aids at a Boots. And when they looked at me like I was from Mars*, I was about to say the generic term for this product. Then I suddenly realized I had no idea what this type of product was called—are they adhesive bandages?

If you’ve shopped abroad, you know what I’m talking about. And my perspective doesn’t come from living in Spain—where the Atlantic now greets the setting sun and we say Hola—the lack of a brand compass is true even for Americans visiting Canada.

Yes, I’ve started buying Aquarius and Bueno bars—but I’d kill for a Gatorade and a Snickers^.

I’d love some Zest, but I’m stuck with whatever that crappy soap is in my shower. Not to mention, I sat in the grocery storey examining the new soap’s box for a minute .

Come to think of it, I’ve never even read what’s on a Zest package.

What’s your experience shopping abroad? Don’t you hate it when you don’t feel comfortable with the products you’re buying?

*For the curious, they’re called plasters in the Queen’s English.

^We certainly have Snickers and Gatorade here in Spain. They’re just much less common, especially Gatorade.