The outside

With just 85 pages and a soft cover, the book was at first a slight disappointment, due to the fact I was not expecting such a thin book. The disappointment was short lived though, because a couple of hours into my train trip I was done and happily re-reading my favorite passages. The design of the book is very simple and very effective, as it makes the reader concentrate on its contents.

The inside

Once you start reading, you find the book is a joy to look at and read. You have to admire the excellent design, which in combination with a great paper quality guarantees a wonderful reading experience. But what makes it special is the way it was written–Jeremy Keith makes everything fun and super easy to understand. The author takes you on a quick trip from a brief history of markup to how you can use HTML5 today. I found myself nodding in acknowledgment several times and literally racing through pages. Simply put, this is one of those books that leaves you wanting more. After you are done, you just wish it had 50 extra pages.

Conclusion

I can recommend HTML5 for Web Designers to any of you who want to get familiar with HTML5. While it is not a book that will be your only resource on the topic, it will be a great introduction to a standard that is changing the World Wide Web. At $18 plus shipping it is not the cheapest book around, but worth it nevertheless. What I’d very much like to own is a PDF copy of the book, which is not (yet) available. This way, I would probably use it as a reference and not have to use Google instead.

Comment your code in a formal standard

Formatting comments in DocBlock standard offers 3 main advantages to random commenting:

• It makes comments readable in a standard method encouraging programmers to define and comment on aspects of the code that would normally be ignored
• It allows external document generators like phpDocumentor to create well formatted and easy to understand documentation
• It allows some IDEs to interpret variable types and other ambiguities in the loosely typed language and to provide improved code completion, type hinting and debugging

Here is an example of DocBlock comment:

/**
 * A sample function docblock
 * @global string document the fact that this function uses $_myvar
 * @staticvar integer $staticvar this is actually what is returned
 * @param string $param1 name to declare
 * @param string $param2 value of the name
 * @return integer
 */
function firstFunc($param1, $param2 = 'optional')
{
    static $staticvar = 7;
    global $_myvar;
    return $staticvar;
}

Commenting like this may take you some extra time, but it is worth it.

Don’t overuse global variables

… or better yet — try to keep them to the bare minimum if not avoiding them altogether :)

This is true for most (if not all) programming languages. Here’s what Wikipedia has to say on the subject:

They are usually considered bad practice precisely because of their nonlocality: a global variable can potentially be modified from anywhere, (unless they reside in protected memory) and any part of the program may depend on it. A global variable therefore has an unlimited potential for creating mutual dependencies, and adding mutual dependencies increases complexity.

Global variable on Wikipedia

In PHP, global variables are used a little differently than in other languages. They must be declared global inside the function if they are going to be used in that function. I guess it’s a kind of safety mechanism protecting you from unintentionally changing a global variable. But on the other hand if you omit the global declaration by mistake you could end up spending hours on debugging, wondering why the output is not what (you think) it should be. Sounds familliar?

Some of the alternatives to global variables are:

• a static class, probably implementing a Singleton pattern
• passing a variable as a parameter

Consider alternative syntax for control structures

When using PHP control structures (if, while, for, foreach, switch) inside your HTML template those curlly brackets can really be hard to follow. Take a look at this HTML template extract:

<div id="fooes">
<?php if ( have_foo() ) { ?>
	<h2>Here are my fooes</h2>
	<?php foreach ( $fooes as $myfoo ) { ?>
		<h3><?php echo $myfoo->title; ?></h3>
		<p class="foo-date">This foo was posted on <?php echo $myfoo->date; ?> by <?php echo $myfoo->author; ?></p>
		<?php if ( $myfoo->is_special ) { ?>
			<div class="special">
				<?php echo $myfoo->content; ?>
			</div>
		<?php } else { ?>
			<div class="not-so-special">
				<?php echo $myfoo->content; ?>
			</div>
		<?php } ?>
	<?php } ?>
<?php } else { ?>
	<h2>Sorry, no fooes available!</h2>
<?php } ?>
</div>

Even in a simple template, like our example here, it’s easy to get confused with those closing brackets. So let’s try to rewrite this using alternative syntax for control structures:

<div id="fooes">
<?php if ( have_foo() ) : ?>
	<h2>Here are my fooes</h2>
	<?php foreach ( $fooes as $myfoo ) : ?>
		<h3><?php echo $myfoo->title; ?></h3>
		<p class="foo-date">This foo was posted on <?php echo $myfoo->date; ?> by <?php echo $myfoo->author; ?></p>
		<?php if ( $myfoo->is_special ) : ?>
			<div class="special">
				<?php echo $myfoo->content; ?>
			</div>
		<?php else : ?>
			<div class="not-so-special">
				<?php echo $myfoo->content; ?>
			</div>
		<?php endif; ?>
	<?php endforeach; ?>
<?php else : ?>
	<h2>Sorry, no fooes available!</h2>
<?php endif; ?>
</div>

If you want a “real world” example take a look at the archive.php template from WordPress default theme.

Avoid using PHP short tag

Although there can be times when doing something like <?=$foo?> can seem like a convenient thing to do, you should resist the temptation and use <?php echo $foo; ?>.

There are several reasons why you should avoid using the PHP short tag, but here are the most important ones:

• On some shared hosts short tags are turned off so in case of  moving your site you might end up replacing all of your PHP opening tags
• Avoid the confusion with the XML declaration
• Short tags will not be supported in future PHP versions

Initialize your variables

Yes — PHP is loosely typed language and no — you don’t have to initalize your variables, but… Initializing variables (and sticking with it’s type from then on) is simply a good coding practice. This will make your code more easy to follow and less error-prone. Especially in larger functions/methods.

There is also a performace benefit since incrementing a initialized variable is much quicker then an uninitialized one.

From the Web Content Accessibility Guidelines:

Provide clear and consistent navigation mechanisms — orientation information, navigation bars, a site map, etc. — to increase the likelihood that a person will find what they are looking for at a site.

To start things off, here’s an example of a well done navigation system:

Navigation of thecroquis.com/process/.

The Croquis does a fine job of making things clear and simple. Their menu can be easily spotted and the menu items send a clear message, avoiding any confusion. My only remark is that they did not omit the link to the process page on the process page. Instead, they just camouflaged it (try clicking Learn).

You’ll agree this is all common sense, but many designers fail to provide really usable navigation systems. Without further ado, let’s head onto our do’s and don’ts list.

1. Do use the same navigational elements throughout the website

Use the same navigation elements in the same or similar position on all pages within the website. Studies show users ignore the navigation and scan for fresh content when landing on a new page. Therefore, consistency is super important for the user experience. Users should always be able to quickly learn the navigation and adapt to the interface.

Therefore, remember to keep the navigation simple and constant throughout the website to avoid any confusion. Your users will thank you. The navigation is not the part of the site you want to get too clever with.

2. Use clear names or icons for menu items

Always use intuitive, clear and easy to understand text or icons in menus. Keep users from guessing what buttons, text or icons mean. If they need to click on a menu item and load the page to find out what the page is about, you’re not doing it right. Users who do not understand a certain part of a web page will most probably ignore it and continue to scan the page, or leave.

Make things simple and intuitive. Leave complexity to family dynamics, relationships, and puzzles. The things you create should be easy to use, easy to learn, easy to find, and easy to adapt.

http://uxmag.com/design/guiding-principles-for-ux-designers

3. Highlight the current page

Usability guru Jakob Nielsen says you must tell your users where they can go, where they are and where they’ve been. This particular tip is about where the user is. This sort of feedback is crucial if you want to show your users where they are within your site.

Highlighting the current page is a simple trick with great benefits, but many fail to use it. Take a look at the menu bar of Smashing Magazine:

Navigation bar of Smashing Magazine site from the Coding page.

Does this navigation bar tell you where you are? One could assume the current page is the home page, but in fact I clicked the Coding item before taking the screenshot. Here’s how the current item could be highlighted to tell the user where he is:

My mockup of the Smashing Mag’s navigation with the highlighted item.

4. Provide a search form

Users often scan for the search form to help them find what they’re looking for. If they get lost or they think they will find what they’re looking for more quickly, they will use the search form.

Note that very small sites may not need the search feature, but any bigger site should have it.

Just this morning, I wanted to get more information on a feature my phone company introduced. I was very thankful the search form on their site was not only available in the header, but it worked just as I anticipated. It took me only one click, typing of a search query and hitting the enter key to get to the information I needed. Awesome. If the search form was not available at all, it would take me a whole lot of clicking through their rather complex navigation system. Or I would leave the site and tried a Google site-specific search (with site:).

Also remember to avoid text fields that don’t look like text fields and buttons that don’t look like buttons. Here’s an example how subtle gradients and shadows can make search elements much more usable:

Two search forms styled differently. The second one is easier to use as it is communicating more clearly.

5. Don’t link pages to themselves

Omit the link that points to the current page. This will only confuse your visitors and many will end up clicking on links that will lead them to the page they are on already.

This is another aspect which many, many sites could improve, including Smashing Magazine.

Derek Powazek wrote a great article for ALA which talks about this issue. Here’s a great quote from that article:

The other day I was driving on the freeway. I was on the 120, going north, dutifully following my Mapquest directions, which said to get off on 120, and then turn right on 120. Say what? I thought I was on the 120 already. Am I lost?

http://www.alistapart.com/articles/whereami

Do provide clear instructions for your users and don’t allow them to spin around in circles.

6. Don’t add mailto, Twitter or iTunes links or links to other sites to your main nav

This was my main inspiration for writing this article. I don’t know about you, but I am treading very carefully when I am clicking through menu items on practically any new website I visit. You often see these menu items before you: Blog, Portfolio, About, Contact. Before clicking on Contact, my eyes go all the way down to the left bottom corner of my Safari and check where the link is pointed to. If the link is a mailto one, which is often the case, I won’t click it. I was not expecting a mailto link, but a page with contact info.

Here’s a screenshot from the lovely looking website of Jack Osborne.

Navigation menu of http://jackosborne.co.uk/

I am expecting Contact leads to its own page, like Articles, Portfolio and About are. However, the contact link is a mailto link. A slight improvement would be to rename Contact into E-mail, but it is much better to make a Contact page or move the Contact link away from the others or style it differently.

Avoid grouping mailto, Twitter or iTunes links or links to other sites with the other menu items. At the very, very least, give the user some sort of a clue (like a tooltip) where he will end up. Think about what the user is expecting.

7. Don’t use lengthy animations or transition effects

Animations and transition effects can be appealing, if used sparingly. No-one wants to hover over a menu item and then wait for the animation to finish. Users want information and they want it instantly. Animations, if done well, are attractive, and you do want eye candy every now and then. But not at the expense of good usability. You want the users to focus on the content, not distract them.

Do you have some tips of your own to add to my list? I’d love to hear your thoughts.

One of the things that we needed throughout the site was a count of posts within various combinations of categories. Unfortunately, that kind of feature isn’t supported in WordPress out-of-the-box. We’ll get a little technical here so those of you who just want the final solution–feel free to fast forward to the end of the article and grab the code.

How we did it

WordPress is, as you probably know, a database driven platform, so first thing we need to do is to identify the right tables and understand their relationships in order to retrieve the correct data from them.

Basically our goal here is to identify terms that have taxonomy ‘category’ and filter the ones we’re interested in. For filtering only specific categories well need to join terms table. Then we have to find out which posts belong to those categories. That’s why we’ll join the wp_term_relationships table. And last but not least, we’ll throw posts table to the mix.

Let’s say we wanted to count all posts from “Advanced” and “Intermediate” categories. Assuming that table prefix is the default one, our SQL query should look something like:

SELECT	COUNT( DISTINCT cat_posts.ID ) AS post_count
FROM 	wp_term_taxonomy AS cat_term_taxonomy INNER JOIN wp_terms AS cat_terms ON
		cat_term_taxonomy.term_id = cat_terms.term_id
	INNER JOIN wp_term_relationships AS cat_term_relationships ON
		cat_term_taxonomy.term_taxonomy_id = cat_term_relationships.term_taxonomy_id
	INNER JOIN wp_posts AS cat_posts ON
		cat_term_relationships.object_id = cat_posts.ID
WHERE 	cat_posts.post_status = 'publish' AND
	cat_posts.post_type = 'post' AND
	cat_term_taxonomy.taxonomy = 'category' AND
	cat_terms.slug IN ('advanced', 'intermediate')

The name of the posts table is somewhat misleading because it contains not only posts but pages, post revisions, and whatnot… Hence the condition post_type = 'post'. Being picky like we are, we only want published posts so we expanded our condition with a little post_status = 'publish'.

Another thing I want to point out is the COUNT DISTINCT… A well know feature in WordPress is that a post can belong to any number of categories so without counting only distinct post IDs we could end up with a wrong (much bigger) count.

Now we’ll change that query a bit and wrap it in a PHP function. That will allow us to pass any number of category slugs.

function wdd_in_category_count($catslugs = '', $display = true) {
	global $wpdb;

	$post_count = 0;
	$slug_where = '';
	$catslugs_arr = split(',', $catslugs);

 	foreach ($catslugs_arr as $catslugkey => $catslug) {
		if ( $catslugkey > 0 ) {
			$slug_where .= ', ';
		 }

 		$slug_where .= "'" . trim($catslug) . "'";
	}

	$slug_where = "cat_terms.slug IN (" . $slug_where . ")";

	$sql =	"SELECT	COUNT( DISTINCT cat_posts.ID ) AS post_count " .
		"FROM 	" . $wpdb->term_taxonomy . " AS cat_term_taxonomy INNER JOIN " . $wpdb->terms . " AS cat_terms ON " .
				"cat_term_taxonomy.term_id = cat_terms.term_id " .
			"INNER JOIN " . $wpdb->term_relationships . " AS cat_term_relationships ON " .
				"cat_term_taxonomy.term_taxonomy_id = cat_term_relationships.term_taxonomy_id " .
			"INNER JOIN " . $wpdb->posts . " AS cat_posts ON " .
				"cat_term_relationships.object_id = cat_posts.ID " .
		"WHERE 	cat_posts.post_status = 'publish' AND " .
			"cat_posts.post_type = 'post' AND " .
			"cat_term_taxonomy.taxonomy = 'category' AND " .
			$slug_where;

	$post_count = $wpdb->get_var($sql);

	if ( $display ) {
		echo $post_count;
	} 

	return $post_count; 

}

Our little function here has a $catslugs input parameter that expects category slugs in a string separated with commas. We also used $wpdb variables instead of hard coding the table names, witch is always a good practice.

How can you use it

Download Multiple category post counter function for WordPress

First download the code, uncompress and paste it somewhere in your functions.php file. Then find the place in your template file where you want to display number of posts form certain categories and call the wdd_in_category_count() function.

For example, if you had a movie review blog and you wanted to display number of reviews for Horror and SF movies, put something like this:

<p>Total number of Horror and SF reviews: <?php wdd_in_category_count('sf, horror') ?>.</p>

And there you have it… That’s how you count sheep posts within multiple categories.

Please reply with your questions, comments and suggestions.

From day one, we also wanted to add a lot of features to the site. With v2, we’re finally introducing some of those new features. We’ll let you discover those, of which some are not obvious at first glance.

Design-wise, we’ve not gone far away from version one. What we hope we have done is spice things up a little bit, making the site more visually attractive. We’ve stuck to the familiar, neutral color scheme and the lovely Omnes typeface.

WebD&D is still running on WordPress, spiced with some custom made code to achieve exactly what we wanted. The most fun was writing some custom SQL queries for all tag-category combinations and getting variable number of posts (tips and blog) for any category combination. We plan to share the acquired knowledge and experience in future articles. So stay tuned.

We also used some of the sweet plugins available:

• WP Super Cache
• Yet Another Related Posts Plugin
• WP-PostRatings
• Twitter for WordPress
• All in One SEO Pack

This time around, as far as JavaScripting goes, we really took advantage of the excellent jQuery framework with some cool plugins. In all our laziness we used:

• TableSorter
• ColorBox

We don’t want to keep you away from browsing the site a second longer. We hope you enjoy WebD&D v2. Let us know what you think in the comments.

Here are 15 tips on how to tweet politely and avoid getting unfollowed.

1. Provide your name, avatar and a short bio

Always include your name and a short bio in your Twitter profile. People want to know who you are. Do not hide behind false names. Be honest if you expect honesty. Make sure to use your photo or a custom avatar so others can remember and recognize you.

2. Be social

Be social and interact. Make your tweets personal and let your followers get to know you. Kindly reply if someone asks you a question. Feel free to ask questions zourself and connect with people. Share interesting links with the community (but be sure to check they actually work). After all, Twitter is a social network.

3. Be moderate in self-plugging

There’s nothing wrong with the occasional self-plug, but don’t keep a Twitter account just to promote your work. Although many people use Twitter simply to publish site news, that is not what Twitter is about.

4. No auto direct messages, please

Auto direct messages are a big no-no, even if you are just being nice and saying hi to someone who has just started following you. What auto messages are really saying is “I don’t have the time to be really polite so I’ll just send and auto DM to everyone”. Also, no one is expecting a DM when they start following you.

5. Give credit

When you find a useful information somewhere, be it a tweet, a blog post or a picture you want to share, give credit by letting people know who it was that led you to your discovery. If you read a tweet you want to share with others, a simple retweet will do.

6. Don’t use twitter for chatting or personal conversation

Twitter is not an instant messenger. Not only it is not as effective as IM is, but others don’t really want to read through multiple tweets of your personal conversation. Instead of making private conversations public, use direct messages (or e-mail or an IM client).

7. Your post should not span through multiple tweets

A tweet should contain up to 140 characters. That’s 140, and not a character more. Don’t write messages that are more than one tweet long and continue your message in the next tweet. Move longer posts to appropriate mediums, like Posterous, Tumblr, or your blog.

8. Don’t tweet too much

Twitter is all about quick and easy messages. Try not to tweet too much or your followers might not want to read all what you have to say. For me, reading dozens of tweets and retweets a day from a single person is too much. Choose quality over quantity. If you suspect you might be tweeting too much, a good idea might be to ask your followers what they think.

9. Don’t flood

While there are people who are interested in reading dozens of your tweets one after the other, most are not. Flooding is not polite so try not to overdo it. If your followers have too much to read and explore, they might easily choose to ignore your tweets.

10. Follow, unfollow and block whoever you wish

On Twitter, you are free to follow and unfollow whoever you wish. You’re also free to block people from viewing your tweets. When someone follows you, you are not obligated to follow them back. When someone unfollows you, it does not mean you have to unfollow them. Unfollowing someone does not mean “I don’t like you”.

11. Do not follow everyone who follows you

Do not follow everyone who follows you, just for the sake of it. What good is it to follow thousands of people if you aren’t really following their tweets? Most users who follow thousands of people are considered to be spammers.

12. Use hashtags, but do not overuse them

Hashtags aren’t really effective if every word in a tweet is a hashtag. Use them sparingly to help people find information without making the message look spammy.

13. Do not spam

Never spam on Twitter and do not send people unwanted information. People will unfollow you if you keep asking them to retweet your posts, help you reach a certain number of followers or if you are retweeting contest tweets all of the time. Open a second Twitter account if you like the contests that require retweeting.

14. Provide enough information

When you tweet, make sure you provide enough information. Simply copy/pasting an URL is not enough. Add value to your tweets and make them easy to understand and scan.

15. Retweet in 140 characters

Sometimes a retweet will not fit inside the 140 chars limit once you add the @username. To make it fit, cut the last part of the message. If you think it will not make a lot of sense like that, change the text but try to keep it as similar to the original as possible. What you are basically doing is quoting someone else, so be fair.

A 12 month subscription to CushyCMS Pro, worth over $330, goes to Spain and Jose Vittone! Congratulations to Jose and thanks to Leigh from Stateless Systems.

Thanks to all the participants, stay tuned for more giveaways on WebD&D.

To enter our contest, all you need to do is:

1. Post a comment in this post, answering Why would a free 12 month CushyCMS Pro subscription be cool?
2. Tweet the CushyCMS giveaway

The giveaway is open until August 10, 2009. We’ll be chosing the lucky winner with a random generator on August 11 after which Leigh from Stateless Systems will be providing you with the licence. Best of luck to all of you.

More giveaways will follow so be sure to follow us on Twitter.

On our blog, we’ll be covering all web design and development related topics. Of course, we’re also open to any of the suggestions you may have. What would you want us to write about? How would you make our site better? What features would you like to see? As always, you are more than welcome to comment on our site and make your voice count.

We also have a giveaway ready for all our readers, so stay tuned and enter the competition soon.

Last, but not least, we’d like to thank our sponsor, WPWebHost, because it’s the sponsors that keep WebD&D alive.