17 Jul 2012

Beauty blogger tips part 2: What's the best layout, font, style and theme for my beauty blog?

Disclaimer: I don't for one second think I'm an expert, nor do I rate myself as a top beauty blogger / guru.  I just see a lot of new / potential beauty bloggers asking a lot of the same questions and generally worrying about making mistakes / breaking the secret (non-existent!) codes of beauty blogging, so I thought I'd share what I've learned in my three years of blogging. I hope this helps some people who are new to blogging or thinking about starting out.  These are in no way 'the rules'!  I'm just passing on my opinions, opinions I've heard from others, and information I've learned along the way. I'm happy to be corrected on anything anyone thinks I've got wrong (in a polite and positive way please!) and also to be enlightened with any relevant information which I could add to this post - just leave me a comment :) 

Thank you to everyone for all of the lovely feedback and re-tweets on part 1 of this series.  I'm so pleased that it's gone down well so far and I've been delighted to hear from people who say that it's given them some good advice.  If you missed part one you can catch up here.

So on to part 2, today we're talking about all things to do with layout and design of your blog.  First of all, I need to say that the style of your blog is a very personal thing, and the way you want your blog to look is totally up to you.  But, as it's the first thing readers are going to see when they land on your page, you'll probably want something that hooks them in and gives an instant impression and flavour of the personality of your blog.  For this reason I think it's important to consider if your blog gives the impression you want, and also that it's visually appealing and practical in terms of being easy to read / view.

Blogger layouts
I mentioned blogger templates a bit in part 1 of this series, but I'd like to go into more detail here.  When you first start up a blogger blog, you'll start off with one of the templates available in the blogger template designer.  There's actually a really wide choice of templates in there now, and they're good to start off with as you can adjust them quite easily with the tools in the template designer without having to get involved with html which can be very confusing if you've never come across it before.

You can easily change colours, fonts, column layout etc with a few clicks.  Go to your blogger dashboard, click on 'design' and then on 'template designer' to have a play around.  It's a fairly safe way of tinkering with your blog design as you get a large preview pane to see how your changes will look and nothing is permanent until you click 'apply to blog'.

When my blog was fairly new, and long before I was ready to mess with any html code, I used to use a lot of the free backgrounds and themes from shabbyblogs, so you might want to have a look at some of the cute freebies they have available.

Before you're ready (and only if you want to) to move on to more complicated templates and html, changing things like a background colour and image and a personalised blog header are all quick, simple, and possible from the template designer tool.

If you'd like something a bit more adventurous, there are loads of blog template designs you can find with a quick google.  Usually with these you need to copy a block of code and past it into your blog's template code.  To do this you need to go to your design page within the blogger dashboard and click on 'edit html' - you can then paste the template code over the existing code in the box.  It's best to do this before making other html edits as it's going to override everything.  If I were to use one of these templates on my blog now, I would lose too many other widgets and bits and pieces that I've set up.  If you're in the same position, you're better off tweaking your blog bit by bit rather than trying to apply a full template.

html code is, in my opinion, very complicated, but picking up the basics is doable and the code for most things you would want to do can be found by googling.

Always save a copy of your template code before you make changes.  In the early days of having my blog I can't remember how many times I accidentally changed something wrong and then spent hours trying to figure out how to put it back to how it was.  Now I always save a copy of my template code before I start, so if necessary I can just paste the whole thing back in and revert to where I started.  As I mentioned before, I'm not super technical.  Putting my layout together has been a real culmination of tweaks here and there over the past three years and my layout has changed an awful lot since I started out.  A good resource for all things bloggie tech related is girl does geek

A final tip here is to view your blog in a few different browsers if you can.  I used to notice blogs where text was overlapping borders, or widgets were encroaching on the blog post area, and generally just little issues which were making the blog look a bit messy and not very slick.  It drew my eye away from reading the post or looking at the images, and I used to wonder why people didn't fix these things - didn't it drive them mad?!  A long while later I found out that the browser someone is using to view your blog can really affect their experience.  Sometimes there's not much you can do about this, but if you do have some other browsers installed, or can look at your blog on a friend's laptop or at work or college, you might spot a few issues you'll want to fix.  Personally my blog doesn't display correctly in some versions of internet explorer (I've only ever been able to see this on my friend's laptop) - part of my background displays as a pale lilac colour instead of white.  Unfortunately I've not worked out how to fix this yet despite spending hours checking my code!

It can be fun to use a fancy font on your blog, but the most important thing is that the text can be clearly read. I'm a fan of the Lobster font, but I only use it for titles and headings on my blog.  If I used it for the body text in my posts I know that it might be a bit difficult to read, especially in a long post.  I want people to read my posts, enjoy them, and come back for more, so it's important to me to use a nice clear and legible font.

Colour can also be an issue.  I'mm not saying that everyone should write in black text on a white background, but many people do because it makes the text easy to read.  My blog is a mid to dark grey text on a white background (in most browsers!), which I think is easy to read - any two colours with a big contrast between them will probably work well in terms of being really legible.  I always think it's a real shame when I'm put off reading a post because I just can't see the text easily because the colour is too pale or the font too swirly.

Be as creative as you like with your fonts and colours, but check that they don't make your blog inaccessible to readers.

Another suggestion is to have your links show up as a different colour from your text.  So for example, this text is grey, but if I put a 
link here the text you can click on to access the link is pink.  My blog makes this text pink automatically as I have set links to appear in a different colour using the settings in template designer.  I think this makes it nice and obvious to my readers when I've given a link without me having to say 'here's a link' every time.

This is my biggest pet peeve.  What I'm talking about here is blogs which have a music soundtrack which starts up automatically when someone lands on your page.  Although it can be another way of adding personality to your blog, and sharing your taste in music, for me I find this really annoying.

As I'll keep saying throughout this series, blogs are personal and it's totally up to you how you want to set up your blog, but I know that a lot of blog readers dislike automatic music on a blog.  One of the main reasons for this is that it might take you by surprise and start blaring out of your speakers at an inappropriate moment! Or, if you already have your own music playing, it's going to interfere and sound horrible with the two tracks competing.

I'm seeing automatic soundtracks a lot less on blogs these days, so maybe it's a bit of a dying trend.  When I do notice music playing on blogs, it's usually tumblr blogs, so maybe it's still popular there.  It wouldn't stop me reading a blog I really liked - I can just mute the sound of course - but I do find it a inconvenient and annoying.

The size of photos you can use on your blog will be in part dictated by your layout.  When I originally had a three column blog (a sidebar on the left, a sidebar on the right and a middle column for posts), I couldn't have extra large photos as the space just wasn't big enough.  My layout is now different with just one sidebar to the right and an extra wide column for posts, so I can fit in really big photos.  It's a bit annoying for me that my oldest posts still have very small photos as it doesn't give a very consistent look, but who's looking at my old posts anyway? (don't, they're a bit rubbish and embarrassing!)

So the point I'm making here is that if I could start again, I would have been using larger images from the start.  This is my personal preference, but I find that I'm much more drawn to blogs with larger images because it's simply easier for me to see the detail in the photos.  I genuinely find it a bit difficult to see images on blogs which use the smallest sized images and that's on my laptop - imagine when you're looking at them on a mobile.  It's all about personal preference again, but in terms of making it easy on your readers, I'd recommend going with large or extra large images.

If consistency bothers you, have a think about whether you want to be using portrait or landscape images on your blog when you start out.  These days I like to always use landscape images as it looks nice and uniform as you scroll down, but that's just me being a bit of a control freak.

Some blogger templates you might choose will put frames around your images.  If you don't want a frame and you want to remove it or change it, this tutorial explains how to do it in two ways.  Either you can make the frame transparent and therefore invisible, or you can actually remove it by changing some code.

For editing photos (and by that I mean cropping and re-sizing them, or fixing bad lighting) I use Picasa which is a free download from google.  You might also have a program already on your PC or laptop which can do these simple tasks for you.

As you get more used to playing around with templates and codes, you might want to put together a theme for your blog.  By this I mean choosing consistent colours, fonts and images to run throughout your blog across things like your blog header, post signatures, sidebar buttons and also linking in with similar colours on your twitter, facebook, tumblr and youtube pages (and others) if you have them.

I've gone to the extreme with themes in the past (there were butterflies everywhere at one point) and have more recently toned it down a little.  You'll see similar colours (purple, pink, grey and peach) appearing all over my blog, the lobster font, and the odd butterfly in a few places. I used to have sidebar buttons in the same theme, but I decided they looked a bit busy and took them off - they may appear again in the future.  If you're wondering what a sidebar button is, I'm talking about a little image with text which when clicked is a link to a page on your blog, or to another site.

I use photoshop to create headers and buttons, but you can also get free versions of programs which do very similar tasks and are often easier to use - there's a list of free programs you can use here.  Depending on what you want to do you don't necessarily need a complicated program - I started our using Paint (yes really!) and then moved on to things like Picnik, which although no longer available in its old form, can still be used through google+ or Picasa.

Widgets are the little gadgets that you'll often see in blog sidebars.  The GFC (google friend connect) box which displays followers is a type of widget.  There are lots of pre-set widgets available to add from with your blogger dashboard and some of these are really popular and you'll see them on lots of blogs.  My favourite widgets to have are -

Blog archive
The blog archive is a like a contents page for your blog.  It displays a list of your posts usually broken down by month and year.  You can customise it too.  I like seeing these on other blogs as I might have gone back there to find a post I'd seen previously and want to find again, or it might be because I want to read through some of the blogger's older posts by just picking out the ones that interest me.

Blog roll / list
This widget can be used to display the blogs you like to read.  I really like to have this widget in place as it's a nice way of spreading a little love for other bloggers, and also it's a really handy list for me to have for times when I just want to read a few posts from my favourite blogs, rather than when I have time to scroll through my full google reader list.

I like seeing blog rolls on other blogs as it introduces me to great new blogs I might want to read.  Particularly when I was new to reading blogs, this was the main way I found other blogs I would like.  It makes sense really - if you like a particular blog, blogs that blogger likes will probably appeal to you too - did that make sense at all?

You can customise these widgets to show a little preview image and a snippet of the start of the post.

Popular posts
A popular posts widget lists your own posts which have had the most page views / readers.  Again you can customise this and decide what you want to display - I go for a preview image and a snippet of the post as well as the title, and I set it to display based on views over the past month.  I think widgets like this are a good way of encouraging someone to stay on your blog and read some more by suggesting other posts they might like.  Personally I like to have it so that I can see at a glance which of my posts are the most read - this often surprises me too.

Pages is the name of the widget which allows you to have some links at the top of your blog which take you to additional 'pages' separate from your usual blog posts.  If you have a look at the top of my blog you'll see a list of text including 'get in touch' 'my favourite blogs' and 'giveaways'.  These are links to pages on my blog which I've created giving various information which my readers might want to find.  It's quite common to see these on blogs especially to provide contact information and even an FAQ list if you're a blogger who tends to get asked the same questions again and again.

Recent comments 
This widget does what it says on the tin really - it displays the most recent comments which have been left on any of your posts.  I'm not sure if many of my readers look at this widget, but I like it as it's an extra way for me to spot comments I've received to make sure I don't miss reading any of them.

Search box
I wish all blogs had a search box.  You'd be surprised at how many times someone will come back to your blog to find something they've seen before.  It might be that a nail post you did played on their mind and they want to come back to look at the images again to recreate the look, or they may have decided that they really need to buy those shoes you blogged about but they can't remember which brand they were.  Having a search box allows someone to quickly and easily navigate to what they're looking for on your blog.

This is of course a tool which becomes more valuable over time as your blog grows and there is more and more content to search through, but I find myself using the search box quite a lot when I'm returning to a blog to look for something I've seen before, and I find it quite annoying when a blog doesn't have one and I have to try a google search instead.

You may have noticed that you can add labels when you're writing a new post.  These are totally optional, but I quite like them in terms of categorising and organising my posts, and it might help a reader to find other posts that they're interested in.

For example, if I tagged a post with the label 'nail art' when someone reads a post with that label, as the end of the post they could click on it to view all of the other posts I have done bout nail art.

I display the labels widget at the bottom of my blog page - it shows all of my labels and how many posts are tagged with those labels.  A reader could then click on any one of those to see all of your posts in that category.  This is a really customisable widget too - you can choose to have a list of a cloud formation and whether you want to show how many posts have the label or not.

Follower widgets 
I think when you start a blogger blog, the GFC (google friend connect) widget is there as standard.  We'll talk more about other ways your blog can be followed in a later post in this series, but if you're already using a facebook page, or another blog following tool, you can add those follower widgets too.  Have a look towards the top of my right sidebar for some examples.

Most social media sites offer widgets for blogs, so you can add these by pasting the code into the 'HTML / Javascript' widget on blogger, which I'll explain below.

To add widgets you just need to go to your blogger dashboard, click on design and then 'add a gadget' in the area of your blog where you want it to appear.  To add a non-blogger widget, follow the same steps and from the list of available gadgets select 'HTML / javascript' and you can then past in the code for a custom gadget. Custom gadgets can be found with a quick google of what it is you want the widget to do.

That's all for part 2 of Beauty Blogger Tips - if you have any comments about anything I've said in the post I'd love to hear them - also happy for you to point out if I have missed something out or got something wrong.  Here's a list of the previous posts in the series, and the upcoming ones which you can look forward to - 
Part 3 - What should I write about on my beauty blog?
Part 4 - How do I get more blog followers / traffic and comments on my posts?
Part 5 - How do you get PR companies and brands to send you samples for your beauty blog?

Make sure you don't miss out on the rest of the series by following my blog in any of these ways -  Google Friend Connect, twitterfacebookbloglovin'hello cotton, or rss feeds

The next post will be about writing posts for your beauty blog, so if there's anything particular you would like to see covered, let me know through the comments, tweet me, or send an email to fluttersparkle@gmail.com  



  1. This was such an interesting read! I can't stand it when music starts playing on a blog especially if I have my own music playing. I can't wait for the next post!

  2. These tips are really helpful for anyone, their really helping me create my blog, Thank you for posting such helpful advice.


  3. Thanks so much for this post Gem. I am the process of giving Confessions a 'face lift' and I never thought of having a search bar on there, but now it makes perfect sense. great post, as always xx

  4. This is such a nice series and your completely right about the fonts, if I try to read a blog with lots of fancy writing it gives me a migraine, not cool.

    Lots of love
    B xxx

  5. I remember the days of music playing on sites! I remember peoples myspace pages too with the soundtracks on - so annoying! - although i must admit i did do it once *cringe*
    I also look back at my older posts and think CRIPES why did i post such a cruddy photo!? i also like landscape ones too - so youre not alone in being a control freak :P xx

  6. Another fab post.. *Adding a search box RIGHT now!!* Thanks again for sharing your ideas and experience with us novice bloggers :-) Nicole xx
    Beauty and the Girl Blog

  7. I have just read through your whole tips which is extremely helpful. I'm really not expecting to get lots of followers over night. I just enjoy writing and I always have done. This is a hobby for me to get away from the stresses of work. So long as I can interest some people, whether it be 5 or 50, about what I write I will be content :)

    Thanks for the great tips - bookmarking this page :)

  8. Thank you so much for these tips! I really am grateful that you mentioned the 'shabbyblogs' website because it has been a life-saver. I'm not tech-savvy and especially since I'm a baby blogger, it helped a lot with achieveing a professional look. I've mentioned you in my blog because I'm that happy about it - here's the post (my first post actually): http://be-bold-be-beautiful.blogspot.co.uk/2013/04/gorgeous-blog-headers-backgrounds-etc.html

    Once again, thanks! :-)

  9. Hi Gemma! Thank you so much for these tips, they've been so helpful so far! Only just finished reading the 2nd one and I will continue to read the rest! Please pop over to my page and see what I've come up with so far!
    Isabel xxx

  10. Hi Gemma, I noticed how passionate you are as a person, and that reflects in your blog. I have just started my own beauty blog and loving it so far. Thank you for keeping us newbies inspired through your tips and suggestions. I am now your subscriber!

    Ridhi Hygh

  11. All of these are sooo helpful! Thank you - I have saved this in my favourites tool bar so I can keep coming back! Having just started a Beauty and Pilates blog, you are giving me inspiration! Kerry x

  12. I posted a very similar post today :) A post with a few starter tips for starting your own blog!



  13. Thank you so much for this! Not everyone wants to sare theire blogging tips and tricks I found this realy helpfull, I just started a beauty blog and this showed me that I was on the right path.


  14. That is such an awesome post! Glad to see a blogger talking about all that goes in the background! Is a lot of hardwork and tweaking! Good idea about checking your blog on other browsers. You have a wealth of knowledge. Thank you for sharing the tips n tricks hun xo


Let me know what you think, and feel free to leave your blog link! I really appreciate every comment and always reply to questions x

Blogger Template Created by pipdig