Best way to display your blog posts
Tue, 03/24/2009 - 12:33
Every day I go through a lot of blogs and I always try to notice and understand why they display their post the way they do, so I decided to share with you guys by selecting a couple good blogs and talk about how they display their posts on the main page.Well, surfing on the web you can find thousands of blogs about everything and most of them will have different designs and different ways to display their posts on the main page, this is what we are going to talk about on this post. The most important thing about blogs and what make them be a good or not it's the blog's content, independent of it's look and style the blog content is definitely the main thing on a blog, even if you got the best looking blog on earth and don't have a good content there is no way your blog will succeed. You may think it's not but the way the posts are displayed on the front page can set you blog from being successful or not. You have to adapt the way you display your content to a couple things so you can fit the design and structure to it's content. I know there should be at least a little bit of study behind that for each blog, but sometimes it doesn't happen that way. I'm going to be showing a couple samples and talk about it so we can get a better knowledge about it. The things you see in most on the blogs when displaying their post is: (It does not always come in this order) Post Title Post Description Thumbnail Date Author Tags Category Comments Read More These are the most common things you see on a post display and I think it's good to have it all but in the right way depending on your needs, let's see how others do so we can get a good idea, I selected 3 big blogs that most of us know to show how they work.
SmashingMagazinehttp://www.smashingmagazine.com/ As most of us know, this is a blog that has very useful and innovative information for designers and Web developers and it's very interesting the way they display their post, very different from most blogs. SmashingMagazine have very big and complex posts, because of that they don't post many times a day like a lot of blogs do, but I would say they post around 7 times a week and the way they display each post on the main page is very important, the index fit's 8 posts so if you come to the blog one time a week you are able to see everything they posted for that week without having to look any further. Because of the fact that they don't post all the time they make each post very known on the main page by using a very big way to display what they have, I would say that's a very smart move and it fits their need very well. They use a big title with the color green, a color there can't be seen anywhere else in the blog because that way when you see the big green letters what comes to your mind is that a new post is starting, and also is very well used to drive the readers attention to the post which is great. To follow that they have a very simple line that starts with a little icon to represent time and date and also has in light color text the name of the author, the date of the post, a link for the category and the number of comments. Notice that the category link has a lighter color than the usual links of the blog. After that comes a big description of the post where they use bold font to highlight the main words of the description since they have such a big post description, their thumbnail comes in between the description and it's always very direct, it doesn't take the whole width space and it comes in different sizes depending on the posts. To finish up a read more link (notice that if you click on the title or on the thumb it will also take you to the post)
When the main element of a post it is the written content, the post description plays a big part and a lot of times it's even the begging of the written post, focused on that you need a nicely written description and remember that the post title is even more important because people want to know what they reading about. Also remember to put a thumb that doesn't take a lot of attention because thumbs attract eyes and clicks to see the full post.
Fubizhttp://fubiz.net/ Fubiz is a french blog that brings great design inspiration and has a very elegant way to display their posts. Fubiz has a simple but very elegant way to display their posts, it's a very busy blog with an average of 16 posts a week and it's main page fit's 12 posts. The posts start with the title in a darker text color than the rest of it and to help drive some attention it comes with a little vertical pink bar just enough to put you eyes in the right place to start reading the post. The title is followed by a small post description with light color text because the blog content is mostly images so the description is there but doesn't really need to be read. The thumbnail is the most important thing on their post, it takes the whole width and vary on the height. Having a good thumb up front is a big step for having a successful post. After that comes a link to read more, but you can also go to the post page by clicking on the title or the thumb. To finish up they display their tags highlighted and it's also a link for that tag, and a simple line starting with a icon that represents date and time followed by the author, and the date of the post. Their post has one extra thing that shoes how many votes their post have represented by a heart and the number of votes. On the right bottom part you can see an icon with the number of comments which make that stand out a little and maybe encourage people to read more and go on to the post page by the number of comments.
For a inspiration website the main focus is the inspiration which are the images. That makes the thumbnail the main element on the posts so it's good to get a decent size thumb.
PSD Tutshttp://psd.tutsplus.com/ PSD Tuts is a very well known tutorial blog that post the best of photoshop tuts. The way they display their post is very cool, everything is always the same changing only the content. They post an average of 7 times a week and their main page fits 10 posts. What comes first on their post is a 200x200 pixels thumbnail on the left side and all the rest of the post info comes on the right side. Continuing on the right side we have a big post title with darker color and also big comment icon with the number of comments, I think if the blogs get a lot of comments it's good to show off the way they do, it also helps attract more readers, Under the title comes the line with the date, category, and author's name. I don't like the way this line has a red background because it takes a lot of attention and it's not the main thing that people look forward to see. Following that is a short description of the post in light color text and italic font, it comes out to be the most simple thing about the post. To finish up a Continue Reading link that is placed on the end and stands out after the light text description which is good.
When it comes to tutorials, most people tend to see the title and the thumb because they want to see what is the tutorial all about and what the result looks like, very important to focus on these two elements