In this blogging series, I’m sharing my knowledge as best I can about the world of equestrian blogging.  Last week, we talked about the reasons to blog and picking a blogging platform.  This week we’re going to tackle my favorite part of blog design – layout!

This is an area where I have a little bit more professional knowledge than some others.  My professional career started out with web design, and I do a lot of UI layout these days.  Though I could talk about layout for days, I’ll try to stick to the high level subjects so I don’t drone on and on.

Responsive Layout

A responsive design or layout means that your website ‘responds’ to the device that it’s on.  Simply put, it is designed to look good on both a computer and a mobile device.  Responsive code uses percentages instead of hard numbers, so images and content boxes scale up or down as they need to.  Other cool things happen on responsive layouts as well like menus automatically switching to cell phone friendly and columns combining to make it easy for readers to read your blog on a phone.

As this style of coding becomes more and more necessary, you’ll have an easier time finding blogging templates.  I know self-hosted WordPress has tons of free, responsive templates to choose from.  Another reason to choose a responsive layout is that Google has recently started giving responsive designed sites higher search rankings on mobile devices than non-responsive ones.  We’ll talk more about SEO another week, but basically this means that if someone searches “texas horse blog” on their mobile device my site is going to have a higher search result than an non-responsive designed site.

You can tell if a layout is responsive by checking the layout information on your blogging platform, or simply changing the size of your browser window to see if anything changes or not.

The Fold

As a designer, hearing the phrase “Above the fold!” can be really annoying… but it’s super important.  What is the fold you ask?  It’s this imaginary line that separates the stuff you can see at the top of the page without scrolling from the stuff you have to scroll to see.  While the height of the fold varies for a lot of people depending on screen resolution, I try to be very conservative with it.  I browse blogs at work in a small browser window.  Since my browser window isn’t fully expanded, it means my area “above the fold” is small.

Below is a sample wireframe of key elements I personally find important to have above the fold.  The magenta line is what I’m calling “the fold” in this example.

This isn’t to say that having a really large, pretty header image isn’t okay.  It’s your blog – you should design it however makes you happy!  I just personally trend more towards my layout showing “All the things!” above the fold versus a large image.

Readability

Unless you’re a photography blog with very little words, readability should be the primary focus of your layout and design.  In other words, don’t make it hard for people to read.  Hand written fonts can look really cool, but make sure they don’t make your text hard to read.  Reverse text (white on a black background) is also one that can be difficult.  Some professionals say reverse text is actually a way that allows our eyes to “rest”, but I find that I have a really hard time switching my eyes from a black background site to a white background one when reading.

Speaking of backgrounds, they can be tricky when combined with text.  I would go to super light and super simple patterns.  Anything with a lot of contrast is again – going to be hard to read.  If you want to use fun backgrounds like that, see if you can put it in the very background on your site with no text on top.  Sometimes on this layout I do a fun chevron on the outside edges, since it doesn’t interfere with any reading issues.

Make Your Information Easy To Find

My last word of advice when designing your layout is to make it really easy for the reader to figure out who you are and access all the links they want to click.  This is another reason I prefer WordPress to Blogger, because WordPress divides into categories, tags and by date while Blogger just does tags and date.

My top level navigation of this site are my main categories, which are the easiest way for users to find something and therefore given first priority.  On the right hand column, I also keep a “Popular” widget that puts the most recently popular posts up above the fold to get more clicks.  Also on the right hand column we have Archives and my tag cloud, which are just more ways for people to read.

Aside from links, it’s good to give readers an idea of who you are and how to contact you (if you want to be contacted).  I strongly advise giving high priority to your social media links as well as an “About Me” bio area.  That way a new reader can quickly figure out how to follow you through social media channels and get the quick and dirty byline about you.  Without that, they may have no idea what discipline you ride or what you do depending on what your blog is currently showing that day.

These are more general layout ideas and guidelines than hard and fast rules, but I hope it gives a little insight as to how I do things!  Next week I’ll do a brief overview of SEO and how it can play an important role in your blogging.

You may also like:

So You Want to Blog? – Part III: SEO So You Want to Blog? – Part V: Traffic So You Want to Blog? – Part IV: Content Makings of a Great Blog Blog Hop – What’s In Your Name?