Blog design: make your blog easy to read (helpful tools)

Reading (and writing) a blog is about more than just the content.  Of course the content is important, otherwise why do we visit the blog in the first place.  However design and format plays a big part as well.

Quick tips to make your blog easy to read

blog design - make your blog easy to read including helpful tools Bubbablue and me

Get the content right

On the content side I am fussy about blogs I read and comment on and I’m not the only one.

I find poor grammar and spelling sloppy and unprofessional.  Even if your blog is a hobby, why would you be pleased about putting sloppy writing out in public when there are often inbuilt spell checkers.  The alternative is getting someone to check your content before publishing.

If you want to work with brands, then it looks so much more professional if you don’t have errors in your copy.  I was embarrassed for some brands last year when I noticed an awful lot of bloggers who were working with brands during National Stationery Week and spelling it ‘stationary’.

Make it easy to read

Most people on the internet are time poor and want to read and comment quickly.  If you have bright backgrounds combined with hard to read fonts, people will leave without reading…or read and never return.

There's a reason why newspapers are easy to read. Their content format works well with the way the brain… Click To Tweet
  • Black or dark font on a white or pale background – good contrast makes it easy to read, and similar to other reading materials meaning the eyes can adjust, read and understand quickly
  • ‘Sans’ serif font – ie fonts made for the internet for the main body of text, without the tails and no script.  Keep the script fonts to headers or image annotations
  • Left justified – so the eyes and brain know and anticipate when they’ve read to the end of a line.  Centralising font just makes it harder to read
  • Small paragraphs – this is particularly true on the internet.  It’s harder to read and scroll, especially with the increase of readers on mobile devices.  Chunk your copy into smaller paragraphs
  • Shorter sentences – copy need to read fast and snappy on the internet
  • Spacing – ensure there’s a gap between paragraphs, and if you can split up the copy with headings it makes it even easier to read again

google fonts example

Layouts need to be easy to navigate

When choosing a theme it’s hard to know what your readers like and to ensure everything you want to cover is readily available.

I spent nearly a year researching and shortlisting what I wanted before I changed to my current theme.  My method was to create myself a blog moodboard on pinterest.  On it I collated everything I likes design wise – colour, graphics, fonts, images – along with layouts or design aspects I liked from other blogs.  So if I saw a header style or side bar layout I liked while reading other blogs, I pinned it with an note saying what aspect I liked.

Follow Emma Tustian – Bubbablue and me’s board Blog design moodboard on Pinterest.

If you read a lot of blogs, you’ll know what you like when you visit them, so keep a watch out and think what might suit your blog.

Navigation is an important part of a blog layout because you want readers to browse your content.  Think about:

  • Home page – do you want magazine style with tiled posts, full posts or excerpts?
  • Side bars – left, right, both or none.  It’s better to have wide main body of content and big photos, so 2 sidebars can be restrictive
  • Posts – full width or similar format to your home page
  • Navigation – in the side bar or a menu bar ribbon at the top or under the header
  • How to show popular posts, recent posts, categories
  • Whether you’re all about text or like lots of images or not

Quick tips on blog design

I’ve mentioned briefly about colour with regards to font and background, and layout also comes under the design header.

Whether you’re setting up from scratch or wanting to rebrand, creating a moodboard is a great tool for pulling together ideas.  Pinterest (a private board works fine until you might want to share your ideas if you’re using another designer).  Once you get a picture of colours and styles you like, you can create your brand look and style and choose the theme you want.

Headers can be simple text or images, and are easy enough to create yourself on websites like Picmonkey or Canva.  You just need to know your header size for the theme you have…and don’t forget to resize and make versions for any social media channels you have.

when designing a blog header, don't forget to make versions for your social media channels at the same… Click To Tweet

Checklist for design

colour wheels
Credit: ColorMatters
  • Stick to a limited colour palette – maybe 2 neutrals and one accent colour, but not a hotch potch of different colours
  • Tonal colours work well or opposites on the colour wheel
  • If you’re using pastels for text, make sure they’re strong enough to be read
  • Think about your fonts and your layout and what would work well with it
  • Make a list of all the items you want to include
  • Keep white space  – around your copy, images, side bars etc.  You want to make it easy to read and look uncluttered
  • Decide what advertising you want – whether that’s for blog networks you’re a member of or paid for advertising.  Some is ok, but think about what you like and therefore what your readers might like.  Do you really need advertising breaking up the copy in your posts?  Do you need your surround/background to scream advertising?  Less is more
  • Neaten up your sidebars or footers – centralise images or advertising in them
  • Tie in colours and style from your header to your social media buttons
  • Unless you blog anonymously, include a picture of you – ideally on the front page near the top, if not, definitely on your about me page.  Readers want to see who the blogger is
  • Decide the tone you want to get across – if you write about cheerful, crafty and funny things you might want fun images and header to reflect that.  If you write a blog with lots of prose and serious discussion on, then maybe a text name header works better
  • Have these prompts in mind when revamping your blog, and you’ll have a blog you’re proud of and that readers like to visit
  • Of course, we’re not all super creative and need some help and there’s plenty of tools on the internet you can use.

Blog design tools

Colour

  • Finding out a hex code   Sometimes you see a colour and love it.  You can right click, inspect element, and find out the RGB code.  But this site changes the RGB to a hex code which is generally what themes use.  Handy!
  • Design seeds  This beautiful site shows colour palettes from images in nature and more
  • Coolors  Colour picks for designers, you can immediately see what goes together
  • Paletton   Choose the colours and tones around the wheel
  • Examples of perfect colour combinations used in websites in this colour combination article

Fonts

See my post on pulling your own fonts into picmonkey for websites to get fonts from.

Creating blog headers (and badges)

Themes

I’m self hosted wordpress, so these are some of the places to look for theme designs.  If you like elements of another person’s blog design, then look for the theme designer in the footer (most will have it on there).  You can get a lot of free themes which are customisable, but if you want something really personal, and more likely to be supported ongoing, then you’re best off paying for one.  Themes are generally from around $47+ so they’re not expensive.  Some costs include access to all themes in future, others you just pay for the one theme you want.

  • Blu Chic – My old theme was a Blu Chic one which was lovely and easy to use, although I did find some quirks that I couldn’t fix by the time I wanted to switch.  Pretty, feminine styles with child themes available for customising
  • Genesis framework – you buy the framework, then get the themes to play around with.  Popular with a lot of bloggers
  • Theme forest – websites like this have thousands of sites, and it can be really overwhelming if you don’t see what you’re looking for straight away, or want a combination.
  • Customised design – you can buy themes from Etsy, or directly from designers.  Mine was created by Zoe Corkhill

So there’s my useful library of blog tools and tips to help make your blog easier to read.  Hopefully you found it useful.  If there are different tools you use, let me know in the comments.

How do you go about changing your blog design?  What are your likes when reading other blogs?

Why not take a look at these similar posts.

use your own fonts in picmonkey   blog writing process as working mum   the perfect blog photo

Related Post

40 thoughts on “Blog design: make your blog easy to read (helpful tools)

    1. I do exactly the same. Or anything cursive. I find a lot of blogs have really small writing as well – someone mentioned it was due to being written on a mac, but generally internet font should be 12-14, so it’s not hard to check that’s what’s shown. Thanks for commenting

  1. These are some great tips, I decided early on in my blogging journey that I would have white background and black writing and it has worked well for me and brought great brands to my blog and readers alike

  2. These are some great tips, I decided early on in my blogging journey that I would have white background and black writing and it has worked well for me and brought great brands to my blog and readers alike

  3. This is so funny as my blog design post is scheduled for later this month! Might need to shift it as yours is excellent.

    Whilst it’s up to each blogger what their blog looks like, if I ever become Queen of the World, I shall insist on readable fonts and social media icons that are easy to find so if I like it, I can share it quickly AND follow you for more great posts. I’m on blogger and the number of people who have Google profiles they’ve never bothered to fill in is astonishing! * face palm *

    1. Ah, that happens so frequently. I’ve got 3 other posts sitting there waiting for enough time since others have been published.

      Blogger profiles are annoying. Mine was set up when I had an ancient craft blog. I haven’t used it in 6 years but really struggled to get it to accept my wordpress blog. Not enough blogger blogs allow the name/url option either which puts people off commenting if they don’t want to use google – and why should they if they don’t use it themselves to blog.

      Will keep a watch out for your post.

  4. This is a really great list. I really think the font is too small on my blog and it makes it hard to read. I’ve only noticed lately that I’m drawn to bigger fonts and am more captivated by blogs who has most of the above. It’s funny what our eyes are drawn too. xx

    1. Thanks Chloe. I find a lot of fonts too small but unintentionally do. Someone mentioned that people blogging on macs end up with really small font for other readers, so that might be an issue on lots.

  5. Definitely bookmarking this I have wanted to redesign my blog for ages but there is so many limitations on wix I just don’t know what to do! I have a clear vision of what I need and want but I am no code and tech expert so it has been difficult!

  6. Great post with some brilliant tips. I am just setting up a second blog (well after trying twice before!) and am currently playing about with themes. It takes time but is worth it. Kaz x

  7. So glad I came across this post.. im still fairly new to this, so it’s great to get tips where ever and when ever I can :). Will definitly be making use of some of this information. Thanks xx #commenter 8

  8. When it comes to first impressions, presentation is more important than content whether we like it or not. This is a really detailed guide and I’ll be checking out all the links. Thank you!

  9. There are some great tips here, spelling and lack of capitals irritate me. Which is ironic as often I have typos because I write on my phone and hit publish. I’ve never got to grips with Canva but I must re-visit it, along with my blog navigation.

    1. I’m with you on phone issues. I just don’t check before hitting send, so it’s a good job I don’t blog on mine! I don’t get canva either, but I love picmonkey so that does the job for me.

  10. I’m terrible for finding typos after I hit publish mainly because I type on my phone. There are so many great tips here for improving your blog and I need to check out some of the other tools I never use Canva. I also need to sort out my navigation.

  11. I love this post! So informative. I redesigned my blog last year and pretty much had an idea of what I wanted, but this would have been handy to have back then. I LOVE the click to tweet box – How did you do that? (and more importantly, as much as I love it, would I ever use it on my blog? lol)

    1. Thanks Danny. I just collect a lot of tools as I go so it’s handy to have them all in one place for my reference as well as for others!

      I think it’s called Better click to tweet plugin. There’s a few plugins around. I don’t use it often, only for things that are tip oriented. But it’s handy to have.

  12. I’m on Blogger and I designed everything on my blog myself. Once I decided to change the design I thought long and hard about making it different but still easy to navigate. There’s still bits of it I’d like to change but getting everything in the right place is very difficult.

    One of my pet hates is constant bad spelling. Everyone makes the odd typo but I’m still astounded that people think the plural of photos is actually photo’s. I once took a photo in Tesco of a sign saying ‘stationary’ and sent it to them on Twitter. They didn’t get what I was trying to point out!

    1. I love your dedication to spelling! Go us. Yes the ‘ or lack of drives me mad. I think if people write they should either learn basic grammar or get a proofreader who knows it.

      Good on you for doing the whole of your blog design. I’d love to be able to do my own, but there’s only limited knowledge and the amount of faff it took me to do changes I could do, it was easier to get exactly the things I wanted by asking someone else to do it!

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge