So You Want to Blog? – Part II: Layout
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.
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.
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.
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.
23 thoughts on “So You Want to Blog? – Part II: Layout”
BEST BLOGGING ADVICE EVER.
Not kidding folks. This is EXACTLY what I look at when I read a blog. I want to see good content that’s easy to find with a quick breakdown of the major players if needed.
I never thought about the “fold” concept in terms of the internet, but it’s 100% right.
My blog isn’t responsive, which is annoying, but I like my theme too much to hunt for another one. :/ My header did really funky things with the other free themes. haha
A lot of blog themes aren’t. Moving forward, I expect to see most of the newer themes/designs be responsive. It’s just the way that web design is going!
I keep wanting to use my blog as a reason to learn PHP and finally design a responsive site.. but then I realize… I already have one time consuming hobby!
Plus coding at work + coding at home = too much coding
Yeah, I don’t do too much fancy stuff here anymore. At one time I heavily customized themes, but now I pretty much just find one I like that suits my needs and just make some little tweaks here or there.
Or make sure they can’t find what you don’t want them to mwahahahahahaha
Responsive layouts = love
You make me want to buy my own domain and figure out how to make my blog more professional looking…. but I don’t really know how to do any of that. Still this series is great food for thought – thank you for sharing your knowledge!
Amen to the About page- if I can’t find one, then I’ll usually skip over and move on to the next blog. I want to know who’s talking to me!
I’m seriously taking notes on all this, thanks for putting this out 🙂
I agree! If I can’t find out who you are or what you’ve been up to, it gets too hard to catch up!
As always, awesome post!
I need to do a better job at taking my own advice! I have an about page, but it’s in the footer… whoops 😉
Not gunna lie, I tried to mold my blog after yours. Blogger thought your layout was too cool to be able to reproduce.
From what I hear, Blogger templates aren’t as versatile. That’s why I love me some WordPress 😀
Love this post and your layout 😉
So important! I try to keep my ‘things you need to know about me’ extra visible. I cut posts that are long so people can scroll quickly and get a feel for what my content is about. And I watch my own blog so I can see what it looks like in RSS feeders. I will say that layout doesn’t matter as much as it used to (since most people read through a subscription service and only click on the things they want to see), but it definitely still counts BIG time when it comes to making a first impression.
Great tips! Especially readability. There are good blogs that have such horrible, hard-to-read font that I just pass. Its too bad, really.
This answers a bunch of my questions. I’m on Blogger–signed up before I knew any better. Now I wish I had WordPress or just shelled out for SquareSpace. If I do that, how easy is to transport my whole archive over?
This isn’t a priority at the current second, as I need more consistent updating to make it worthwhile, but it IS something I want to do. Blogger is getting on my nerves.
It’s very easy to switch over. WordPress can migrate all of your Blogger posts and pictures so nothing gets lost.
i was reading a million blogs long before i started one of my own, so i already had a sense of what i liked and disliked. i wanted to structure mine to be similar to those blogs i found the easiest to navigate and read, without creating a lot of behind-the-scenes work for myself haha.
will be super curious about the SEO stuff, as it’s definitely not something i know well
Thanks for this blog!
Is there any particular WordPress theme you would suggest?
You had me at SEO. I look forward to that one. I’ve never liked my blog design very much. I have my eye on a new theme. I also need a header and/or logo. These things have been on my mental to-do list for a while. Thanks for the reminder. 🙂
My favorite part of blogging is working on design but it’s the most time consuming so I often don’t spend as much time on it as I should. I have a long list of tweaks I want to constantly do “in my spare time”. Insightful post : )
I’ve been on WordPress for about eight years and am impressed by how many new templates they’ve introduced — some free, some paid. While you can’t customize the WordPress.com templates in quite the same way you can with the self-hosted themes, you also don’t have to maintain WordPress-hosted sites, which can save a lot of headaches. Letting your plug ins or your version of WordPress get out of date can leave you open to getting hacked. Been there, done that on some other sites I have and it’s a PIA to get everything back to normal!