5 TIPS TO MAKE YOUR BLOG READER-FRIENDLY

Jan 20 2015
If you read about my 2015 goals, you will know that I am working on my blog design shop. While designing templates, I spend a lot of time learning about the design elements that help create a great reader experience.
Presentation of the content is as important as writing good content itself. Content in its best form is generally clear, easy to find, read and understand. Here are a few tips that will ensure a wonderful experience for the readers on your blog irrespective of the blogging platform that you use. However , for those of you that use blogspot, I included the CSS code snippets for each of the tweaks which can be easily copied into your blogger template editor. Please let me know if you need help with anything.
 
Please back-up your blogger template before making any of these changes. 
1. Use images of the same style: If you use images on your blog, it would be a good idea make all the images follow the same width and alignment. Plus, scaling the images to the same width as the post makes the content flow together and look neat. Here is the code to automatically resize all your images to fit the width of the post:
2. Justify your text: Imagine reading magazines with text ending differently on each line. Not professional, right? Justifying the text gives your blog a very clean and professional look. To justify, select the text in the editor and click on this button. Alternatively you could also add this code to your CSS :

 

3. Highlight your links: The hyperlinks on your blog should pop against your normal text, they should stand out and invite your readers to click on them. They will go unnoticed if they blend in with the rest of the text, so make them bold or underline or a different color! Here is the CSS code to style the links in a way that will catch your reader’s eye :


4. Make your content easy to search/browse: Would you like your readers to hang out on your blog for a long time? Then make your content more searchable. Add a search bar and/or archives widget to your blog. This keeps your old posts visible at all times and helps the readers find the content they are looking for on your blog.
5. Add a jump-link: If your posts are long and contain a lot of images, it would be nice to shorten them with a Read – more option aka a jump link. This makes it easy for readers to scroll down your blog, get a quick overview of your content and choose the posts that they want to read in detail. To add a jump link to your posts, click on the insert jump break button in your editor at the position you want to shorten your post.

 

You can also style your jump link by adding this CSS code:

 

These small details will make a huge difference to the reader-experience of your blog. Hope you all had a great start to the week, mine was a bit slow, but I am catching up!
P.S: Click here to read my top 5 tips for a great blog design!
What are the design elements that attract you to a blog?

If you are interested in learning more about the course, enter your email address to join the waitlist and be notified when it launches! :)
  • I think having a search bar is really important, I've often wanted to search on some of my favourite blogs to see if they have written about a certain topic, only to find they don't have a search bar xx

    Ioanna | Hearting.co.uk

  • clementine buttercup

    Thank you, thank you, thank you. I love how helpful the blogosphere is to new bloggers like me!
    Bookmarked this post !

    clementinebuttercup.blogspot.co.uk

  • Some great ideas to help beginners with CSS here. Love how simply you explained it all and laid it out.

    Sorcha x Bright Field Notes

  • Thank you for this!! I used the justify text one and my blog looks a LOT cleaner now 🙂 thank you!!! xx

    Little Miss Katy | UK Lifestyle Blog

  • Great tips and so easy to follow as well.

  • I completely agree Ioanna, I have to add one to mine as well. But I guess the archive widget is a good replacement too! I love being able to search a blog too 🙂

  • You are so so welcome lovely, hope it will be of some help to you xo

  • 🙂 Ah thanks a lot sorcha, that means a lot! xo

  • 🙂 Wow, great to hear that katy! <3 xo

  • Hey melissa 🙂 Thank you! <3 Will email you soon, been missing our convos! xo

  • Thank you so much for these tips! I'll definitely add a search bar to my blog, have heard quite a few people talk about that recently! 🙂 xx

  • Thank you! I really liked that CSS code with justifying the text, I wondered how could I do this.

    http://www.meetmeonthebalcony.com

  • These are all really useful resources, but I couldn't help but mention one thing: Magazines justify text as a means to fit more information on a page, it's a monetary thing. Left aligned text with a ragged right edge is interpreted as friendlier and more informal. Not trying to be nitpicky because it's always up to the designer to pick how the blog looks, in fact I too prefer justified text and have it on my blog because I like the clean edges! The designer in me just had to speak up though!

  • Thanks for your insight Sophie. I get what you are saying, and i totally agree left aligned text can look more informal (which is good sometimes). What i am trying to imply though is justifying text gives the blog a neat look and a continuous flow which makes it easy for the reader. Why magazines do what they do was not my point here, 'cuz honestly I don't know their reasons. Personally for me, it would be hard to read paragraphs of text with lines ending at different points. Again, to each their own. There are a lot of scientific arguments on the web on which alignment is better. This is just my humble opinion, really 🙂

    Also great to hear you are a designer too, do you have a blog? xo

  • 🙂 Great to hear that Migle, let me know if it works for you ! xo

  • Yeah, I think opinions are opinions and everyone should do whatever they prefer! I think it's interesting that you mention different points of text being harder to read because my teachers always hammered into my head during lecture "don't center or justify text it's harder to read!" But that just goes to show how fluid design can be! In terms of design, I'm actually an advertising/PR student but my main focus is in advertising design. I do have a blog, it's fairlyinterested.com, although it's just started and I don't really talk about design much on there!

  • Oh thats great to hear! 🙂 Look forward to reading about design too on your blog! Really it is interesting to also see how what we grew up with influences us. Cuz in India [where i studied], it was compulsory to justify the text, we even lost points in projects if it wasn't justified 😉 I have learnt justifying text the hard way, and so it always sticks with me! But yes, i completely agree about how flexible design is, and thats what makes the area so unique and interesting! 🙂 xo

  • Hi, I know nothing at all about code or any of that but I am interested in making my pictures the same size. Where would I paste the code for it and how do I find out the width of my post? I know how to get to the html part of my blog but besides that I'm a bit lost. Also, does it mean I don't need to resize them when I'm typing up my posts? Sorry for the many questions!

    Dusty Foxes Beauty

  • These are great tips! My personal pet peeve for any website really is centre aligned text… just why!? Search bars are incredibly useful, I find myself using them on blogs more and more now

    little miss fii | Fii x

  • Hi Serena! 🙂 No worries, i can tell you how much ever i know. Go to your template editor and paste the code above the tag. I just checked your blog and the width of your posts is 500px. And yes, if you do this, you dont have to resize them while you type your posts! Let me know if it works! xo

  • 😉 I know! But some like it that way! So to each their own, cuz at the end it is your blog right, you should do what you like 🙂 Yup i too finally added my search bar back to the blog! Thanks for reading Fii xo

  • Allison

    It is a huge pet peeve of mine when blog pictures are all different sizes! It is such an easy thing to fix and it makes things 100x more professional looking. I'm not a big fan of justified text though, it reminds me of newspapers and feels less personal because of it! More of an article than one person sharing their thoughts – but that's just me
    Allison from http://www.mercuteify.com

  • Fantastic tips as usual! I found I had to add "height: auto" for the first tip when I was testing it out. Don't know if that's just a weird thing for me though…

  • Ps. totally agree that it's all in the details. That's why you're a pro.

  • I've only recently started using the jump break feature and it definitely makes posts easier to read
    Reinventing Neesha ♥

  • thank you so much! I've applied to my blog now and I love it!

  • Thanks so much for this Chaitra! I love seeing big blog photos that are the same in size. Like Allison, I'm not big on justified text but I can see how it looks more organized 🙂

    Sheri | Behind The Frames

  • I use WordPress and luckily most of this stuff comes with my theme, but I agree wholeheartedly with each and every point! The small details can really put people off when it comes to blogs, it has happened to me in the past, so I have it in mind when it comes to my own space. Still not perfect, but working on it!

  • 🙂 I agree about the pics. I am so surprised that many dont prefer justified text. Really interesting to see different opinions 🙂 Thanks for reading allison! Hope you are well xo

  • Thank you thank you holly 🙂 Oh yes, that happens when all the pictures are not of the same height. It doesn't understand what height to take so you ll have to add auto. Thanks for mentioning, i ll correct that! Btw did the related widgets thing work? xo

  • 🙂 Glad to hear that neesha 🙂 xo

  • 🙂 Ah thats nice to hear sheri. I know, many seem to not like justified text. M really surprised though! Ya but i can see how justified text can look a bit too formal 🙂 xo

  • Hi Carla! Ah wordpress huh? Lucky! I used to be on wordpress.com, but there wasnt much flexibility, so i moved to blogger. Self-hosted wordpress is amazing though and I would switch to that sometime in the future! xo

  • Thats great to hear Serena, brilliant job! xo

  • Ah I'm ashamed. I feel so far behind on so many things. I haven't even tackled that yet. I got totally sidetracked by obsessively trying to figure out another problem. I will definitely let you know if it works when I do try it. I really appreciate the help.

  • Ah don't worry at all. I too have so much catching up work this week, I don't even want to think about it. Do it when you have the time. Hope you are having a nice week holly!

  • I've bookmarked this post so I can come back and have a play around with my blog! Can't wait to see your shop soon 🙂 x

    Everything But The Kitchen Sink

  • Thank you for these tips! Hopefully now I don't have to keep editing the html for each picture and they will automatically resize 🙂

  • These are some great tips! It really gets me thinking about my blog layout and design!
    untitled&unfinished

  • These are great tips, and a few of them are things many haven't mentioned in similar post.

    -xx

  • Great tips lovely and css is what I really need help with, it's the small things that often get forgotten but are the ones that need focus on xxx

  • I always love html code post, the one to resize theimages is very useful

    x,Abril

    The Color Palette

  • Love these tips. I feel so much more capable and inspired when I land on blogs that follow these guidelines–I feel like I can settle in with a cup of something awesome and read their aesthetically pleasing site for hours–like your site ma'am.

JOIN ME ON PERISCOPE

@PinkPot7
My new e-course, iPhone-o-graphy is open for enrollment until 28th Nov ! CHECK IT OUT NOW
Hello. Add your message here.