How to Redesign a Blog: Redesigning DPS

In this post (the first of two) Web Designer Matt Brett shares some reflections and tips from the process of redesigning my Digital Photography School blog.

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.

Use Gravatars to Add Personality to Your Blog

In this post Jack Gamble from Babeled sheds some light on a handy service – Gravatars which is a tool that many people are adding to their blogs (I’ve got it operating in the comments section of both TwiTip and Digital Photography School at present).

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.

gravatar-1.jpgThe 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.

-2.jpgNext 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

Digital Photography School just got a New Design

Digital Photography SchoolBlog redesigns are always experiences that are mixed with excitement and a little fear – today has been a day for both of those feelings as we launched a new design for Digital Photography School.

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.

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

If you’re looking to upgrade the design of your blog and are interested in a premium blog design then Thesis is a theme that theme that today you can get a pretty good special price on.

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.

How I added the Twitter ID field to comments on

A couple of days ago I added the ability for those leaving comments on my TwiTip Twitter Tips blog to add their Twitter ID as well as their URL to comments. Since doing this I’ve been asked time and time again how we did it. In this guest post Sean Walberg (the guy who actually made it happen and who is my server admin on TwiTip) explains how he did it.

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

Picture 1.png

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>

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:


(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="<?=$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.

How to Increase Subscribers and Reader Engagement

Last week I decided to find some quality Australian blogs to subscribe to. I used a newly compiled list of Australian Marketing Blogs that Julian Cole put together as the basis for my search.

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 Reading11 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 ReadingWhy 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

How to Polish Posts: Individual Blog Post Design

Much is written about how to ‘design blogs’ (as a whole) but another element of ‘blog design’ that I think is just as important, yet not written about much, is the design of individual blog posts.

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

Polish-Blog-PostsImage 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:

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.

Present a Consistent Brand in Your Blogging

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.

Thesis WordPress Updates and Offers a Weekend Bonus

Thesis WordPress ThemeI’ve been behind checking my email this week and it could have cost you a great deal….

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!