Now certainly, I could have used one of the php bits to create thumbnails on the fly like TimThumb – but I really dislike using plugins for things I can do without them. She also gets totally confused using custom fields, so that’s out as well.

What I needed to do:
1. Determine a standard size for thumbnails and post images that would work well for her theme.
2. Create a post thumbnail using the first image attached to a post.
3. Display the post thumbnails on the blog main page listing of recent posts.
4. Create a standard image that would be displayed if she forgot to add any images to a post.

Since I’m a big fan of reusing code, I decided I wanted to use the built in sizing options of WordPress to get this done. I remembered recently reading an article with a chunk of code, so I found it again and reused that. The code process can be found on Web Developer Plus.

Setting The Image Sizes

Go to your WordPress backend and then Settings -> Media and configure the sizes that work well for your theme.

The thumbnail size is the most important. I set this one to 150px by 150px and selected the option to crop the thumbnails to that size. The reason I selected the crop is in the likely case the photo she’s using isn’t a perfect square, the image won’t look out of proportion when it’s sized down to 150×150.

Creating a Thumbnail From The First Image

This is where we get the code bit from Web Developer Plus and with a couple of minor changes end up with this:

<?php
// Get images attached to the post
$img = null;
$args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'numberposts' => -1,
'order' => 'ASC',
'post_status' => null,
'post_parent' => $post->ID
);
$attachments = get_posts($args);
if ($attachments) {
foreach ($attachments as $attachment) {
$img = wp_get_attachment_thumb_url( $attachment->ID );
break;
} ?>
<!-- Display the image in here -->
<?php }
?>

The code, at this point, doesn’t do much but it will in the next steps. I do want to stop and explain the terminology a bit. You’ll notice the use of the word ‘attachment’ in the code above. That’s how WordPress identifies the image associated with the post. Think of sending an email and attaching photos to it. The code finds the images attached to the post and selects the first one. It puts the information about that image in the $img variable we’ll use later.

It is important to note that this only works for attached photos because that is what WordPress it set up to handle. That means that if you host your photos elsewhere and just link to them – it’s not going to work. You have to actually upload them into WordPress using the media uploader.

Deciding Where To Put The Thumbnail Code

Since I want the thumbnails to show up on the main page of the site in the list of recent posts down the content section, I need to edit the index.php that displays the content. Your site may use the_content() but in this example the site is using the_excerpt(). It doesn’t really matter, so long as this stuff goes inside the loop but before the spot you want to show your photo.

<div class="thecontent">
<?php the_excerpt(); ?>
<span><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>" class="readon">Read the rest of '<?php the_title(); ?>'</a></span>
</div> <!-- end thecontent -->


I’m going to add the bit of code right above the call to the_excerpt() because that’s easiest at this point.

<div class="thecontent">
<!-- get the thumbnail -->

<?php
// Get images attached to the post
$img = null;
$args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'numberposts' => -1,
'order' => 'ASC',
'post_status' => null,
'post_parent' => $post->ID
);
$attachments = get_posts($args);
if ($attachments) {
foreach ($attachments as $attachment) {
$img = wp_get_attachment_thumb_url( $attachment->ID );
break;
} ?>
<!-- Display the image in here -->
<?php }
?>

<!-- end get the thumbnail -->
<?php the_excerpt(); ?>



Display the Thumbnails on the Main Page

Now the code is actually in the area it should be, but it’s still not going to show anything until we put something in place of the ‘<!– Display the image in here –>’ placeholder. What the code HAS done is created the $img variable we can call. So let’s get that working by putting in some code that will call the image.

<div class="thecontent">
<!-- get the thumbnail -->
<?php
//Get images attached to the post
$img = null;
$args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'numberposts' => -1,
'order' => 'ASC',
'post_status' => null,
'post_parent' => $post->ID
);
$attachments = get_posts($args);
if ($attachments) {
foreach ($attachments as $attachment) {
$img = wp_get_attachment_thumb_url( $attachment->ID );
break;
} ?>

<!-- ***** THE ACTUAL IMAGE ***** -->
<span class="the-thumbnail">
  <a href="<?php the_permalink(); ?>">
    <img src="<?php echo $img; ?>" />
  </a>
</span>
<!-- ***** END THE ACTUAL IMAGE ***** -->

<?php }
?>
<!-- end get the thumbnail -->
<?php the_excerpt(); ?>


What the above code has done is take the placeholder and replace it with a call to the image.

Then since this is for a front page thumbnail, we want people to go to the main article so we create a link around the image that points to the article.

Finally, for CSS styling I wrapped it in a span called the-thumbnail (you can wrap it in something other than a span, name the class anything you like, and style it any which way you can think of).

But What If… There’s No Image?

But wait… what if my client forgets to add an image to a post? That one article will look strange on the main page without an image when most of the others have one.

I want to create a fail-safe for dealing with an instance where she might forget to put in a photo for the post. What to do first is create some kind of dummy image (maybe just a large square with the site logo / branding or whatever you want). Upload that image somewhere.

<!-- ***** THE ACTUAL IMAGE ***** -->
 
<!-- # if post has an image # -->
<span class="the-thumbnail">
  <a href="<?php the_permalink(); ?>">
    <img src="<?php echo $img; ?>" />
  </a>
</span>
<!-- # END if post has an image # -->

<!-- # if post doesn't have an image -->
<?php } else { ?>
<span class="the-thumbnail">
<a href="<?php the_permalink(); ?>">
<img src="http://thedomain.com/fallback-thumb.jpg" />
</a>
</span>
<!-- # END if post doesn't have an image -->

<!-- ***** END THE ACTUAL IMAGE ***** -->

The most important line in that new section is <?php } else { ?> — that tells it to do something if there is no photo.

You’ll see that you can just as easily change the url of the image to be any image location you upload the fall-back image to.

Putting It All Together

So here’s what we came up with after that. I’ll highlight the sections of my template code so you can see where I put it inside the template. Remember, your index page may not use the_excerpt() – it may use the_content(). That’s perfectly ok so long as:

1. You put the code that generates the thumbnail somewhere inside the loop – the loop beginning looks like this: <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
2. You put the image display code where you want it to be.

So here’s the final code I used on my clients site:

<div class="thecontent">

<!-- get the thumbnail -->
<?php
//Get images attached to the post
$img = null;
$args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'numberposts' => -1,
'order' => 'ASC',
'post_status' => null,
'post_parent' => $post->ID
);
$attachments = get_posts($args);
if ($attachments) {
foreach ($attachments as $attachment) {
$img = wp_get_attachment_thumb_url( $attachment->ID );
break;
} ?>
<!-- ***** THE ACTUAL IMAGE ***** -->
 
<!-- # if post has an image # -->
<span class="the-thumbnail">
  <a href="<?php the_permalink(); ?>">
    <img src="<?php echo $img; ?>" />
  </a>
</span>
<!-- # END if post has an image # -->
 
<!-- # if post doesn't have an image -->
<?php } else { ?>
<span class="the-thumbnail">
<a href="<?php the_permalink(); ?>">
<img src="http://thedomain.com/fallback-thumb.jpg" />
</a>
</span>
<!-- # END if post doesn't have an image -->
 
<!-- ***** END THE ACTUAL IMAGE ***** -->
<?php }
?>
<!-- end get the thumbnail -->

<?php the_excerpt(); ?>

Oh, and remember — if you don’t like the size your thumbnails are coming out as — change it in Settings -> Media.

I hope you found that useful

~Nicole

Quit Using URL Shortener Services.

Why Not Just Use Some URL Shortening Service?

If you’e arriving at this article directly, head back to part one to read about why to make your own short urls.

Short URLs for WordPress

See Part 2 of this article series on making short WordPress URLs.

Short URLs for Expression Engine

Colly.com has a plugin that creates your own short urls in EE. Keep in mind that a new version of EE will be coming out in the relatively near future and I’m unaware if there will be compatibility issues.

Short URLs for Movable Type

This is less of a full solution and more of an explanation of an option available to create short links.

Short URLs for Joomla

This is a URL redirection extension for Joomla that creates shorter urls.

http://extensions.joomla.org/extensions/structure-&-navigation/url-redirection/7058/details

Short URLs for Drupal

A few resources for the Drupal folks out there that can help you learn methods of creating your own shorter urls.
1. Automatically turn a Drupal site into a TinyURL-like service.
2. You can use the option of your node number for the link. http://drupal.org/node/76112
3. Try out the Pathauto extension.

Any other suggestions or plugins I’m missing?

Stay tuned for the last installment, coming up on Tuesday, of this article series where I talk about ways you can create your own URL option using a secondary domain name, free server software, or both.

The series so far:

Part 1: I Don’t Trust Short URL’s
Part 2: Make Your Own Short URLs in WordPress
Part 3: This article
Part 4: Make Your Own Short URLs With Domains or Software

Quit Using URL Shortener Services.

Why Not Just Use Some URL Shortening Service?

If you’re arriving at this article directly, head back to part one to read about why to make your own short urls.

In a nutshell, I’ll summarize the whole article by saying that asking people to trust a cloaked link is not something you should ask anyone to do.

Methods of Shortening URLs

There are several different ways to handle URL shortening, and I’m going to list as many as I can think of here.

For WordPress Self-Install Users

If you use WordPress, you have it fairly easy. Remember back to the day you installed WordPress and you had those ‘ugly’ urls that were just your domain and a number? Did you realize those URLs still work? They do, nowadays they just redirect to whatever nice readable format you changed your permalinks to be (which I’m sure you did, riiighhht?).

In fact, you users have two options. Use a plugin or add the code yourself.

The Plugin Option:

A good one is la petite url which uses your own domain to make your short url. When you save a post it shows the short url in the sidebar of your administrative interface. You can then drag this into your post. If you’re comfortable editing your theme files, you can add a bit of code to your single and page files so that it shows up automatically. It’s available on the WordPress Plugin repository here: la petite url

The Template Option:

Just head into your template editor and add a link to your short url into your Single and Page files. This should work fine for most templates, although a highly customized one may have different page types that you will need to add this to separately.

For a simple text display of the link, add the following code where ever you want in your theme file:
<span>Short URL: <?php get_bloginfo('url'); ?>/?<?php the_ID(); ?></span>

If you want to use a textbox type of display where people can easily select the text, try a variation on something like this:
<span>Short URL: <input type="text" value="<?php get_bloginfo('url'); ?>/?<?php the_ID(); ?>" style="width:50%;"/></span>

For WordPress.com Users

As you know, you can’t install plugins or edit template code if you have a WordPress.com blog. You can, however, still make your links a bit shorter than they are now because your posts still have a numeric version available.

You would need to add (manually) text at the bottom of your posts to provide the short link to your visitors. The link would look like this:

http://yoursite.wordpress.com/?POSTID

But how do you find the POST ID for a WordPress.com blog? It’s not hard at all. I’m going to provide two screenshots to show you where to find it.

From the posts list screen:

Finding Post ID From List Screen.

From the editing screen:

Find Post ID While Editing.

Remember, for WordPress.com people, this means adding that at the bottom of your posts when you make them.

The series so far:

Part 1: I Don’t Trust Short URL’s
Part 2: This article
Part 3: Make Your Own Short URLs in EE, MT, Joomla and Drupal
Part 4: Make Your Own Short URLs With Domains or Software

The generic search is going to search everything, well not exactly since the WordPress search is fairly lousy without some plugin help, but it will work for category searching just fine. In fact, it’s only going to take one line of code to add the functionality to your search, if you’re using a basic theme like the WordPress Default. Custom themes might be more of an issue, so if you get stuck, paste the code that handles your search in the comments and I’ll -try- to help, no guarantees.

Ok, let’s do this with the WordPress Default theme.

The default theme search box should look like this in your sidebar:

The Search Box Before Category Search.

We need to add our line of code to give the users an option to search by categories. So I want you to head over to Appearance -> Editor which will pull up your template files. This will show you the right template files IF you are currently using the WordPress Default theme, if not, use the dropdown box in the right area of the page to switch to the WordPress Default theme.

On the right side of the page, click on the Search Form (searchform.php) file to open that one for editing. The code page you’re viewing inside should look like this:

WordPress Default Search Form Editing.

The code looks like this:
<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
<div><input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>


We’re going to add one line as follows:

<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
<div><input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
<?php wp_dropdown_categories('depth=0&orderby=name&hide_empty=1&show_option_all=Search Everything'); ?>
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>


So let’s break down what that line is doing:

<?php wp_dropdown_categories('depth=0&orderby=name&hide_empty=1&show_option_all=Search Everything'); ?>

Depth = 0 is setting it so that we’re seeing ALL categories, not just parent or child categories. In another article coming up I’ll show you how to be more specific about categories when dealing with parent/child categories.

Order By = Name is telling them to show in alphabetical order.

Hide Empty = 1 is making sure we don’t see categories that have no posts in them to be searched.

Show Option All = Search Everything is creating an option for them to search all the posts and should be the default.

What do we get?

Search By Category.

Showing Dropdown

Now it’s up to you to style it and make it look pretty

~Nicole

Summer Fields Original Section

The area text was just a suggestion about the different ways you could use the section, but Michael asked what javascript could actually be used to accomplish it. In order to make it work, I’m going to add 2 id elements to the existing code so I can more easily separate the gallery from anything that may come before or after it.

Original HTML

The original HTML looks like this in the sample template (obviously some filler text was used):

<div id="gallery">
<p class="entrytext"><img src="sunflower.jpg" style="width: 130px; height: 130px; float:right;" alt="placeholder" />Our Photo Gallery</p>
<ul>
<li><a href="#"><img src="sunflower.jpg" alt="placeholder" /></a></li>
<li><a href="#"><img src="sunflower.jpg" alt="placeholder" /></a></li>
<li><a href="#"><img src="sunflower.jpg" alt="placeholder" /></a></li>
<li><a href="#"><img src="sunflower.jpg" alt="placeholder" /></a></li>
</ul>
<p>This area can be a photo gallery, or perhaps you could replace the images with an amazon book list with affiliate links. If you want you could add a tad of javascript to this area and when you mouseover the small image it can show bigger in the image to the right.</p>
</div>


Move the Paragraph Out

To be honest, I don’t remember why it is that I had inline CSS in there, possibly because the entire thing was meant to be a placeholder. In any event, we can change that too while we’re here, but first I want to take out that bottom paragraph and put it OUTSIDE the closing div.

The reason I want to move the paragraph is that I’m going to be parsing all the links in the div with the gallery ID using javascript, and if there are links in the paragraph also, then they’ll try to trigger an image preview (which they don’t have).

Moving that paragraph out of the div could be problematic for some designs, and in those cases, it’s more efficient to add a new ID to the UL containing the image thumbnails. For this, it’s super simple to just fix the issue by moving the paragraph.

...
</ul>
</div>
<p>This area can be a photo gallery, or perhaps you could replace the images with an amazon book list with affiliate links. If you want you could add a tad of javascript to this area and when you mouseover the small image it can show bigger in the image to the right.</p>

From this point on we can totally ignore that paragraph because it’s not longer involved in what we’re doing.

Add New ID & Remove Inline Style

Now I want to add an ID (we’ll call it imagepreview) to the larger image on the right so that I can more easily target that image. At the same time, it gives us something to reference in CSS to get that inline CSS out of there.

After editing that section, we should have this (removed the inline CSS and added the imagepreview id):
<div id="gallery">
<p class="entrytext">Our Photo Gallery <img src="sunflower.jpg" alt="placeholder" id="imagepreview" /></p>
<ul>
...

Put Real Text In

Our final edit on this HTML should be in the form of filling in the list elements with real text and taking out the dummy text. An example should look like:

<li>
<a href="the-full-size-image-goes-here.jpg">
<img src="the-thumbnail-image-goes-here.jpg" alt="Some real alt text." />
</a>
</li>

You can add as many list items (li) as you need, it doesn’t matter.

Add Javascript

Ok, so now it’s all ready for some javascript. You can download the gallery.js gallery file here. Head up to the top of the page HTML and add the code to include our new javascript file:

<script type="text/javascript" src="gallery.js"></script>

Onclick Variation

Now keep in mind that Michael asked how to do the hover view of the images, but it would be just as simple to do on a click event. If you want to do an onclick instead, just edit the gallery.js file on lines 14-19 to look like this instead:
for ( var i=0; i < links.length; i++) {
links[i].onclick = function() {
return showPic(this);
}
links[i].onkeypress = links[i].onclick;
}

Adjust the CSS

Finally, to make sure we have better control of the styling, let's adjust a bit of the CSS file included with the template.

Find the CSS section that looks like this:
/* Photo Gallery Area */
div#gallery { border-top: 2px solid #fcf; padding-top: 15px;}
div#gallery img {width: 50px; height: 50px; padding: 2px; border:1px solid #fcf;}
div#gallery ul { list-style-type:none; margin:0; padding:0;}


We're going to change the 'div#gallery img' to be 'div#gallery ul li img' instead so that we're only controlling the gallery thumbnails with that CSS. Then we're going to add our new 'imagepreview' image to be controlled differently and add the old inline CSS on the line underneath.

/* Photo Gallery Area */
div#gallery { border-top: 2px solid #fcf; padding-top: 15px;}
div#gallery ul li img {width: 50px; height: 50px; padding: 2px; border:1px solid #fcf;}
div#gallery img#imagepreview {width: 130px; height: 130px; float:right;}
div#gallery ul { list-style-type:none; margin:0; padding:0;}

Using this Elsewhere

While the example is obviously using the Summer Fields template, this same code can be used in any site so long as you create a section that looks like this:

<div id="gallery">
<p><img src="someplaceholder.jpg" alt="placeholder" id="imagepreview" /></p>
<ul>
<li><a href="full.jpg"><img src="thumb.jpg" alt="the alt text." /></a></li>
</ul>
</div>

The only naming requirements of the javascript are that it's all in an element with an id=gallery (doesn't have to be a div) and that the big image has an id=imagepreview. Other than that, you should be fine to use it in various ways. The big image doesn't have to be in a 'P' element and the thumbnails don't have to be in a UL, so feel free to adjust as needed.

Questions?

Feel free to post them here.

~Nicole

Photographer.

The next generation is alive and well. They are blogging, emailing, carrying mobile phones, text messaging, listening on iPods, networking and chatting with friends through social apps and messenger programs, and playing complex massive multi-player games online.

They are about 5 years old.

They are your target customer if you are in new technology development.

While there are some out there who still balk at the idea of focusing advertising and development toward kids – they need a refresher class in basic business. Solidifying brand recognition is a lengthy process, and if kids grow up using something, they will continue to use it as adults.

More than that obvious statement of focusing on the next generation now… the question on the minds of people who prospect ideas in new development is more tricky. What will these kids expect as adults? Or more specifically… what will we do NOW to affect what their expectation becomes later?

Observation of the new generation client starts now. As the people who create new technology, we need to know what functionality appeals from the start.

Here are a few of my observations, developed from watching my own kids as well as their friends:

Computers are for gaming and internet access.

As long as the computer has a browser installed, and whatever computer games they play accessible – that’s all they need. Kids expect to be able to do everything, aside from gaming, through their browser. The sheer idea of having to install a program to do something else is, literally, enough to make them giggle. Developers, that means that if you aren’t building web applications, or working on the types of software that make these things possible… start now.

Massive multi-player gaming will continue to grow by leaps and bounds.

My 8 year old has been playing WoW for the last year, and I recently posed the idea of buying her a game that doesn’t have other people connected. That got a blank confused stare from her. Her hesitant response was something akin to ‘Are they fixing it soon?’ Make a mental note of that… if you can’t currently connect to people, they assume it’s broken and needs fixing. Kids are fine with family/friend gaming on with Wii or Playstation etc… but the idea of having no ability to play with someone else? Get real. Developers: Listen in on that one – kids expect to be socially connected through technology. Period.

Operating system doesn’t matter.

Again, the use of a computer has changed. As long as it can play their games and connect them using a browser – that’s all they need. My 5 year old son has been using a Ubuntu Linux laptop since he was 3 and can use both that and a Windows computer very proficiently. My 8 year old daughter can use both of those, plus a Mac. Developers: All operating systems have an equal chance in the market with this generation.

Browsers matter alot.

I have been conducting a mini experiment on my 5 year old sons use of browsers over the last year or so. On the Windows computer I installed Opera, Firefox, Safari (for Win), and IE. The same for the Linux one (without Safari and using multiple-IE’s to have IE on there). On each browser I set up the same bookmark quick links to get to his favorite sites. He eventually tried them all, and I would occasionally watch how he interacted with them. Occasionally a site would pop up saying it needed a particular plugin – this response ticked him off. His typical response was to either change the page immediately to something ‘not broken’ or close the browser and open a different one. If I watch him now – I can tell you this: On Windows, he uses Firefox. On Linux, he uses Opera (likely because a few Firefox plugins don’t have a version for Linux). However – he can, and has, used them all. The defining criteria in how he uses them is simple: If stuff breaks or errors often when he uses it, he stops using it. Common sense I think. Developers: If you make plugins, make them for all operating systems. If you make websites or web apps – use common cross-os supporting plugins to ensure they work.

Web apps for chat and email.

My daughter will sometimes chat with relatives and friends using various networks – but she never uses an installed chat program even though we have them. Again, it’s about using the browser for it. She uses Meebo.com because she logs into them all at once and can talk to everyone in the same screen WHILE she’s in another tab doing something else. For email, she has a Gmail account which she uses through the browser only – big surprise. Downloaded email is ridiculous to kids when they have gigs of space to keep their email online and get it anywhere. Developers: Keep improving online apps for communication – they’re gold.

Wireless everywhere.

We vacationed in a cabin at a state park – my daughter checked email via wireless and played WoW on a laptop, my son played his web games. We went to the coast and stayed in a condo with no wireless and no internet in the condo lobby, they complained like the biggest junkies in withdrawal and wanted to go home the entire week. For my sanity, we’re never going there again. Developers: More and better wireless devices and connectivity. Businesses: Please God have wireless.

Mobile is King.

I doubt I even have to explain this one – but anyone who has been living under a rock needs to get out and go walk around some kids so that you can see the rapid clicking on phones. Texting will probably become an Olympic speed sport. Taking video and pictures with a phone is the new artistry. Schools are giving in to having cell phones in class for emergencies as long as they are ‘off’ – but I doubt they stay that way. I’d take a guess that when my daughter was in kindergarten about 4 of the kids in a class of 20 or so had cell phones with them. That number has grown each year as she moves up in grades. Developers: Make everything you can do with your web applications in a browser doable via a cell phone or handheld browser. The world is mobile – develop for it.

Movies on the Computer.

If the TV’s in the house are being used, it’s pretty normal for either of my kids to grab a DVD, head to their respective computers, and pop it in. Bringing a way to play DVD’s on long trips is just as important as having a way for EACH of them to watch their own thing in the van on a drive. Someone got wise to that since I’ve seen more and more family vans with multiple independent DVD drop-down screens for watching 2 things at once. But where I REALLY think this is going to continue to grow is with being able to ‘rent and watch’ movies from the computer. Netflix.com is getting there with the ability to rent and watch on the computer – but it’s not a perfect system because it requires Windows. Beyond that… I don’t think it’s enough. I think the next generation of kids is going to grow up wanting to be able to watch a movie using any device that can connect – and that means it has to be device and OS independent… AKA: through a browser. Developers: This is the age of YouTube folks – work on perfecting being able to watch movies through the browser.

No Desktop Gadgets.

In fact, this goes for all things that auto-load on startup. This may surprise some of the folks who are hard at work creating all sorts of new gadgets for the desktop – but most kids I’ve watched use a computer shut them off. Why? I’ve asked and heard: ‘They make the computer slow.’ and ‘I don’t use them.’ and ‘I keep accidentally clicking on them.’ On Windows Vista, with the little default gadget bar – my daughter set it to not load at all. Why? They make the computer slow when she plays WoW – in fact, everything that loads on startup that’s not-essential is turned off. Again, as I pointed out before, kids use the computer to play games and use a browser. Why would kids want desktop widgets slowing the computer down when they have a Google homepage that has them, or Netvibes or Pageflakes? Developers: Work on improving portals that provide gadgets/widgets instead of something that is a glorified link on the desktop that takes up processing speed.

Kids Are Speed Demons.

They have even less patience for using websites and web apps than the average adult – which means it’s practically non-existent. If you make a website for kids – it had better be fast loading and processing. They will tolerate a slow loading site for their very favorite characters only, because the reward is significant. But if you aren’t Disney.com – you can’t afford to have a site as slow as they do. Keep in mind, this is what kids want now. These kids will grow up and still want it on an adult oriented site – learn how to speed up everything. Developers: Minify all your code. Don’t use tables for layout – they load slower. Optimize images to death. Reuse images. Don’t have music or movies play on startup – kids know how to push the play button and they will.

Kids Love Bright Centered Minimalism.

Adults tend to prefer monochromatic minimalism – kids like bright color. No big surprise there. But if you watch kids use a computer, you’ll notice that alot of times they tend to have tunnel vision and just look at the center of the page (though plenty of adults too also, I see it much more in kids whereas many adults start at the top left corner). Develop with that in mind. Take a look at PBSKids.com and you’ll see someone who has successfully done that. The design is minimal in content, yet colorful and very much center screen. Another element of that is that kids work extremely well with image representations. You ever seen a kid use a iPhone? It’s enough to make you dizzy! They combined the already amazing finger dexterity of kids (we’ve seen this for years with game controllers) and added picture representations and a minimalistic design. Developers: Take out the junk on your sites and apps on devices. Minimize. Use picture representations (but don’t forget to make it accessible!). Add TONS of bright color.

Free is No Longer an Option.

Kids nowadays are growing up with a million free to use web apps, games, research sites, etc.. Something being FREE is no longer a surprise – it’s expected. If something isn’t free, they find something that is. If you don’t think they can – just ask a kid to find you a website on a topic, and most often they’ll have Google loaded up faster than you can blink sorting through search results (btw – Google is centered, minimal, and often has a changing logo kids like). Business Developers: Find ways to use the ‘free’ business model (often supplemented with advertising or a premium service) or you will find yourself out in the cold with this generation.

Tech Savvy Input.

If people thought my generation was tech oriented – this one is VERY technologically savvy and can sniff out bugs and errors with their eyes shut. More than that – they EXPECT to be able to report bugs so they can be immediately fixed. My daughter knows how to report broken websites in Firefox, to report errors in the browser, and (even though I don’t) she knows how to file bug reports with the companies that run the games she plays. The flip side of that user input is that she also EXPECTS that those bug reports are easy to do, will be immediately appreciated and resolved. Developers: Prepare yourself for a whole generation that’s growing up on open-source, user driven technology. Plan ahead and get yourself ready with a bug reporting system, and a plan to implement fixes regularly.

In Total: Instant Gratification.

The current breed of technology developers mostly come from my generation – in which we were/are considered spoiled and selfish in our desire for things faster/better … the ‘I want it NOW’ generation. Because our generation went out and made technology to solve our need for speed – the new generation is even more focused on immediately being able to access what they want. That’s the technology they are growing up on.

Plan for it.

~Nicole

For those web developers who have been too busy to check their feed readers lately – here’s the short version of what’s been going on:

Microsoft let us know that they were planning to implement a ‘new’ method of … well, let’s just say they wanted to give the browser an identity crisis. The decision they came to was that IE8, although it would be much more standards compliant than IE7, wouldn’t act like IE8 by default. It was decided that IE8 would act like IE7 unless you specifically told it to act like IE8. This decision was backwards, illogical, potentially a huge issue for developers, and really just a waste of all those new ‘bells and whistles’ the IE8 is supposed to have in terms of how well it renders website code.

The way they had planned to make this work was to have developers add a meta tag to all pages that they wanted IE8 to actually read using IE8, instead of IE7. Aka: Modern browser sniffing comes into IE8.

These aren’t the only issues, but I think that Robert O’Callahan has already summed them up quite nicely for you to read, so I’ll point you his direction for a good summary. If you’d like more information, and responses to how we reacted to this first bit of news, please check out the links compiled over at Digital Web.

Anyway, that was a little over a month ago. Yesterday, we got a pleasant surprise.

Microsoft released notices on their press site and the IEBlog saying that they have reversed their decision.

To quote the IEBlog:

Now, IE8 will show pages requesting “Standards” mode in IE8′s Standards mode. Developers who want their pages shown using IE8′s “IE7 Standards mode” will need to request that explicitly (using the http header/meta tag approach described here).

I think that Eric Meyer sums it up nicely in his post where he indicates that not all issues with the meta tag are gone (which will still exist but not be required to make IE8 work as the new browser), but that this is a huge difference for the better.

There is also some curiosity about whether or not this change was made due to current legal issues affecting Microsoft, as in their press release the following is found:

“While we do not believe there are currently any legal requirements that would dictate which rendering mode must be chosen as the default for a given browser, this step clearly removes this question as a potential legal and regulatory issue,” said Brad Smith, Microsoft senior vice president and general counsel.

In any event, the new IE8 will now act like IE8 by default (what a concept!). It is a sound, logical decision. I do have some concern as to how they will respond if the beta comes out and there are many complaints (as there have been with past browser versions) from web developers who didn’t prepare themselves and their sites for the change. I hope that MS won’t be easily swayed later toward reversing this decision again going back to the previous one just to appease developers who were lazy in their preparation, because this change will help developers who work with modern technologies – and those developers are the ones making the real innovation these days.

~Nicole

I very quickly came to develop a theory that perhaps it’s because users don’t think they do anything – and in many cases they’re absolutely correct. There are a startling number of WordPress themes that don’t include a built in ability to show the excerpt anywhere, so it’s no wonder people see little use in typing up extra words that aren’t even shown. Much to my surprise, I realized that even the 2 themes that ship with WordPress (the default and the classic) don’t automatically display excerpts. Very odd.

In my way of thinking, the MAIN page on a typical blog should display posts with the following conditions applied (granted, I’ve created some VERY custom themes that you’d never guess are blog driven, so keep in mind that this is for the ‘typical blog’ style) :

1. Check to see if there is an excerpt, if so, show the excerpt only.
2. If no excerpt is present, check to see if there is a ‘more’ tag when showing the post and use a link to continue reading.
3. If no excerpt or more tag is found, then display the whole post.

So how do you do that with WordPress in your templates? It’s pretty easy.

I’ll give you instructions using the WordPress default template (the one based on Kubrick at the time of this writing).

1. In the Administration backend, go to Presentation -> Theme Editor
2. Select ‘WordPress default’ from the drop-down list, then click the select button.
3. On the right hand side, locate the file link that says ‘Main Index Template’ and click on it.

Now that you are in the correct section, locate the following piece of code:
<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>

You are going to replace that entire piece of code with the following:

<div class="entry">
<?php if (!empty($post->post_excerpt)) : ?>
<?php the_excerpt(); ?>
<?php else : ?>
<?php the_content('Read the rest of this entry &raquo;'); ?>
<?php endif; ?>
</div>

That will create the functionality to do exactly what I outlined above, however, if you’d like to also add a link to the post underneath the excerpt (if one exists) so that it looks similar to the way a ‘more’ tagged post will look, you can do that as well. To create a link to the post under the excerpt, simply go back to this line:

<?php the_excerpt(); ?>

And add a line similar to the following underneath that line:

<p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">Read the full post &raquo;</a></p>

That line is just normal WordPress post link, so you can modify that to suit your needs design needs.

The finish product code display various types of posts like this, depending on whether they have excerpts, more tags, or none:

Of course, this example uses the WordPress default template, but the same code can be used on most any template if you find the index.php or main index page and the spot where <?php the_content(); ?> is in the code.

Have fun!

~Nicole

ExtJS is one of the javascript libraries on a growing list emerging of late, but one thing really makes it stand out – the demos. For most web programmers, often the success or failure of a new language or library is directly related to how appealing its online demonstrations are.

As programmers, we’ve been exposed to more old and new languages, interpreters, libraries, standards sets, software, etc… than we can keep track of anymore. After a while, we tend to give anything new a quick ‘once over’ to see if it grabs our attention. Unfortunately, things that don’t really shine fall by the wayside, and things that glitter tend to do well. That doesn’t necessarily mean that the things that glitter are better than the others, but when it comes down to the few minutes we are willing to devote to analysis of a new language… it has to capture interest quickly. ExtJS 2.0 has some of that sparkle.

It comes down to site design in the end – we want the demos up front and prominent, and the ExtJS site provides that. Right at the top of the main page we have a nice big area that lets us immediately (and visually) understand what ExtJS is designed to do for us. It definitely makes an impact.

We see full out examples of a feed viewer app made with ExtJS, an offline Gears example, a task system made for AIR, a full image organizer, and a web desktop. Then they show us the components themselves: grids, trees, windows, tabs, layouts, forms, and some of the other things we absolutely expect to see when it comes to a new javascript library that is going to be competitive with what we are using. Best of all – in most of the examples we can quickly click a link that shows us the code behind the component.

Of course, we have seen many times before that all the great code in the world isn’t enough for a programmer if you don’t give them documentation or tutorials. A programmer really has no desire to sit down and comb through thousands of lines of code and try to figure out what the person who made it was doing – particularly not when there are competing languages that come with tutorials and full documentation. ExtJS wins again on this mark, having a nice big link that says ‘Learn’ right at the top of the site.

The Learning Section has exactly what most programmers are looking for – an overview, an intro tutorial, a migration guide from other libraries, FAQ, and interactive demos … along with all the regular full documentation and a community forum.

Overall, I think the site was designed with great usability and marketing in mind for the programmer who is the target audience. It’s quick and easy to find exactly what you need to help you decide if this is a library you are interested in. Does it necessarily mean it’s the best library out there? Who knows. Everyone has their preference, but the good construction of the information presented about the library gives ExtJS a fighting chance to shine along with some of the other current big players. Personally it has me interested enough to experiment with a bit to see if it’s going to work for me.

~Nicole

It was not intended to take quite so long, but ah well. Not only was it done in my sparse free time between client work, I had a few other personal things come up that took me out of commission for a bit (a death in the family, a major case of the flu I’m still getting over, lots of school stuff with the kids, etc..). In the end, I think it came out good for a first version of a re-design.

Part of the problem of designing for yourself, as a designer, is that it’s never perfect enough, and I have the feeling that this will be a case of always feeling the need to tweak and adjust and modify ad infinitum.

The old main site looked like this for the last couple of years:

The new version is much more reflective of my likes in color and design:

I’d say it came out to be a pretty major overhaul of the design.

Granted, it wasn’t without issues, which is why I’m calling it Version 1.0 of the new design. A few things glitched at the last minute, like the jQuery effects suddenly not working (I haven’t tried yet to see exactly what caused this – whether it was a new version change or if I just added a typo somewhere.), and having some lovely issues with Google reading my sitemap/robots files (or not reading them for that matter) so that my the 5-6 Page rank is suddenly coming up ‘not available’.

On a design scale, it’s going to need an alternate color version and I realize that. Not everyone is a fan of dark colors like I am (even if all my testing tools say I used enough contrast to make it readable). It’s a priority on my to-do list for the next version. In fact, in an ideal world I’d like to offer several swappable design themes that are entirely different. That should be easy enough considering that the new site design is one I converted to a WordPress theme. Yes, that does mean that I’m using WordPress as a content management system on my main site now. I figured that since I’ve been suggesting WordPress as a CMS for my clients, I might as well ‘practice what I preach’ so to speak.

In the end, this is what it has consisted of, and been built with, on a technical level:

• Photoshop for the design.
• Plain text hand-coding to XHTML.
• Converting the XHTML to a custom WordPress theme.
• Custom coding for child pages on WordPress.
• FeedList plugin for secondary content links from this blog.
• SearchEverything plugin for full search – it uses lots of WP pages.
• Contact form plugin from Green Beast with custom CSS mods.
• WordPress.com stats plugin for .. well, stats.
• Google XML Sitemap Generator plugin.
• Slimbox with Mootools for WP – Deactivated as a plugin and just pulling files from the plugin directory – it’s a long story.
• sIFR for special font headings.
• jQuery for effects – still needs tweaking.

For now, that’s what’s been involved in the CMS’ification of WordPress for this design. There is quite alot still on the agenda, and I’ll document as I go how I continue to evolve the site – just in case anyone aside from me finds it as fun and interesting.

~Nicole