I presented this evening at the Dayton Adobe User Group meeting at SAA in Kettering. The topic was CSS in the Real World. I used Prezi.com to build my slides and have embedded them below for anyone to refer to.

Also, I reference a post on CSS3 Pagination (without images) in the presentation.

I’d love any feedback you have about the presentation. This is the first time I’ve spoken on CSS in this format and am always looking to refine.

• Ben Callahan | Work | Blog | Personal
• Jeff Friend | Work | Personal
• Andy Rossi | Work | Blog
• Mark Wells | Work
• Rob Harr | Work | Blog
• Mike Ward | Work | Personal
• Grant Root | Work | Personal
• Ryan Clark | Work | Blog | Personal
• Ryan Buttrey | Work | Blog

We got started off with a great conversation about how difficult it is to stay current with all the RSS we’re following. Mike and Grant both use Delicious tagging. While most of us are avid fans of Google Reader, we do get behind because of the rapidly changing industry we’re a part of. Shaun Inman has a beautiful little application called Fever that helps with this problem by tracking which articles are popular and bringing these to the top of your reader. Comment below if you have other ideas…

This month Jeff suggested that we each bring something to discuss. Here are a few of the items we discussed:

Andy Rossi did a quick review of Expression Engine, a PHP based content management system released by EllisLab. This is a platform he’s been reviewing and playing with. Things he likes: solid add-ons available, extreme customization ability, you don’t have to hack at PHP to use it.

Jeff Friend brought up a great conversation about designing in the browser. There has been a lot of talk about this lately on some pretty respected sites and even at An Event Apart. We had mixed reviews in the group about this work-flow. Most concerns centered around the difficulty in finding a web-designer who could code to the standard we all strive for. The opposite is also true, it’s not east to find coders that have a solid grasp of design principles.

Ryan Clark gave us a quick overview of Mail Chimp, a newer bulk email management system. It offers a great interface for managing your lists and emails, extreme flexibility in the structure of your lists and some great RSS integration features.

Rob Harr demo’d a super cool jQuery plug-in called AJAX Upload. It handles the selection and upload of an image with jQuery, allowing you to do this without a page refresh. Beautiful. [will add links when I can get Rob to provide them - he's surfing in Florida right now]

Grant actually brought HAND-OUTS and therefore wins the award this month for “Best Dayton Web Guys Presentation”. The article was from his blog, discussing @font-face integration with a site he manages. Some of the guys use other services to help, Font Squirrel and Typekit were two.

I demo’d a web-based design presentation tool I found called Vyoopoint. It allows you to upload images (or movies, swf’s, pdf’s) of designs for submission to your client. The client can then comment on the designs. It also handles versioning of your designs. There is a free account you can use to test the service.

As we were wrapping up, Jeff called out something called Primer CSS, which will parse your mark-up and generate a skeleton CSS file based on ID’s and Classes found in the document. Very interesting idea. We all recognized the difficulty of organizing a large CSS file and pitched around a few ideas for solving these problems. How do you handle CSS confusion as your sites grow? Leave a comment!

Thanks all for a great meeting. Look forward to the next…

It’s long been expected that, while navigating a website, clicking on the organization’s logo will take you to the homepage. Not every site does this, but most sites are adhering to this standard these days. I know in my browsing experience, I regularly click on logos assuming this behavior, so I thought it was pretty cool that Amazon now has this hover state for their logo:

Amazon Logo

Amazon Logo Hover State

How Long Has This Been Going On?

I’m really not sure when Amazon introduced this, but it was new to me. This peaked my curiosity, so I did a little digging around at some of my favorite sites to see if anyone is not honoring this expectation. In fact, I couldn’t find a major website that didn’t do something like this.

Honoring “Click My Logo”:

• Apple (nicely integrated into the site nav)
• Microsoft
• Flickr
• Yahoo
• Manic Mouse (had to throw it in)
• Dictionary.com
• Daring Fireball
• Aol. (very interesting implementation)

So, my challenge to you – can you find a major website that doesn’t do this? If you find one, share it in the comments below.

Handcrafted Coops

Perfectionism Runs in my Blood

I can remember back to a summer from my childhood, probably twenty-some years ago, when I was staying with my Grandma and “Gramps” at their farm in Pennsylvania. My Grandfather was working on building a new chicken coop and I was (not really) helping. As we neared completion, he realized that one of the 2x4s he’d cut was about a half-inch shy of it’s ideal length. Of course, we needed to make a trip to the hardware store to buy another 2×4 so that it could be done right.

For a chicken coop.

While my grandfather was like this about most of what he did in life, my perfectionism is a little different. I call it “selective perfectionism” – I’m sure you can guess what that means. There are a select few areas in my life where I am desperately passionate about doing things right. My business partners will tell you, one of these areas is coffee. Another one is website design and development. This is a great thing if you’re a potential client, but it presents a set of unique challenges to me and my team as we strive to build beautiful, perfect websites.

Recognizing the Problem

Before we get too far here, I want to make it clear that I believe there is a time (and a budget) for carefully crafting every pixel and every line of code. Unfortunately, most of us don’t have clients that can afford (or schedules that flex to accommodate) this kind of work. The problem with us perfectionists is that we know a little too much. It’s that knowledge of our craft which pushes us toward the death spiral and the same knowledge which, often times, convinces us to chose the absolute best approach whenever we’re faced with options. I believe that there is always a “best solution” out there for any given problem. As business owners/website designers/software architects, we need to develop our ability to look at the paths before us and select the one that is the best fit for a specific project.

So, how do we do this?

Everyone responds a bit differently to these kinds of situations, and each project presents it’s own unique challenges. However, there are a few simple things we can do to help prevent ourselves from falling into the spiral.

Establish (and Remember) Clear Goals

Take some real time to think about the two or three core goals of a given project. This isn’t something that you can do on your own, it requires feedback and buy-in from your customer. These goals will later provide a filter through which all project decisions can be examined. Having this higher level of understanding for your project will keep you in tune with what’s best for your client. Remember, we’re not designing for awards, we’re trying to grow our customer’s business.

Trust a Non-Perfectionist

At the risk of sounding a bit trite, it can really help to have a “perfectionist accountability partner” available. Quite simply, a logical individual who will listen to you explain the options and provide a sensible point of view. Often times, I find that simply explaining the two or three ways I can see to create a solution provides the clarity I need to make the right choice. In this case, two heads really are better than one.

One note here, you may want to avoid using the person in charge of the budget for this. I have nothing against the money folks, but often their feedback is to chose the quickest way to solve a problem. Remember that this is a balancing act, it requires compromises and a real desire to serve your clients. Whoever you trust with this responsibility must share this understanding.

Talk to your Customer (Gasp!)

It’s funny to me that each time this suggestion comes up we seem to laugh it off. I believe the reason we don’t take this seriously is because we don’t think our customer’s are smart (technical? creative?) enough to make an educated decision. While there may be some truth here, the reality is that these are the folks paying for the product you’re going to deliver. They aren’t experts in your field. They may not have a design or programming degree. But they should be invested enough in your project to listen to what you’re considering and provide some feedback. If they’re not, this is the perfect opportunity to get them involved. It may even lead to an increase in your overall budget. Trust me when I say that you (and your client) will be much happier with the end product if this kind of communication is common in your process.

The Takeaway

Over time, perfectionsim will eat away at your profit and morale. As experts in our field, we should strive to provide a level of quality that exceeds the expectations of our customers. But we should also be willing to compromise when it’s best for our clients. Working through these kinds of issues with your team can help with efficiencies and prevent teammates from feeling under-appreciated. It’s difficult, but it’s worth the effort.

Manic Mouse on Neutica+

After a little over a month with the free Typebased theme from WooThemes here on Manic Mouse, I finally switched to something more my style. It’s not that I didn’t like Typebased, it just felt like I was struggling to make it work for my content.

Neutica+ was designed by Allan Cole and is a child theme of the Thematic WordPress framework. Though I’ve never done anything with Thematic (or any other theme framework) before, the first iteration of this site (which never went live) was actually a child theme of the WordPress default theme. I really liked the concept of child themes, but didn’t want to get stuck in a “perfectionist death spiral” of personal theme design and development, so I just found a free one.

Neutica+ cost me $15. So far the only modification I’ve made is adding the “Grab the Short Link” element on post listings. I’m not an expert in PHP, so I’m not certain that I’ve done this properly, but here’s the code I’ve added to my functions.php file to do it.

global $post;
$shortLink = rtrim(get_bloginfo('url'), '/') . '/?p=' . $post->ID;
printf(__('<span class="meta-utility entry-permalink">Grab the <a title="Short Link to %2$s" rev="canonical" href="%1$s">Short Link</a>.</span>',
   'thematic'),
   $shortLink,
   wp_specialchars(get_the_title(), 'double') );

If you have a better idea or more efficient method for doing this, please let me know. You can just DM me on Twitter.

I have no problem supporting a great theme with a little cash, especially if it helps me get my thoughts online and available for discussion. However, I am a web guy, so eventually I plan on making a custom theme for Manic Mouse. This monumental task will have to wait until my second child is born, any day now. Until then, Neutica+ it is!

Always great to find this kind of inspiration!

• Ben Callahan { @bencallahan, bencallahan.com, forgeideas.com }
• Jeff Friend { @forwardmedia, forwardmediagroup.com }
• Rob Harr { @robertharr, robharr.com, forgeideas.com }
• Andy Rossi { @andrewrocco, iamrocco.net, forgeideas.com }
• Nathan Rambeck { @nrambeck, nathan.rambeck.org, rambeck.com }
• Ryan Clark { @ryanvsclark, ryanvsclark.com, realartusa.com }

Here’s a quick synopsis of some topics we covered:

• quick discussion of squarespace.com
• cool image tool tips at taggify.net
• jQuery tool tips called beauty tips
• bullet proof @font-face syntax from Paul Irish
• discussion on who could present common sense social media for small business
• discussion on the blurred line between personal social media and work social media
• quick review of zen coding
• cool site showing hardware and software of your favorite techy
• discussion about best IDE’s for web dev
  • Komodo
  • Coda
  • Eclipse
  • Dreamweaver
  • TextMate
  • PageSpinner

Great discussion guys. Thanks for attending and contributing. Looking forward to the next one!

{ Last Month’s Meeting Notes }

One was a high-paying customer who made a few bad business decisions and began paying the price for that with market-share. When they finally realized the need to invest in marketing through this crisis, rather than avoid it, they thought they should seek out a less expensive option. This is OK, we’re not the cheapest in town, we’re the best.

The other was a one-person small business for whom I “did a favor”, helping them to get started with a simple website. If you have to chose a client to lose, this is the one you let go. (By the way, don’t do favors for people. I’ve learned how bad this is for the market since I did this. Clients are educated by this and they’re learning the wrong lessons, but I’ll save that for another post.) So why would this upset me?

Well, I don’t want to sound condescending, but in both cases, the organization replacing my company was (quite obviously) inferior.

That’s really all it was. My client was “firing” me and replacing me with someone who had nowhere near the technical skill or design sense that I offered. Being the perfectionist that I am, these situations severely pained me. I pride myself on providing a level of quality and professionalism that nobody in the Dayton area offers. I am always pushing myself, and always pushing my clients, to take calculated risks and find a solid balance between form and function. I spend a LOT of time writing semantic markup, separating style from content, ensuring accessibility and working to create a usable experience for my customer’s customers. The truth is, most of this stuff doesn’t mean much to a business owner. Wanna know what they think is important?

SEO.

Now, I understand that not all potential clients think this way, but this was the key factor that pulled both of my clients away. The website development firms replacing me were both offering search engine optimization as one of their primary services. While I understand that there are a few SEO folks out there doing some good work, for the most part, I agree with Derek Powazek. Build something good and take care of it, then you’ll get good results. What business owners don’t really understand is that all the stuff I listed above that sets my company apart is the stuff it takes to “build something good”. In essence, what I offer is SEO, I just don’t call it that because it’s common sense stuff. It’s what everyone should be doing.

Telling me that your web development firm offers SEO is like telling me that your computer does multimedia.

The Amiga 4000 Baby

I wish I had the statistic on the number of people who bought a computer because it offered “multimedia capabilities”. Maybe you’re even reading this article on a computer that is capable of multimedia. Congrats if you are. Please send me a photo (if you can figure out how to get the pictures off your camera).

Alright, I’m taking this a bit too far, but you get my point. Every reasonable computer out there is capable of doing the kinds of things we classify (or classified) as multimedia. Managing your photos, music, video, etc. However, when people don’t understand something, they follow the buzzwords.

To Business Owners

Don’t hire a company to build you a website if they try to sell you SEO in addition to the web project. They are scamming you. Find a firm that actually knows how to build sites properly, someone you can trust, and let them do what they do best. Even more importantly, don’t move away from a company that understands all of this simply because some other organization is promising you amazing search engine results. Make sure you’re communicating these desires/goals with your firm.

In both of these cases, my client never even mentioned any specific goals. (NOTE: I understand that I have some responsibility here. Both of these cases happened before we were using any kind of measurable results with these projects. I should have had these conversations in a much more specific way than I did.)

All of that being said, just building something right isn’t going to put you on the first page of Google. That takes time and a commitment that most organizations are not willing to give. It takes a content strategy and an understanding of your audience. A good website development firm knows this and will walk you through these concepts up front.

How Could I have Prevented This

I’ve asked myself this question many times. I honestly believe that the real failure in both of these situations was communication. I needed to communicate more regularly with my client about what they were needing and expecting. They needed to communicate more regularly with me about things they’d like to see change. It’s a two-way street, but we (as designer/developers) need to lead this charge. Being proactive in your client communication will dramatically change your business for the better.

The “Graceful” Part

When this happens to you (hopefully it won’t, but when it does) make sure that you remember your brand. You probably want to be known as an organization people desire to work with, your response in difficult situations will show your true colors.

Also remember who own’s the site. Most work for hire contracts explain all of this and typically, your client owns their site files. This doesn’t necessarily mean the hi-rez (original) photos or the PSD’s you layed out, or your FLA files. Of course, this is dependent on your contract, but in general, you should be gracious through this. Show them that you’re not desperate, that you have their best interests in mind, and that you want them to be happy with their design firm selection.

I’m not saying you shouldn’t try to make a case for them staying with you, but do so with respect. Avoid the political temptations of belittling the “new firm” in front of your client. Nobody wants to work with someone who does that. In general, ask yourself what would be best for your client before making any rash decisions. In fact, it might be a good idea to have a trusted friend or partner review any correspondence to make sure you’re not being over-emotional.

This is tough stuff. However, in situations like these a little grace goes a long way.

Got a good “losing a client” story? Share it in the comments below.

Jason Santa Maria wrote a great article for ALA (finally) that gives a few excellent pointers for those of us looking to take advantage of some cool new web fonts. I dig this post because Jason does a great job of describing some typography concerns that are specific to the web.

Jeremy Keith added what he’s calling “Collectives” to Huffduffer and wrote this fascinating journal entry explaining the feature and the thinking behind it. I love Jeremy’s attention to detail, specifically how he settled on the name of this feature.

Stephen P. Anderson has a (sorta’) new poster/concept that clarifies the factors in designing for user experience. This is super cool and a must read if you design things that people do or (maybe more importantly) don’t use.