Want to see something funny?
It’s my first-ever blog template (or a version of it, anyway: I couldn’t find the VERY first incarnation, but it looked much like this, with a few small differences): a Typepad theme, heavily customised by Terry, which stayed on my blog for a good few years.
I show you this because when I first started this blog series, quite a few of you asked for a post about blog design, so while I’m by no means an expert on this topic, here are some of my thoughts on blog design…
01. Keep it clean
People have lots and lots of different preferences for how they like blogs to look, and you’re never going to please everyone. One thing most people seem to agree on, however, is that they like the layout to be clean, uncluttered, and easy to navigate. And I know: it’s really, really tempting to cram your template and sidebar with every widget known to the internet. Twitter! Instagram! Facebook! Blog buttons! Animated gifts! Pictures of cats! The kitchen sink!
The fact is, though, that while it’s nice to have a great-looking blog, readers come for the content, not for the awesome font you used in the header, or the images in your sidebar. There’s nothing wrong with a site with “character” (which is what I was going for with that first design, up top), but it’s better to try and do that without adding too much clutter.
Right now, the fashion (and yes, there are fashions in blog design, just like in anything else) is for very minimal designs, with lots of white space: you don’t have to make your blog look like that if you don’t want to (and there’s a good argument for taking it in a different direction, and making it stand out), but regardless of the look and feel you end up going for, it’s a good idea to cut the clutter, and only include those elements you think will actually be useful to your readers.
02. Keep it clear
Web usability is a a huge topic, and is something that could be a post in itself. I’m not the person to write that post, however, so all I’ll say here is that when you’re designing your site, the most important thing of all is that you make it easy for people to read and navigate it – and that means ALL people, including those who are visually impaired. Text and background colours are of the utmost importance here, and regardless of your personal taste, dark-coloured text on a light-coloured background is by far the easiest to read.
Light-coloured text on a dark background, on the other hand, can be almost impossible: if I come across a blog which uses white text on black, for instance, I’ll instantly hit the “back” button, because that can actually trigger a migraine for me – something about those scrolling white lines completely messes with my brain.
Font size and style is also important here, and while the existence of Google Fonts makes it tempting to use some fancy, flowing script for your post text, that’s only a good idea if you don’t want people to actually read what you write. Those fonts look pretty in headers and as titles, but for your actual posts, it’s better to stick to something clear and easy to read: fonts like Ariel, Helvetica and Times New Roman are popular for a reason…
Similarly, make sure your text is large enough to be readable, and dark enough to be seen. For some reason, I keep coming across blogs (particularly fashion blogs) with teeny-tiny writing, in a pale shade of grey. It makes my eyes hurt, so can you imagine how someone with a visual impairment would feel trying to read it?
03. Keep the capitals
This might be somewhat controversial, but I feel strongly enough about it to include it as a separate point: please, for the love of Gaga, use capital letters at the start of sentences and for proper nouns. I’m including this in a post on blog design, rather than in a post about writing, because there’s an ongoing trend for bloggers to write their posts in all lowercase, and I’m pretty sure most of them do it because they think it looks cute, rather than because they simply don’t know how to capitalise.
The thing is, though, capital letters aren’t there to make your sentences look ugly: they actually help to break up the text, so that when your eye scans it, it’s easier to read. A wall of text, all in lower-case, is much harder to read, and no matter how trendy you think it looks, it’s making it harder for your readers to understand you. And honestly, if you’re anything like me, that can be hard enough, without adding any other obstacles into the mix.
Also, this is probably just me, but just as I read TXT SPK as if the person is speaking Pidgin English, I read all-lowercase in a baby voice. Unless your shift key is broken, please keep the caps!
04. Keep it consistent
This is possibly one of those “goes-without-saying” things, but keeping your design consistent across all of the pages of your site will give it a more cohesive, professional feel. Choose the colours you want to use for your text, logo, headings, etc, and then use them consistently. I touched on this in my post on photography, but I also recommend making sure all of your photos are the same width as each other, and as the text below/above them. You’ll rarely find a successful blog – particularly a fashion or beauty blog – which uses tiny images, so don’t be afraid to make your images big enough to be seen. On that note, though…
05. Keep it quick
This is another point I touched on in my last post, but how quickly your blog loads is just as important as how it looks. The problem is that many of the design elements which help make a site visually distinctive, can also really slow it down. Huge images, lots of widgets, tons of pointless clutter – all of those things will make your blog slow to load, and it doesn’t matter HOW good it looks if people don’t hang around to wait to see it (and trust me, they won’t….). I spoke a bit last week about the importance of re-sizing images, but reducing clutter, as described in point 1, will also help your site load faster.
06. Keep it compatible
This tip is perhaps one of the most important, and it’s about making sure your blog is compatible with different browsers and mobile devices. A lot of people make the mistake of testing their design only on the browser/monitor or device they use personally, forgetting that different people use different browsers, differently sized monitors, different resolutions, etc. An increasing number of visitors will also be viewing your blog on their phone or tablet (I do almost all of my blog reading on my phone, these days…), so it’s really important to make sure they can actually SEE it.
This all sounds complicated, and can BE complicated if you’re the one coding the site from scratch. Luckily, most of us don’t have to do that: most bloggers simply buy a ready-made theme (As I said in my introduction, I like ThemeForest for WordPress themes, but I know you can find Blogger themes on Etsy, and there are tons of other sites which provide ready-made templates: WordPress.com has tons of free ones) and many of those themes are designed to be compatible with different browsers, and fully responsive, so they can be viewed on different screens or devices.
When you’re looking for a theme, always, always go for a responsive one. Responsive themes change size so that no matter the size of the screen you’re viewing the blog on, it will still display properly. For instance, if you look at this site on a wide-screen monitor, you’ll see the post plus sidebar (or three rows of posts, if you’re looking at the homepage). If you view it on an iPhone, however, you’ll see a variation of the design, which still looks much the same, but which fits into the much smaller screen available for it. With a non-responsive design, all you see on an iPhone is whichever part of the site fits on the screen -normally a part of the header and a small section of the post: not good for readers.
07. Give it some character
So you have your clean, clear, compatible template – the only thing remaining is to give it some character, to make it stand out from all of the OTHER clean white blogs out there. There are lots of ways to add identity to a blog theme, but I’d say the most important one is to get yourself a decent logo/banner, and make consistent use of colours and fonts throughout the site. You might also want to consider using these same “branding” elements on your social media, too, to make your brand even more memorable.
I’d add a final point – Keep it Concise – but we all know I’d NEVER be able to take my own advice, don’t we?