Stellar tips for styling your content area

by Alex

The content area of your blog is where your posts are displayed once you publish them. It is probably the most important of your website because it is the heart of your blog. Everything in that space is the reason why people visit your blog, so you have to work extra hard to make it easy for people to navigate it and read it.

Believe it or not, there are a lot of ways to style your content area. It doesn’t seem like a lot, since mostly the only things in your content area are text and images. But there are factors such as SEO that play into how you design your content area. All of this will be gone over in the post.

Stellar Tip #1: Large paragraphs – A huge a mistake

When you write a blog, it is a golden rule to not write huge paragraphs. Huge paragraphs of text are so boring to read and will often lose the attention of a reader because there’s no organization involved.

4 things you can add to break up large paragraphs

  1. Headings for main ideas (h3, h4, etc.)
  2. Lists (numbered, and bullets)
  3. Images
  4. Just press “Enter” if you think you could divide a paragraph that talks about two or more different ideas

So that’s pretty much stuff you already know (hopefully). You don’t have large paragraphs in your posts do you? Pretty much, if you have anything longer than 5-6 good sentences, you should look into condensing it, or breaking it up.

Stellar Tip #2: The Extremely Important Headings

Headings are the tags you use in your posts to separate text and make it look cleaner. They are also great for organization purposes as they divide the content up into different sections easy.

There are a few tricks I have learned to making the BEST of your heading tags in a couple of different aspects.

Making the best of your Headings: SEO wise

This is a huge mistake we used to have here on Blogussion, and I want to talk about it to possibly help you out on your blog.

So as you know, the heading tags (H1, H2, H3, H4, etc.) have SEO benefits for your website. Correct me if I’m wrong, but depending on the heading tag you do use, it will be weighed differently by search engines.

So for example, H1 tags will be “weighed” differently by search engines than any other heading tag. The H1 is seen as the tag that holds your important content that search engine crawling your site should pay more attention to.

So, when you style your posts, be careful how you use your headings. I have my recommendations for how to use heading tags for the best SEO benefits:

  • H1: Wrap H1 tags around the title of your article. With H1 tags being the most important, and your content being the most important, it is a good idea to combine them both.
  • H2: Don’t use H2 tags in your post. Use that tag for your site title. Your site title is important too, so use the next best tag to wrap your title in.
  • H3 + H4: Use these tags in your post.

My stupid mistake

When we first started Blogussion, we used H2 tags to wrap around our title. Not good. Luckily, it was an easy fix. However, we still use H2 in our posts – and that’s probably not so good. That will be a lot harder to fix as we have over 80 posts with that tag in it, but it will have to be something we change for the best of Blogussion.

Making the best of your Headings: Design Wise

Your headings should be easily distinguishable from your regular content. Ways to do that:

  • Use a much larger font
  • Add a bottom/top border
  • Add a background to the text
  • Add an icon
  • Make heading text a different color, font, or case.

Some great examples of headings on some other blogs are:

1. Smashing Magazine

smashing-mag

Smashing Magazine adds a thick border underneath each of their headings. It’s a great way to distinguish the headings between the regular text.

2. Stand Out Blogger

standoutblogger

Stand Out Blogger makes distinguishing between a heading and regular text easy by adding a simple background gradient to his text.

3. Tutorial9

tut9

Tutorial9 uses a different color in their headings, as well as a larger font. It doesn’t take an idiot to see the difference between the heading and normal text here.

4. Asnio

asnio

Asnio does 3 things with its headings in a post: Adds an underline, different font, and different color text. Making things even easier to tell apart.

So, the key to making really great headings are to make them substantially different from your normal text. It’s not hard to do with CSS, and will make your content look much more interesting with them.

Stellar Tip #3: Add Images that flow well with your content

Images are one of the most important things to add to your content because it really adds a great touch to your post. Every post I write, I try to include at least one image into my post.

You’ve heard all of this before: pictures speak louder than words, a picture is worth 1,000 words, etc. But the one thing I notice constantly when people use images in their post is the lack of time they put into including them. It may just be because I’m a pixel perfectionist, but some pictures are poorly integrated into some people’s blogs.

How to format your images so they look good

There are quite a few good tricks to make your images and post work together with each other. Here are some truly great tips I can give you:

1. Add a frame to your images

A frame around an image really makes your image a bit more professional. A great example of how frames can make your images look great is in the NETTUTS article “The Best Tutorials and Freebies of 2008“.
nettuts

I will tell you how to add frames. It just takes a bit of CSS code. Add the following anywhere in your stylesheet:

.frame {
	background: #EEE;
	border: 1px solid #DDD;
	padding: 1em; 		/* may need to be adjusted */
}

Then, in your posts just add the frame class to whatever image you want it to show around.

2. Wrap your post title around an image

The same way we have an introduction image to all of our posts here. We wrote a tutorial on how to do it in our article How To: Wrap the post title around an image.

3. Wrap paragraphs around image (WordPress)

It looks really great if your image has text wrapping around it. To do that, all you have to do is align the image to the right, or left and the text will automatically work around it.

It isn’t always automatic, you may have to add some CSS to your file. Remember, this is WordPress only.

img.alignright {
	float: right;
	margin: 0 0 0.5em 0.5em;
}

	a img.alignright {
		float: right;
		margin: 0 0 1em 1em;
	}

img.alignleft {
	float: left;
	margin: 0 0.5em 0.5em 0;
}

	a img.alignleft {
		float: left;
		margin: 0 1em 1em 0;
	}

img.aligncenter, a img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

Stellar Tip #4: Limit the amount of advertisements in your posts

On too many blogs, I see way too many ads being put into a post at once. Sometimes I see like 2 or 3 AdSense banners at the top of a post, and then more throughout the post. Even a lot of inline banner ads. There is nothing wrong with having these things in your content area, but you have to be cautious as to how many you put in and how.

Refer back to the section in this article “how to format images in your post”, and use the same concepts for ads too.

Stellar Tip #5: Never stop looking for ways to improve your content area

Like any part of your website, always look for ways to improve the way your content is displayed. Tweak the font size if you get complaints that it’s too big, or too small. Mess with the image you use in your bullet points. There are so much things you can tweak and improve in your content area. Do anything to ensure that your content looks fantastic!

Fin.

Wow, I let that post get long! What are your tips for making your content area look amazing? Share them in the comments section, or add on to something that has already been stated in this post. Can’t wait to hear your opinions!

Back to the top

by

To learn more about this author and see all of their posts, click below.

View Full Profile →

Discover the Real Meaning...

of what it means to master the psychology of your blogging practice. Find out one of the most missed aspects to blogging now, totally free!

Jeet March 10, 2009 at 7:09 am

That’s one long post ;) Will have to come back and see it as I match my blog’s content. I am rather bad at content formatting :)

BTW, is it just me or everyone else can see a messed up top bar where ‘search box’ is overlapping title of the blog?

Jeet’s last blog post..Free Directory List

Thumb up 0 Thumb down 0
Alex March 10, 2009 at 8:37 pm

Can you post like a screenshot of it? I would appreciate it Jeet!

Thumb up 0 Thumb down 0
WPThemeKid - Daniel March 11, 2009 at 3:13 am

Looks fine is the latest Firefox, anyway nice post Alex.

WPThemeKid – Daniel’s last blog post..Orange Market WP Theme Release!

Thumb up 0 Thumb down 0
Alex March 11, 2009 at 6:09 pm

Thanks Daniel!

I have sent you the email with your files. Let me know if you get them okay!

Thumb up 0 Thumb down 0
WPThemeKid - Daniel March 11, 2009 at 11:55 pm

Got them.

Thanks again for it, very nice work :)

Daniel

WPThemeKid – Daniel’s last blog post..Orange Market WP Theme Release!

Thumb up 0 Thumb down 0
Alex March 12, 2009 at 2:37 pm

Glad you like it. Again, sorry for the delay.

Thumb up 0 Thumb down 0
Dennis Edell March 11, 2009 at 7:25 pm

This couldn’t have come at a better time, my friends. I am starting to totally revamp the “inside” of my blogs…..SEO/Linking/Coding, etc…thanks for the cool tips!

Dennis Edell’s last blog post..798 Views & 5 Comments – Are You Doing All You Can To Engage Them?

Thumb up 0 Thumb down 0
Alex March 11, 2009 at 7:53 pm

No problem Dennis!

By the way, we still have plans to take up your invite and write a guest post on your blog. When though, we aren’t sure as we are planning to be working on a major update for here. But rest assured, we definitely would love to come over and write something! :)

Thumb up 0 Thumb down 0
WPThemeKid - Daniel March 11, 2009 at 11:56 pm

Alex, I am quite happy to guest post for you.

I had a few MMO blogs I sold a while ago, let me know if you’re interested in letting me write for ya :D

WPThemeKid – Daniel’s last blog post..Orange Market WP Theme Release!

Thumb up 0 Thumb down 0
Alex March 12, 2009 at 2:37 pm

We’d love to have you Daniel. :)

Just read the Guest post page at the top, and we can get you setup.

Thumb up 0 Thumb down 0
Dennis Edell March 12, 2009 at 8:31 am

I look forward to it!

Dennis Edell’s last blog post..798 Views & 5 Comments – Are You Doing All You Can To Engage Them?

Thumb up 0 Thumb down 0
Evan March 13, 2009 at 4:28 pm

I saw a lot of things about images in this post; how to wrap and fromat them. It’s some very good info! One question is though, what do you recommend for an image editor? I use GIMP personally because it’s basically like Photoshop, only free. ;)

Thumb up 0 Thumb down 0
Alex March 13, 2009 at 4:53 pm

I always recommend PS if you can afford it, but if you can’t then I would go with GIMP.

Thumb up 0 Thumb down 0
Nick Tart May 25, 2009 at 1:30 am

Hey Alex, you are absolutely right about the heading tags when you are on a page with a single post. However, on your homepage (or any other multi-post pages) the post title should be wrapped in H2 tags and page title should be the H1; which you have already done. I know the scope of this article was specifically the content area but this one thing I thought was interesting that you may not have known. Another great article, by the way.

Nick Tart’s last blog post..‘Marketing’ Has More P’s Than ‘Hippopotamus’

Thumb up 0 Thumb down 0
Alex May 25, 2009 at 10:55 am

Hmm, that’s interesting. It’s information I don’t really need to know anymore I think because Thesis does it all for me!

Thumb up 0 Thumb down 0
Kate Foy November 10, 2009 at 3:22 pm

Another great series of tips Alex. thanks. PS I didn’t know those SEO tips about h2 headers. Good job!

Thumb up 0 Thumb down 0
Evergreen real estate December 17, 2009 at 12:45 pm

Hi Alex,
Your site is so beautiful! I’m afraid with a very limited budget and no php/css skills I’m not going to get anywhere close to what you’ve created here. Nevertheless, I’m especially impressed with the styling you have for your teasers on your front page. Can you share how you are able to get the thumbnail on and the shading between teasers? I can’t manage to get the thumbnails to show in my thesis 1.6 site (link above).

Thanks…
-Bob
.-= Evergreen real estate´s last blog ..New Listings December 16, 2009 =-.

Thumb up 0 Thumb down 0
Tony February 23, 2010 at 1:21 am

I’ve been looking forward to a design related article. It’s finally here!
.-= Tony´s last blog ..6 Awesome Greasemonkey Scripts That Work on Google Chrome =-.

Thumb up 0 Thumb down 0

Comments on this entry are closed.

Previous post:

Next post: