Notice anything new?
After 154 posts I’ve finally said goodbye to the original Blog Tyrant design to make way for the new and (hopefully!) improved responsive design.
Long time readers of this site will notice some familiar elements, but also a lot of changes.
And I know that can be annoying (for me it’s bloody terrifying!).
When one of your favorite blogs gets a new design it can feel like your best friend just got plastic surgery and you now struggle to relate to them. It’s a weird feeling.
So, in this post I’m going to talk a lot about my thoughts behind the new responsive blog design and why I designed it myself from scratch.
I also really need your help.
Read on, dear friend.
What was wrong with the old Blog Tyrant?
Well, nothing really.
That simple design (which I tweaked from a free theme I found) served me extremely well. Some of the things that happened while that bad boy was on duty:
- Over 11,000 visitors in its third week
One of my original pillar articles went to the front page of Delicious and brought in a flood of traffic and subscribers.
- Over 10,000 email subscribers in a year
The first year brought in over 10,000 subscribers thanks to some in depth posts, a slightly unique brand and a crap load of guest posting.
- Over 10,700 comments from loyal readers
The absolute best part of my job is hearing from the Troops. The comments have brought me so much joy over the years and, for some reason, this little blog has one of the most active commenting groups around.
I don’t say any of this to brag.
The main point is that it is so exciting to know what you can achieve with a little old WordPress blog and a free theme. That is one of the reasons I promote a self-hosting set up to new bloggers – you just can’t achieve that on free service.
But times have changed…
Going responsive is necessary for many reasons
These days a responsive WordPress theme is something that is extremely important because a huge portion of readers are visiting on mobile devices.
Last month around 20% (the green slice of pie) of my visitors visited on their mobiles, or one of those great big Samsung things.
While the old site looked okay on a mobile, there were a lot of things that were less than perfect. So what were my main reasons for wanting a responsive design?
- Pleasing the Google monster
Believe it or not, Google has actually stated that mobile-friendly websites will rank higher for people searching on mobile devices. This can potentially mean more traffic.
- Simpler reading for my long stuff
A lot of my articles are really long. While it was possible to read them on the old site, this new design makes the content a main feature with a bigger font and nicer spacing.
- Subscriber focus
My main reason for wanting a responsive blog was to make sure the subscriber options didn’t get lost. The old site was insanely hard to navigate if you wanted to opt-in correctly.
But just having a responsive design wasn’t enough. I really wanted to change the structure of the site so that I could control the user flow.
That’s why I decided to design it myself from scratch instead of using a free or paid WordPress theme that anyone can buy.
So let’s take a look at that thought process.
Thoughts and motivations behind the new design
As I started designing the new site I realized how many different elements needed to be addressed.
It’s funny, when you have a free theme you kind of ‘make do’ with what you’ve got. But when you design it yourself (or pay a designer) you start to get really pedantic about the whole thing wanting to make it strategically perfect.
That’s never going to happen.
There are always going to be things that I don’t like about this design, or any design that gets produced.
The main motivation really should be just this: I must use my best web knowledge to build something that converts.
So what were my goals?
- Make sure the old readers feel comfortable
Okay so this was the single most important guiding principle for me. I knew I needed some extra functional elements to modernize the site but I wanted to be certain that all of my old readers still felt at home. As I said up above, when a site you like gets a new design it can feel really weird.
- Enhance areas that the old readers enjoy
Along that motivation, I wanted to make sure that the areas of the old site that we’re popular got enhanced. This mainly meant making the comments more of a feature with more space and attention given to your discussions and avatars.
- A deliberate opt-in funnel
Email subscribers are the bread and butter of this site. I wanted to make sure the new site funnelled visitors to the right places so they could subscribe for the right reasons. I’ll be testing a few different versions of this over the next few weeks.
- Strengthen the distinctive branding
The couch in the forest has always been a huge selling point. People mention it to me all the time. I wanted to make that more of a focus and to line it up with the “work from the couch” branding that I think appeals to people. I’ll be getting new photos soon (at the insistence of my fiancée) as I’m about 10 kilos lighter and three years older now!
- Make consuming long content more enjoyable
The posts on this site are really long. If I am going to expect people to read to the end I should at least make it as clean and simple as possible on all devices.
Here’s a deeper look at some of the main changes and my thinking behind them.
A live experiment in WordPress theme design?
The more I thought about it, the more I realized that any new design would basically be a live experiment.
Would my rankings get affected?
Would email subscriber numbers increase?
Would affiliate sales decrease?
Will my old readers still enjoy hanging out here?
Ultimately I just had to take a punt that I had an alright understanding of best practices on the web and that the new design would be a step forward as opposed to a huge mistake. And I can always change the things that don’t work.
Keeping that experiment in mind, if there is anything on this site that you really love or really hate (or that just plain doesn’t work) please leave a comment and let me know.
I really don’t want a design that I’ve done to affect our wonderful community.
1. The new homepage layout
The main change to the site is the new homepage layout.
This was a really big deal for me as I really wanted to add a big photo header with an opt-in form (get ready for photos of my face looking at the button!) but I also felt hesitant taking all of the recent posts off the front page.
Previously I’d shown 10 posts on the homepage. That had caused an increase in page view when people had landed on the front page – presumably because they have more to scroll through and more to grab them.
But the lure of the big opt-in form seemed like a good enough risk. I’d heard from people that those header opt-in forms sometimes convert up to 15% of traffic.
An online entreprenuer who has over 100,000 subscribers even told me on Skype that “… if you don’t have a homepage header opt-in form you’re an idiot!”
So let the experiment begin.
2. Triple header main menu
The triple header main menu (Start a New Blog, Read My Blog, Grow Your Blog) is an idea my fiancee and I had when we were in Barcelona last year.
I was really looking for a way to divide up the site into areas that funnel new readers to areas that promote the best content without confusing and overwhelming them.
The page called Start a New Blog is something I’ve been wanting to do for a while. I get a lot of emails from people asking about how to set up a new blog and now I can refer them to a clean page that lays out the main things that they’ll need.
I could have just used a regular post like I do now but my hope is that this design with the arrows and video is a bit less intimidating.
Read My Blog is obviously now the place where the “traditional” blog of mine sits.
The page called Grow Your Blog is something that will be evolving into a bit of a new idea in the near future that will hopefully excite a few people.
All up, we wanted the three sections to immediately show/cover beginner, intermediate and advanced topics so that no visitor type would be left out.
3. More white space
White space might not seem that important but it is something that I really wanted to use a lot of. In fact, the initial design we tested had no “container” meaning that the content area had absolutely no boundaries. It all just floated on the screen.
We added back the container to give the biggest screens a bit more definition but I have still kept it as minimal as possible.
There are a few reasons for this:
- Content focus
White space can really only be achieved when you remove a lot of clutter. I want to keep the focus of this site on its strong point: the content. You’ll see I’ve even removed sidebars on the inner landing pages.
I really love the idea of flow. I want a new visitor to hit my site via Google or a referral and know exactly where to go and not be interrupted (unless I want them to be).
Sometimes the information I offer on Blog Tyrant can be a bit overwhelming, especially for new bloggers. The white space was intended to make the experience of digesting that information much cleaner.
As I’ve mentioned above, a lot of this stuff is just conjecture and I’m really conducting a live test. But that’s okay, that seems to be the business I’m in.
4. Bigger comments and avatars
The comments section is, to me, the best part about Blog Tyrant. I love the discussions that we have in there and I really wanted to find ways to enhance that community.
- Bigger pictures
I wanted to make the photos slightly larger than normal so as to make the faces of each commenter more prominent. I had hoped this would help us recognize each other more and/or give your brand more exposure.
- More space
Again, the comments mimic the main body text and have a lot more space. In a way, I didn’t want to distinguish them from the articles that I write.
- More features
In the future I’m going to be adding a few features. For example, I’ve thought about having a “Editor’s Choice” feature where I can highlight your comment and give it a badge of honor if it is particularly helpful or insightful.
If you have any other ideas about how to improve the comments section I’d really love to hear it. Let me know down below.
5. Better opt-in form and landing page control
One of the main things I’ve touched on is the fact that I wanted to make sure the funnel was really tight.
This means that (for the next little while at least) I’m going to be testing a method whereby visitors click the LEARN MORE button in order to find the opt-in form. That will give me more of an opportunity to pre-sell the benefits of the mailing list and hopefully increase engagement.
There’s now an opt-in form in the footer as well with some strategically placed social proof above it to see if I can make use of the people who scroll to the bottom of articles and then want something else to do.
Mobile responsive means more room for mistakes
The thing about responsive WordPress themes is that there is a lot more room for things to go wrong.
The reason for this is because there are so many different shapes and sizes that your design must now cater towards. Blog Tyrant now looks different on a smartphone, tablet, laptop and large-screen desktop.
That’s quite a challenge.
The above screenshot is how the site “stacks” for mobile phones. It requires a different photo and a collapsable menu so that each item is large enough for a finger press. This is all different again when you do the iPad version.
I absolutely haven’t gotten all of it right just yet, I think it will take a while. But my main strategy has been to study the blogs and websites that do responsive design really well (think Brian Gardner, Chase Reeves, etc.) as well as the sites like Smashing Magazine that produce a lot of quality information on best and worst practices.
You can’t please everyone…
The other big thing that I had to keep reminding myself was that it will be impossible to please everyone.
For example, I sent the design demo in advance to a few long-time readers of this site, as well as to a few internet marketing buddies of mine. Almost all of them came back with different positive and negative feedback.
In the end I took on board as much as I could without compromising my goals and then decided to leave the rest up to fate (A/B testing).
Working with a developer I can trust
I can’t finish this post without talking about why it is vital to work with a developer who is an absolute expert in their field.
I’ve been working with Viktor from CrazyXHTML for many years on side projects, charity jobs and some other client work. In every single job he and his team have delivered the work ahead of schedule and on budget.
In fact, there have been many situations where Viktor has done things with WordPress that I had no idea were even possible. As a result I think I’ve recommended him to at least a dozen people over the years, all of whom have raved about his service.
Blog Tyrant is my baby.
I really wanted to make sure I could trust the developer to have my logins and to keep that information safe. And I really wanted to make sure I had access to someone who would make changes quickly and without fuss if I needed them.
Viktor has always been that guy.
Can you help? (and some giveaways)
At this point I really would love two things: feedback and a share or two.
I’m really excited about the new design and would love to get the word out there so I can collect as much data as possible in a short amount of time about how people interact with the site.
Please share a post or page that you like (any one will do) on Twitter, Facebook or Google+ and I’ll pick two people at random and send you $100 via Paypal just to say thanks.
Most importantly, I’d really love to hear what you like or don’t like about the new design. Start with the glaring “I’ll never use this site again because…” issues and then work towards the more gentle stuff.
Promise I won’t cry.