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

The Site – Lou Riley Live

The current website is a blog which serves as a living record of the weight loss journey Lou is undertaking.

I asked Lou the typical pre-review questions, and here are his answers about his blog:

Q: What is your primary goal for this site?
A: My primary goal is to create a movement in the health and wellness industry based on my personal journey as captured on video. So I guess I am building the “Lou Riley Live” brand. I want to draw people into my story and have them subscribe to my blog. Once I establish a “fan” base, I want to convert them into customers for the health and wellness product I am affiliated with.

Q: What do you feel is the biggest weakness of the site at this point?
A: Biggest weakness? A lack of visitors. I also need to improve the process for converting visitors to sales. So far in the videos, I haven’t sold anything. I think that creating this “movement” will make selling easier as visitors will be able to connect with me and not a product. I like the design, but I think some color adjustments can make it better.

Overall, it looks like the goal is going to be to solidify the Lou Riley brand and to bring in more new and repeat visitors. Once he’s got those things, the sales will start coming.

Current State of Affairs

Let’s take a peek at the current Lou Riley Live site:

Lou Riley Live - Home

Sometimes a long screenshot of a website can really tell the story at a glance, and I think we’re seeing that here as well. We’ve got a really big white space in the main content area that’s throwing things off balance, but there are quite a few other things as well.

Let’s Talk Branding

The very first thing we need to talk about is how to make the Lou Riley brand so integral to this site that there is no mistaking what this site is and who it’s by. To do that we need to take two initial steps:

1. Focus on the brand.
2. Remove everything irrelevant.

Old Branding.

Start building the brand from the very beginning. Put your name at the top, and I’d love to see a photo up there too, something to really push who you are.

Be reachable. People may want to contact you – but more importantly, they want to know that they CAN if they want to.

Add Contact Page.

The second thing about branding, is emphasizing that this site is a video blog. People will go there to see videos. I see the pagination of the videos on the front page as a problem.

Video Pagination Problem

The videos stop there, and if I want to scroll through them, I use the navigation there. I have no incentive to keep scrolling down. BUT there’s a lot of stuff in the sidebar further down that I won’t see by stopping there! We need to do that in a different way that doesn’t leave a large empty space in the content area.

Removing The Excess

Let’s just talk about what to take out.

Ditch the entire blogroll section for now.

Remove blogroll.

Remove the login box. You’re the only writer on the blog – and as far as I can tell there’s no members-only material, so this is just taking up space for now. Bookmark the link to login and write posts, no one else really needs this.

Remove login.

Take the Twitter out of your products – this should be in with your social bookmarking links.

Remove Twitter.

We also want to remove the duplicates. I see that video with the veggies 3 times on the front page of the site. That makes people think there’s very little content – which isn’t true in your case. The recent videos in the sidebar should only show for internal pages (like when I’m on a single post page watching a single video) because then I don’t have to go back to the homepage to see what else you’ve done recently. The featured video should stick at the top, without repeating underneath itself on the homepage.

Remove duplicates.

Personal Product Recommendations

Right now you have two major product selling sections on your site. One in a box like ad section and one in a vertical format down the sidebar.

Drink Ads.

Nutrition Ads.

The nutrition ads are okay, they’re small and consolidated (once you remove Twitter you can add a 4th also). The drink ads are a bit of an issue though. They’re too separate, take up too much space, and have a big blank space to the right. Additionally, the first drink is the only one you can see doesn’t show up below the point where the videos stop and people quit scrolling.

I’d like to see you put those drink ads in a similar configuration to your nutrition ads.

Also – give us a reason to trust those products. Rename the sections to personalize it! Maybe instead of calling it ‘Sports Nutrition Products’ you can call it ‘Stuff Lou Is Eating – Certified by Lou to Not Taste Like Powdery Health Food.’

Ok, so maybe you won’t go that far, but we’ll trust your products more if they’re personal recommendations. People who want to lose weight often try to copy a process that was successful for someone else. If you tell them what you recommend – they’ll trust it more (even if you’re not actually using it – although it’s best if you are).

Build Your Fan Base

One of the biggest parts of building a brand is getting people to recognize it through exposure. To do that, you need to build a following.

Subscribe & Connect.

Your social networking and subscription buttons need to be way up at the top of your page so it’s always being pushed. And hey Lou – we connected on Facebook: You have no Facebook button anywhere on there!

One final note on subscriptions. I’m going to strongly suggest pushing email subscriptions to your blog via Feedburner. I would go with an email subscription textbox signup right in the sidebar.

The reason is – your audience isn’t specifically high-tech users and many people out there are still uncomfortable with feed readers. Email, now that is familiar to most people. Since your site is something that can reach out to many many different kinds of people – I would go with the most universally known way to get updates: email – and push that hard.

Prominent Navigation

I see that you’re using tags for navigation through your video posts. That’s fine – but they’re located too far down. We need to move stuff around on that sidebar to make sure that the primary site navigation is always located high enough that people don’t have to scroll to see it.

Tag Navigation.

Another note on tags — rename that section to not be called ‘tags.’ I know they’re tags, you know they’re tags, but an inexperienced web user doesn’t know they’re tags. Doesn’t know what they are really. Make it dead simple for people, something like: ‘Topics of the Videos’ and put a little text in there that says something like, ‘Click to see videos on this topic.’

Improve The Look

I really think your site could be better served by a different WordPress theme. I found one online called Videographer that I think you could tweak to really push your brand more. Simple is best, adding is easier than taking away.

The theme looks like this in its bare basics form:

Basic Videographer.

What I really like about this is the way the videos are organized to scroll down in a list that keeps the eye moving and the user scrolling. This allows your sidebar to grow a bit because there is still content in the main section.

The other reason I like this theme is because it is so minimal and open to tweaking.

Playing With Changes

Let me show you what I did in a bit of playing around with this new blank slate.

Lou Videographer.

I stole the picture for the header from Lou’s Facebook (great sketch image by the way), and threw it up on top. People like personality and a face to go with a name. Then the name, brand yourself by using a unique font and look for your name.

Don’t consider what I did in the header as a refined or complete — it’s more a sketch of what you could do.

I do think it’s important to add a tagline or quick summary of what this site is about in the header. Also, you’ll see that I’ve moved the social connect buttons up to the top header. This visually associates you with being reachable and real – that’s a good thing.

Now don’t get me wrong, I’m not saying the site needs to stay plain vanilla white and this minimal forever — add a fun background that doesn’t detract from the videos. Add flavor to it in small places, but even if you put out this design on without changing the background or colors: it would put more focus on what the site is about = You, and Your Journey.

However – if you’re really in love with your current theme: ditch the pagination so the page is filled with videos instead of broken down into little bits.

Getting Visitors

The site is doing pretty good on general tech tests. If you want to run your own on your site regularly to see how you are doing, check out Website Grader. I think the biggest thing is going to be promotion.

Digg and bookmark your videos. Maybe write a bit more text about your videos so the search engines have more text to parse for relevance. Keep up the networking. Write some articles on what you suggest to position yourself as an expert and submit them to online article submission sites like Ezine Articles and GoArticles. Make sure your videos are uploaded onto every single video site in existence that will take them and work on building community within those sites. In other words — you’re doing good, just keep trying to get the word out.

Last Thoughts

Lou… I love what you’re doing. I think you are a charismatic man on a mission, and a truly beautiful person for how strong you’re being through this journey of yours.

I think that many people out there will connect with you on so many levels. You could be a symbol of living hope to people who are struggling with the same problem, who have the same desires for a healthier life, and I sincerely hope you keep doing what you’re doing.

Heck, even if you never sell a dime worth of products – I hope you never stop giving the world the opportunity to share in your experiences.

I want you to always feel free to ask any technical web programming or design questions you may have, and I hope that you’ll come back by here from time to time and let us know how it’s going.

My best and most sincere wishes that you succeed in all ways.

~Nicole

Interested in a Site Analysis?

Would you like to have your site reviewed on Beyond Caffeine? Drop me a line and let me know all about it! Do you have a site that you think needs a redesign? Head over to my business site and get your free consultation.

I was contacted by a friend on Facebook, Mark Rones ( FB ) and asked to review his online costume store called Nothing But Costumes.

The Site – Nothing But Costumes

The current site is an online web store that sells a wide variety of costumes for all occasions.

I also asked Mark the same two typical pre-review questions, so that I could understand his business needs a bit.

Q: What is your primary goal for this site?
A: We are looking for an office, so we eventually want to be a Brick and Mortar. There is always like a .05-1% visitor to sales ratio. So getting more customers AND a better sales ratio is important.

Q: What do you feel is the biggest weakness of the site at this point?
A: NothingButCostumes.com Explodes in Sept-Oct and then falls off the cliff. I have thought about a face design yet my customers tell me how much they like the site.

So in a nutshell, we need to figure out how to get more visitors and improve sales conversion by looking at the existing problems with the site. Additionally, to offset the problem of lackluster sales for the rest of the non-Halloween time of year – we need to figure out how to make the site be more year-round.

Current State of Affairs

Let’s begin by taking a look at the current Nothing But Costumes (N.B.C.) store.

N.B.C. - Home

While Mark mentioned the design as a minor note – I think the design is a HUGE problem. At first glance the site is overwhelming, cluttered, and unfinished looking.

Image is important, and as a consumer I know I would be very hesitant to buy from a site that looks like it isn’t complete. Thoughts that would run through my head range from “Is this a reflection of how they do business?” to “Am I safe entering my credit card information here?”

Building visitor trust is essential when selling products online. They have to be willing to take a leap of faith that the site will keep their payment information safe, that they will actually get their product in the mail, and that the business will keep theit promise of providing it on time.

From a web design standpoint – this site isn’t finished, not by any stretch of the imagination. To that end, I’m not even going to address the visual design of this site because it doesn’t have one yet. I know this is a bit harsh, but I think an honest professional opinion is needed – if the customers are saying they like the design… frankly, they’re just trying to be nice.

I’m going to strongly suggest either heading over to Template Monster and buying a pre-made ZenCart template or think about getting a custom design for this site from me or anyone else.

That said, there’s plenty of functional aspects that can go wrong even with a great design – so I want to touch on several of those.

Rebrand To Be Year-Round

One of the elements that is a big problem for this site is the peak at Halloween time and lackluster site performance for the rest of the year.

First things first – remove the elements that scream Halloween.

Halloween Elements

Keeping Up With The News

Perhaps it’s only because my daughter, her dad, and I are all planning to go to the midnight opening of the new Harry Potter movie, but I started wondering whether or not they have Harry Potter costumes. I’m sure Mark knows this, but for anyone who isn’t aware – going to a midnight movie opening in costume is very common.

Showcase Trends

Turns out, there they are, buried waaay far down on the list. Look, see that? Transformers too! If you haven’t been to a movie theater recently, go to one. You don’t have to watch a movie if you don’t want to. Go look around inside a movie theater. See what posters are hanging up. That’s what ALL those movie-goers are seeing anytime they go to see a movie. It’s pre-selling, early branding, conditioning. I can promise you that Harry Potter posters have been hanging up for months at my theater and I’ve got a note on my desk reminding me to reserve midnight showing tickets. If you can, stay and check out a movie – watch the trailer previews. It’ll show you what will be soon hanging on the walls.

Keep an eye on TV people also. Did you know that Miley Cyrus started filming a new movie this summer? She’s talking about it all over the place, including @mileycyrus on Twitter. That news is sparking an even bigger interest in what is associated with her name — Hannah Montana. NothingButCostumes has Hannah Montana costumes, and they’ll probably be extra popular this year.

How about the news? Michael Jackson died recently. I’ll wager a guess there are quite a few people who will want to dress up as MJ for Halloween this year, but even more than that… some people may have wanted to get the costumes out of a nostalgic tendency. I’m not sure if the site sells those, but the idea is simple: Sales always spike after catastrophe and death. It’s the well known morbidity factor. Look at how the sales spiked for the Batman movies when Heath Ledger died.

The point I’m getting at is simple. If you know what’s happening now, just happened, and is happening soon – you can tailor the things showcased on your site to grab those hot buyers.

Know Your Competition

I headed over to Google and typed in the one keyword phrase that should bring in the most ‘ready-to-buy’ visitors for this site: “buy costumes”

The Competition

The very first site that popped up was BuyCostumes.com so I decided to check out the competition. That site is actually quite nice, although it does suffer from some clutter issues.

Since I just finished talking about keeping up with the news, I found it amusing that I landed on BuyCostumes.com and saw a showcase of all the hot new movies people might want costumes for front and center on the site.

Movie showcase

Keep an eye on the competition. They may catch something before you do. If they do, see it, jump on it. Don’t let them have an advantage over you. How else does your business compete with them? With a strong brand people remember, trust, and recommend.

Rebrand to Be Memorable

Every business wants their customers and visitors to remember their name. They want them to talk about how great their business is, and return to it later. Branding is very very important and developing a strong brand takes time, effort, and skill.

Logo Comparison

One thing to begin with is to have the primary site branding done professionally. The Nothing But Costumes site needs a stronger brand that has nothing to do with Halloween, and an image that can go on every single piece of marketing material it has.

Keep The Focus

On any business site, it is important to maintain the overall focus of that site. I see a couple of things on N.B.C. that I would suggest keeping out of any new design.

Your fortune is..

I have no idea why there is a daily horoscope front and center on this site. It needs to go. So does the animated rotation of costumes. If there are photos of costumes on the front of the site in the new look (which there should be) – the rotating carousel is unnecessary.

Linking Out

If a business store MUST link out to another site, it’s vital that offsite links open in a new window and are not given prominence over anything that is important to the business.

Don't hide the gems

Keep the focus on converting visitors to customers. People love specials and like to browse what’s ‘featured‘. This should be prominent, because those things are a huge lure to buyers. They should be a big focus. From a marketing standpoint, those things should also be things that are currently very hot right now.

A minor note. On the sidebar there is ‘Other Stuff We Sell’. For a site that says ‘Nothing But Costumes’ I think that’s going to have to go. It seems strange to go to a site that only sells costumes and find candle holder sets. The Mardi Gras masks? Can’t those just go in accessories – there are only 2 of them. I’m not sure why there are 2008 links there, but I don’t see those as necessary. Rarely does a shopper say.. hey, I want to go shop for something old. Just mix those in among all the rest and they’ll never know

Don’t Overwhelm

Online stores are usually a de-cluttering challenge. They have a lot to say, a lot to sell, and they want everyone to see it at once. For the visitor, however, with too much stuff crammed onto a page, their eye doesn’t know where to look.. so it goes everywhere. They’re overwhelmed. Watch someone using a store site they’ve never seen before. People need to be SHOWN where to look, and what to look at.

When the site is redesigned – that ENTIRE list of things down the center needs to go. Hand select a few items that are REALLY strong and have great selling potential based on current trends, and put those on the front page.

Break things into chunks for people. Pagination is where you break content apart on to separate pages that they move through using a numbering system. Any site that has 87 items on one page in the boys costume section needs pagination. Break that list up into no more than 12 items per page.

The drop down menus are distracting and overwhelming. They need to stop being dropdowns. The same content is listed on the left, and they should link only to the primary pages not show each sub-page as well.

Categories

If I mouse over categories, I get a list so long it makes the page scroll. If I mouse over Categories -> Licensed TV Movies … the list is twice as long as the categories list. That has become too huge to be manageable for a typical user.

I should be able to click on Categories at the top (no drop downs) and see a nice, neat, listing of the categories .. organized in the group I see on the left hand sidebar. I shouldn’t see a site-wide sitemap, which is currently the result.

Build Trust – Fix Errors

One of the easiest ways to make someone not comfortable buying on a website is to have lots of system errors popping up all over the place.

Keep the software updated and get help fixing it if needed.

Site Errors

Several of those links (Page 2, Page 4, and the Zen Cart Dev) contain unfinished content. One page with default text still in it. One empty page, and one with an error message. Just don’t worry about putting those things back in a new site, they’re not needed. The videos – which are a great idea to help people see costumes on live people – are wonderful, but could be on an attached blog.

Horizontal Scrolling

Horizontal scrolling isn’t good on any store. It indicates a code error in most cases unless someone is browsing with a teeny-screen resolution. In this case – it’s a code error.

Getting Visitors

Optimizing sites for search engines is a learning process, but there are a few major changes can be made easily and NOW.

The page title, meta description, and meta keywords are all way too long. It is very likely going to be seen as an attempt at keyword spamming by the search engines, and they penalize for it.

Title is 523 characters long = reduce to 70 or less.
Meta description is 1195 characters = reduce to 150 or less.
Meta keywords are 23 = reduce to 10 or so highly targeted keywords.

Make sure that on a redesign, alt text is added to all images and use correct, keyword rich, descriptions of those images. Currently 10 out of 14 images on the page don’t have alt text at all.

Big problem — there’s no WWW to non-WWW redirect set up for this site. This is probably causing a major problem.

Rather than repeat myself, I’ll direct everyone to read the previous site analysis I did on New Focal Media where I describe how a lack of redirect causes duplicate content penalties from Google. It also means splitting up of inbound links in the eyes of search engines. For instance, there are 812 links coming in to the non-WWW version of the site, and 1449 coming in to the WWW version of the site. Search engines are currently seeing those as two different sites, not one with a total of 2261 links pointing to it.

Get the word out! Put up a blog. Can’t put it any plainer than that. Make a blog on the domain, attach it and link to it from the main store, and use it to post videos and articles about costumes. Then use that blog to generate traffic for the site by listing it on social bookmarking sites and other social media sharing sites.

Last Thoughts

The site has some really great costumes and I think it could do really well if it’s given wings to fly. The business potential is strong and the customer base is out there. The site needs a serious redesign, a careful eye out watching for clutter issues, and some social promotion to get the word out. Mark, would love to have you back for another review in the future! Some before and afters would be awesome.

Interested in a Site Analysis?

Would you like to have your site reviewed on Beyond Caffeine? Drop me a line and let me know all about it! Do you have a site that you think needs a redesign? Head over to my business site and get your free consultation.

~Nicole

The Site – New Focal Media

The New Focal Media site currently has a black and white minimalist design, and operates as a business site with attached blog.

I asked Christopher a couple of questions in order to understand his interest in a site review:

Q: What is your primary goal for this site?
A: The primary goal for the current design was to create a clean, professional portfolio to point potential clients to so they can see some of our work.

Q: What do you feel is the biggest weakness of the site at this point?
A: The biggest weakness is a lack of visitors and no clear call to action to convert visitors to clients or potential clients.

After over 10 years of talking to clients about changes they may need to make – I can tell you that he’s definitely got the advantage of coming into it with a good understanding of the needs and the problem. The goal of the site is a good one, and one of the things that will make it hard to get potential clients from this site is the lack of an action call to get people moving toward being his client. I will address the lack of visitors, as well as some other problems throughout the review.

Current State of Affairs

Let’s start by taking a closer look at the current website design.

New Focal Media Original Homepage.

At first glance, the site is very minimal, which can be excellent. In this case, if you mouse over the large dim pictures, they use a Flash transition to become more clear and the wording darker.

Let’s take a look at this page visually, not functionally.

New Focal Media Homepage Visual Notes.

You can see that on the grid, the horizontal alignment is good, but vertically we’re seeing problems. The fact that the site has a huge chunk of white space below the design makes it look incomplete and unbalanced. This is only blatantly evident on high resolution monitors, but as low quality monitors are definitely growing less and less these days, building with a high resolution monitor in mind is important. With it in mind, not for it. You still want to put all your major content ‘above the fold’ so that it can be seen for any resolution of monitor immediately. However, keep in mind how your site looks on high resolution monitors as well.

The two options to make it more balanced are to either shift the design to vertically align itself based on screen size, or to add quality content to the bottom of the page area, or both. I’m suggesting both.

New Focal Medial - Functional Notes

Looking at the homepage, there are some functional changes that should be made. The link to the blog is not functional. I kid you not, it took me over half an hour to realize that was a link. I thought it was a tagline. The main navigation images should not be done in Flash. There is nothing those images are doing that cannot be done with backward compatible Javascript. While it is possible to make some partly accessible Flash movies, in this case, it’s not accessible.

In the new mobile world we live, using Flash as a main component of your site can be a business killer. Many mobile devices (including the very popular iPhone) Do Not Support Flash.

Some people think that since they can view things like YouTube on their iPhone that they must be supporting Flash – but that’s not how it works. YouTube (and many other major sites) actually do a device detection and if you’re visiting from an iPhone, they serve your videos to you in H.264 video streams – not Flash. Of course, the iPhone supports HDTV, but not Flash. In fact, the only mobile browser that’s supposed to support Flash correctly is the relative newcomer – Google Android.

So back to the homepage, the main menu names are too light. I understand that they’re supposed to be dim until you roll over them, but there is too little contrast for it to come close to good readability.

The Work Page

I’m going to skip now to the Work page, because I’m saving the About page for last (I have the most issues with that page).

New Focal Media - Work Page

This page isn’t bad from a design perspective. I would absolutely suggest putting those videos on a hosting service instead of serving them up as self-hosted Flash. There’s two reasons for this. The first one is what I already discussed about the problems with Flash on mobile devices. The last thing you want is for people to go check out your work and see a blank page or a page full of errors. Pop those videos up on YouTube and let YouTube handle converting them to a format anyone can read. The second reason to push them to a place like YouTube is that it tells people you are ‘up to date’ on hot trends. Businesses that push video to YouTube for marketing are a step ahead.

When you look at an interior page, you also see that the main navigation picture border just disappears and it should stand out more instead. People need a visual marker of the page they are on. Make it more obvious.

A final note on this page – the black bar at the top is missing on this page. Consistency is important.

The Contact Page

Moving on to the Contact page, I have some suggestions.

New Focal Media - Contact Page

The Contact page isn’t terrible, but needs a few tweaks. Vertically the page has more space between the bottom of the logo and the start of the content than all the other pages. Move up the content to align with the rest of the pages, again – in minimal design, small details become huge. I already discussed the border need for the navigation which applies here as well.

Most important is the need for a major call to action on this page. If you’ve got someone to the Contact page, they’re -this- close to being a potential client. Give them that final push. The text on the left is small. Enlarge it and break down your contact information loud and clear in the space below it.

Make your labels on the contact form bold, and change that ‘Send’ text to say something that really pushes the user like ‘Get Your Free Consultation’. I feel the message box area is too wide and should be taller instead, but that’s a minor aspect.

The Blog

Once I realized the top black bar was a link to a blog, I decided to check out the blog to see how it looks.

New Focal Media - Blog

Having a blog attached to your business is great! You’re obviously keeping up with best business practices, but when you write about business on your blog – use your blog to promote your business! Put the business logo on the blog to start with. Use an empty space to put your own advertisement on your blog that will send people to your main site. Those two things will help convert readers into buyers. A minor suggestion would be to make your sidebar section headings bold as well.

The About Page

Ok, on to the page I have the most issues with. The About page.

New Focal Media - About

The About page is the most important page on this site, in my opinion. It’s where you get a chance to explain what you do and what you can do for your clients. This page does neither of those.

I have to admit, after a couple of hours of looking at this site to do the review, at the end of it I’m still not sure what New Focal Media DOES exactly. That’s a problem.

I get that they do something with businesses and video. Does New Focal Media consult with businesses about how they can produce more compelling video? Do they arrange employees and customers to give testimonials? Do they edit video to make it more personal? Do they actually shoot the video and organize the shoot with location and equipment? All of the above? I’m not sure.

If I don’t understand what this business does, I could be missing out on a service my business could really use and I wouldn’t know. That’s the site visitor perspective. A business site needs to convince people that they need a service they may or may not even know they needed.

One of the very annoying functional aspects on this page is the arrow to navigate between the two paragraphs. It’s only 2 paragraphs, just put them on one page.

An even better suggestion – the business has something to do with video right? Make a screencast or video! Put it on that page, and explain to me what the business does. Show me the process of working with New Focal Media. Tell me how awesome they are and exactly why my business is never going to make it without them. Build a sense of NEED. Of course, host it on YouTube and let them handle the conversion

Suggestions For Change

So, let’s get to the final suggestions. I’m going to use the About page as the example for changes to the site.

NFM About Page BEFORE

NFM About Page AFTER

[ NOTE: We already know that the site is aligned nicely on a horizontal line (vertical being the problem) so I've trimmed the white space on the sides just to have smaller screenshots. ]

Ok, so let’s talk about the changes I’m suggesting.

Sitewide Change Suggestions
Change 1: The black bar is useless as a blog link. Make it a call to action instead.
Change 2: Enhance the navigation images with some type of border.
Change 3: Make the current page navigation image darker and more obvious.
Change 4: Link to your blog by putting links to recent posts at the bottom (below the fold).
Change 5: I ditched the little email and location bit below the content in favor of a more prominent and bold listing of contact information at the bottom of the page.
Change 6: There are LinkedIn and Twitter links on the blog – show them here too, it reinforces that the business is ‘staying current’ with trends.
Change 7: Added basic (and expected) information at the base footer, like a quick link to the main page, contact page, copyright, etc..

About Page Specific
Change 1: Put the two paragraphs together.
Change 2: Copywriting basics – bold text.
Change 3: A video explaining what New Focal Media does!

I think those changes really make the site look more complete, and consistently push the visitor toward becoming a client.

How about taking it a step further?

NFM About Page COLOR

I love LOVE minimal designs, but one of the greatest misconceptions about minimal design is that it means black and white only Let’s try really making it pop! How about adding some color to indicate what page you’re on and to emphasize copy? You can even use different colors on different pages. A splash of color will not make this design cluttered. It’s not necessary, but can be fun to play around with to see if it works.

One last change, although it’s actually a pretty big suggestion. Change a couple of page names. ‘About Us’ would be better as ‘What We Do’ and ‘Our Work’ could be ‘The Portfolio’. If you change the names of pages, don’t forget to do some page redirection so the old pages redirect to the new ones. I also suggest adding in your basic sitemap and privacy policy or terms of service.

Visitors and Traffic

There are a variety of reasons this site could be suffering in the traffic department.

The first one involves coding. This site is suffering in the coding department. There are no code headings (H1, H2, etc..) to indicate page structure. Due to that, search engines are likely not reading the page with the elements of importance emphasized because nothing is given a hierarchy. Do some Google searching on HTML Headings and SEO.

Drop down the amount of meta keywords to around 10 or so. A lot of keywords can be seen as an attempt at keyword spam.

The second problem is the homepage Flash. The Flash is making the primary page links into movies with no alternate for search engines to understand. What does that mean? It means that the search engines are ignoring the Flash and only seeing this one page disconnected from the others. The search engines will index the other pages on the site as well, but not as part of the same site, as independent pages. The search engines are not understanding that the home page, about page, work page, and contact are all connected. Ditch the Flash for images that link to the correct pages and add some Javascript afterward to get that transition back – Google will start understanding the site better.

Help the search engines understand your site structure even more by adding a sitemap. Do a quick search online sitemap builders to do this.

The main site doesn’t have an RSS feed attached. Building a new feed just for this site isn’t necessary, there is already a blog. Grab the RSS code from the top of the blog page source and drop it into the main site so that people can subscribe to the articles from there as well.

There is not a permanent redirect set up for the WWW and non-WWW versions of the site. What that means is that instead of there being only one version of your site, there are technically 2: www.newfocalmedia.com and newfocalmedia.com – This is a BIG issue. Google penalizes sites for duplicate content, and having two versions of the same content is seen as exactly that. Redirect the WWW version to the non-WWW version. Do a Google search on how to set up a WWW redirect.

Tell people about it! Sign up on Technorati and list your site there. Get a del.icio.us account and start using it for bookmarking (your site and others, don’t just spam your links only). Submit all your blog articles on Digg – but always submit other peoples articles as well in between! Always tell your social media followers when you have an awesome post, but don’t forget to tell them about other things as well!

Last Thoughts

New Focal Media has a site that has great potential but is just in need of some adjustments to make it more consistent and pack a major punch in the sales department.

Interested In A Site Analysis?

Would you like to have your site reviewed on Beyond Caffeine? Drop me a line and let me know all about it! Do you have a site that you think needs a redesign? Head over to my business site and get your free consultation.

Fireworks.

There are many things that come to mind on the 4th of July. Things that remind of us being American. Things we’re thankful for. Things that need changing. Things we have yet to do.

Today, I want to celebrate on my blog by combining two of the things on that list: The ‘Freebie’ and the American small ‘Mom and Pop’ business.

I’m giving away 4 free web site and design critique and will write an article with my feedback.

Keep in mind – yes, you’d get a live link on the post. Yes, you’ll get a professional and experienced review of your site. BUT if you do not want to hear where your site needs improvement, and you do not do well with hearing criticism of your site — pass on this freebie.

If you want me to review your site and write about it, hop on over to the contact form. Make sure and tell me your name, give me an email address to contact you when if I pick yours to do and to let you know when it’s done, and (obviously) tell me the URL you want reviewed. Anything additional is up to you.

Have a great 4th of July!

~Nicole

I want something more in tune with the new main site look, but not exactly that. Might go with red, black, and white to match it though.

Time to get out the paintbrush.

~Nicole

In any event, I wanted to promote a special they have just for WordPress users and put the ad for that in my blog sidebar. Unfortunately, none of the graphics for the special were of a size to fit neatly into my sidebar, and they moved too fast (timed around 2-3 seconds before the text change). Thankfully, I was able to find a compromise between what I want in keeping my site accessible, and what I had as options from the premade HostGator advertising images for the WordPress special.

I decided that I could not possibly be the only person to have this problem, so here’s how I managed it.

The Problem

Since I avoid animated gifs like the plague normally, but was limited to being able to use HostGator images only, I needed to find an easy solution that did not involve me having the files they used to make it. I needed to be able to resize the animated gif to fit in my sidebar better, and while I was at it, I wanted to see if it was possible to slow down the animation speed to be more accessible.

The Solution

I started off doing it the easy way. The image had two views only where text was different, so I took a screenshot of each version of the graphic as it changed text, and cropped them down to just the ad image. I put both in Photoshop as two separate layers on a project, and followed these instructions on how to resize animated gifs from there. Voila! I have a resized gif that now changes in 5 second intervals instead.

As you can see from the above screen shots, this design is going to come with a few color themes, and you can easily add your own as well.

The top bar is a CSS drop-down menu. For those on browsers not supporting the CSS, clicking the links will instead toss people to another area to read the subcategories and subpages etc… I’m still in personal debate over how to handle that menu. I’m experiencing a small inner rebellion against using Javascript to make the menu work for IE, and would prefer to just have the design follow a rollback for IE like any of the other older browsers will see. In either case, the menu options will be available, just in different ways.

This is, in my opinion, the kind of theme for someone who needs structure in order to keep their blog minimal feeling without letting it get cluttered over time. I’m not going to add in places for people to drag a million widgets and fill up all the empty space – that defeats the purpose.

The theme is about keeping things simple.

I’ll post another update when I’ve got more to show.

~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

Photographer.

If a dice and paper cluttered table is familiar…
If you still remember what ‘feats’ are…
If half your bookshelf used to be gaming manuals…

Then maybe you should vote for the new Wired logo (or design one yourself!).

Recently, Wired published an truly excellent ode to the recently deceased Gary Gygax – the ultimate dungeon master of DnD.

If you were, or are, one of the many old school DnD gamers in the world… the article just might bring a tear to your eye. To that end, his passing has made such an impact on the guys over at Wired, that they have opened up a contest to re-design the Wired logo ‘Gygax-style’ with DnD flavor.

You can take a look at the current list of submitted logos and cast your vote right on the page.

My personal favorite is the one titled ‘Sorry I’m rolling that one again, it fell off the table’. Not only do I like the design alot, but I laughed reading that title because I can’t remember how many times those words came out of my mouth during my heavy DnD gaming days.

So, here’s a call to action for all you Wired readers out there, or DnD fans – go cast a vote.

~Nicole