So for this example I'm going to show you how to create a "Tell a Friend" box that fades in and auto populates with the page you're currently on. It's a bit of HTML & CSS, a bit of jQuery, and a bit of ExpressionEngine. Ready to get started? Let's go!

For those of you who just can't wait, here's a demo of the static version and a download of the full ExpressionEngine version.

1. Start with HTML

What we want to do first is make this work with a static HTML page. So we need an anchor for jQuery to pull off of and the pop-up box with form fields in it. Something like this:

<h1>ExpressionEngine &amp; jQuery Tell-a-friend Pop-up Box</h1>
<p class="info">Published Nov 23, 2009 <em>by</em> 
<strong>Jonathan Longnecker</strong> <em>in</em> 
<a href="#">Blogging</a></p>

 <p>It's pretty easy to setup. Just create a hidden div with the 
 appropriate fields and show it on click with some jQuery. 
 Then use ExpressionEngine to make the dynamic parts happen.</p>

 <div class="social_links">
    <ul>
       <li><a class="subscribe" href="#">Subscribe</a></li>
       <li><a class="twitter" href="#">Tweet About It</a></li>
       <li><a class="email" href="#emailpopup">Email Someone</a></li>
    </ul>
 </div>     

 <div id="tellfriend" class="contact_form">
 <a class="close" href="#close" >Close</a>
 <form id='tellafriend_form' method="post" action="#"  >

    <label for="from">Your Email: </label>
     <input class="std_input" type="text" id="from" name="from" 
     size="40" maxlength="35" value="" />

     <label for="name">Your Name: </label>
     <input class="std_input" type="text" id="name" name="name" 
     size="40" maxlength="35" value="" />

     <label for="to">To: </label>
     <input class="std_input" type="text" id="to" name="to" 
     size="40" maxlength="35" />

     <label for="subject">Subject: </label>
     <input class="std_input" type="text" id="subject" 
     name="subject" size="40" value="Check out this blog entry 
     from FortySeven Media" />

     <label for="message">Message: </label>
     <textarea id="message" name="message" readonly="readonly" 
     rows="18" cols="40">Summary of Entry Here
     Link to Entry Here
     </textarea>

     <input type="submit" name="submit" class="form_but" 
     value="Submit"/>
</form> 
 </div>

2. Throw in a pinch of CSS

Since we're going to show and hide with jQuery the CSS is just used for positioning and z-index position:

#tellfriend {
    position: absolute;
    margin-top: -300px;
    left: 400px;
    width: 380px;
    z-index: 1;
}

3. Add some jQuery

So obviously we first need to link to the jQuery library in our header (apologies for the line break):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2
/jquery.min.js" type="text/javascript"></script>

Then we can either put this bit of javascript in the header of our document or in a separate file. Whatever's most manageable for you.

jQuery.fn.fadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle'}, speed, easing, callback);  
};

$(document).ready(function() {
    $('#tellfriend').hide();
    $('li a.email, #tellfriend a.close').click(function() {
    $("#tellfriend").fadeToggle('slow');
  });
}); 

It basically just hides the #tellfriend box on load and shows or hides it when you click the li a.email, #tellfriend or a.close elements. At this point, we should have something like this (Static Demo). I've prettied up a bit, but the basics are there.

4. Mix it up with some ExpressionEngine

So you can see that I've manually put in the subject line and message, but I want to have those pull dynamically as well as actually send an email. Static HTML can't do that. So this is what we add:

{exp:weblog:entries weblog="your_blog" 
disable="member_data|pagination|trackbacks"}

<h1>{title}</h1>
 <p class="info">Published {entry_date format="%M %j, %Y"} <em>by</em> 
 <strong>{author}</strong> <em>in</em> {categories backspace="1"}
 <a href="{path=/blog/}">{category_name}</a>, {/categories}</p>

{body}

 <div class="social_links">
    <ul>
       <li><a class="subscribe" href="#">Subscribe</a></li>
       <li><a class="twitter" href="#">Tweet About It</a></li>
       <li><a class="email" href="#emailpopup">Email Someone</a></li>
     </ul>
 </div>     

 <div id="tellfriend" class="contact_form">
 <a class="close" href="#close" >Close</a>
{exp:email:tell_a_friend charset="utf-8" allow_html='n'}

      <label for="from">Your Email: </label>
      <input class="std_input" type="text" id="from" name="from" 
       size="40" maxlength="35" value="{member_email}" />

      <label for="name">Your Name: </label>
      <input class="std_input" type="text" id="name" name="name" 
       size="40" maxlength="35" value="{member_name}" />

      <label for="to">To: </label>
      <input class="std_input" type="text" id="to" name="to" 
       size="40" maxlength="35" />

      <label for="subject">Subject: </label>
      <input class="std_input" type="text" id="subject" name="subject" 
       size="40" value="{title}" />

      <label for="message">Message: </label>
      <textarea id="message" name="message" readonly="readonly"
       rows="18" cols="40">
         {summary}
         {url_title_path="blog/archives"}
       </textarea>

 <input type="submit" name="submit" class="form_but" value="Submit"/>

{/exp:email:tell_a_friend}    
 </div>

{/exp:weblog:entries}

First of all make sure your {weblog:entries:tag} is wrapped around the entire thing. I've left a few other goodies in the EE template, but the gist is you use short tags to call the info dynamically. Then wrap the {exp:tell_a_friend} tag around your form (replacing your form tags) and insert other dynamic variables like {member_email}, {member_name} (for those already logged in), {title}, {summary} and link to the article. The cool thing is you could put any custom field tied to this content channel that you want.

So there you have it. The box will have it's fields populated and ready to send. Easy to put together and infinitely customizable! You can download the full EE file here.

While the initial reaction for any of us would probably be thoughts of a Chuck Norris roundhouse to the face (in slow motion, of course), the whole incident made me think hard about what 47m is at it's core, and what it truly means to serve a client. I think there are two ways to serve a client:

Scenario 1: Blind Serving

In blind serving, you're always making the logo bigger or adding starbursts because the client says so. Not because it's better for them, but simply because they demand it. A lot of companies won't fight this because they're just trying to make a living. And that's ok. I think everyone starts out serving blindly. Get the job done → client happy → get paycheck.

But at some point, you come to a crossroads. At some point, your experience will tickle the back of your brain and say "That's a bad idea!" So what happens then?

Scenario 2: Passionate Serving

I think the next stage of serving your clients involves talking through those "make the logo bigger" conversations and explaining your work. Why you believe your decision is the best not only for the design, but also for the company. These conversations are still no fun, but if you're really passionate about what you do, you can't let it go. You'll win some and lose some. And occasionally, the client will come up with a better idea. Seriously, it will happen. If you've checked your ego at the door like any good designer should, you'll be open-minded enough to see it.

Is your company serving blindly or passionately?

I wish the story ended here, but it doesn't. There are those certain clients that just can't be helped. They don't listen to anything you say and destroy your designs in Photoshop and send them back to you claiming they're better. What then?

Scenario 3: The Ultimate Sacrifice

When you see a client being self-destructive in their design decisions and they won't listen to you, it's time to let them go. With that kind of drama and conflict, I can guarantee you you're not passionate about the work anymore. This will lead to a decrease in quality, and you start wasting each other's time. They're looking for a Blind Servant and you're a Passionate Servant. You may be losing money, but if you're truly thinking of the client, it's a sacrifice you have to be willing to make.

Getting back to the firing of our client; it was becoming painfully obvious that we were trying to passionately serve them and they didn't want the advice. After almost 5 years we had grown apart in a radical way. Our cultures were polar opposite. So it was time to move on. And I'm ok with that.

So is there a place for both kinds of servants? Absolutely! For your sanity, decide which one you are. And more importantly, make sure your clients know and appreciate it.

Folks, we have a winner! Scott has officially declared the final logo to be Number 3 from the last round minus the tilting. Though not apparently obvious, this version was completely redone, ensuring spacing and alignment was perfect and optimized where necessary. The Solutions font was beefed up a bit, too. Good call on that one, loyal readers! Not much else to say here, really. Since we’re starting from the ground up and have such a strong and simple mark, I’m going to tackle color alongside the website design. A little unorthodox, perhaps? Yeah, we were never the normal ones .

Thanks everyone for your input. We’re moving on to wireframing next.

We Understand it's Your Baby

If anyone can sympathize with a small business owner it's a small web design shop. We know you busted your tail, working night and day to get this off the ground. So did we. We know you've had to wear so many hats it's not even funny. Salesman, bookkeeper, account manager, marketing guy, the list goes on and on. We do it all, too. It's exhausting. And so when you bring someone else in to help you visually define what you are; it's like we're messing with a part of you. Here's the thing, though. You're too close. You need someone with a neutral perspective to help you make decisions for the better. My favorite saying goes, "You can't read the label when you're inside the bottle." You're so close to the details and emotional attachments that it's hard to see the big picture.

We Are Professionals Who Love What We Do

So obviously if a small business hires us they know somewhere deep inside that they need help. But I can't tell you how many times we're asked to do a project and then just get design details dictated to us. I don't quite understand this. I mean, if you hired a plumber would you tell him he used the wrong fittings or should have used different pipe? Do you go to the doctor and say, "I appreciate your advice, but that medicine you prescribed is all wrong. I like pills better." Do you tell your accountant he used the wrong form? Of course not! You went to these people because they are professionals and they're good at what they do. Good designers know what they're doing and will fight for the best design. Speaking of designers...

"You can't read the label when you're inside the bottle."

Not Everyone is a Designer

I know, I know. You studied marketing in college. Or you're great with interior decorating. You can put an outfit together like no one's business! Maybe you really like the color purple. Those are all fantastic things, but it doesn't mean you understand design. So while we're absolutely open to discussing your ideas, we can't take them to heart if they make the design less effective. We don't just throw stuff on a page to make it pretty. We take the time to guide the viewers eye through the page, communicate effectively, choose just the right typography, and call on years of experience to make the right decision. I generally go through multiple ideas and versions to get to the one I show you. I've usually already tried your idea and it wasn't the best solution.

This Isn't What You Expected

People are often surprised when a design isn't like what they thought it would be. This goes back to our whole "Label inside the bottle" analogy. While sometimes a small business person has a clear vision of what they should look like; often it's tainted by their emotions and insider knowledge of what they do. For example, an icon of a house because you provide cleaning services. That house doesn't have to represent the 1200 square foot rancher you usually clean. It's just a house. Really, I promise. Small business people get so hung up on these kinds of details it's maddening. Big picture, guys. The label looks and feels totally different than the inside of the bottle.

Kumbaya With Me!

Alright, I know this probably sounded a bit negative, but it's just because we love you. We need you as much as you need us. Honestly, some of the most innovative and interesting things we've ever worked on came from small businesses because you're nimble and not bogged down in processes and bureaucracy. It would just be nice if we could work together a little easier sometimes, you know? So remember, good designers will make what they truly believe is best for you. We're not trying to stroke our ego or build our portfolio; we genuinely want to make your business better. Let us do that; it's what we love to do!