Thursday, June 21, 2012

Making a more efficient blog layout


How your blog is laid out is actually a pretty personal choice, but there are some things you can do to make your layout more efficient and user-friendly.

Why is an efficient blog layout important? When readers feel comfortable and at ease on your blog, they're more likely to come back. If they can't find common items, such as a subscribe button, they may just get frustrated and leave. You don't want that to happen!

The three most important aspects of a blog's layout (in my humble opinion) are the header, the subscribe button, and the "About Me" spot. No matter where your other blog elements are, pay special attention to these three.

1. Header

Your blog’s header is your chance to shine. It can be simple or complex, typographic or image-based... really anything you want. The main thing to remember is that you want to make it feel like YOU, and that probably doesn't include using the default header that came with your template.

Seriously... even if you don't customize anything else on your blog, you should customize your header. You only have about two seconds to make an impression on a new reader, so make sure that impression is telling them something about what makes you you!

I personally use Adobe Illustrator to make all my blog headers, although I realize this is a rather expensive option, unless you’re a student or a design professional. Here is a list I’ve compiled of free and inexpensive options:
  1. Skitch (Mac only)
  2. Gimp
  3. PicMonkey
  4. Picasa
Before you get started, you’ll want to know how wide your blog layout is. Go into your layout settings and there should be a place to upload headers. Most likely it will be indicated there what size header your template can hold. I’m mostly familiar with Blogger, but I would assume most blogging platforms handle this similarly.

Let’s say for the sake of simplicity that your blog is 1000 pixels wide. Open up your image-editing or vector-editing software and make a new document that’s 1000 pixels wide by about 200 high. You can make it as tall or as short as you want, but that’s a good place to start.

Next you’ll need to choose a font. I’ll try not to get all technical on you, but just remember that fonts have a personality. They can be stuffy and impersonal, fun and whimsical, silly, glamorous, or horribly outdated. Choose a font that’s easy to read, and “feels” like you.

Google has many web fonts that you can choose from, if you’re looking for something outside of what your computer comes with. You can also download free fonts from dafont.com and 1001freefonts.com. To install these, if you’re on a Mac, just open the Font Book, and then File --> Add Font. For you PC-users, I’m going to defer to a lovely article that I found on this topic.

So… moving on.

I’d suggest starting with your blog title. Type it out in your chosen font. Try it large and centered. Try it small and in the corner. Try is slanted diagonally. Try it in one color or many colors. Try it upside down. Once you get that looking like you like it, move on to the image, or just stick with the type only… nothing wrong with that.

If you want to add an image, think about what role you want the image to play. Is it going to be the background? An accent? Is it going to be subtle or will it shout and grab attention? Which feels more YOU?

If you’re using an image software that supports layers, move things around and under and over each other until you’re satisfied with how everything looks. Save the whole thing in a PNG or TIF image format, and then upload that to your blog template. Remember to also save a file in the native format of the software (PSD format if you’re using Photoshop, for example) so that you can go back and edit things later if you want to.

Here are a few header ideas to get you started:







2. Subscribe Button

Blogging would be pretty boring if nobody read what you wrote. I mean, yes, technically we should be writing because we love it (isn’t that why we should be doing anything?). But if you truly don’t care that anyone reads your blog, ask yourself why you aren’t just writing in a paper journal offline (although hey, nothing wrong with that… I have dozens of paper journals stashed in my closet, dating back well into the 1980’s).

Let’s assume you want people reading your blog. You’re going to need a Subscribe button. I’ll go into more details in a later post on how to do that, but for now, let’s talk about placement.

You should get that your subscribe widgets "above the fold", as they say, or as close to it as you can. This means, don't make a guest scroll all the way to the bottom of your page to figure out how to subscribe. Think of it like an impulse buy at the store... you wouldn't purposefully walk to the back of the store to buy a candy bar, but you might just grab one if you see it next to you in the check-out line! Subscribing to a new blog is like buying a candy bar. Make it easy and obvious and you just might snag a few impulse clicks.

Blogger makes all of this pretty easy with the Google Friend Connect widget. If you’re using Blogger, be sure you have this widget in plain sight, high up on your sidebar. If you’re on another blogging platform, be sure to have an RSS widget, and preferably a couple other ways to subscribe as well (email, Blog Lovin’, Hello Cotton, to name a few of the more popular ones).

3. About Me

You probably already have an "About Me" Page, which is great for listing out common topics that you write about, your basic life story, etc. You should also consider adding an "About Me" widget at the very top of your sidebar (yes, even above the Subscribe widget).

What I'm talking about is your "elevator speech", that little snippet that you can tell someone that'll reel them in and make them excited to read more.

Quick... describe your blog in 3 sentences or less...

That that info and put it into it's own little section. This "About Me" can be text-based or image-based; whichever feels more natural to you. Including a photo of yourself here is generally a good idea, although not absolutely necessary. What you're going for is the essence of who you, as a person and a blogger, are, and what makes your blog worth sticking around for. No pressure.

While not the MOST necessary part of a blog, I've found that this little snippet can really do a lot to make you seem approachable and put a potential reader at ease. A lot of bloggers write things here like where they're from, what their life circumstance is (married? student? deep-sea fisherman?), and some little quirk about that (they HATE chocolate!).

Typically right below these "About Me"s is where a person's Social Media widgets live. You can place these elsewhere, but remember that they really do fall under the category of things that you don't want a new reader to have to hunt for, so don't stow them too far down your sidebar.

Here are a few ways I've seen an "About Me" done well:


*****
This concludes week one of the Build Your Blog! series. Next week's topic: How to set up an RSS feed. If you haven't already, don't forget to subscribe to this blog so you know when the next edition of the blog series is ready!

Questions or comments about this week's topic? Leave them below & I will try to answer them all in a follow-up post later this summer!

*****
Grab a button and help spread the word!

8 comments:

  1. Super tips. I need to get a nice family picture for our About Us page. Thanks for including my header in your examples!

    ReplyDelete
  2. Hi Jennifer, awesome tips... I am looking forward to being able to actually used these tips once my CPA course is over.... I hope I do them well :)

    ReplyDelete
  3. Great tips Jen. I'm grabbing your button to place on my blog.

    ReplyDelete
  4. thanks for sharing these tips! I wish I had that much talent for design as the examples above ;)

    ReplyDelete
  5. Awesome tips!! Thanks for sharing :)

    Linda
    http://lasteve1.blogspot.com

    ReplyDelete
  6. Thanks! Will be using this to make my blog better looking!!

    ReplyDelete

Don't even try to leave a link in your comment... it will be deleted without warning.

Related Posts Plugin for WordPress, Blogger...