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

Social Media by Luc Legay.

The social media movement has expanded the amount of people we can reach and connect with on a personal level. The new relationships and connections we create with people all over the world can have a profound effect on our personal and business growth. We learn about cultures and nations that we were, perhaps, previously ignorant of. None of this is a new concept, but what may be is how quickly you can destroy your business by using social media incorrectly.

Transparency is a Utopian Concept

Not too long ago, Michael Fortin wrote an article titled “Don’t Be Transparent, Be Authentic Instead.” That article is an important read for any social media wrangling business blogger.

That article is the tip of the iceberg in the concept of ‘transparency’ being too Utopian to work within the jaded confines of our society. Of course, true transparency is ideal. Many things about a perfect world are Unfortunately, as a group, most of the world isn’t ready or willing to accept true transparency without penalty.

When Transparency Fails

Let me give you a couple of examples of transparency failure we’ve seen.

Failure 1: We had a copywriter who was posting on Twitter about the work he was doing. He made several posts within a few hour period which were ugly complaints about a client and how ’stupid’ he felt that client was. We obviously considered this unacceptable and immediately removed him from our list of subcontractors, but think about this: If he was hoping to use Twitter to get more client work – how many potential clients just read that and thought… “I’m not going to risk being badmouthed on here, I’ll find someone else.” Everyone gets frustrated, but what if the client he was working on read that? Put it this way, if you wouldn’t say it to your client directly – don’t post it either.

Failure 2: We had a designer who was a day late returning her design phase work. When we contacted her, she said she had a family emergency the night before and was unable to send in her work because she wasn’t home. A quick check on her Facebook showed that she was actually out at a party that night and posted multiple times while drunk talking about how much she was drinking and even hinting at wanting to bring a man she met there home with her. Obviously, we relieved her of the design work, handed it to another designer who caught up on the time schedule, and never again worked with her. In this case, people are allowed to have a life, we understand that. But if you cannot get your work done and have to lie about why – it’s a problem. If you do not have enough class to not post details about your ‘wild nights’ to everyone on your social networks — that’s also a problem.

How We Monitor Social Media Conversations

My business has been around for over a decade and is very focused on client satisfaction and excellent treatment of our web design clients. We have a network of hundreds of copywriters, designers, and coders who work with us on projects. However, even with screening of those experts when they come on board with us – you don’t always know someone until you have observed them over a long period of time.

That’s why we monitor what they say online.

How do we do that? Well first we get as many of their social profiles as we can. Usually, we ask for a list of them. We’ve also found that most people won’t provide them all. We then Google search the usernames of the ones they have given us because most people use the same usernames over and over. We also monitor blogs, and check for listings of social networks on those.

We have a system set up to consolidate all their social media comments into one master feed. That master feed can then be browsed directly to see what they’re up to, but that’s a lot of things to read each day. What we do is take the master feed, run it through a filter that creates two sub-feeds based on certain things we think are important to monitor. The first sub-feed is created by running the master list through a keyword & synonym filter that pulls out words related to business – for instance, “client” “business” “work” etc… The second sub-feed has a filter that runs their posts through a check for foul language and words like “sex” “drugs” “drunk” etc… There are hundreds of words in each filter.

Seem a bit ‘big brother’? It probably is – but reputation and client treatment is very important to us.

Here’s the thing: If we can read it and you can lose work with us over it… how many POTENTIAL clients did you lose also?

7 Ways to Edit Yourself

We’re not suggesting you stop having a life and stop making mistakes. You can post about those things and it simply makes you a more interesting person to read about. Just use common sense:

1. If you wouldn’t say it to a client or boss – don’t say it where they can read it either.
2. If you wouldn’t say it to your grandmother – don’t say it on your public posts.
3. If you wouldn’t say it to police officer – don’t post it on your social networks. For that matter, don’t do it either.
4. If you plan to lie to your boss – don’t put the truth where they can see it.
5. If you plan to go out and get drunk and know you have a tendency to post while drunk – give your phone to a friend to keep for you.
6. Learn how to use privacy settings and understand how visible your posts are on different social networks.
7. If you want a place to vent – create a completely different identity for yourself to do that. Name no names in your posts, and make no connection to your other profiles or email addresses.

Consider it all part of Internet Etiquette. Social networks are great to hear more personal things about someone and we encourage people to share a bit of themselves online (using normal cautions etc..). In the long run, full transparency is too Utopian for our modern world to handle well. We’re still at a point in our societal growth that when someone seriously calls a client an idiot – they tend to get a bit upset about it.

~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.

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

Evan R., attending community college full-time and thinking of heading into a business major, has this to ask:

Q: “What is the best thing about being a business owner?”
A: “The best thing about being a business owner is that no one can fire me for wearing rude tee-shirts.”

Make sense please.

AND it’s also really nice that no one else can fire you either. Except yourself. But then, if you want to fire yourself, there are bigger problems going on.

Fine fine, I’ll get serious. The most awesome part of being a business owner is knowing that you created something that it lives or dies based solely on the strength you have to keep it alive. It’s entirely up to you to keep it afloat. If that kind of pressure doesn’t sound exciting … it’s not for you. But if it is something that sounds appealing, watching your business prosper, struggle, change, improve, etc… it’s like being a parent. A totally awesome, completely horrifying at times, experience.

~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

If you’ve never tried it, the challenge is to start a new business from scratch and make your first $1 in 30 days.

It’s in pre-season right now, meaning they’re just posting the preliminary info videos right now that will teach you what you need to do to get ready for the challenge and make it easier on yourself.

~Nicole

They’ve got a pretty nice incentive for anyone worried about the planet. First off, the designs are pretty nice, so no ugly badges to suffer with.

Second, the badges link off to a site called One Million Acts of Green, sponsored by Cisco, which tries to promote being green one act at a time.

Third, and pretty awesome of them to do, when the badges have reached 100,000 impression views – Six Apart (the people behind Vox and Typepad) will donate $1000 to The Climate Project, which is one of the best known green awareness projects online.

Aside from all that, there’s nothing on the badges about Six Apart or Typepad or Vox, they’re just images for green support and link off to non-Six Apart companies. Doesn’t strike me as very self-promoting at all for them to do, which is very cool.

You can grab your own badge off the list of green site badges.

~Nicole