6 Design Hacks I Used When I Redesigned My Blog

This year I redesigned my blog.

I didn’t do the work by myself. There was 1 awesome guy behind this design project: Marius Ciuchete (thanks buddy).

Let me tell you the story on how I began working with Marius at redesigning my blog.

It was a late night at the office and I was working on an article. So among drinking coffee, writing the article, doing the research and listening to some music my phone started ringing. I usually never answer my phone while I’m working on something. I don’t like being distracted. But I felt like I had to answer. Marius was the one calling me. So we started talking on what I’m working on, what he’s doing, you know – the basic chit chat at the beginning of a phone call with a person you don’t talk to everyday.

But then we got a little more serious, Marius told me that he was looking for a challenge. He wanted to work on something that was giving him the freedom to design, the freedom to work on something he really wanted to start his day with.

So I told him “Let’s redesign my blog!”. There was a moment of silence and then he said “Ok, let’s do it!”.

We had an entire year of talking almost every week about the project. Interviewing me, asking me what I wanted from this blog, how I described my work, what other websites I liked and so on and so forth.

And then he started showing me, step by step every little thing he has done for the blog. The typography for the articles, the colors he thought will work and other design hacks he was planning to use on my blog in order to create a better reading experience.

After a year of designing, developing, thousands of replies, DM’s and forwards I finally had the blog design.

One thing to keep in mind is that I believe that a project on the internet, whether we call it a blog design, a landing page, a portfolio website or an eCommerce website, will never be completed 100%. You will always have to update the web page, always have to work on the design, always have to A/B test and see what’s working for you and what doesn’t.

So in this article I want to show you how Marius designed a blog that gives its readers an awesome experience! And luckily, it’s mine! 🙂

But first, let’s make it clear.

Design is an important factor in the content marketing strategy.

It doesn’t matter that you are the next Shakespeare or your words are the next wisdom words of the century. If you have an ugly platform, with silly fonts and ugly colors, then I really don’t believe that people will take their time and read whatever you’ve got to say.

The first thing I do when I land on a new website, even if it’s a blog post or a product page I look at the design.

And yes, I admit it, I stopped reading articles because the blog was really-really ugly.

Now let’s see what design hacks Marius used on my blog and how you can also take advantage of them. And to have a better perspective on this article, I will show you how other blogs and websites are using the same tactics I’m using.

1. Social Media Share Buttons

We already know that we must use social media to increase our blog traffic. And it’s obvious that for every article you write you should have a social media share plugin install on your blog.

For example, if your blog use a CMS like WordPress you just have to go in the plugin section, install plugins, search for “social media share” and install the plugin you think can work for your blog.

It’s so simple that anyone can do this.

As I can say from my research, there are 3 types of social media share buttons for an article:

• Floating buttons
• Inline buttons
• Expanding
• Popups
• Bars
• Sliders

And there are 3 places where these buttons can appear in your blog posts:

1. At the beginning of the article.

For example, Rafal Tomal uses them at the beginning of his articles. They’re obvious and you can easily share the article even if you didn’t read it.

Yes, there are readers who trust a person so much that they don’t even have to read the entire article before sharing it on social media.

And Rafal is not the only one using the social media share buttons at the beginning of the article. I also realized that websites like Mashable, Recode, The Verge and TechCrunch place their buttons there too.

2. At the bottom of the article

There are blogs that also use social media share buttons at the bottom of every article. Because there are readers who like to read the entire article and if they find it interesting enough they will share it.

The Content Strategist from Contently is using this type of social media share buttons.

3. Floating sidebar social buttons

There is this design hack that many blogs adopted lately – the floating social media buttons. It’s not so new, because Marcus Taylor wrote about it in a blog post for Unbounce.

And the real interesting fact is that when he started using a floating sidebar he saw an increase of the social sharing by 52%.  

So I’m using it in my blog posts. I also selected only the 3 most important social networks for me, if we talk about traffic for my blog.

After looking at my Google Analytics I found out that Twitter, Facebook and LinkedIn are the top 3 social networks that bring me the most traffic.

I recommend you to use a counter in your social media share button so people can see how many times the article was shared. In this way they will see it as an important article and will share it too.

I don’t believe that you should put all the social networks you have on your share buttons. People won’t know which one to choose and they will leave your website without taking any action.

For example, Brian Dean from Backlinko only has 2 social networks on his website.

Unbounce Blog has 4

And as you can see, I have only 3.

Success in blogging and social media depends on so many contexts: your industry, your resources, your talent, your strategy, your purpose, on how much you want to invest in your blog and how important social media is for you.

But to know this, you have to test, experiment and optimize.

2. Reader counter

The first website on which I saw a reading counter was on Medium.

They used this design implementation to tell their readers how long was the article they were reading .

Medium said that the read time is based on the average reading speed of an adult (around 275WPM).

So when Marius asked me how long and how much content I wanted to create on my blog I told him that I’d like to work on some big articles, something around 2000, 3000 and sometimes even 9000 words.

I know that there are marketing experts who say that long form pieces of content perform better than the short ones but from my point of view, it really depends on the context. If you want to have an educational blog on which you your reader how to do a certain thing step-by-step, it can be a long form content or it can be a short form content but with many images.

The articles that perform best on my blog and which bring the most traffic and social media shares are the longer ones.

That’s why I decided to use a reader counter that lets my reader know how much time it has left until finishing the article.

Some may say that this isn’t a good user experience for the readers because it can scare them on how long the article is and they will leave. But I believe that it’s better to keep a promise, let them know what they will get and be transparent with the reader.

There are also different types of reader counters that will announce the reader how much will she/he have to read to finish the article.

For example, there is the loading bar.

Stammy’s blog uses a red bar to show you the progress of the article.

Ben Frain’s website uses a category in the right to jump you right to a subject you’re interested to read more about.

And if you are a developer or a UI/UX designer who is interested in a reader indicator to implement in a project, I recommend you to check out this article.

It’s really useful and has lots of tactics and how to do’s.

3. Select to tweet

Let’s say that you just read a sentence that resonates with you and you want to share it on Twitter. The normal behavior is to copy the sentence, open Twitter, paste the sentence and then copy the link from the article, paste in Twitter and send the Tweet, right?

Well, it’s a lot more easier with my ‘select to tweet’ function. You only have to select the content you like, the Twitter logo will pop up and you can click on it. Then, Twitter will open and you can tweet out the quote. Is as simple as that.

But don’t get me wrong, I’m not saying that this is the most revolutionary thing you will see on the internet, will blow your mind and will help you  make billions of dollars. It’s a simple hack that we used to help the reader have a better experience while he/she reads my content.

I know that you read a lot about better experience, but this is what I really want the readers to have while they arrive on my blog. Read a quality piece of content while having a good experience.

When HubSpot redesigned their blog  they also used this ‘select to tweet’ function, only they also used several other elements, such as:

• Sharing on Facebook
• Sending an Email
• Sharing on Twitter
• Sharing on Linkedin
• Sharing using Facebook Messenger
• Copy/Paste the content

So you don’t have to use only the Twitter network, you can also use whichever platform you think is more common for your readers. Other platform I love to look at to find some inspiration is Medium. I already told you that some of the hacks we used in this blog are inspired by Medium. This one with the ‘select to tweet’ was inspired by Medium too.

But Medium also has 2 significant functions beside sharing on Twitter:

• You can highlight the quote
• You can comment to the quote

This is what makes them such a great platform on which you not only post articles and share them on social media. You also have the chance to comment to other users’ content, highlight the quote you love and get involved in the community.

4. Download for free ebook

I know that there are hundreds of blogs and bloggers who write and publish ebooks occasionally. Their purpose with these ebooks is to make money or to collect leads. Some of them are doing a great job and there are also the others who just to make some money.

When Marius told me that I must write an ebook and publish it on my blog without having a lead generator or without requesting an email from the user who wanted the ebook I thought that he was crazy.

But then he told me that these are the things that would make me different from my competitor. I don’t want anything from you. Here is my ebook. Download it for free. If you like it, you will come back. If you love it, you will share my articles. If you think that I made a great job, you will email me.

Giving an ebook  for free, without requesting any contact information from the user is something that I don’t see very often.

This ebook is just there. Here you go.

Download for free. And if you like it, you are welcome back.

5. Email collection

I only collect emails in 3 places.

The first is at the bottom of the homepage.

There is a simple space where people can complete their email and hit the subscribe button.

The second is at the bottom of every article you finished reading.

The third place is when you click the hamburger menu in right and you see a menu that slides in the right of your screen. At the bottom of that menu is a new place where you can leave your email. No strings attached 🙂

Why am I not collecting more emails? Why am I not sending a daily newsletter?

Because I’m not interested in selling you anything. This blog is not my main financial income.

It’s the place where I love to share my experience in content marketing and social media with others.

I know, as a marketer with a blog I must sell something. Why? Because I’m a marketer and most of you might think that marketers always want to sell you something.

No, I’m just creating content that hopefully will help my readers do a better job and sell more of their product.

Think about Seth Godin. When was the first time you saw an email pop-up in his blog? Exactly. He uses his blog to create value, to educate his community and to help his readers. His emails are sent automatically and every time when he publishes something, I have an email from him in my inbox.

I subscribed to many marketers who have blogs and promised that they won’t spam me with emails. And guess what? In 2 weeks I got 7 emails from them. 3 where to buy a webinar. 1 to share an article and other 3 to download an ebook for only $9.99. Thanks but no thanks.

Give your best content for free

This is the reason why I won’t use my email list to collect leads and to sell something. If you think that my content is quality for you, that brought some answer for your question and you think that it’s ok to get your email, you will give to me.

6. Quote differentiator

There are certain ideas, sentences or quotes that I love to highlight.

This is why Marius created this typography for my articles that people can easily see and if they think that it’s something that resonates with them, they can share it using the click to tweet function.

This is my quote text.

This text differentiation is something that I really wanted to have because I believe that when you write and publish an article on your blog, you must also know how to edit and put it in different paragraphs that will help the user read it more easily.

Optimizing your writing is as important as optimizing your blog!

This quote function gives me the opportunity to underline the things that really vibrate with the topic of the article.

Conclusion

These are only a few small design hacks I used on my redesigned blog. I hope you will learn something from them and that you will also use them on your own blog.

But don’t forget, design is only a small part of your blog.

You need to invest in content, look at it as an important side project and invest your time and energy in it.

Now back to you, let me know which one of these hacks you like the most and why?

Photo Source