Be a Teacher, Not a Douchebag


I’ve been tracking trends and looking deeper into the scenarios that make my company the most money.  That’s why I wrote my previous articles regarding retainers, web cams and other such things that we do that keep our clients close to our sides.

So today I get this new customer’s mobile website built and launched.  Immediately, I get an email that is copied to my client and me from their previous web developer pointing out “problems” with my mobile design (never do this… it only makes you look like a douchebag).

First, I used a free WordPress template…  He pointed that out.  Next, the site didn’t look right on an iPhone… he pointed that out.  And lastly, he said he had the client’s best interest and put, for good measure, a link to the free WordPress template that I used in the email.

What he failed to realize is that I wasn’t done with the site.  I still had tons of plugins to install and lots of coding and design to finish.

The site was launched on a .mobi domain and the client wanted an alternative site to  send their visitors to if they were on a smart phone.  Simple enough.

So after he copies me and my client on this “Ryan Kovach is exposed” email, I wrote him back, copied my client and asked him this question:  If you are so good and had their best interest in mind “why does his site, that he designed for them, look like a Somoan Mountain Yak blew piss all over my computer screen and why does it have an Alexa ranking of 10,129,458?

Needless to say I didn’t get a response from him.

But what I did get was priceless.  The client called, agreed that he was a total gonad and then wanted to know what an Alexa ranking was.  I spent the next 30 minutes explaining Alexa, bookmarking sites, plugins, what a CMS is, what Google Analytics can tell a person, and on and on it went…

We laughed, we talked, we bonded and I educated an otherwise very technically limited person as to how lots of stuff works.

What I got out of it was a client who views me as a knowledgeable professional.  I am now trusted.  I am now valuable to her organization and so on.

Keep in mind this client paid very good money for me to set up a free WordPress template and turn it into a great mobile website.  But she wasn’t phased by that.  She admitted that she has no clue how to do any of that stuff and therefore whether it was a free template or not, she got what she wanted.  She also ended up learning something out of the whole ordeal.

I learned something too.  Clients want to be educated.  They want you to include them in the process. They actually get giddy when you tell them techy stuff that they didn’t already know.

Don’t ever let a chance to educate your clients go to waste.  Spend time with them.  Teach them.  They’ll never fully do what you do.  But they will appreciate what you do more once they see what all goes into the process.

FYI:  Now that the site is finished and after our ordeal today, the client, NOT ME, suggested that we work out some sort of retainer agreement so that she could have me by her side as needed.  SCORE!

Here is the site I built using the free WP template:  http://www.pompeo.mobi

Take a look at it on your browser, then on your iPhone or Blackberry or whatever smart phone you use.

The plugin I used to make it mobile ready is WPtouch. I like that plugin and all of my clients wanting a mobile site love it too. I hope this article helps you slow down, explain your services, educate your clients and land more business. Until next time!

Original Post

Digging Into WordPress, v2 Back in Print

We sold out of our first batch of Digging Into WordPress books in a matter of weeks. We could have just ordered more as soon as supplies were low, but it just so happened that right about that time WordPress 2.9 was out, which has many new features. We were already working on revising the book, so we figured instead of reprint books that were 2.8.6 based, we would wait to finish all the 2.9.2 stuff and reprint the book with all that. So that’s what we did!

Today, the print version of the book is back for sale. The book features some revised content, and two new chapters! The all-new Chapter 10 is called “Bonus Tricks” where we detail out some cool things you can add to themes. In this chapter we also introduce the two brand new themes that now come included with the book! Chapter 11 is called “WordPress Updates”, where we include what is new in 2.9.2, how to use those new features, and where we will continue to expand when new versions come out.

If you have already bought the book, you should already have gotten an email with a download link for the new version, which also contains the new bundled themes.

Not only that, but the site is sporting a fresh new design!

Bundled Themes

The best way to illustrate and explain something is often just to give someone the finished product and let them explore it. There is lots of code in the book, but it’s all removed from the context of a real design. Now you’ll get some real themes along with the book so you can see how that code is used in an actual theme. The themes do a particularly good job illustrating two big topics:

  • Theme Options Panel – Both themes have options panels for setting various theme-specific options. They are built in a “framework” style, so that adding your own or adjusting what options are there is pretty easy.
  • Child Themes – Both themes come with a child theme which restyles the theme without affecting any of how it works. If you’ve always wondered how that works, you can see it with these themes.

Plastique

See theme options shine here as there is a ton of options to control your theme. Everything from how it is laid out (columns, positions) to what types of things you wish to include, to adding in markup into individual sections. Preview Theme

Lines & Boxes

Based on the look of a wireframe, Lines & Boxes could be used as-is for a minimalist look, or used as a starting point for a more fleshed out graphical theme. Some theme options including overriding the header of the site, and options on if you want the main navigation to be a category list or a page list. Preview Theme

All AJAX

“All Ajax”, also a bundled theme, is based off Lines & Boxes but is not technically a child theme. The idea is that every internal link on the site loads without page refresh. Preview Theme

Get it

Even with all the new themes and 30+ new pages, the price point for the book and PDF stay the same. $27 for the PDF and $67 + S&H for the Book/PDF Combo. If you buy the print book, remember that automatically comes with the PDF which now comes as a bundle with the themes, so you don’t miss out on that action.

What happens if you bought the PDF while the book was sold out and now want the print copy? That would be anytime between January 18th and February 28th. If that describes your situation, just forward a copy of your receipt to sales@digwp.com and ask us for a discount code. We’ll send you one you can use on the print copy good for the value of what you paid for the PDF.

Go get it

Original Post

CMS Expo, Chicago, May 3rd-5th

I’ll be speaking at the CMS Expo this May 3rd – 5th (I speak the 4th and 5th). It’s in Evanston, IL, basically, Chicago.

I’ll be doing two sessions, one Tuesday, on Wednesday. One of them will be on advanced theme building. We’ll start with a mockup of a site we want to build (something modern and cool looking) and build it into a finished theme. The other will be “Tricking out WordPress”, where we will hop around some different techniques for doing cool things with WordPress. Probably stuff like advanced custom field usage, pulling in external content, and AJAX.

If you aren’t into the WordPress thing, remember this is a “CMS Expo” so WordPress isn’t the only kid on the block. There will be tracks for Drupal and Joomla as well, and all kinds of interesting stuff going on. For all three days it’s $779.00. Pretty pricey, so if you need to start greasing up your boss, you better get started now. You can register here.

Original Post

Using ‘Mad Libs’ to Make Web Forms More Fun

In an ideal world, the web would have a built-in identity solutions — websites would automatically know who you are when you arrive. In the real world, however, almost every website has its own sign up and authentication process, endless forms enticing you to enter your name, your e-mail, pick a password… yawn, what now?

It’s repetitive, boring and makes many of your users click away in disgust. But what if you turned the sign up form into a narrative, something a bit like a Mad Lib?

That’s exactly what web developer Jeremy Keith has done for his podcasting site, Huffduffer. Instead of a list of blank boxes, Huffduffer’s sign up form looks like this:

All the usual behaviors of a web form are still there. You can tab between fields, your password is still masked and errors are highlighted if there are any. The difference is the in the presentation. It doesn’t look like some kind of online test.

In short, Huffduffer’s sign up for is refreshing, but does it work? Well, Luke Wroblewski, Chief Design Architect at Yahoo and author of a book on creating usable web forms, had the same question and, with some help from the team at Vast.com, ran some tests.

The designers at Vast redesigned their response forms along the lines of Huffduffer’s form and found that, as Wroblewski reports, “Mad Libs style forms increased conversion across the board by 25-40 percent.”

The forms are live on both Vast and the Kelley Blue Book website if you’d like to experience them yourself. Wroblewski has a few minor caveats about the increased number of users — be sure to check out his post for the complete details — but at least in some cases it would seem that a narrative flow trumps the boring old form.

See Also:

Original Post

Win A Free Ticket to Google IO 2010

Google’s premiere developer event is coming up in just a couple of months, and we’ve got two passes to give away.

Google I/O takes place on May 19 and 20 at Moscone Center in San Francisco. It’s the company’s largest developer event, with hundreds of sessions and demos of all the latest Google tech. Plus, there are the big keynotes like the launch of Wave, the first major public demo of Android and the HTML5 coming-out party where everyone in the room got a free Android phone.

If you live in or near San Francisco, or if you have the means to get here, you can win one of the two passes we’re giving away. Each one is worth $500! Here’s the deal:

  • Submit a link to something cool you’ve built using HTML5 — a web app, a canvas demo, an audio or video demo, a mobile app that uses geolocation. It has to be your own work, and it has to be somewhere on the public web.
  • Or, submit a link to a Google Chrome extension you’ve built. Tell us what it does and why it’s awesome.
  • Or, tell us how you would explain what a “web app” is to your grandmother. Let’s assume your grandmother is a nontechnical web user — you can’t use the word “application” or any acronyms, just plain English. (Yes, your submission has to be in English).

To participate, leave a comment on this post, send a tweet to @webmonkey, or send an e-mail to webmonkey@wired.com. Whatever you do, make sure your contact information is easily accessible. A valid e-mail address or URL is a must if you want to collect your prize.

Keep in mind, Google I/O is in San Francisco, and we’re only giving away a ticket to get you in — we’re not paying for flights or hotels, though we will pass along some free Webmonkey swag at the conference. And, OK, we’ll buy you a taco if you ask nice. Also, your ticket is nontransferable.

We’ll pick two winners in a few days, so enter early and don’t miss out.

Original Post

Firefox Borrows a Bit of Safari’s Magic to Speed Up JavaScript

Mozilla’s Firefox web browser was one of the first to optimize for today’s JavaScript-heavy web pages. Mozilla’s new Tracemonkey JavaScript engine — released with Firefox 3.5 — put the browser at the top of most page rendering speed tests. But lately, Google Chrome, Apple’s Safari and the coming Opera 10.5 have been beating Firefox at its own game.

Mozilla is hoping to change that with some new improvements to Tracemonkey that promise to make Firefox even faster — particularly on JavaScript-heavy websites like Gmail or Facebook.

The new project — JagerMonkey, as it’s known — is built on top of Tracemonkey and borrows its assembler from Apple’s open source Nitro JavaScript engine. As JagerMonkey programmer David Mandeli writes on his blog: “we know [Nitro] is simple and fast from looking at it before… it’s open-source, and it’s well-designed C++, so it was a great fit.”

The goal of JagerMonkey is to cover a couple of blind spots in Tracemonkey’s JavaScript rendering process. Most JavaScript can be compiled “just in time,” that is, optimized by turning it from JavaScript into much faster native code. When that’s possible, Tracemonkey’s performance matches that of Chrome, Safari and Opera.

However, not all of the web’s JavaScript can be converted to native code the way Tracemonkey currently works. Mandeli has a detailed explanation of what sort of code doesn’t work and why, but the short story is that when Tracemonkey doesn’t kick in, Firefox is still rendering that code at the same speed it was in 2007 — in other words, very slowly by today’s standards.

JagerMonkey will change that, handling the code that the existing Tracemonkey engine cannot.

Of course it will be some time before JagerMonkey makes it into Firefox proper. In fact, as of right now it isn’t even in the Firefox nightly builds. If you really must try it for yourself right now, you’ll find a link to the source code on the Mozilla wiki.

So far, the project doesn’t have a roadmap and the wiki page indicates that there are still many optimizations to be done, but when JagerMonkey finally lands, it may well put Firefox back on top in the web browser speed wars.

Photo: Wikimedia Commons, PD

See Also:

Original Post

Doing Pro Bono Work Brings in Big Money


I wanted to share something with the Woork Up community about doing pro bono work (as you probably know: “Pro Bono is a phrase derived from Latin meaning for the public good. The term is generally used to describe professional work undertaken voluntarily and without payment as a public service” – from Wikipedia).

Over the past 24 months, our firm has accepted 3 large pro bono assignments. These assignments were non-profit associations that had been hit hard in the recession. Their budgets were at zero for design, marketing or advertising, yet they still had ambitions, dreams and hopes of continuing with their work as non-profits. These difficult times proved especially hard for them in the realm of digital media because they needed complicated websites that managed their members, had good SEO parameters, managed calendars of events and usually a member and vendor directory of some sort and so on.

To a web firm, these can be grueling and time-consuming when you have paying customers of your own that you must tend to.

Our firm decided to take on 3 of these types of assignments in the last 2 years and we are very glad we did.

For one, the experience gives us more practice to do what we do.  It also gives us a sense of pride helping organizations who do good deeds, but can’t afford big agency pricing.  And lastly, it brings in a ton of business if done right!

Because the non-profit is so thankful to you for what you’ve done, they are very willing to share you name, send out newsletters, put your banner on their site, offer incentives and push your brand to their many members.

In 2009 alone, our small firm benefited from pro bono work to the tune of about $108,000.  The previous year, it was in the realm of about $200,000.

We estimated that the pro bono work, if billed out accordingly, would have cost the non-profits roughly about $60K total ($20K a piece) for all 3 associations. That makes our pro bono work a net gain of about $238,000 over 24 months.

So if you are looking for a way to break into a whole slew of businesses, start contacting non-profit associations who may be suffering right now. The work will be hard up front, but the payoff down the road can be huge.

And even if the payoff isn’t huge, if the non-profit is something you believe in, then you did a good deed!

Original Post

Unicode Characters for Class Names

Reader Kartlos emailed me in pointing to me to an interesting article by the great Mr. Snook from a few years back. I don’t think I had seen it before and it’s a bonafide “CSS Trick” so I thought I would share.

The idea is that you can use unicode characters (read: fancy symbols) for class names in your HTML, and even use write CSS selectors with those same characters.

<div class="♫">
    A.A. Bondy
    <em>I Can See The Pines Are Dancing</em>
</div>
.♫ {
   display: block;
   background: #eee;
   padding: 5px;
 }

Pretty cool eh? I’d call my example above perfectly semantic as well, since the div with the music note class name is marking up a musician and song. Possibly even more semantic, as a music note symbolizes music moreso than any English word.

I put together a super simple demo page that shows it working. Oh, and yes-it-works-in-IE6™ & yes-it-validates™

But…

One funny thing? View the source on that page. I use PHP includes for the headers and footers of all my demos, and because of the character encoding (?) of that page the PHP doesn’t run it just sits there as text.


That ain’t right.

Coda does warn you first.

Weird eh? If you know how this could work both ways, let me know.

Other uses

Jonathan presented (in his original article) and idea for targeting the corners of a box.

<div class="□">
  <div class="┌">
    <div class="┐">
      <div class="└">
        <div class="┘">
          content
        </div>
      </div>
    </div>
</div>

Remember back a few years ago most of us were rocking rounded corners with nested divs and images like that! The corners symbols are clever, but I could see the <div class="□"> being used for like “container” or “box” style classes today, or, perhaps best of all, the clearfix.

I posted a little code clip of this over on Forrst (sorry I know most folks don’t have accounts there yet) and a guy named Aaron had a funny idea. Using upside down writing to be annoying! id='ɹǝpɐǝɥ', id='ɹǝddɐɹʍ', id='ɹǝʇooɟ'

Original Post

Coding a Complex Design into CSS and HTML: New Plus Tutorial

The Basics of CSS3