So I ask you: what is Microsoft supposed to do?

It isn’t their fault that users won’t upgrade their browser.

Suck It Up

If you call yourself a web developer, you should be able to make things presentable in IE6. If you can’t, then you probably shouldn’t call yourself one. So suck it up and deal with it. Doesn’t the challenge make our jobs more interesting?

I’m not saying that your site has to look exactly the same in all browsers. We already know the answer to that question. Just make it presentable. Make sure a user can access all content on the site. Remember, it’s still all about the content.

Better Yet

Take a look at the traffic to the site and determine to what degree you even need to support it. If IE6 visitors only compromise a very small percentage, maybe consider using Andy Clarke’s Universal Internet Explorer 6 CSS. That will put the content front and center in IE6, and you won’t even have to worry about it.

Just please, stop complaining.

</rant>

Maybe I need to explain a little better what I am referring to. Instead of using a label that is next to or above the input element, the label is actually within the input. Then, when the input is focused, the label goes away and you can enter your value into it. Finally, when the input is no longer focused, if there is no value entered, the inline label is then added back in.

See Demo

My Solution

The title attribute.

It’s so simple, but perfect. A great benefit of using the title attribute, is that when you hover over the input, you get a little tooltip displaying the inline label. So all I need to do is add a title attribute with the text that we want to have show up as the inline label. Then, we just use a little jQuery to make it all happen.

The jQuery

First, we want to select each input that has a title attribute, once the document is loaded:

$(document).ready(function() {
	$('input[title]').each(function() {
	…
	});
});

Next, if the value of the input element is empty, we want to take the title attribute and add it as the value of the input.

$(document).ready(function() {
	$('input[title]').each(function() {
		if($(this).val() === '') {
			$(this).val($(this).attr('title'));
		}
	});
});

After that, we want to setup a function that will fire once the input is focused. When it is focused, if the value is equal to the title attribute, we want to set the value to nothing and add a class of focused:

$(document).ready(function() {
	$('input[title]').each(function() {
		if($(this).val() === '') {
			$(this).val($(this).attr('title'));
		}

		$(this).focus(function() {
			if($(this).val() === $(this).attr('title')) {
				$(this).val('').addClass('focused');
			}
		});
	});
});

The reason why we add the class of focused is so that we can change the text color, border or anything to make it noticeable that the input is being focused. You can see this effect in the demo.

Finally, we want to add a function that will fire when the input loses focus. When it does, if the input value is empty, we want to set the value back to the title attribute and remove the class of focused:

$(document).ready(function() {
	$('input[title]').each(function() {
		if($(this).val() === '') {
			$(this).val($(this).attr('title'));
		}

		$(this).focus(function() {
			if($(this).val() === $(this).attr('title')) {
				$(this).val('').addClass('focused');
			}
		});

		$(this).blur(function() {
			if($(this).val() === '') {
				$(this).val($(this).attr('title')).removeClass('focused');
			}
		});
	});
});

See Demo

And that’s it. It’s just a little bit of code, but it can go a long way. So take it and build on it.

Be the Expert

We have to remember that we are the web experts in this relationship. We need to show confidence when talking with clients. Talk authoritatively about the details of the project and show them that we know what we are talking about. Just like we wouldn’t go tell an architect how to design a house, our clients need to trust us to build their website.

Stick to Your Guns

So let’s say a client suggests something that you know would work better if you did it a different way; don’t just say yes to the client, make your suggestion and build a case for it. Reference other examples. Site statistics. Fight for the best solution. Remember, you are the expert.

Read, Browse, and Read Some More

The web is full of great articles, bad examples of web sites, good examples of web sites, and much more. So by just spending time browsing the web, you can amass a huge amount of knowledge about what works and what doesn’t. This will provide you with loads of ammunition to use when clients need your guidance.

It’s Hard

I struggle with it all the time. It’s hard to say no to a client when they are the ones paying you. But the best thing to do is to make your suggestions, back it up with statistics & examples, and hope that the client trusts your judgment.

Remember, you are the expert.

There was basically no part of my jury duty experience that was pleasurable. Let me walk you through how my day went.

Getting Up Early

First off, I had to get up super early in order to get there on time. If I am just going to be waiting around most of the day, why do I have to be there at 8:15am?

Parking

So I pulled into the parking lot that they told me to park in, and started to walk to the court house. But wait, I had no clue where to go. There were no signs at all. Luckily I guessed right, or I would have been late.

Security

Since I was going into a court house, I totally expected to have to go through security. I was told that jury duty would probably end up being a lot of waiting around, and I saw that they had wireless internet access there, so I figured I would bring my laptop and get some work done.

First, I had to check my cellphone since it had a camera on it. I’m not really sure what I would want to take pictures with, but whatever, I checked it. I did feel a little lost without my phone though.

Next, I had to go through the metal detectors and put my bag on the x-ray machine. The security officer asked me to take out my laptop and turn it on. I was confused as to why I would need to turn it on, but I hit the button and waited for it to power up. Then, he sees that my laptop has a built-in camera, and tells me that I can’t bring it in.

I looked at him befuddled because I couldn’t imagine sitting with my laptop facing out in the courtroom, taking pictures, and not having someone say something to me. The security officer tells me that I have to take it back to my car. So, I had to walk the quarter of a mile back to my car, put the laptop in there, then walk back and go through security.

Seems a little ridiculous, right? I must give them credit for actually having wireless internet, but not being able to bring in my laptop really pissed me off.

The Waiting Room

Once I got through security and checked in, I was directed to a big room with a bunch of tables and chairs where we would wait for the next hour or so. Of course, the chairs were jammed in together, and there were not enough seats in the room for everyone.

We watched a 15 minute training video, and then the courthouse employees tried to get us to donate money to the court system. Yeah, after you put me in a bad mood because I couldn’t bring in my laptop, I’m sure I’ll jump at the opportunity to give you money.

What a great start to the morning.

The Next Waiting Room

Finally, my group got called to the courtroom, and we stood around and waited for about two hours until we finally got called into the court room to go through the jury selection process.

So again, more waiting, that’s basically what I did all day.

Does anyone think about the experience?

Here we are in a situation where we are supposed to be impartial and have no biases, and I was in a piss poor mood. Why don’t they make these kind of situations as painless as possible? Why isn’t there someone making sure that the experience of having jury duty is not awful?

Just like we devote time thinking about users’ experiences on the websites we are creating; organizations need to consider what those experiences outside of the web are like.

Who is it for?

This book is definitely aimed toward beginning users of EE who have some knowledge of HTML. There is no knowledge of EE needed in order to read this book. So basically anyone who wants to learn how to use EE would benefit from reading this. While I have had some experience with EE, I found many parts of this book that were more of a review for me.

What I liked

I really liked that Leonard uses a lot of screenshots and code snippets to help walk through how he is doing something. They definitely would have helped me to comprehend some of the EE concepts that I did not understand until devoting a lot of time online doing research.

This book does a great job of covering a variety of topics, from installing EE and creating a calendar to using other modules and plugins. Even though I have prior experience with EE and this book is geared toward beginners, I did learn a few things about EE from reading this book.

What I could do without

There seemed to be a large chunk of the book devoted to applying CSS to the examples to make them presentable. I don’t think there is any need to go through and explain the CSS; people are buying the book for information about EE.

I also wish that the example site that is used in the book were a bit more realistic. I really learned a lot from Mike Boyink’s Building a Church Site and Building a Small Business Site tutorials because the content and functionality of the sites were real.

Conclusion

This book is really the only EE book out there. So if you are one of those people who has trouble learning from online tutorials and needs a book, this is definitely a solid choice to get started with EE. You can get a preview of it by downloading a sample chapter.

Update

I actually wasn’t aware of this, but Mike Boyink also has his tutorials available as books.

If anything, it gives visitors a chance to see my ability to code with web standards. I take the time and effort to write well structured XHTML, so it is still readable without any style applied.

I am striping my design with the CSS Naked Day WordPress Plugin. I encourage everyone else to strip down and show off your body.

Is anyone else going naked today?

So basically, Mr. Brown has people in the industry come in and speak to his students every Friday. After looking at the list of other speakers, I sure was nervous. I mean; I go to conferences to see some of these guys speak.

Mr. Brown has a great program going, and I was glad to be a part of it. He is one of the few teachers that actually teach about web standards and is a member of the WaSP Education Task Force. He also gave a presentation at RefreshDC about web education the night before my presentation, that I unfortunately missed.

My Presentation

I decided to focus my presentation on my path through web development, some tips to become successful as a front-end developer, and then how to maintain that success.

I was pretty nervous, and I felt like I raced at times, but I think it turned out well. Mr. Brown has posted the audio from the presentation on his site.

I would love to hear any feedback on the presentation, so let me know what you all think.

I don’t think it’s necessary to discuss the benefits of body ids because I have already discussed them in the other posts. So if you still aren’t using body ids/classes, go read the articles, and start using them.

The Plan

This seems so straightforward that I’m not sure why I didn’t start with this method. So basically, I look at the URI, and if it is equal to / then I give it a body id of home. Otherwise, I grab the first “folder” and set that as the body id.

Example

Let’s say that the URI is: /about/team/leadership/. The body id would be about. Ok, the seems easy, let’s get to the code.

The Code

Here is our setBodyId function:

function setBodyId() {
	$path = $_SERVER['REQUEST_URI'];

	if($path === '/') {
		$bodyId = 'home';
	} else {
		$bodyId = substr($path, 1, (strpos($path,'/',1)-1));
	}

	return $bodyId;
}

If you are using this in WordPress, put this function in your theme function.php file.

Then, you want to call the function and assign it to a variable:

$bodyId = setBodyId();

Finally, if the $bodyId variable is not empty, add the id attribute on the body tag:

<body<?php if(!empty($bodyId)) echo ' id="'.$bodyId.'"';?>>

Conclusion

It’s so simple, yet powerful. This could also easily be recoded in other programming languages. What do you think? Any ideas for improvement?

Some people may want to skip the post and get to the demo and source files:

View Demo Download Source Files

So, why not use a plugin?

Well, I think that a contact form is so simple that a WordPress plugin that doesn’t provide exactly what I want is pretty lame. Plus, I don’t need all those fancy interfaces for building the form; I just need the code.

The Plan

Our plan is to create a custom WordPress Page Template, then create a page that uses that template. Finally, we will add in a little jQuery to improve the form. Let’s write a little pseudo code to help determine how our page template will be structured.

Pseudo Code

If form was submitted validate it
	If the form was submitted successfully
		Send email(s)
	Else
		Set variables to show errors

If the form was submitted successfully
	Show thank you message
Else
	Show form (with errors if there are any)

Creating the WordPress Page Template

Alright, so first, we are going to start with some basic stuff: define the template name, include the header/sidebar/footer, and setup the basic structure of our pseudo code.

<?php
/*
Template Name: Contact Form
*/
?>

<?php
//If the form is submitted
if(isset($_POST['submitted'])) {
	//If there is no error, send the email
	if(!isset($hasError)) {

	}
} ?>

<?php get_header(); ?>

<?php
//If the email was sent, show a thank you message
//Otherwise show form
if(isset($emailSent) && $emailSent == true) {
?>

<?php } else { ?>

<?php } ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

The Form

Next, let’s code the actual form. I also want to provide the ability for the user to enter some text to go above the form, so we are going to use the regular loop:

<?php if(isset($emailSent) && $emailSent == true) { ?>

	<div class="thanks">
		<h1>Thanks, <?=$name;?></h1>
		<p>Your email was successfully sent. I will be in touch soon.</p>
	</div>

<?php } else { ?>

	<?php if (have_posts()) : ?>

		<?php while (have_posts()) : the_post(); ?>
			<h1><?php the_title(); ?></h1>
			<?php the_content(); ?>

			<?php if(isset($hasError) || isset($captchaError)) { ?>
				<p class="error">
					There was an error submitting the form.
				<p>
			<?php } ?>

			<form action="<?php the_permalink(); ?>" id="contactForm" method="post">

			</form>

		<?php endwhile; ?>
	<?php endif; ?>
< } ?>

If the emailSent variable is set to true, we display the thank you message. Otherwise, we show the form. So we are outputting the title of the page, and any content that was entered. Then, we are checking to see if there was an error. Finally, we display the form:

<ol class="forms">
	<li>
		<label for="contactName">Name</label>
		<input type="text" name="contactName" id="contactName" value="
		<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>"
		 class="requiredField" />
		<?php if($nameError != '') { ?>
			<span class="error"><?=$nameError;?></span>
		<?php } ?>
	</li>

	<li>
		<label for="email">Email</label>
		<input type="text" name="email" id="email" value="
		<?php if(isset($_POST['email']))  echo $_POST['email'];?>"
		class="requiredField email" />
		<?php if($emailError != '') { ?>
			<span class="error"><?=$emailError;?></span>
		<?php } ?>
	</li>

	<li class="textarea">
		<label for="commentsText">Comments</label>
		<textarea name="comments" id="commentsText" rows="20" cols="30" class="requiredField">
		<?php if(isset($_POST['comments'])) {
			if(function_exists('stripslashes')) {
				echo stripslashes($_POST['comments']);
			} else {
				echo $_POST['comments'];
			}
		 } ?></textarea>
		<?php if($commentError != '') { ?>
			<span class="error"><?=$commentError;?></span>
		<?php } ?>
	</li>
	<li class="inline">
		<input type="checkbox" name="sendCopy" id="sendCopy" value="true"
		<?php if(isset($_POST['sendCopy']) && $_POST['sendCopy'] == true)
			echo ' checked="checked"'; ?>
		/>
		<label for="sendCopy">Send a copy of this email to yourself</label>
	</li>
	<li class="screenReader">
		<label for="checking" class="screenReader">If you want to submit this form, do not enter anything in this field</label>
		<input type="text" name="checking" id="checking" class="screenReader" value="
		<?php if(isset($_POST['checking']))  echo $_POST['checking'];?>"
		/>
	</li>
	<li class="buttons">
		<input type="hidden" name="submitted" id="submitted" value="true" />
		<button type="submit">Email me »</button>
	</li>
</ol>

Note: Line wrapping added for readability.

Ok, wow, that may seem like a lot. So let’s break down the name field to see what this code is actually doing:

<li><label for="contactName">Name</label>
	<input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="requiredField" />
	<?php if($nameError != '') { ?>
		<span class="error"><?=$nameError;?></span>
	<?php } ?>
</li>

We are displaying each form field in a list item, displaying the label, input field, and then showing an error message if there is one. We are also displaying the value in the form field if it was already submitted.

So in essence, we are just doing that for each field of the form. You could easily go into the code to add more fields.

We are also using honeypot captcha to see if a bot was trying to submit the form:

<li class="screenReader">
	<label for="checking" class="screenReader">If you want to submit this form, do not enter anything in this field</label>
	<input type="text" name="checking" id="checking" class="screenReader" value="<?php if(isset($_POST['checking']))  echo $_POST['checking'];?>" />
</li>

That list item is pushed off the page with CSS, and if there is a value in that field, we can assume that it is not a human trying to submit the form:

.screenReader {
	left: -9999px;
	position: absolute;
	top: -9999px;
}

The Validation

Next, we are going to have a conditional statement to determine if the form was submitted or not:

<?php
//If the form is submitted
if(isset($_POST['submitted'])) {

} ?>

Within that conditional, is where we are going to do all of our validation of the required fields. First, let’s check to see if our honeypot captcha form field is filled in. If it is, then we will display an error and not check anymore of the form:

//Check to see if the honeypot captcha field was filled in
if(trim($_POST['checking']) !== '') {
	$captchaError = true;
} else {

} 

So if the captcha field was left blank, we will continue to validate the required fields:

//Check to make sure that the name field is not empty
if(trim($_POST['contactName']) === '') {
	$nameError = 'You forgot to enter your name.';
	$hasError = true;
} else {
	$name = trim($_POST['contactName']);
}

//Check to make sure sure that a valid email address is submitted
if(trim($_POST['email']) === '')  {
	$emailError = 'You forgot to enter your email address.';
	$hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
	$emailError = 'You entered an invalid email address.';
	$hasError = true;
} else {
	$email = trim($_POST['email']);
}

//Check to make sure comments were entered
if(trim($_POST['comments']) === '') {
	$commentError = 'You forgot to enter your comments.';
	$hasError = true;
} else {
	if(function_exists('stripslashes')) {
		$comments = stripslashes(trim($_POST['comments']));
	} else {
		$comments = trim($_POST['comments']);
	}
}

Again, that may seem like a little much, so let’s just take a look at the validation on the name field:

if(trim($_POST['contactName']) === '') {
	$nameError = 'You forgot to enter your name.';
	$hasError = true;
} else {
	$name = trim($_POST['contactName']);
}

If the name field if empty, set a variable that will display the name error and set a flag saying that there was an error on the form. Otherwise, set a variable that will contain the name value from the form.

Sending the Email

Now, we want to send the email if there are no errors:

//If there is no error, send the email
if(!isset($hasError)) {

	$emailTo = 'me@somedomain.com';
	$subject = 'Contact Form Submission from '.$name;
	$sendCopy = trim($_POST['sendCopy']);
	$body = "Name: $name \n\nEmail: $email \n\nComments: $comments";
	$headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

	mail($emailTo, $subject, $body, $headers);

	if($sendCopy == true) {
		$subject = 'You emailed Your Name';
		$headers = 'From: Your Name <noreply@somedomain.com>';
		mail($email, $subject, $body, $headers);
	}

	$emailSent = true;

}

Note: Items bolded are values that you will want to change before implementing.

I personally like to have the contact form submission come from myself. That way, I just setup a filter in Gmail, and I can guarantee that it won’t get caught in my spam filter. The second email is only sent if the user checks the checkbox to send a copy to themselves.

View Entire Custom Page Template

Creating the Page in WordPress

First, you want to upload the contact-form.php page template to your themes folder. Next, you will create the page in WordPress and select Contact Form as the page template.

Then, just publish your page and you will have your contact form. Well, the form will be usable, but we are going to add in some CSS and jQuery to finish it off.

Styling the Form

I recently wrote an article about styling forms, so we are just going to stick with some basic styles:

.screenReader { left: -9999px; position: absolute; top: -9999px; }
.thanks { background: #F2F3F6; border: 1px solid #7E8AA2; padding: 10px; }

/*****Forms*****/
ol.forms { float: left; list-style: none; margin: 0; width: 100%; }
ol.forms li {
	clear: both;
	float: left;
	margin-bottom: 18px;
	position: relative;
	width: 100%;
}
ol.forms label {
	cursor: pointer;
	display: block;
	float: left;
	font-weight: bold;
	padding-right: 20px;
	width: 100px;
}
ol.forms input, ol.forms textarea {
	border: 1px solid #7E8AA2;
	border-radius: 3px;
	font: inherit;
	-moz-border-radius: 3px;
	padding: 2px;
	-webkit-border-radius: 3px;
	width: 214px;
}
ol.forms textarea { height: 300px; width: 334px; }
ol.forms input:focus, ol.forms textarea:focus { background-color: #f2f3f6; border-color: #ff9800; }
.error { color: #f00; }
ol.forms li .error { font-size: 12px; margin-left: 20px; }
ol.forms li.textarea .error {
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	width: 100px;
}
ol.forms li.screenReader { margin-bottom: 0; }
ol.forms li.buttons button {
	background: #ff9800;
	border: none;
	color: #000;
	cursor: pointer;
	font: 16px/16px "Avenir LT Std", Helvetica, Arial, sans-serif;
	overflow: hidden;
	padding: 6px 3px 3px 3px;
	text-transform: uppercase;
	width: auto;
}
ol.forms li.buttons button:hover { color: #222; }
ol.forms li.buttons button:active { left: -1px; position: relative; top: -1px; }
ol.forms li.buttons, ol.forms li.inline { float: right; width: 460px; }
ol.forms li.inline input { width: auto; }
ol.forms li.inline label { display: inline; float: none; width: auto; }

So drop that CSS in your theme stylesheet and you will see the form start to look much better.

Enhancing the form with some jQuery

I have also already written about creating AJAX forms with jQuery, but I thought I would specifically talk about an AJAX script for a contact form.

First, we want to execute our jQuery when the document is ready and the form was submitted:

$(document).ready(function() {
	$('form#contactForm').submit(function() {

		return false;
	});
});

Next, we want to hide any error messages if there are any and validate any required fields which are denoted with a class of requiredField:

$('form#contactForm .error').remove();
var hasError = false;
$('.requiredField').each(function() {

});

After that, we want to validate that the field is not empty and append an error message if it is:

if(jQuery.trim($(this).val()) == '') {
	var labelText = $(this).prev('label').text();
	$(this).parent().append('<span class="error">You forgot to enter your '+labelText+'.</span>');
	hasError = true;
}

If the field is not empty and also has a class of email, we want to validate that the email address is valid:

 else if($(this).hasClass('email')) {
	var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
	if(!emailReg.test(jQuery.trim($(this).val()))) {
		var labelText = $(this).prev('label').text();
		$(this).parent().append('<span class="error">You entered an invalid '+labelText+'.</span>');
		hasError = true;
	}
}

If there are no errors, then we want to replace the submit button with a loading image:

if(!hasError) {
$('form#contactForm li.buttons button').fadeOut('normal', function() {
	$(this).parent().append('<img src="/wp-content/themes/td-v3/images/template/loading.gif" alt="Loading…" height="31" width="31" />');
});

Note: You will need to update the source of the image to wherever you upload it in your theme.

Finally, let’s submit the form via an AJAX request, slide the form up, and show a thank you message:

var formInput = $(this).serialize();
$.post($(this).attr('action'),formInput, function(data){
	$('form#contactForm').slideUp("fast", function() {
		$(this).before('<p class="thanks"><strong>Thanks!</strong> Your email was successfully sent. I check my email all the time, so I should be in touch soon.</p>');
	});
});

Take a look at the entire script:

$(document).ready(function() {
	$('form#contactForm').submit(function() {
		$('form#contactForm .error').remove();
		var hasError = false;
		$('.requiredField').each(function() {
			if(jQuery.trim($(this).val()) == '') {
				var labelText = $(this).prev('label').text();
				$(this).parent().append('<span class="error">You forgot to enter your '+labelText+'.</span>');
				hasError = true;
			} else if($(this).hasClass('email')) {
				var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
				if(!emailReg.test(jQuery.trim($(this).val()))) {
					var labelText = $(this).prev('label').text();
					$(this).parent().append('<span class="error">You entered an invalid '+labelText+'.</span>');
					hasError = true;
				}
			}
		});
		if(!hasError) {
			$('form#contactForm li.buttons button').fadeOut('normal', function() {
				$(this).parent().append('<img src="/wp-content/themes/td-v3/images/template/loading.gif" alt="Loading…" height="31" width="31" />');
			});
			var formInput = $(this).serialize();
			$.post($(this).attr('action'),formInput, function(data){
				$('form#contactForm').slideUp("fast", function() {
					$(this).before('<p class="thanks"><strong>Thanks!</strong> Your email was successfully sent. I check my email all the time, so I should be in touch soon.</p>');
				});
			});
		}

		return false;

	});
});

Just include it in the head of your document after jQuery, and you are good to go:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/contact-form.js"></script>

Note: You may need to change the source depending upon where you upload the files in your theme.

Conclusion

View Demo Download Source Files

That’s it! Just upload the files and you’ve got your form. Since you’ve got the code right in front of you, it should be very easy to tweak and add on to. Enjoy!

This is definitely not me trying to tell you to code in a certain way; they are just some tips that I have found to become very useful for myself. I hope you enjoy, and feel free to share other tips.

It’s definitely nice that the plugin doesn’t throw an error, but I really don’t want that message displayed on my site. So what’s the solution? jQuery of course.

When the Tweet Comes Through

Here is the markup that is displayed on my site when a tweet comes through successfully:

<div id="twitterContainer">
	<a class="twitter-link" href="http://twitter.com/davist11/status/1200405534">
		I feel like I'm in an episode of Seinfeld right now.
	</a>
</div>

When the Tweet Doesn’t Come Through

This is what you end up with:

<div id="twitterContainer">
	No public Twitter messages.
</div>

The jQuery

My thinking is that I will check the contents of div#twitterContainer to see if it is No public Twitter messages. If it is, I think it would be useful to replace that text with a link to my Twitter account with a message telling people to follow me.

So first, let’s execute the jQuery code when the document is loaded:

$(document).ready(function() {

});

Next, we are going to check and see if the contents of div#twitterContainer is No public Twitter messages:

$(document).ready(function() {
	if(jQuery.trim($('div#twitterContainer').text()) == 'No public Twitter messages.') {

	}
});

Finally, let’s just replace this text with a link to my Twitter feed:

$(document).ready(function() {
	if(jQuery.trim($('div#twitterContainer').text()) == 'No public Twitter messages.') {
		$('div#twitterContainer').html('<a href="http://twitter.com/davist11" class="twitter-link">Follow Me on Twitter</a>');
	}
});

Why are Body Ids Useful?

Body ids can be useful for styling sections differently, displaying certain parts of a dynamic template, displaying current navigation states, and many other things.

A Simple Example

Let’s say that I want to have my font size be 14 pixels, except on the homepage. It would be as easy as this:

body { font-size: 14px; }
body#home { font-size: 12px; }

Pretty useful. By using body ids, we now have a unique hook for each section of the website.

Why not Body Classes?

I do utilize body classes as well. I typically use the body id to indicate the section, then other various items for the body classes.

For Example

For my own blog, I have some pages that I want to have a left gutter on it so that I can push images, quotes, etc. into the column. I also have another class that indicates when it is a blog article page. So, I can just continue to use multiple classes on the body to help me control the width and layout of the page.

Here is what the body element looks like on a blog article on my site:

<body id="blog" class="subpage leftGutter article">

The subpage class just indicates that it is not the homepage. Not completely necessary since I already have a specific id on the homepage, but it can sometimes become useful.

The leftGutter class is used to push the content area to the right and make it narrower. Then, I can pull elements into the left-hand gutter as well.

The article class is useful because some of the markup for the blog entry information is the same as the homepage and archive pages. Using this class, I can be more specific with my styles to change the way that these elements are displayed on the blog article page.

I always try and add classes and id attributes as high up in the tree as possible. This let’s me utilize descendant selectors in the CSS without having to add additional classes and ids lower down.

Setting the Body Id in Expression Engine

I want to have complete control over the body id, so I want to be able to have it set dynamically and also be able to set it statically.

So my thought behind this is that first, I want to check to see if the body id was set statically. When I say statically, I mean passing the variable in as an attribute on my embed statement. Next, I will then set the body id dynamically.

Setting the Id Statically

In order to make changes to the overall website structure simpler, I have a header template the sits in the includes template group. So in all of the other template groups, I embed the header on the page:

{embed="includes/header"}

Then, if for some reason I want to specifically pass in a body id, I can just change it to this:

{embed="includes/header" body_id="contact-us"}

So the first step in the header is to check to see if the embed:body_id variable is set:

<body
{if embed:body_id}
	id="{embed:body_id}"
{/if}
>

Note: Line wrapping added for readability.

Dynamically Setting the Id

If we are not statically setting the body id, we want to then do it dynamically. My thinking is that I will take advantage of Expression Engine’s URL segments to determine which section we are in.

Here is an example of URL segments using the following URL:

http://ee.trevordavis.net/index.php/about/me/education/

• Segment 1 = about
• Segment 2 = me
• Segment 3 = education

Then, we can reference each segment like so:

• Segment 1 = {segment_1}
• Segment 2 = {segment_2}
• Segment 3 = {segment_3}

So basically what we want to do is assign the body id the value of {segment_1} if it is not empty. So continuing on our example:

<body
{if embed:body_id}
	id="{embed:body_id}"
{if:elseif segment_1}
	id="{segment_1}"
{/if}
>

Note: Line wrapping added for readability.

But wait, what about the homepage? The homepage will have nothing for the value of {segment_1}, so we can just put in an else statement:

<body
{if embed:body_id}
	id="{embed:body_id}"
{if:elseif segment_1}
	id="{segment_1}"
{if:else}
	id="home"
{/if}
>

Note: Line wrapping added for readability.

Here is the line of code without any line wrapping:

<body{if embed:body_id} id="{embed:body_id}"{if:elseif segment_1} id="{segment_1}"{if:else} id="home"{/if}>

I created a demo Expression Engine site to test this functionality.

View Demo Site

Walking Through the Demo Site

Since we have body ids for each section and an id on each list item in the navigation, I have created the current state for the navigation with a few simple line of CSS:

body#home ul#primaryNav li#homeNav a,
body#about ul#primaryNav li#aboutNav a,
body#services ul#primaryNav li#servicesNav a,
body#contact-us ul#primaryNav li#contactNav a {
	background: #B3602D;
	border-top-color: #B3602D;
	color: #fff;
}

Note: Line wrapping added for readability.

I also want to show the sidebar on all of the subpages, so I just need 1 more conditional:

{if embed:body_id || segment_1}
	<div id="sidebar">
	</div>
{/if}

This is checking to see if {embed:body_id} or {segment_1} are not empty, and displaying the sidebar if one or both are set.

These are just a few examples of using a body id in Expression Engine, but the possibilities are endless.

One More Thing

Another thing that I was trying to figure out was how to create a variable that I could reuse in multiple embed files. So what I want to do is in my conditional statement, determine that the body id should be and assign it to a variable. Then, I want to be able to access that variable in the footer without have to use the same conditional statement.

Is this possible? I was messing around with the {assign_variable} tag, but that didn’t seem to do the job because it can only be used in the same template. Anyone know how to do this? I’m relatively new to Expression Engine, so I am still learning.

In my second article, Creating a “Filterable” Portfolio with jQuery, I take a look at creating a portfolio that can be filtered by category.

This tutorial was kind of inspired by the effect that I created on my company’s portfolio.

How will this effect my web site?

Yes, I am not going to be able to write articles as frequently on my blog, but I am still going to be posting some articles. I will also post a note each week discussing my weekly NETTUTS article.

I hope you all enjoy the articles.

Depending upon your configuration, WordPress will validate the comment form for required fields. In my configuration, I want to make sure that users fill in their name and email address If you submit my comment form without those, WordPress will perform server side validation.

But, do you really want users to see this error page? Wouldn’t it be so much better if we used to JavaScript to validate on the client side so that they never have to leave the form?

I think so. Before we get started, I created a sample of the WordPress comment form.

See Example Page

Creating the Markup

I have tweaked my markup somewhat from the default WordPress comment form, so you will need to make changes to account for your markup. Here is the markup for my form:

<form action="#" method="post" id="commentform">
	<p class="required">* Denotes Required Field</p>
	<ol class="forms">
		<li>
			<label for="author">Name <span class="required">*</span></label>
			<input type="text" class="requiredField" name="author" id="author" size="22" />
		</li>
		<li>
			<label for="email">E-Mail <span class="required">*</span></label>
			<input type="text"  class="requiredField" name="email" id="email" size="22" />
		</li>
		<li>
			<label for="url">Website</label>
			<input type="text" name="url" id="url" size="22" />
		</li>
		<li class="textarea">
			<label for="comment">Comments <span class="required">*</span></label>
			<textarea  class="requiredField" name="comment" id="comment" cols="100%" rows="10"></textarea>
		</li>
		<li class="subscribe-to-comments">
			<input type="checkbox" name="subscribe" id="subscribe" value="subscribe"  />
			<label for="subscribe">Notify me of followup comments via e-mail</label>
		</li>
		<li class="buttons">
			<button type="submit" name="submit" id="submit">Add Comment »</button>
		</li>
	</ol>
</form>

I don’t think there is much that I need to discuss about that markup; it is pretty standard. The only thing to mention is the class name of requiredField on the form fields that I want to be required. Note: I also removed the action on the form so that the sample form cannot really be submitted to the database.

The jQuery

I of course am going to show this example using jQuery, but you could create something comparable with any other JavaScript library or just with some plain old JavaScript.

Once the document is loaded, let’s start by adding a function for when the comment form is submitted:

$(document).ready(function() {
	$('form#commentform').submit(function() {
	…
	});
});

Next, we want to remove any errors if they are showing, and create a flag that will let us know if an error has occured:

$(document).ready(function() {
	$('form#commentform').submit(function() {
		$('form#commentform .error').remove();
		var hasError = false;
		…
	});
});

Ok, here is where we really start to do some coding. I want to take each form field that has a class of requiredField, check to see if it is empty, copy the name of the label (and remove the required asterisk), traverse to the parent list item, and append the error message. Here is where we will also set the hasError flag so that we know an error has occurred:

$(document).ready(function() {
	$('form#commentform').submit(function() {
		$('form#commentform .error').remove();
		var hasError = false;
		$('.requiredField').each(function() {
			if(jQuery.trim($(this).val()) == '') {
				var labelText = $(this).prev('label').text().replace(' *','');
				$(this).parent().append('<span class="error">'+labelText+' is a required field.</span>');
				hasError = true;
			}
		});
		…
	});
});

Finally, you want to check the hasError variable to determine whether or not you should submit the form to the server:

$(document).ready(function() {
	$('form#commentform').submit(function() {
		$('form#commentform .error').remove();
		var hasError = false;
		$('.requiredField').each(function() {
			if(jQuery.trim($(this).val()) == '') {
				var labelText = $(this).prev('label').text().replace(' *','');
				$(this).parent().append('<span class="error">'+labelText+' is a required field.</span>');
				hasError = true;
			}
		});
		if(hasError) {
			return false;
		}
	});
});

Note: The end of the script is slightly different on the example form because I did not want to actually submit the form.

Conclusion

Just another simple example of how we can improve the user experience by using jQuery. Like usual, there are jQuery plugins out there that can do the same thing, but I think it is important to understand how to do things yourself. Plus, that is only 17 lines of JavaScript compared to much, much more for a plugin.

Anyone have any ideas on how to improve the script?

Brian Talbot National Geographic

Brian started the night off by discussing the process of bringing the National Geographic Green Guide online. It was quite an undertaking since they were taking a print publication and creating a supporting website.

Usually, something gets lost in translation going from print to the web. So, they wanted to still have these interesting layouts and help tie in the site to the printed collateral. They also wanted to get the community involved in providing information and commentary.

I think a lot of the screenshots that he showed us are not in production yet, but they looked great. There were charts, information organization in a sensible manor, and nice simple layouts.

Jay Moore Thirsty Interactive

Next, Jay discussed his “Papa Bear, Mama Bear, & Baby Bear” approach to mood boards. The example he used was from his experience in building the mood boards for the AOL Red redesign.

Papa Bear Mood Board

This is the “safety” board. It’s comfortable because it was similar to the previous design. They wanted to show that they incorporated elements to meet the goals of the project.

Mama Bear Mood Board

With this board, they do not expect it to be chosen. It’s edgier and purposely a little bit too far over the top. The idea of this board is that it will help to generate thought and ideas.

Baby Bear Mood Board

This board is kind of the best of the Mama & Papa bear boards. It is that happy medium. It has the familiar feel of the Papa bear board, but that edginess that will help to cater to the teen audience.

Of course, the final decision was to use elements from each board.

The most interesting part of this talk was that real design elements were actually worked into the mood boards. I haven’t seen too many mood boards, but all of the ones I had seen were very abstract. This was a nice change.

Eric Lohman AKQA

Eric had the opportunity to help re-brand and redesign the NHL website. Before his company was involved, the NHL had no real brand; they had all of these different banners with different treatments of their logo. They helped to standardize the logo and provide a simple system for expanding it.

So AKQA developed mood boards, and the entire design concept was inspired by one image: black ice. This is where the dark concept came from. It really gives the site a sleek look, and it makes the large action shots really pop.

Another difficult task that they encountered was dealing with the teams logos. They were all odd shaped and nothing tied them all together. They decided to do some intense cropping to gain consistency between the logos.

Finally, Eric talked about adding more interactivity to the site. You can see game highlights, watch games live, and even look through an enormous photo gallery. The new NHL site is a tremendous design success.

Ari Kushimoto CaviarFrenchFries

Ari was tasked with developing 3 mood boards for an intranet that had a Web 2.0 feel (yuck, I hate saying that). Of course she had a tight deadline. This is where she found that her bookmarking service really paid off. All of that time she spent bookmarking cool sites and ideas really paid off and saved time.

She took screenshots, organized into different folders, and then got started on the mood boards. She setup a consistent grid for the boards, and this made it easier to swap things in and out.

There was some good discussion afterward about good tools that help to organize screenshots: LittleSnapper and Paparazzi

Rob Soulé Viget Labs

Rob talked about the Viget design process. The project begins by sending a couple of surveys to the client. The surveys ask some abstract questions like “What kind of car would your company be” and “What magazine(s) describe your company”. These surveys help the client to focus on their thoughts of their brand and help to give the designers a better idea of what the client is looking for.

Once a project is ready to be designed, a lead designer is assigned the project, and they sit down with 2 other designers. They discuss 3 directions that they want to go in and discuss elements that they want to include in the mood boards. While this is going on, the user experience designer is working on the wireframes.

One thing that I thought was really interesting was that they discuss specific elements to add to the mood boards. So for example, a submit button for a form, a headline, and the navigation. While sometimes they also do abstract mood boards, I think it seems more useful to real elements that you would see on a site.

Jason Garber Mixx

When Jason used to work at AOL, he was involved in creating Ficlets which is basically an online community for short story writers. It became popular relatively quickly, and they had a solid community. A few years later…Jason and the others who helped to create Ficlets no longer work at AOL, and suddenly, AOL decided they are going to shut down Ficlets.

It is not really clear what the reasoning is, basically AOL just sucks. Well, Jason and the others who created it didn’t want the site to go away. It was successful and had a solid community. So Jason and friends decided to basically recreate it.

This is quite an opportunity for anyone creating a website. They were able to examine the way that users were using Ficlets and found some ways to improve it. They are facing some tough decisions trying to determine what to do with past Ficlets’ stories and the community. Somehow, they need to transport the community from Ficlets to Ficly, which will be the new home starting on January 15th.

Conclusion

It was very interesting to hear about the process and experience of so many talented people. I think the format of the 5 minute presentation also helped to focus the discussion. All in all, it was a good time.

While it began strictly as a blogging platform, it has evolved into a pretty solid CMS, but there is one little thing that has been bugging me for a while now.

With the launch of my redesigned site, I was interested in using the WP-PageNavi plugin because I think it provides much better paging than the default WordPress previous/next.

The problem is that WordPress includes /category/ in the URL, and I hate it. For example, on my blog page, you can click the older entries link at the bottom of the content area, and you can see that the link points to here:

http://trevordavis.net/blog/page/2/

But, you will notice that you actually get redirected to:

http://trevordavis.net/category/blog/page/2/

I had to do this because /blog/page/2/ returned a 404 error. You can see this by going directly to the third page.

Some Suggested Fixes

I read through a couple of forum posts discussing the problem, but none of the fixes mentioned seemed to work.

The most discussed suggestion was to change the category base permalink to /., but that did not work for me. Surprisingly, some people said it worked for them. That was pretty bizarre to me, so I kept looking.

Another suggestion was to edit a core WordPress file, which I do not want to do.

Plugins to Fix the Problem?

I came across 3 plugins that were supposed to fix the problem, but none of them worked for me either.

• Top Level Categories
• Decategorizer
• Category Base Killer

My Idea

So I am not the greatest with regular expressions and htaccess and all that jazz, but my thinking is that I can use the Redirection plugin to use a pass-through to rewrite any link like this:

/blog/page/(*)/

To this:

/blog/page/$1/

Is that not possible? I could not get it to work. Does anyone know how to get something like this to work? WordPress team, why has this been a problem for so long?