How to Design the Best Layout For Your Blog

Serving as an umbrella to your images, fonts and colors, your blog’s layout makes or breaks your font and color choices. How many times have you clicked on a link, only to be turned off by the blog’s clumsy layout?

You don’t know where to look. Or something else keeps tugging at your eyes, distracting you from what you wanted to read.

The best blogs we love to visit have neat and simple layouts. We go there, we find what we’re looking for, we stay and read, we connect with the author and other readers in the comments, and we find more to read! That’s every blogger’s dream. The visual elements should be at its best so that your content has a chance of wowing your audience!

Here’s how you can make sure your blog has its best layout, so that going to your site feels like checking into a tastefully decorated hotel room.

Blog Layout Design Secrets Revealed

When I was a newbie, it was a complete mystery to me how this blog looks great and other’s didn’t. It turns out there are rules of layout design– and you can break them, yep. By following the rules makes your blog look professionally done.

White space and calm backgrounds

You must have noticed by now that most blogs have a margin of white space surrounding body text, the sidebars, the two filled columns. Like me in my neophyte days, you’d probably wondered why that space wasn’t used. Seems like a waste, right? No.

That white space makes a reader feel comfortable instead of cramped. It also serves as a very unobtrusive background to make your content pop.

Colored and patterned backgrounds may add to your blog’s personality. It’s a nice and creative play with color, texture and depth. But it shouldn’t overwhelm, and make sure it covers all of your blog’s real estate, no matter how big a screen!

Don’t crowd them all together like sardines in a tin can. Every design element in your blog should have wiggle room. Aside from being nice on the eyes, it gives the reader the feeling of relaxation rather than being overwhelmed by all this content.

Your blog banner slogan

Define Your Blog. In 7 words or less, describe what your blog offers. What is your blog about? What can your readers expect from it? What do you offer? This is called a tagline!

An efficient blog banner gives a promise, and establishes your brand and a connection with your readers all at once. Don’t rush thinking it up. It doesn’t have to be extraordinary. Keep it simple and sincere.

Brand-consistent colors and fonts

Three colors. Three fonts. Think of them as your personalized welcome mat. This is how you attract your audience, and convey a subliminal message connected with your slogan. Luxury? Trust? Authority? Creativity?

CONSISTENCY everywhere. Maintain your colors and fonts. That’s why you should assign a color and font for your CTA buttons, your headings and sub-headings.

Alignment and fit

In blogs, when something sticks out, it distracts the eyes. Keep things lined up and organized. Like in this drawer and its delicious divided columns from The Red Brick Bungalow.

Consistency is key. If you haven’t got a style guide yet, you will by the end of this series of posts. In it, you’ve got your fonts and colors. You’ll notice that all my blog content images have the same width. They fit in the content area of my blog.

Justify on the left ONLY: When it’s justified left and right, you compensate for that evenness with uneven spacing in the text. It doesn’t look good and it’s distracting.

No one notices the ragged right side of blog posts. Our eyes move up and down, left to right. So we need the same, consistent spot to start from on the left.

Use grids for consistent alignment on your homepage or blog. Or try The Golden Ratio

Nav Bars and Side Bars

Smart navigation is one of the paramount criterion of the best blog layouts designs.

Smart, meaning minimalism and usefulness. Your nav bar and sidebar would always be on your reader’s view, no matter what page, so you’d better make them good!

Neat and tidy: Again, don’t overwhelm your readers with too many things calling their attention. Use the white space rule to section things off.

Valuable: Make the most of your sidebars by filling it with valuable content– both to you and your readers. This is where opt-ins usually convert best, and this is where you should put your best foot forward through Featured Posts and Most Popular Posts

Put sidebars on the right: Neil Patel advises, from his own experience, that it’s best to have the sidebar on the right.

Our eyes move in an F pattern. You might recognize the image below. It’s significant for us bloggers and website owners.

Sidebars and call to action buttons are best on the right, when eye movement pauses before moving on back to left.

Accessibility: What would your readers need to find upon landing on your page? They should be able to access it easily. Your contacts, your About page, your categories, a search box, links to your blog roll/archives… Make these easily navigable on your nav bar and side bars.

The Real You

Somewhere in your blog’s layout, place your photo. Preferably above the fold, or on your homepage. Sidebars and nav bars are great spots. Seeing who you are gives you relatability and humanity— people know you’re truly there, and you live in Montana or Burgundy, and that you have red hair and freckles, or olive skin and a penchant for red scarves…

Putting a face to a name is another form of branding. That’s why all our LinkedIn profiles bear our logos or photographs!

Just like with LinkedIn, go for a professionally done, and professional-looking picture. No wacky faces. No tongue sticking out. Ask a professional friend, or take a self-portrait!

Scrolling social buttons

Aesthetics should serve function– and social sharing is one of the best functions and weapons of blogs right now. Make it easy for your readers to share your posts or your blog to their social network. Don’t let them lose sight of the social buttons.

Fast loading time

Your layout, images, colors and fonts will all be for nothing if your site takes too long to load.

Use CSS (repeat-x and repeat-y) to repeat a single, small image— and make it serve as your background. This image below is tiny, but it works as a full background!

Minimize images and post number per page. Optimize and compress images for your blog, and make sure not too many of them all attempt to load at once in a single page. 12 posts per page is okay if each post has ONE image

Use Read More, Click to Continue… Your readers have a small attention span anyway, and it’s a shame if they only see one post instead of three, and that’s above-fold, without even having to scroll down! Use excerpts for each post, by doing this your reader may open all the posts in separate tabs!

This way, the page loads speedily, and you’re able to showcase and promote as many of your blog’s posts as you could, at once.

Comment threads

Yes, it’s part of the layout. Do you give your audience room for conversation and participation? Comments can add to your SEO score. Own it!

Samples of Layouts That Work

For your homepage:

• Primary branding image and/or value proposition. State it clearly. What have you got to offer? Let your reader know immediately. No pandering. No cutesiness.
• A CLEAR CTA as well.
• Highlight content from your blog. This is what establishes you as someone who knows what she’s doing– a resource.
• Remember to not overwhelm. If they want to contact you, add a contact box somewhere, or simply a strip of social media buttons.
• Play with columns. They give you room for content, without disorganizing and crowding your homepage.

For your blog:

• Your nav bar and side bar should be valuable to your readers.
• Every spot should make it easy for your reader to read, share, contact you, read more of your blog.

That’s it.

Combine this first image with the other two. You have a 2 column layout, AND a 3-column layout. Fill the side bar/s with the following in this order:

• Profile photo and social/contact info
• Search box
• Subscribe box
• Internal featured content (left sidebar)
• Additional internal promotions (right sidebar)
• Ads (right sidebar)
• Replace “Additional/Affiliation” and “Copyright Info” with “FOOTER (Affiliates, Copyright Info, Site Map)”

Keep everything simple and neat. The simpler, the better. But don’t hold back from expressing yourself through colors and textures. Find a balance between simplicity and memorable branding.

Planning any layout overhauls? Do you favor two-column layouts or three? Any more tips?

Please share with us in the comments!