10 Tips To Change Blogger Layouts

1 . Vertical Alignment. When something sticks
out, you notice it. And when a picture or text
sticks out from the rest of the column, it looks
like a mistake and it becomes a distraction.
Things look right when paragraphs and images
all fit into their columns precisely. Images and
paragraphs should be the same width and this
applies to sidebar elements, too. There are times
when a design may intentionally call for doing
otherwise, but in general, it's good practice to
keep things lined up.

Quick Tip: For the content area of your blog (this
is where your blog posts reside), choose a
common width for all the images and make sure
that your paragraph widths are the same. Left-
justified paragraphs are recommended for
readability. Although the text may look ragged
on the right side, that's okay.

If you have sidebars, the same tip applies ---
choose a consistent size for your images and
make sure they line up vertically. Images that
stick out make the the page look cluttered.

2. White Space. A crowded page can feel
claustrophobic and overwhelming, even when it's
well-organized. Having white space --- or well-
spaced page elements --- makes those sections
easily identifiable and easier to read.

Quick Tip: You can control the space between
the elements or sections of your blog by adding
some margins and/or padding. If you're
comfortable with adding code to your blog, you
can control the space between elements with
the margin and padding CSS attributes.

3. Uncluttered Sidebars. Navigation usually
refers to the links we include in our horizontal
navbars and sidebars. Navigation's purpose is to
make it easy for readers to browse and
"navigate" through your blog. Since the navbars
and/or sidebars are visible on every page, the
information we choose to include in these areas
has to be meaningful and useful. It's easy to fill
up these areas with every conceivable link to all
our static pages and favorite blogs and websites.
However, since these areas have a finite amount
of space, we have to be mindful of what we put
there. If fill up these areas with a lot of
information, it tends to confuse. So, we have to
curate these areas with good links and keep
them neat and tidy and easy to read. Keep your
sidebars uncluttered!

Quick Tip: If you have a blogroll on your
sidebar, consider moving it to its own page and
then add a link to it from the sidebar.

4. Accessible Info. Sometimes you need to ask a
blogger a question and you want their contact
info ASAP. I've come across many blogs that
don't provide any way to contact the blogger,
and if it was there, I couldn't find it. Make it
easy for your readers to find the information they
need by providing visible and easy-to-find links
to your about page, contact info, and RSS feed.

Quick Tip: Keep important links in plain view ---
categories, featured posts, search box, links to
archives, and other links to resource/static
pages.

5. Short Description. Your blog banner is the
first thing visitors see when they arrive at your
website. It's nice when a blog has a short
description on the banner that tells what their
blog is about. For example, Nubby Twiglet ,
Shutterbean , SFGirlbyBay, and Creature Comforts
have short descriptions in their banners. These
well-chosen words remove all ambiguity and give
the reader a clear idea of what to expect.

Quick Tip: If you don't already have a short
description for your blog, browse through your
old posts and observe the topics you've written
about the most. The theme of these posts
constitute the primary subject of your blog and
is a good place to start when drafting a short
blog description. This short description can be a
comma separated list or a phrase.

6. Typography. It's good to limit the number of
fonts to no more than three --- one for post
titles, one for the sidebar titles, and another for
the post body. Too many fonts tend to make a
page look really busy. Additionally, when
choosing fonts for your text, aim for legible fonts
in a readable size. Now that web fonts are
popular, I've seen some sites that use script
fonts that are really hard to read. Whatever font
you choose, keep legibility in mind.

Quick Tip: The most readable font under 14px is
Verdana and larger than that, Arial is the most
readable.

7. Colors. Colors are great. They're magnetic and
draw attention. For our blogs, it's best to choose
colors that direct attention to the areas where
we want the eye to go. A splash of color in the
banner and little dabs of color here and there
place visual markers of importance for our
readers. However, using too many colors can
become a distraction --- there will be too many
places for the eye to go and it can cause
attention paralysis.

Quick Tip: I personally like to keep my blog
layout neutral so that I can go color wild in my
blog posts. I LOVE color, but I minimize it in my
blog layout and the reason is this: If both my
layout and blog posts are colorful, it becomes
confusing because there isn't a focal point the
eye can rest on. So, use colors wisely and place
them carefully in areas you don't want your
users to miss --- like your content (your blog
posts).

8. Profile Photo. I used to think profile photos
were unnecessary until I read an article about
how the Wikipedia decided to use contributors'
profile photos to show that real people were
working behind the scenes to create all the free
content we enjoy. I realized then that using a
profile photo adds a lot of humanity to our
online life and this especially applies to our
blogs. Profile photos can be on the sidebar or on
your about page. When I say photo, I mean a
real photo, not one of those cartoon avatars that
were so popular a few years back. :)

Quick Tip: I get really self-conscious when other
people take my picture, so I usually take my
own! :D Elsie has awesome tips on how to
take better self portraits .

9. Fast loading pages. It's really frustrating to
visit a site with a lot of great content, then find
it painfully slow to load and navigate through.
There are many factors than can make a blog
slow, but this problem is especially common with
image-rich sites.

Quick Tip: One way to help pages load faster is
to use images that are optimized for your blog.
Some blogs I encounter load images that are far
too large for viewing. For example, the image
width may be set to 600px, yet the image that
loads is actually 1200px! To make it worse, there
may be 5 images per post and 12 posts per
page, which turns out to be quite an extra load!
So, we help our pages load faster by uploading
images with dimensions that fit our posts
perfectly. Another way to help your page load
faster is to limit the number of posts per page.
And one more thing, you can add a "Read More"
link after the first couple of images and an
excerpt.

10. Backgrounds. Background Patterns are great
and they can add a whole lot of fun and
personality to a blog. However, background
patterns that don't tile look like mistakes. I
mention this because I once designed a site on
a laptop with a small screen. Some time later, I
saw the site on a pal's large monitor and I
realized that the background covered only half of
the screen real estate! It wasn't the end of the
world, but it looked amateurish.

Quick Tip: If you're going to have a background
pattern, make sure it tiles. What I mean is, make
sure that no matter how large the monitor, that
your background will tile from top to bottom
and/or left to right. Take a look at your site from
monitors of varying sizes. If your monitors are
pretty much the same size, take a look at your
blog the next time you visit a computer store
and view your blog with the largest monitor you
can find.