These 4 Simple Design Tweaks Will Make Readers Love Your Posts

A Guest Post by Graham Phoenix of ‘Male eXperience

Great content makes a great blog, but if readers just click away and don’t come back, it all goes to waste. If they don’t know where to focus or what to do, they’ll move on. Design is crucial to that all important first impression, particularly now that Google let’s you see a site without going there.

The Problem

It’s easy for me, I am a designer! I design lighting for cathedrals and theatres so I understand about first impressions. When I started blogging I thought I knew all about it. I could manipulate images, format text and balance the overall visual impression. I created great looking sites that didn’t attract readers.

I played around, slowly improving, but this was precious time away from writing. There was plenty of advice on how to setup your blog and wordpress. How could I get people to stay and look around? How could I make best use of my writing and marketing?

But How do I Solve it?

In life the solution is often never what you think it’s going to be. I realised that design was about the brief not the art, it’s where any designer should start. What do you want to achieve, what is important?

Whether you design yourself or pay a professional, you need to treat yourself as a client. Interview yourself, not about the design, about the blog itself. Why are you doing it? What do you want to say? What are you trying to achieve?

Above The Fold

There is so much to consider with the practicalities of design, perhaps most important, though, is what happens above the fold. You need to achieve your purpose without readers having to scroll down. They need to get the message and know where to go next. There are four simple tests.

1. What impression do you want to give?

People decide within 10 seconds whether to stay. Colour and banner are important, but so is content. Beware of too much distraction, beware of too much minimalism, unless it’s a focus, find a balance.

I focus on a bold red with black and white. I use colour in my images, to create a secondary impression. What you see in the image is to the fold, my focus.

2. What do you want the reader to focus on?

People read from the top left, so keep your sidebar to the right. I have a banner that puts the focus on the text. The title of the post should stand out. Keep the left side clear of images, put them on the right. The eye flows down the page, breaks make it easy to click away.

Hierarchy is critical, other than reading your post what do you want people to do. Get rid of your widgets, focus on your primary call to action. My focus is the signup form for the eBook and email list.

3. How much do you want to get people around your content?

People usually start with the first post. I put an excerpt at the top, it gives people a flavour but allows the next post to entice people further. Once a reader clicks on one of the titles I’ve hooked them.

The navigation is simple, clear and obvious. I recently added a search bar after realising how much we search now.

4) How do you want to connect with your readers?

It’s important to connect with your readers. I have a photo and brief bio at the top of the sidebar. This shows that I am a person, what I look like and who I am. My about page is right there in the navigation with ‘My Story’. People can connect with me easily.

Design is a skill that takes time to learn. If you can do it then go ahead, if, however, you feel lost then go to a designer and pay for it. Get it done well and reap the rewards. You need to know what you want and  articulate it. We’re all writers, right, so write it down!

Go back to your blog and look at it, above the fold, criticise the easy of use and impression it gives. Look at successful blogs and do the same. You will connect the dots and see what works and what you like. When you combine the two, then you have it.

What are the issues you have most difficulty with in blog design? Let me know in the comments and I will help you find an answer.

Read more by Graham Phoenix on his blog ‘Male eXperience

, , ,

35 Responses to These 4 Simple Design Tweaks Will Make Readers Love Your Posts

  1. Patti Foy January 10, 2011 at 5:08 pm #

    Very useful info, Graham. Thanks! Especially this idea of what’s above the fold; very important.

    Personally, I’m conflicted about putting images on the right. They seem to mush together with what’s in my sidebar there (the photo of me) so putting them on the left seems cleaner to me. Still, I do understand your point and will have to consider that or play around with it.

    I would also say that nowadays most people have fast internet but I’m not one of them. I rarely click for more if there are just exerpts on the main page. It just takes too long. So people may want to consider that tradeoff.

    Super post. Thanks much!
    Patti Foy recently posted..Dare to Bop Fear in the NO’s and Enjoy the Euphoria of YES

  2. Carol Tice January 10, 2011 at 5:23 pm #

    Great post — I’ve been really focused on keeping my above-the-fold free of any ad messages. You can see the word “free” three times in my above-fold section! That’s the message I want to convey, that this is a great place for free information.

    I did a blog review freebie day on my blog recently, and saw so many blogs cluttered with above-the-fold ads. I’m keeping all of mine lower down, and most are under a tab.

    But I could always make my blog visually look better! I’m very non-visual, so that’s been a challenge for me. But I’ve learned I like soothing fall colors, so that’s what I’ve got. And I hate the color blue — they say it gives a subliminal reading of “fear,” so I try to stay away.
    Carol Tice recently posted..16 Success Tips for Guest Posting on Blogs

  3. Graham Phoenix January 11, 2011 at 4:39 am #

    Thanks for that Patti, I appreciate it.

    You seem to use the photo in an interesting way with a separate intro to the post by it, that works and doesn’t interfere with the actual post content.

    I am a great believer in excerpts on the front page. I like people to have access to the full spread of what I write. If you have the whole post they can skim away before the end and not go one to something else. Looking at my stats I find that hits to the home page average around 15% of total hits. This means that most hits are to full posts. Some of these are coming through from links, twitter and facebook, but looking at the spread I am convinced most are clicking through from the front page or the index.

  4. Graham Phoenix January 11, 2011 at 4:45 am #

    Thanks Carol, above the fold is so important. If I could make a suggestion I would focus more on the email signup and move the other signup thumbnails further down.

    I like your colours, they are relaxing and I like your blog, the writing is great.
    Graham Phoenix recently posted..Guaranteed Sex Tonight! 10 Ways To Woo Your Woman

  5. Ben Lang January 12, 2011 at 7:40 pm #

    Super ideas, I’ll work on those in the future on my blog. Thanks!

  6. Rico January 13, 2011 at 2:18 pm #

    A common design fault I see in blogs is to use white text on a black background. It can look nice for a site with not much text, but for a blog, it really strains the eyes after a while.
    Rico recently posted..Web Design in Leeds

    • Graham Phoenix | Male eXperience January 29, 2011 at 1:44 am #

      You are so right. It cam work for a commercial site which is about impact rather than reading, but not for a blog.

  7. Marci January 13, 2011 at 4:02 pm #

    Congrats Graham on your guest spot. We met in a few threads in Alist Club. Mentoring with Barrie in the forum really helped me focus on my design. It helped to ask myself, what am I offering and then tie everything back to my brand.

    My question is how do you show only the excerpt of your article?
    Marci recently posted..Do Opposites Still Attract

    • Graham Phoenix January 16, 2011 at 7:21 am #

      Hi Marci, good to see you here. A-List has done amazing work, I am so grateful to it.

      A simple way to show an excerpt os to use the tag. If you look on your WordPress editor you will find a button, 4th from right on top line. Insert that wherever in your post and the front page will just show up to there. There is also an excerpt editor below the main editor window. I use Headway theme and that enables you to chosse featured posts or excerpts, I don’t know what your theme allows.

      Let me know if I can help any more.
      Graham Phoenix recently posted..How Male eXperience has Grown in a Year

      • Marci January 18, 2011 at 9:28 am #

        I’m using Coraline-free word press theme. I don’t see the options you are talking about, so I’m assuming that I don’t have the option to only show excerpts. Are you self-hosted?
        Marci recently posted..Crush Stress with Loads of Laughter

        • Graham Phoenix January 18, 2011 at 10:06 am #

          There seems to be a problem with Coraline in that it doesn’t show excerpts! I am self-hosted and use a VPS (Virtual Private Server) along with the Headway theme to ensure I have control over what happens to my blog.

          You can still use the <!–more–> for the posts on the front page.

        • Graham Phoenix January 18, 2011 at 10:18 am #

          There is a problem with Coraline in that it will not show excerpts! You can, however still use the <!–more–> tag which you will find above the visual editor when you edit your post. This will shorten the posts on the front page.

          I am self-hosted and use the Headway Premium theme so I can control how my blog looks.

  8. holly January 13, 2011 at 11:21 pm #

    I have realized I must have an arresting photo which has been a weak area for me. A picture is worth a thousand hits probably. But I have trouble finding good photos just using flicker and my own. Bing.com seems to have a good image section all of which are cited to where they got them.

    Holly

    • Graham Phoenix January 16, 2011 at 7:23 am #

      Photos are essential to open up the text. Use great colours and clear images. Flickr is great to use, google has a great image section but you need to be careful about permissions and attribution.
      Graham Phoenix recently posted..What is There for Men in 2011 – Some Ideas

  9. holly January 13, 2011 at 11:23 pm #

    How do I add my profile pic?
    holly recently posted..Coffee Dates and Meet &amp Greets

    • Graham Phoenix January 16, 2011 at 7:40 am #

      The best way is to add it with a little text in the sidebar. You use a text widget to do this. First of all upload the image to your media library then copy the file URL to your clipboard. Open a new text widget and add the following HTML code to it:

      <a><img src="PUT FILE URL HERE" /></a>
      Put your text here.

      Let me know if you have any queries on this.
      Graham Phoenix recently posted..Ten Men in Twenty Ten

  10. Alison Moore Smith January 15, 2011 at 4:28 pm #

    I’ve been blogging since 2003 (yes, true!) and set up websites for new bloggers. But that doesn’t mean I’m good at graphics or design. Still love to read this kind of solid info and show it to my clients. Thanks.
    Alison Moore Smith recently posted..Top 10 Gifts for New Bloggers

  11. Linda January 20, 2011 at 9:58 am #

    I’m only now (after nearly a year of blogging) realsing how many distractions it’s possible to have cluttering up our blogs!I click away from cluttered sites so why do I expect people to stay on mine!
    I’ve tried to keep my widgets and things to a minimum but perhaps I should take off even more?
    Any thoughts anyone?
    Linda recently posted..How To Be Brutally Honest With Yourself

    • Graham Phoenix January 20, 2011 at 10:50 am #

      Hi Linda

      It took me a year to get to grips with this, I found it difficult to get rid of the stuff until I focused on what use they are. I have looked at your blog and being ‘Brutally Honest’ I would suggest the following:

      – Delete the Headline Animator
      – Put the signup box below the Bio/Photo
      – Then put Popular Posts
      – Delete Happiness Blog and Regator
      – Then put search box
      – Then put follow links
      – Delete contact form, put in About Page
      – Del Blog Better
      – Then A-List Affiliate Link
      – Delete Commentluv

      You have to ask whether they help the user experience.

      Hope this helps.

      • Linda January 22, 2011 at 9:28 am #

        Thanks so much for this, Graham.
        I’ve done as you suggest except I thought the Animator would get the reader’s attention. What’s you view on this?

        Also, how do I put the Contact Form only on my ‘About page’ please, as you suggest?

        I’m so pleased I found this post!
        Linda recently posted..How To Get Over Obstacles – A Lesson From A King

        • Graham Phoenix January 23, 2011 at 10:53 am #

          Linda

          Thanks for that, your page looks a lot better. I find the animator distracting and can take your eye away from the main content.

          I use the plugin Contact Form 7 and code such as ,

          [contact-form 1 "Contact form 1"]
          ‘ placed where I want the contact form.
          Graham Phoenix recently posted..5 Questions To Ask To Reclaim Your Life

  12. Keith Davis January 20, 2011 at 2:14 pm #

    Hi Graham

    I believe in eye catching graphics.
    Not just for the thumbnail at the top but also to break up the text.
    Problem is finding great graphics to go with a post.

    I use Flickr… do you have any other suggestions.
    Keith Davis recently posted..Chocolat…

    • Graham Phoenix January 23, 2011 at 10:39 am #

      Keith, I agree about eye-catching graphics, they do draw people into your content. Flickr is great but you can always use a paid site such as istockphoto.com. Google has great images buit you need to careful about licencing, permissions and attribution.
      Graham Phoenix recently posted..Manifestos For Men – Are They Any Use

  13. Anne Sales January 20, 2011 at 4:29 pm #

    In my opinion, Yahoo has got the best web design. Or maybe because I have been so accustomed to the site and I think it’s the ideal site for me. I have been trying to follow their design but then I realized that would make me a copycat :(
    It’s nice if you could design your own and readers/visitors will feel at home, isn’t it?
    Anne Sales recently posted..IX Web Hosting Promo Code

    • Graham Phoenix January 23, 2011 at 10:30 am #

      Yahoo has a nice design but I don’t think it’s appropriate for a blog, that needs to be more personal.

      A unique design is particularly important for a blog in order to gain loyal readers and fans.
      Graham Phoenix recently posted..Manifestos For Men – Are They Any Use

  14. mike morales January 22, 2011 at 5:27 am #

    Great insite!

  15. J.D. Meier January 28, 2011 at 11:25 pm #

    I’m a fan of design. It’s such an art and science.

    I like the fact you started by figuring out the impression you want to make. It really is about the ambiance. It sets the tone for everything else. It’s gotta feel good when you land.

    • Graham Phoenix | Male eXperience January 29, 2011 at 1:39 am #

      You’re right about that, the ambience is all about the first 3 or 4 seconds. That’s when your impression is made. We all know when someone has got it just right!l

  16. Rakesh Kumar February 14, 2011 at 4:21 pm #

    Quite impressive post. I didn’t aware from these facts. Now in future reference i will consider these tips. Thanks
    Rakesh Kumar recently posted..How To Transfer Music From iPhone to PC in Linux

  17. Betty February 27, 2011 at 6:50 pm #

    I agree with giving blogging a break. Sometimes you just need it. The break helps me clear my mind and develop more inspirational thoughts for writing.

Trackbacks/Pingbacks

  1. Tweets that mention These 4 Simple Design Tweaks Will Make Readers Love Your Posts | Virgin Blogger Notes -- Topsy.com - January 10, 2011

    […] This post was mentioned on Twitter by Graham Phoenix. Graham Phoenix said: A-List spotlight on Graham Phoenix: These 4 Simple Design Tweaks Will Make Readers Love Your Posts http://bit.ly/fIboWa […]

Powered by WordPress. Designed by Woo Themes