My strategy with blog design is like this. I generally aim towards a completely customized blog design that will give my blog a distinct look and brand – but before I work towards that I almost always start with a more affordable option because I like to test to see whether the blog is going to work or not.

As a result I’ve always been on the look out for great themes and when Chris Pearson and Brian Clark started DIYthemes and released the Thesis theme I was keen to test it.

I used Thesis as the first theme on TwiTip and have been very happy with it.

I’m actually about to release a complete overhaul of the design of that blog (completely custom) but in the year or so since TwiTip’s release I’ve been more than satisfied with Thesis. It’s been easy to use, it’s set up really well by default for Search Engine Optimization and it’s been easy to add extra things in (like advertising spots etc).

I never did much with changing much of the default design on TwiTip but many bloggers use Thesis as the basis for quite impressive customizations. You wouldn’t know it to look at but blogs like Chris Brogan, CopyBlogger, Laughing Squid and Rae Hoffman all use Thesis as the basis for their blog design.

The new update for Thesis (you get all these updates for free if you’ve already got it) takes the version up to 1.6. It includes new navigation menus with drop down menus and the ability to change colors throughout the themes without having to get into the code.

I’m told also that Thesis 2.0 is also being worked on and promises to be a fantastic update.

PS: here’s a cool video that shows just some of what Thesis is like to use – in it Chris Pearson plays around with changing the default layout in a number of ways to shot you how you can begin to customize it.

Post from: Blog Tips at ProBlogger.

Thesis Theme for WordPress Upgrades to Version 1.6

Share This

The irony of this is that I’m a self confessed dud when it comes to blog design. These days I hire others to do custom designs for my blog – but of course this doesn’t come cheap.

A recent survey here on ProBlogger showed that 79% of readers here use free themes or design their blogs themselves – but what if you want something more unique and/or don’t have the ability to design a blog or tweak a free theme?

I had all these questions buzzing around in my head recently when I paid a visit to local design marketplace site 99designs. I didn’t expect anything to come out of the conversation but what did come out of it excited me because it could meet a need that I see many of our readers having.

What 99designs have put together is a way to run a competition to have a new WordPress blog design created for your blog for as little as $369.

Now before I go any further – $369 is out of many bloggers leagues – but it is certainly a cheaper option than hiring a designer for $2000-$3000 to do a custom job for you. It’s not going to be for everyone but is sure to be an attractive option for those looking for a mid priced design.

The process to run a competition is simple. Here’s how 99designs describe it:

1. Set your budget and requirements

Tell us your budget and what you want designed, and we will post it on 99designs.com

2. Designers will create designs just for you

Designers from around the world will compete to create the best looking design just for you. Most projects get over 20 different design concepts to choose from. Rate the designers you like, eliminate the ones you don’t like.

3. Choose your favorite design

Pick your favorite design as the winner. Show it off to your friends! The winning design is yours to keep forever.

4. We code and install your theme (optional extra)

Through our partner, Thinktank Media, we’ll have your new WordPress theme up and running on your blog in 5 working days. Our themes are coded on the Sandbox theme, so they’re compatible with both WordPress.org and WordPress.com blogs!

They also have a 100% money back guarantee if you run a competition and don’t find a design that you like.

Keep in mind that what you’re running the competition for is the ‘design’ – to have it coded and/or installed you either need to choose to pay extra for these options or do that part yourself.

I hope those of you looking to find a new design for your WordPress blog find this useful! Check it out here.

Post from: Blog Tips at ProBlogger.

Run a Competition to Find Your Next WordPress Blog Design

Share This

61% of our readers are using free themes in some way – either using a default theme that the blog came with (11%), downloading a free template (21%) or taking a free theme and tweaking it (29%).

18% of our readers are designing their blogs completely on their own and while the market for premium themes does seem to be growing only 13% of you have paid for a theme.

The lowest response of all was for people to pay for someone else to design a blog for them (8%). That brings the total of those paying for their design in some way to 21%.

Total Votes at the time of publishing these results: 2513

Post from: Blog Tips at ProBlogger.

79% of Bloggers Pay Nothing for their Blog Design

Share This

Each week two WordPress themes are featured and readers are asked to vote for their favorite. While obviously the site’s about selling WP themes it’s also kind of fun and will be interesting to see what themes win each week. The winner gets put into the theme store once the week’s results are in.

Nice idea and the first two themes up for your vote are pretty nice themes too.

Post from: Blog Tips at ProBlogger.

Theme Wars – Where WP Themes ‘Battle’

Share This

In my previous post, I talked about what I do when commissioning custom WordPress theme design. It left where the job started. In this post, I’ll talk about the steps that follow – working with the designer towards a complete and functional theme, reviewing it and finalizing the project.

Reviewing prototypes

The first thing the designer needs to send me are prototypes of the website. These are non-functional documents (images). The designer isn’t creating a real web page for that, but rather using a drawing tool. Prototyping is a creative process. It’s when the web designer’s creative abilities get to shine.

Let the designer design, don’t do a review by committee

If you were a graphics designer, you’d have probably built your theme yourself. You’re probably not, so you asked a professional designer to help. The problem is, people don’t know how to review what they get so we start asking for feedback from others. The wife, our friends and colleagues all have something to say. Then, we compile that ‘rejects list’ and send to the designer. What we’ve done right now is make sure the designer can’t do anything.

Graphics design is a creative process and produces subjective results. Any given design will always generate criticism. If our objective is to come up with a design that makes everyone happy, we’ll end up with a pale design that has no character and no impact. Our site will not be memorable and will have no branding.

My suggestion is – leave the creative work to the designer and concentrate my efforts on functionality.

For WPML, these are the issues I raised during the prototyping stage:

1. Make the top banner smaller and consume less page real estate.
2. Make the text background white so it’s easier to read.
3. Add a search box and language selector and integrate them in the top banner.
4. Make the screen shots in the features page larger.

Create a detailed theme checklist

As the designer is building your theme, take the time to compile a comprehensive checklist of items you’re going to check. When get the first delivery, it’s like a new toy. You’ll want to play with it and show it around. It will be very helpful if you have a checklist to go through for each delivery, so nothing gets left out.

Here is my list:

• All pages are HTML clean. To verify this, I review the theme in Firefox and use the HTML Validator extension. It displays the validation status of every page viewed so you can tell right away where there’s a problem.
• Pages look the same in Firefox and IE7. Even if all pages are 100% HTML valid, they might display differently in different browsers (due to different CSS defaults).
  Check the home page (if it’s a the blog’s index or if it’s a special page).
• Check samples of different templates (check for both enabled and disabled comments).
• Check a post with and without comments.
• Check a category page.
• Check a tag page.
• Check the search results page (and make sure that the search box is placed where it should).
• Sidebar supports widgets.
• Comments are threaded and properly coded (when I click on ‘reply to comment, the JS kicks in and the reply box is displayed under the comment).
• Use the site navigation and see that I can get to any page.

Just to illustrate what I mean by testing on different browsers, have a look at these two screen shots:

Menu problem on IE7 - incorrect Z order of floating menu

After correcting the Z-order - menus display correctly on IE7 and FF

These two shots were taken from a page that is 100% valid XHTML. No errors and no warnings. Still you can see that the navigation is completely broken on the top image and looks fine on the bottom one. This happened due to a weird IE7 bug which mixes z-order for elements if a page has more than one relative position blocks.

When the designer is ready with a new version the the theme, I review it in two stages. First on their server and then on my. If there are obvious errors, I like to see them immediately on their server before spending time uploading and installing it on my.

Logo graphics

An important part of the design is the logo. The logo that comes with the theme is great, but you also need to use it in other places. I use my logo graphics for business cards, banner ads and even in plugins. For this to work, you need to request the logo in a way that is independent of the rest of the theme design. I ask for the graphics as a high resolution transparent PNG (Portable Network Graphics).

Then, when the designer sends me the logo, I put it on different backgrounds and magnify. This way, any artifacts are easier to spot. For starters, try while, black and red. If your transparent logo shows strange edges, it means that the transparency isn’t right and it needs fixing.

My logo includes the graphics itself and some text. I ask to get them separately, so that I can use either one or the other. Also remember to take note of the font type used in your logo. You’ll need that when creating printed material with it.

Wrap up

A custom theme for your blog will give it an identity. Like any other design project, it has its risks. When defined and managed properly, this can be a fun thing to do and produce excellent results that will bring your blog to the next level.

I hope that these tips help. Tell us about your experience getting custom design work.

This post was written by Amir Helzer, founder of WPML, a mega-plugin that aims to turn WordPress into a fully featured multilingual content management system.

Post from: Blog Tips at ProBlogger.

Designing a Custom WordPress Theme – Working with a Designer [PART 2]

Share This

When you’re designing your blog all sorts of options are open to you – starting with a free theme (that you can later edit), through a premium customizable theme (like Thesis or Revolution2) and ending with a custom theme, created just for your site.

In January, Web Designer Matt Brett talked here about how to redesign a blog (and part 2). These posts covered the design goals, functionality and implementation. I’d like to talk about the process of working with the designer – the person who’s going to create your theme.

If you’re thinking about getting a custom theme, following these steps can make the process shorter, more productive and more enjoyable for both you and the designer.

1) State what you need and define the scope of the work

We’ll start with a list of everything that we need from this design:

A WordPress theme – sounds obvious, but you don’t want the designer to supply you just the PSD files, or a HTML file that you can turn into a theme yourself, right? Specify which version of WordPress you’re going to use it with.

Logo – a professionally designed logo can be expensive by itself, so make sure it’s included. When you ask for a logo, remember that you’ll also want to use it in printed material (like business cards or in magazines). This means asking for a high resolution version of your logo with transparent background.

Copyright – make sure it’s crystal clear that you have full copyright and exclusivity. This implies that the designer cannot use anything that violates the rights of others.

The discussion about copyright should clearly mention back-links. Web designers often give away free themes in exchange for credit links. If you want to link back to your designer’s site, that’s great, but you should decide that. You can instruct the designer to get your approval for any outgoing link placed in the theme.

Testing – ask the designers to supply a preview of your theme on their server. Normally, you can’t test their work on your live site. You might need to supply contents for this, or just do with the standard Lorem Ipsum.

2) WordPress theme basics – which elements to ask for

WordPress is evolving and theme design is more than just putting HTML in pages. You need to specify what kind of functionality you expect to get from your website.

List everything that you know you need. Here is what I told my designer when we started:

My design should include:

• Front page
• ‘Regular’ internal pages – for general purpose texts.
• ‘Features’ internal pages – these pages should have a unique template that lets me highlight special features.
• Posts (with threaded comments)
• Category pages
• Search

The design should have site-wide navigation including top tabs with drop-down menus, breadcrumbs trail navigation and context-dependent sidebar navigation. There should also be room reserved for the language switcher (inside the header).

The sidebar should be widget ready. Comments in posts and pages must support threading. Every page in the website must be HTML clean (pass HTML validation).

This list doesn’t tell the designer how I want the site to look, it just lists which things I need. Since she was doing a redesign for an existing site, I didn’t need to explain much about the contents for each page. If you’re getting a theme for a new site, there’s more explaining to do.

3) Prototypes come before the design

Even though you’ve chosen great designers, they’re not mind-readers. Ask the designer to provide prototypes before building any HTML or coding the theme. This way, you can approve the design concept before too much work has been put into it.

A prototype is normally delivered as an image (JPEG or PNG). During your work on the prototype, you need to take care of all the design issues. This includes the color scheme, look and feel, layout and content arrangement.

When you’ve accepted the prototype, know that this is how your site will appear. There’s not much room for design changes later on in the process. The designer’s job changes from design to implementation.

4) Payment and delivery terms

Last, but not least, before the project kicks off, you should agree on both payment and delivery terms.

Design work is not like building a railroad. You can’t pay per mile. However, there are some checkpoint on the way:

• Prototype / wireframe design
• Working draft
• Completed and polished design

Both you and the designer would feel better if payment is split per delivery. You can make an initial payment, release payment when each milestone is met and the final payment is left for when the work completes and is fully reviewed.

Ready to begin your custom theme design? Here’s a quick checklist of what we talked about:

1. Project overview
2. Detailed scope of work
3. Payment and delivery terms

In the next part of this post (tomorrow), we’ll talk about how to help the design go smoothly and make sure you’re getting everything you asked for.

This post was written by Amir Helzer, founder of WPML, a mega-plugin that aims to turn WordPress into a fully featured multilingual content management system.

Post from: Blog Tips at ProBlogger.

Designing a Custom WordPress Theme – Working with a Designer

Share This

I’ve been using Thesis on TwiTip since I started that blog back in November and have been very satisfied with it.

Chris has just launched version 1.5 of Thesis – a significant update upon the previous one. You can get a personal video tour of Thesis and many of the options and features that it has here.

Also see the Demo site for Thesis where you can see it in action.

Why I love Thesis?

I’m not a designer – I am hopeless on anything related to design.

For my two main blogs (ProBlogger and Digital Photography School) I’ve hired designers to come up with custom designs for my blogs. I intend to do this for TwiTip also at some point but while I’ve been building up the audience for that blog I wanted a clean and easy to use theme that would allow me to do a little customization.

Keep in mind I’m hopeless on design – so it had to be very easy to use. I also wanted something affordable to get me through the start up phase of the blog so that I could get it earning some money to help me pay for a custom design.

Thesis hit the mark for me. It’s easy to use, it’s a clean design in its default form and it has loads of customization options (see the video linked to above to see some of them). The other bonus of Thesis is that it’s well coded for SEO. TwiTip already ranks very well in Google, some of the credit for that is the coding of Thesis.

The other bonus with Thesis is the community of bloggers that has sprung up around it. They have a forum where there’s heaps of good information on how to use and customize Thesis.

Thesis costs $87 for a personal license or $164 for a developers license (where you can use it on as many blogs as you like).

If you’re in the market for a theme for your WordPress blog Thesis is a theme that you’ll want to consider.

Post from: Blog Tips at ProBlogger.

Thesis WordPress Theme Version 1.5 Launches!

Share This

If you’re a Thesis user (like me) you may have had some issues recently when upgrading to version 1.4. The issues affected a minority of Thesis users, and required reverting to an old version of Thesis for the sites to function while Chris Pearson troubleshot the issue – on his customer’s servers, free of charge. Chris was very responsive and issued a patch the same day (1.4.1), followed by another patch over the weekend (1.4.2). My hat’s off to Chris for providing what can only be called unparalleled customer support in a difficult situation.

This experience brings me to the larger issue – how do you ensure everything on your blog still works after an upgrade? This isn’t the first time I’ve had an issue upgrading – and I’m certainly not the first Wordpress user to experience hiccups during the upgrade process either. We all occasionally have issues when we upgrade plugins, install a new plugin or upgrade Wordpress itself.

Perhaps the most sinister are those issues where everything looks like it’s working fine. Sometimes after an upgrade I won’t even notice an issue until days later, and I’ll have to go back through my plugins one at a time to see what originally caused the problem.

Until recently, I checked for problems after an upgrade with the old blogger favorite “randomly click around and see if anything looks broken” strategy. The weakness of this strategy is the propensity to miss errors. I decided I needed a way to be more certain that everything went smoothly, and borrowed a couple concepts from my background in software engineering to help: Unit Tests and Regression Testing.

Unit Tests and Regression Testing

Units tests are simple, single function tests done to ensure every part of the software does what it is supposed to. If the test fails, you know exactly where the problem is and can fix it. Likewise, for my blog, each unit test checks for a specific piece of blog functionality.

In software development, a test might work at the time I first run it – but down the road I may change something that causes the test to fail. Repeating the tests whenever any change is made is called regression testing. In my years of software development, I’ve learned that a new change can cause software to react in ways we may not expect. Upgrading a plugin may cause another plugin to fail, or perhaps cause errors in your RSS subscriptions (which happened to me). For this reason, whenever I upgrade or install anything new to my blog, it is important I retest everything, every time – even if the change appears unrelated.

Blog Unit Tests

With that background, here is a handy checklist to review every time you install new plugins or themes, or upgrade any part of your blog. Some tests are especially relevant when installing a new theme, while some should be reviewed carefully in cases of plugin installs and upgrades. Since you won’t know exactly what is affected by each change, it’s important to go through the entire list every time. This list gives you specific checks you can run through in 15-30 minutes and know that your installation is successful. I use Wordpress – but this list should apply regardless of your blog or CMS platform.

Note: When running these tests, be sure to force a refresh and clear your browser cache before beginning so you are seeing the current version of your site. If this sounds like Greek to you, here’s a brief explanation of forcing refreshes.

1. Index page
   1. Title of the page. Is it what you want it to be? Are site name and tag line in the order you desire?
   2. Site name. Is it present? Is it clickable (if you want it to be)?
   3. Description/tag line. Is it present? Is it clickable (if you want it to be)?
   4. Header image. Does clicking on it return you to the home page? Do you want it to?
   5. Favicon. Is your favicon still present? This is a sinister one, as browsers sometimes cache these even if you are forcing a refresh.
   6. Excerpts, Thumbnails and Full Posts. Is the index showing excerpts or full posts the way you want it to? If applicable, are thumbnails and featured posts where they should be?
   7. Post Titles/Permalinks. Does clicking on a post title take you to the blog post?
   8. Comment links. Are the correct comment counts displayed? Does clicking the link take you to the appropriate comment form?
   9. Categories/Tags. Are category and tag links displayed? Do you want them to be?
   10. Meta description. View your page source. Look for <meta name=”description” content=”[...]” />. Is the value in the [...] what you expect it to be? See SEO Tips for Blogs for a detailed discussion of why this is important. You may, optionally, want to repeat this test on single post pages.
2. Index sidebar (s), navigation links and footer
   1. Widget enabled theme. Are all the widgets present?
   2. Widget order. Are the widgets in the order they should be?
   3. Links in widgets the sidebar. Does clicking a link take you where you expect it to? Appropriate pages, external sites, etc? Do the links open in a new window, or the current window?
   4. Site wide navigation (if applicable). Are all the links present? Are they in the order desired? Click a couple. Do the links work? Do the links open in a new window, or the current window?
3. Archive pages – tags, categories, sitemap, and date based
   
   1. Index page tests. Repeat all the same tests as the index page. Spot check one category, one tag and one month archive as applicable. If you have a sitemap, check that as well.
4. Single Post pages
   1. Title bar. Is the post title and site name in the order desired? Does it show everything you want? Post Title, Category, Site Name, Tag Line?
   2. Post Title. Is the post title present? Is it clickable (or not) depending on what you want?
   3. Comment links. Do you want a link to the comment form displayed near the post title? Are the correct comment counts displayed? Does clicking that link take you to the appropriate comment form?
   4. Next/Previous post links. Are they displayed? Before, after, or both? Are they nofollowed or dofollow based on your preference?
   5. Page layout. Are sidebars, navigation links and footer present? Repeat the checks described under #2 above, Index sidebar (s), navigation links and footer .
   6. Categories and tags. Are categories displayed (or hidden) as desired? How about tags? Are they clickable? Are they nofollow or follow based on your preference?
   7. Breadcrumbs. If you have breadcrumbs, are they present and appropriate for the navigation you desire?
   8. Comment and Trackbacks: run through the list below.
5. Comment and Trackbacks
   1. Comment form. Is your comment form present?
   2. Comments. Are comments displayed? Are the comment counts accurate? Do the gravatars work, if desired?
   3. Trackbacks. Is the trackback link present? Do you want it to be? Are your trackbacks listed?
   4. Test comment. Submit a test comment. Does your comment submit? Is it held in a moderation queue?
   5. Comment subscriptions. Subscribe to comments option
      1. Comment feed. Subscribe to a comment feed – do you see all the comments? When you submit/approve a new comment, does it update?
      2. Subscribe by email. If applicable, try subscribing by email and then submitting another comment – are you notified via email?
6. Regular pages
   1. Comments on pages. Do you have comments enabled? Do you want them to be? Trackbacks?
   2. Sidebars. Are sidebars present? Do you want them to be?
   3. Page hierarchy. Is the hierarchy displayed the way you want it to be? How about your permalink?
   4. Repeat all the tests for the single post pages.
7. Images and image links
   1. Images. Navigate to a page or blog post with images hosted on your blog. Do your images load? Check the alt text and title text on the images – are they what you want them to be?
   2. Larger image. Does clicking the image bring up the large version (if applicable)? Is the link nofollow or follow based on your preference?
8. RSS feed
   1. New post. Publish a test post – does it appear in your feed? (You are subscribed to your own feed, right?)
   2. RSS Link. Double check the RSS link – is it pointing to your feed?
9. Errors and Redirects
   1. 404 page. Type in an address that does not exist. Review the 404 page. Is it the way you want it to be?
   2. Redirects. Have you redirected posts or pages in the past? Spot check a few. A couple internal posts, a couple internal pages, and a couple external links.
10. Contact form (if applicable)
    1. Send a test email. Send yourself a test email to ensure your contact form still works. Do you receive the email? Are all the fields present?
    2. Confirmation. Do you see an appropriate confirmation shown to the user on the site after submission? If applicable, is a confirmation email sent to the submitter?

This is only a partial list – but it’s a great starting point. If you have specific plugins installed such as CommentLuv, or various search plugins, be sure to check all of them individually as well. If you have a plugin that generates your sitemap, and you upgrade it – that’s a good time to go and double check that your sitemap page still loads appropriately.

What do you think? What tips do you have for ensuring upgrades go smoothly?

This is a guest post from Sid Savara, who writes about personal development and personal productivity at SidSavara.com. If you’re struggling to get through everything in your RSS reader and inbox, you should definitely click through to learn How to Effectively Read 12,853 Articles, Forum Topics & Blog Posts a Week.

Post from: Blog Tips at ProBlogger.

How To Sleep Better After an Upgrade – Blog Unit Testing

Share This

When it came to developing the new Digital Photography School, the real challenge was brought to the table. How was I going to house three blogs under one roof? There were many routes I could take, but I narrowed it down to two pretty early on…

1. Use WordPress MU to host the different blogs under a single install. b5media is in the process of moving all their blogs to the MU platform, so it made sense to be ahead of the curve with DPS already being on it. Tying the blogs together on the homepage and cross-promoting in the sidebar would be easily handled by parsing feeds via SimplePie.

Including all three blogs in archive indexes, search results, etc. would have been made a little more tricky. There are several down-sides to going this route, though, which falls mostly on the administrator’s lap in the end. Adding extra steps to Darren’s daily routine is something I wanted to avoid, so I started weighing pros and cons.

2. The simpler option on all fronts, was to use a standalone install of WordPress and “fake” the different blogs by using a well structured category hierarchy. I knew this meant I was going to be writing a ridiculous amount of conditional statements in the templates, but it would ease the load on the content management end significantly.

Option 2 was the route I decided to take, which proved to be the right one in the end. Aside from producing lists of popular posts in each category (or in this case, for each blog), everything else was relatively easy to do.

Before I could start building out templates, the categories needed to be re-arranged and sorted accordingly under three main ones. “Cameras and Equipment”, along with “Post Production” already existed. So I merely had to create a new category for “Photography Tips and Tutorials”, then place all other categories under it. With that done, I now had the main three categories in place and started separating them on the front end usingconditional tags and custom loops with query_posts.

If This, Do That

Constructing the sidebar was quite a feat. It took a fair amount of planning and testing to ensure the correct content was being displayed for the page you were looking at. The idea, was to show the most popular and recent posts for the blog you’re reading at the top of the sidebar, followed by most recent posts from the other blogs. This became complicated when we started adding additional pages to each faux blog, along with the posts they already contained.

There’s a single template for the sidebar which houses the content for each blog. The conditional tags tell it which content to display depending on what post or page you’re reading. For content relating to the Photography Tips and Tutorials blog, the conditional statement looks like this…

<?php if(in_category(51) && is_single() || is_subcategory(51) && is_single() || is_page(2694) || is_page(2745) || is_page(2753)) { ?>

What that means in plain English, is this…

“If we’re in category 51 and reading a single post, or in a subcategory of 51 and reading a single post, or reading page 2694, or reading page 2745, or reading page 2753, show this content.”

Similar steps are taken for the other blogs, but obviously the category, post, and page IDs change.

Visually Identifying Content

One of the pros of using a single installation of WordPress and “faking” the blogs, was the ability to use the standard archive indexes. Categories, tags, authors, search results, etc. This was all well and good, but we needed a way to distinguish posts being from different blogs. To do this, I coloured the post title and corresponding links to match that of the blog the post belongs to. For example, if you were to look at

Darren’s archive index, you will notice that posts colours change as you scroll down the page. The same goes for search results, which assume a nearly identical layout.

This effect was easily accomplished using a conditional tag which assigned the appropriate class to the post’s container div depending on the category or subcategory it belongs to.

<div class=”post archive<?php if (in_category(51) || is_subcategory(51)) { echo ‘ tips’; } else if (in_category(10) || is_subcategory(10)) { echo ‘ cameras’; } else if (in_category(8) || is_subcategory(8)) { echo ‘ production’; } ?>”>

Presenting the Right Content

Inside each conditional statement is a custom loop which produces the appropriate content for the given area. Again, using the Photography Tips and Tutorials blog as an example, the sidebar list of recent posts i constructed using the following query_posts…

<?php $recent_tips = new WP_Query(’cat=51&showposts=5′); ?> <?php while ($recent_tips->have_posts()) : $recent_tips->the_post(); $more = 0; ?> This one is probably a little easier to decipher – show 5 posts from category 51.

Popular posts from each category was another issue all together. There’s no built-in function in WordPress for popular posts, which is still a little baffling. Over the years, there have been changes to how posts are stored in the database, and popular post plugins never seemed to be able to keep up. Doing a quick search will return several results for such plugins, but hardly any of them work with newer versions of WordPress. Of those that do work, none of them did what I needed – produce a list of popular posts for specified categories. That was until I found the brand new, Recently Popular plugin. At the time I stumbled upon it, the functionality I was after wasn’t quite there. But after leaving a comment with my request, the author released a new version within days adding exactly the functionality I desired. Perfect!

Making Content Management Easy

When it came to the handling the sidebar content, I wasn’t quite sure how I was going to approach it. In the past, I’ve done such things as creating a series of pages that make up the different bits of sidebar content. Utilizing the page title and content areas, along with some custom fields. But this was by no means an elegant solution. I was after a solution that was easily comprehensible and simple to use. That’s when I turned to widgets.

I’ve created custom widgets before, but their purpose was merely to give my client the ability to rearrange content form the WP-admin. This time, I wanted Darren to be able to edit the content of each widget from within WP-admin as well as being able to rearrange.

A quick search landed me on this tutorial from WooThemes (registration required to read), which was exactly what I needed. In no time, I had created a set of custom DPS widgets with customizable content.

Similarly, a couple new elements have been added to posts that needed an easy-to-use interface. I started demo’ing plugins that allowed for creating user interface elements that tied into custom fields. Unfortunately, most are now geared towards WordPress 2.7, and DPS is running 2.6.5 for the time being. I ended up finding another great tutorial which demonstrated how to create custom write panels in WordPress.

Be Dynamic

Using conditional tags and custom loops via query_posts, you can fairly easy create dynamic content which will help set your blog/site apart. A static sidebar with identical content on every page loses its impact quickly, while one that changes and relates to the content of the post you’re reading will not only catch the reader’s eye as it’s constantly changing, but also serves as a more valuable gateway to connect them to other related content.

Post from: Blog Tips at ProBlogger.

How to ReDesign a Blog [Part II]

Share This

When I was approached by Darren to take on the task of not only redesigning, but expanding his Digital Photography Schoolblog, I was thrilled and a little intimidated. I knew it was going to be a massive undertaking on all fronts. With DPS being one of Darren’s largest projects and with it having such a huge following, the pressure was on to deliver a top notch redesign.

Setting Our Course

Most projects I take on are personal blogs, or brand new sites. Neither of which require a whole lot of planning up front. DPS was different in that it is well established and chalk full of content. Before we settled on a timeline, I thoroughly assessed every step of the project and created an outline that spanned a total of 5 weeks.

• Phase 1 – Design (7 days)
• Phase 2 – XHTML/CSS Templates (3 days)
• Phase 3 – WordPress Development (7-10 days)
• Phase 4 – Forum Integration (3 days)
• Phase 5 – Finishing Touches (2 days)

The WordPress Development phase ended up taking a bit longer than anticipated, as we managed to sneak in some new features along the way. Which in turn cut down the amount of time allotted for the forum integration. At the end of it, I had to put in a bit of extra time to tidy up some display bugs (primarily with different versions of Internet Explorer, of course). But overall, we managed to stick pretty closely to the schedule and consider the launch of the new site a success.

It’s All About Structure

One of the most important and underappreciated steps in designing or redesigning any website, is coming up with a solid structure (or layout). Most people call this the wireframing stage, which has been part of my regular routine for years now. Spending a day or two to really flesh out just how you’re going to lay things out not only makes it easier for the client to get a clear picture of where things are headed, but also eases the amount of revisions in the design phase. It’s much easier to move things around and make significant changes when you’re dealing with flat boxes and placeholders.

Before the end of my second day on the project, I delivered a wireframe for the article layout which basically looks like a stripped down version of the final design. After a couple revisions, I took the wireframe and started playing with colours and styles (click image for enlarged view).

Design Direction

It’s always nice when a client gives you free reign to try new things when it comes to design. Darren really didn’t give me a lot of direction in this department, other than to see he wanted something that looked more professional and one of the main goals was to increase usability and readability.

I spent some time checking out the current trends via design showcases, and determined which routes I didn’t want to take. I also peaked around at other photography and camera equipment sites to see what related others in the same field were doing. There seemed to be a lot of stark contrast – typically, sites would be on a solid which background with one dominant colour. Similar to the previous version of DPS which was blue and white.

First on the not-to-do list, was “Don’t use white, anywhere.” With the exception highlights in some of the icons, I stuck to that. Using off-white and beige in place of #fff. It didn’t take long before I started working with some rich browns, and almost gold tones. While this normally wouldn’t be my first choice for a colour scheme, I felt with it being completely different from the previous design and out of the ordinary for this type of site, it might be just what we need for a fresh, new feel.

When Darren mentioned he wanted to split the site up into 3 separate blogs, I immediately thought of doing a unique dominant colour for each. Since “Photography Tips & Tutorials” was basically the catch-all blog and closely resembled what the previous version of DPS was, it made sense to go with blue. From there, I simply went through my colour pallete and chose some other colours that worked well with the rest of the site. Green was a no-brainer, and I wanted to use red for the “Post Production” blog. The problem there, was that it ended up being closer to pink than red, which Darren wasn’t thrilled about. When toned down to more closely match the blues and greens, we ended up with a very muddled red which is closer to brown, but still works (click image for enlarged view).

The rest of the aesthetics came together pretty easily. I decided there would be no high gloss or “wet floor” type effects. And instead opted for soft gradients which brought a warm feeling to the site that the stark contrast of the previous version lacked.

On Thursday Matt will continue to reflect upon the redesign of DPS. Stay tuned to ProBlogger’s RSS feed for the 2nd part.

Post from: Blog Tips at ProBlogger.

How to Redesign a Blog: Redesigning DPS

Share This

An important thing to remember as you develop your blog is to build an identity that distinguishes you and your site from the rest of the blogosphere. One tool that can help to accomplish this is the use of Gravatars.

Gravatar is the abbreviation of the phrase “Globally Recognized Avatar.” In short, it is a small image, normally a head shot, of the author or commenter. The Gravatar you chose will be tied to your email address; therefore any enabled site will automatically feature your image next to your comment.

The sense of sight is relied on more so than any other. In a text dominated world, it is difficult to quickly establish an identity with readers in the short time most people will spend on any page of your blog. Think of a newspaper in the editorial column where popular columnists will feature a small photo of themselves next to their articles. This allows the readers to quickly put a face on the writer.

Choose your Gravatar carefully. Don’t pick just any picture. Make use of an image that lends itself to your blog’s identity.

Let’s look at two writers over at Babeled.

The first is yours truly. I write under the pen name “Man Overboard.” This name was derived from my former job as a commercial fisherman and it is also a play on words that hints at my tendency to overreact to certain issues.

As you can see, the Gravatar I have chosen shows my ugly mug through a port hole on my old boat making a face that says “don’t take me too seriously.” This small image next to a comment or blog post immediately tells the reader more about me than a full page of text ever could. Above all, it does this while occupying only a very small amount of valuable space.

Next is our very own Cartoonist who goes by the name Keeks. Take one look at his Gravatar, a cartoon self-portrait, and you know everything you need to know about this guy and his obvious sense of humor.

Another reoccurring piece of advice you will commonly receive at ProBlogger is to frequently comment on other blogs. Most sites require you to enter your email and URL to comment. The Gravatar you chose will be tied to your email address, so any enabled site will recognize you and hence your Gravatar image will automatically appear next to your comment. Again, the Gravatar will help to identify you as a face with a personality (and more importantly a blog) of your own. As you make your way throughout the internet, the chances that your Gravatar becomes noticed increases with each comment.

Also, by placing the same picture on your profile at various social media outlets you will increase its visibility and effectiveness. Be sure to use the same profile image for Mixx, Stumble Upon, Reddit, Facebook, and any other social networking tool you employ. Each time you display the image it becomes product placement for your blogging identity.

Gravatars become even more important for multi-author blogs. At Babeled, I am one of many regular writers. My Gravatar, and that of my coauthors, is a useful tool that allows our readers to quickly distinguish between the many personalities that contribute to our various topics. As the comments develop, the Gravatars create the impression of watching a dialogue between two easily identified writers with different points of view.

If you don’t already, I encourage you to enable Gravatars on your site and start using them immediately. You will find this practice very helpful as you strive to separate yourself and your site from the endless sea of bloggers on the internet today.

~Man Overboard

Post from: Blog Tips at ProBlogger.

Use Gravatars to Add Personality to Your Blog

Share This

The new design includes an expansion from 1 blog to 3, a new portal/aggregation front page, Gravatars in comments and a lot more.

I won’t fully outline it here right now because I’ve asked the designer – Matt Brett (who has been a pleasure to work with) – if he’ll write a post for ProBlogger about it – but you can read my introduction to some of the changes on DPS in a post here.

Post from: Blog Tips at ProBlogger.

Digital Photography School just got a New Design

Share This

For the first 150 people to take up the offer there’s a 20% discount – IF you use this code in the signup process – 20D03977D0.

update: this has been extended beyond the first 150 people due to large demand. The discount runs out at the end of the day on Friday.

This means that the personal license is $69.60, the developer license (unlimited use of the theme on multiple blogs) is $131.20 and the developer upgrade (if you already have a personal license) is $61.60.

I’ve been using the Thesis theme over at TwiTip and while I’d previously giving it a pretty positive review I am now an even bigger fan. The configurability of this theme is really great. It allows you to set it up in many different formats and by default is configured well for SEO (I started getting search traffic within days).

I’m also pretty impressed by the way that Chris Pearson has been developing the theme over time (it’s up to version 1.3 and 1.4 is coming soon – you get all the upgrades for free) and by the forums that you get access to as a theme owner (I’ve found a few great ideas there).

This price is only available to those using this promotional code – 20D03977D0. Get your theme at the Thesis Page.

Post from: Blog Tips at ProBlogger.

Thesis WordPress Theme – 20% off Black Friday Sale Now On

Share This

If you’ve been to Twitip.com in the past couple of days, you’ve probably noticed that commenters have Twitter IDs in their posts:

This was something Darren thought up while we were preparing to move his server, and asked me to put it in place. Twitip runs on WordPress, which is easily extended through plugins. Fortunately, someone wrote a plugin to take care of most of what’s needed to do this.

The steps we’ll follow here are:

1. Get the plugin and activate it
2. Configure the plugin for the new Twitter ID field
3. Modify your theme to capture the information in your comment form
4. Modify your theme to print the Twitter ID in the displayed comments

The first thing you’ll need is the Extra Comment Fields plugin. I used Version 1.2 Beta if you want a direct download link.

There’s one PHP file in there that you’ll put in your wp-content/plugins/ directory. When you go back to your WordPress Admin page, you’ll see the Extra Comment Fields plugin in the Inactive Plugins section of your Plugins page (off to the right of your screen, between Settings and Users). Activate this plugin.

The Extra Comment Fields plugin is tricky in that there are several references to the field name, and they all have to match (including the case). I chose “twitter” which should be easy enough to remember.

From the WordPress Admin screen, navigate to Settings, then Extra Comment Fields. (If you don’t see Extra Comment Fields in the list of plugins, go back a step and make sure you activated it)

Type “twitter” into the text box and click “Add Field”. Your screen should look like this:

This step makes the necessary changes to the database to store the comment. Heed the warning you see, if you delete this field, it removes the column in the database.

Next, go into your theme directory, it’s in wp-content/themes/. Darren runs Thesis, so we’re looking at wp-content/themes/thesis. Open up comments.php. Find the spot where the comment form is displayed by looking for comment_author_url.

You’ll want to add a new comment field with the name of “twitter”. This will depend a lot on your theme, but cutting and pasting goes a long way here. The big change, though, is that WordPress doesn’t keep this value in your cookie, so you can’t pre-populate this in the value attribute (in simpler terms, people who have commented before will have their name, email, and URL filled in, but not the Twitter ID). In Thesis, you’ll have:

                        else { // Otherwise, give your name to the doorman
?>
                                        <p><input class="text_input" type="text" name="author" id="author" value="<?php echo $comment_author; ?
>" tabindex="1" /><label for="author"><?php _e('Name', 'thesis'); ?></label></p>

                                        <p><input class="text_input" type="text" name="email" id="email" value="<?php echo $comment_author_emai
l; ?>" tabindex="2" /><label for="email"><?php _e('E-mail', 'thesis'); ?></label></p>
                                        <p><input class="text_input" type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>"
 tabindex="3" /><label for="url"><?php _e('Website', 'thesis'); ?></label></p>

                                        <p><input class="text_input" type="text" name="twitter" id="twitter" value="" tabindex="4" /><label for
="twitter"><?php _e('Twitter id', 'thesis'); ?></label></p>
<?php

In the default theme, it’ll look like this:

<?php else : ?>

<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />

<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>

<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> />

<label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p>

<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
<label for="url"><small>Website</small></label></p>

<p><input type="text" name="twitter" id="twitter" size="22" tabindex="4" />
<label for="twitter"><small>Twitter ID</small></label></p>

<?php endif; ?>

At this point load your site in your browser to make sure everything looks OK.

The last step is to print the Twitter ID alongside the comments. This is also done in comments.php. The comments are printed out in a loop which varies from theme to theme. In Thesis, you’ll start right after:

<?php
thesis_hook_before_comment_meta();
thesis_comment_meta($comment_number);
thesis_hook_after_comment_meta();
?>

(It’s entirely possible there’s an easier way to do this in Thesis)

In the default theme, you’ll see the following, and you’ll want to start right before it.

                        <?php comment_text() ?>

Wherever you end up starting, insert the following code:

<?php if ($comment->extra_twitter) {
// Strip out the @ if they put it there because we're going to need to get rid of it for the url anyway
$extra_twitter = preg_replace("/^@/", "", $comment->extra_twitter);
$extra_twitter = htmlentities($extra_twitter); ?>
<a href="http://twitter.com/<?=$extra_twitter ?>">@<?=$extra_twitter?></a>

<?php } // extra_twitter ?>

The Extra Comment Fields plugin puts the data from the twitter field in a method of the $comment object called extra_twitter (and if you called your variable foo, it would be called extra_foo, and so forth). The above code checks to see if it’s been set (that is, someone submitted a Twitter ID), and if so, strips off any leading “@”. This allows people to enter their Twitter IDs both with and without the @. The code then calls the htmlentities function to strip out any funny stuff, and then print it out as a link. If you want to style the link with any CSS, change the HTML accordingly.

That’s it!

Sean Walberg is a network guy, freelance author, and systems administrator.

Post from: Blog Tips at ProBlogger.

How I added the Twitter ID field to comments on Twitip.com

Share This

I was excited by the quality of some of the blogs on that list – but it struck me as I surfed through the list that there were three frustrations that I had with quite a few of the blogs on the list (definitely not all of them, but enough for me to notice).

None of these problems are issues that just Australian bloggers or Marketing bloggers face – I see them every day around the web (although I did find it ironic that a list of ‘Marketing’ blogs would have some of these problems).

1. Hidden Subscription Options

I was on a mission to subscribe to great blogs – but one disappointing thing that I noticed was that quite a few of the bloggers didn’t make this easy for me simply because they ‘hid’ their subscription methods way down the page (and a couple didn’t even show them at all). Most browsers these days give those who use them the ability to subscribe by clicking the RSS icon in their address bar – but many web users don’t know that they can do this (or are using old browsers).

If one of your goals as a blogger is to grow your readership then one great way to capture first time readers is to get them to subscribe (whether that be to an RSS feed, an RSS to Email service or a newsletter. If you hide or obscure these options you’re not likely to get the conversions.

My own approach with getting subscribers is to place these subscription options prominently in a sidebar and then under posts on single post pages (usually below the fold). This means that whether a new reader is above or below the fold they are invited to subscribe.

Further Reading – 11 Ways to Get New RSS Subscribers for your Blog

2. No Way to Contact the Blogger

There were a number of blogs on the list that I was really impressed with – so much so that I wanted to contact the blogger and congratulate them on their blogs. The only problem was that on a couple of occasions I found it difficult to find any way to contact the blogger other than to leave a public comment.

I understand some bloggers desires to have privacy or to cut down the admin of their blogs by keeping themselves difficult to contact but in doing so you not only filter the loonies approaches but also legitimate opportunities, potential partnerships etc

Contact options don’t necessarily have to be giving out your email address – you could have a contact form, give Twitter details, have an IM option or give other social networking profiles (the key is to give ones that you actually check).

Further Reading – Why Your Blog’s Readers Should be Able to Contact You

3. No About Page

This one is probably more my personal preference and less essential than the first two points – but when I find a blog that I’m interested in one of the first things that I like to do to help me decide whether to subscribe to it is to search for more information about the blog and who writes it.

Some kind of an ‘About Page’ is a great way to satisfy and draw in curious potential readers (like me) and to deepen the connection with them.

Your About page is a wonderful opportunity to make a connection with new people to your blog, to sell yourself and give reasons why people should read you.

You can of course do this in other ways (an intro in your sidebar perhaps) but a page dedicated to sharing your information in this way can really work well.

Further Reading – Add an About Page to Your Blog, How to Write Your “About Me” Page and Conduct an About Page Audit

Post from: Blog Tips at ProBlogger.

How to Increase Subscribers and Reader Engagement

Share This

How blog posts ‘look’ is so important. I’ve seen the power of ‘polishing’ posts time and time again.

Image by Darwin Bell

I still remember the time that I took one of my early posts on my Digital Photography blog and polished it up. The original version of the post was largely text. It had one image in it but it was fairly bland and was more there to illustrate a point than anything.

The content remained almost identical – but I added 5 images to the post (images that still illustrated the point but eye catching ones), added sub headings to each paragraph and reformatted one section into a ‘list’ rather than just a block of text.

I then republished the post at the top of my blog as new.

The result was amazing!

The next day the post had 50+ comments, was on the front page of Digg and it was being linked to by blogs everywhere. The old version had received 2 comments and had previously gone largely unnoticed.

This is the power of paying attention to how your blog posts look.

Why Polishing Blog Posts Works

There are a number of important reasons why polishing blog posts is worth putting a little extra time into:

• First impressions – in the same way that your overall blog design conveys messages to readers about what your blog is about and whether they should subscribe – the formatting and design of single posts says a lot about you to first time visitors.
• Grabbing Attention – loyal readers may rarely visit your actual blog if they follow it via RSS so one might not think post design matters – but in actual fact post design has a massive impact in the realm of RSS where there is little to set your posts apart from others. A good picture or clever use of formatting can really grab the attention of someone scanning through their feeds.
• Reinforce Content – visuals in a post can reinforce points that you’re using within content. Illustrative images, video, charts, graphs, tables etc – all will connect with visual readers in a way that text cannot.
• Connect with Web Reading Habits – most web users don’t ‘read’ content word for word. They scan content, looking for elements of web pages that draw their eye and for keywords that connect with what they are interested in. As a result the way you design your posts can be the difference between someone actually ‘reading’ your post or just glossing over it.

How to Polish Blog Posts:

Following are a number of areas that I consider when polishing blog posts. I’d love to hear your thoughts on what you’d add to the list – I’m sure there are plenty more.

• Images – images on posts are gold! They draw the eye and grab attention, they illustrate points, they inspire, they engage the imagination and they connect with visual learners. In a largely text based medium – the use of good image can set a blog post apart from the crowd – learn to use them!
• Charts and Diagrams – similarly, good charts, graphs and diagrams add depth to content and give posts a visual point of interest.
• Formatting – one of the big mistakes that I see guest posters submitting posts to me making is that their posts come to me largely as large slabs of uninteresting looking text. Most people don’t ‘read’ content online – they ’scan’ it. As a result you need to work hard to break up your text and draw attention to important points. Using lists is one way of doing this, as is using bold, italics, font size and color, blockquotes and other formatting techniques.
• Sub Headings – I am a fan of sub headings – rarely a post goes by that I don’t put <h3> tags around some important part of my post to draw the eye, start a new section or break up a slab of text. One quick tip I’d give on sub headings is to think about them in similar ways to ‘post titles’. The purpose of a subheading is to get people to read the text under it – so ‘craft’ sub headings using some of the same techniques as we mentioned in our post on crafting titles.
• White Space – a simple line break or a little extra space around an image can have a big impact upon how your post looks. Let your content breathe.
• Short Paragraphs – one edit that I often make with posts submitted by others on my blogs is to break up paragraphs into shorter ones. This makes posts seem less overwhelming and more achievable for readers to read.
• Break Posts Up – at times after writing a post it becomes clear that you’ve written something that is simply too long or covers too much territory. Rather than publishing it – breaking it down into a couple of smaller posts can do wonders for how the post looks to readers. Many readers would much rather read two single posts that are more focused than a longer rambling one that covers too much ground. This is actually what I’ve done with this very post – originally it was the 2nd half of my post on Quality Control but I realized that while related, the topics were perhaps a little too different to cover in the one post.
• Highlight and Reinforce Main Points - pay attention to using some of the above techniques when it comes to your main point and call to action. If your post is a long one – it can actually be useful to repeat your main point numerous times within your post (in the introduction, main body of the post and then as a closing sentence).

What would you add to this list of ‘post design tips’? How do you ‘polish’ your posts to maximize their impact?

Further Reading on Quality Control and Polishing Your Blog Posts:

• Creating Scannable Content
• Designing and Formatting Blog Posts for Readability
• Using Images to Take Your Posts to a New Level
• Format Blog Posts for Readability and Legibility
• 8 Reasons Why Lists are Good For Getting Traffic to Your Blog
• 5 Powerful Techniques to Help Your Posts Stand Out
• How to Design Your Posts to Guarantee they get Read

Read the Full Series

This post is part of a series on how to craft blog posts. It will be all the more powerful if taken in context of the full series which looks at 10 points in the posting process to pause and put extra effort. Start reading this series here.

Post from: Blog Tips at ProBlogger.

How to Polish Posts: Individual Blog Post Design

Share This

Click to play

In this video post I reflect upon the one of the downsides of changing your blog’s brand and/or design.

While updating blog design, logos and avatars in social media sites can bring a lot of life to a blog and present you with an up to date and fresh web presence – one of the negatives is that you can actually stop the momentum that you might have already created with your previous branding.

This is a lesson that applies when thinking about blog design but also even the simple avatars you choose for your Twitter and other social media profiles.

I’m interested to hear your experiences of both how changing your online ‘branding’ has led to confusion but also how you would suggest bloggers do it in a way that builds upon previous branding.

This post was brought to you by Business Week Exchange.

PS: sorry for the audio quality on this video. I recorded it in a public space and there was a little too much background noise.

Post from: Blog Tips at ProBlogger.

Present a Consistent Brand in Your Blogging

Share This

Apparently the fantastic Thesis WordPress theme (see my first impressions of Thesis here) is running a special this weekend. They’ve just updated the theme with some great new features (see below) but if you buy it before the end of 31 August you get another theme from DIYthemes ‘Cosmo’ (a magazine style theme) for free.

The update of Thesis includes:

• A new ‘design options’ panel which gives you the ability to customize fonts and font sizes. This will help set your blog apart from others using this theme.
• Also in the design options it the ability to change the layout of your blog by selecting different number of columns and column width.

There’s more new stuff too – see it all at Thesis WordPress theme.

PS: sorry I didn’t post this earlier – I hope it doesn’t mean any of you miss out, it’s been one of those weeks in the Rowse house with sick little guys everywhere!

Post from: Blog Tips at ProBlogger.

Thesis WordPress Updates and Offers a Weekend Bonus

Share This

Long time readers of ProBlogger know that Darren is a big fan of split testing ads to improve your earnings. I took this advice to heart, and wanted to show you some real world results that I got on my own blog.

Feel free to take these results and apply them to your own site. Or better yet, do some of our own testing and improve on them even more!

I split tested 3 separate regions of my site and looked mostly at eCPM to compare them. If you aren’t sure what eCPM is click here. I think it’s better to use eCPM than click through rate (CTR) because it incorporates not just how often it’s clicked, but also how much you make per click.

Right Aligned vs. Left Aligned Ad In Post Body

This ad region makes the most money for me, and was smack dab at the top of each individual post page (but not on the homepage).

• The right aligned ad got a 0.78% CTR and $1.41 eCPM
• The left aligned ad got a 1.30% CTR and $5.31 eCPM

Clear winner: left aligned (276% improvement)

It’s hard to say why this is exactly. Maybe the left aligned ad looks more like it’s actual content instead of an ad. Whatever the reason, the difference was substantial.

Top Right: image vs. text

This ad resides at the very top right of every page. I had been running it with image ads for a while and decided to test it against text ads (with some appropriate color choices).

• The image ads got a 0.35% CTR and $1.74 eCPM
• The text ads got a 0.33% CTR and $2.15 eCPM

Interesting to note here that although the CTR went down slightly, the eCPM went up. This seems to indicate that the text ads were paying more per click. So even though it was clicked slightly less often it still made more money overall.

Winner: text ads (narrowly)

Under Posts: image vs. text

This ad was placed at the bottom of each post page and also on the homepage under the excerpts. I again decided to test some text ads against the incumbent image ads.

• The image ads got a 0.58% CTR and $1.86 eCPM
• The text ads got a 0.43% CTR and $2.27 eCPM

Again here the CTR went down and the eCPM went up. Also worth noting is that the color scheme I used on the text ad block is consistent with my site. “Blockquote” tags on my site use a similar color scheme.

Winner: text ads

Conclusions & Next Steps

For those who are curious, here is the actual data from an excel spreadsheet. You can pull this out of Adsense under the “reports” tab if you use different channels to compare different ads.

Overall these results were impressive. The site-wide eCPM from these three ads went up overall from $5.01 to $9.73 which is a 94% improvement.

I could just convert all ads to the better performing version and call it a day, but what I’ll do instead is continue testing….forever.

There are plenty of other things to test, such as…

• Trying text ads in the post body (since they performed better elsewhere)
• Left aligning ads under the posts
• Trying different color schemes
• Trying other types of ads (Amazon, Performancing Ads, Text-Link-Ads, etc)

Most people focus on growing their blog’s readership to boost earnings. This is a critical component, but don’t forget about the other major tool in your arsenal: split testing.

What ad formats and placements have worked best for you? Leave us a comment below.

To get more tips like these, check out my blog at StartBreakingFree.com. It’s is a blog for people who’d like to quit their 9-to-5 jobs, start their own business, and achieve financial freedom. I’ll even give you 3 of the top 10 books on building wealth for FREE when you subscribe, instantly delivered to your inbox! Check it out.

Post from: Blog Tips at ProBlogger.

Split Testing: How To Increase Your Adsense Earnings 94% Overnight

Share This

“The internet is dying.”

This phrase, though probably a bit sensationalist, is also not far from the truth. As we all now understand, thanks to U.S. Senator Ted Stevens, the internet is a series of tubes and the more stuff you put into the tubes, the more it gets clogged. Trust me, the Senator from Alaska was probably more dead on than most give him credit for.

Everyday, internet servers and bandwidth pushes new highs, and even though there are political solutions to such global economic problems, the reality is that bloggers, and really, website owners as a whole, are affected the most.

This site is loading so slow.

I can’t get to the site.

Down for everyone or just me?

1. Avoid images

Everyone likes an aesthetically pleasing site. Many blogs, particularly out on the long tail, tend to get very artsy in their designs. Colorful headers made from pictures of serene prairies, busy metropolitan night scenes taken with a Nikon D3 set at 100 ISO, 61 second shutter speed and a 1.2 Aperture (Oh, sorry. Wrong site).

You get the point, though. Lots of images can increase your site load time. In the event that images are necessary, either in posts or as the site structural elements, consider that images should be optimized for 72 DPI and never be “resized” in the HTML itself. If the image is bigger than the spot you want to put it in, then resize the image itself as opposed to letting the HTML do the work for you.

2. Avoid Third Party Javascript

I realize I’m talking to an audience that is keen on advertising on their blogs, so I may step on some toes. Third party javascript might be the worst culprit when it comes to page load.

The problem is not the javascript itself, though there is certainly that possibility on occasion. More than likely, third part javascript is invoking content, whether advertisements or widgets, from another server that could be running slow at any given time.

It’s generally easy to spot slow loading javascript. Because a page loads, usually, from top down in the order that the HTML is written, when the browser encounters slow loading javascript the page will stop rendering for a period of time. Usually, you can identify the specific part of the page that is loading slowly, and refer to your widgets or source HTML to figure out who exactly is the culprit.

3. Flash Video

I’m fighting a losing battle, it would seem, on Flash but if my observations are correct, Flash has an ongoing memory leak that is most manifest when it comes to online video. Almost all video players are written in Flash and, in most cases, after running a significant amount of video you might notice your browser crash or everything slow to a place where you have to forcibly quit the browser. These symptoms manifest themselves, for me, in Safari 3.x/Mac and Firefox 2 and 3 on Mac. I cannot speak to the lesser browser on the lesser operating system.

The problem exists when many Flash invocations occur. Flash seems to not give up the memory that a player uses – or at least not all of it. So the more videos viewed, the more videos embedded on a site, the higher the likely for slow browser experiences for readers.

4. 80/20 Rule

The Yahoo UI team released an interesting set of findings a few years ago that brought the concept of 80/20 rules back to the forefront. In geek speak, the 80/20 rules states that 80% of a sites symptoms (slowness) come from 20% of the site features.

I will let you determine how geeky you want to get with your site, but I have found profiling my site useful in determining bottlenecks and best fixes. Firebug may be the easiest profiling tool for average users. It is free, but requires Firefox as it is a Firefox extension. In order to use Firebug, you must have the “Net” panel option enabled in Firebug.

5. Cache, cache, cache

Any site that has some degree of traffic should have basic caching in place, and the larger, more high-trafficked sites should consider multiple levels of caching.

For WordPress users, plugins like WP Super Cache do wonders for load. In essence, WordPress writes pages to the filesystem for quick access by WordPress. Once an hour (or other interval if changed), those cached pages expire and a new version is fetched from the database. By end-rounding the need for repeated trips to the database on every page load, load time is drastically increased.

More aggressive caching can be used in larger contexts, or when multiple servers are in play. For instance, at b5media, we implemented Memcached, which is supported by WordPress as well as core memcache support by Movable Type.

Other alternatives include proxy caching with Squid. MySQL has a query cache that can be explored as well.

Post from: Blog Tips at ProBlogger.

5 Methods to Enhancing Page Load

Share This