You are currently browsing the tag archive for Blog Design

July 29, 2008

WTF Blog Design Elements: Twitter, Tumbler, and Microblog Babble

As we explore our blogs and clean out the clutter in this ongoing series on WTF Blog Design Clutter, we’ve looked at the pros and cons of blog clutter with too many “friend” pictures and badges, calendar archives, and most recent comments and shout boxes. Remember that clutter is in the eye of the beholder – the visiting user – not necessarily the blogger. What we see when we visit and use our blogs is not necessarily what the visitor and return reader see or experience. We need to explore our blog’s design through their eyes to help them use and read our blogs.

The usability factor in web design is critical. We often add design elements (widgets and gadgets specifically) to our blog for fun or novelty. We’re flush with the excitement of the latest and hottest whizzbang goodie and we want to share the fun on our blogs. If your blog is getting cluttered with a lot of WordPress Plugins, Widgets, Gadgets, Scripts, and whizzbangs, maybe it’s time to analyze these design elements to find out which ones are most important to your blog and its users – and which one are just clutter.

Today, I want to explore the pros and cons of microblog clutter on your blogs. Are you microblogging?
read more

Tags: , , , , , , , , , , , , , ,

July 28, 2008

WTF Blog Design Elements: Most Recent Comments and Shout Boxes

In this ongoing series on WTF Blog Design Clutter, we’ve talked about blog clutter with too many “friend” pictures and badges and calendar archives, two of the many elements many use to clog up their blog’s sidebar. “Clutter” is a matter of perspective. If these added design elements really work for your blog, serve your blog’s purpose, and enhance the reader’s experience, leave them. In fact, put them at the top where they are the first thing people will see next to your post title and content beginnings. Promote them. If they are that important, let them stand out.

If they are not important, then they do become clutter.

One of the most popular blog clutters are the Most Recent Comments and Shout Boxes that many feel are important elements to a blog’s design.

The web is now social. People are experimenting with all types of methods to bring the social to their blogs and emphasize how social their blogs are – or at least appear to be. Among the most popular and easy to do are most recent comment widgets and chatting shout boxes. read more

Tags: , , , , , , , , , , , , , , , , , ,

July 25, 2008

WTF Blog Clutter: Pictures of Our Bloggy Friends

If you are a member of a social networking service, it’s natural that you want to put the HTML code in your sidebar that shows off the faces or avatars of your buddies. After all, that’s what these social networking sites are all about. Your face on their blog and their face on your blog.

Is it? What good it is? How does it help your blog?

As part of this going series on WTF Blog Design Clutter, let’s look at the visual social clutter that clogs our blogs.

If your blog is a social blog, and the pictures of the folks participating on your blog might be helpful. People like seeing their faces or avatars on other blogs. Besides, it should be good link juice, right?

Maybe. read more

Tags: , , , ,

July 24, 2008

Blog Design: WTF Is That Doing There?

Remember the old adage that you never get a second chance to make a first impression? You personally may get a second chance to sway that first impress, but your blog doesn’t. If you don’t grab them within the first micro-seconds of a visit, they won’t subscribe and they won’t be back.

Digging through a lot of blogs recently to research an upcoming article, I found myself thinking “WTF” as I looked at the designs. I was constantly distracted from the content I was eager to read through and quote towards things that blinked, flashed, or listed irrelevant stuff. My eyes had to work overtime to stay focused on the information I was there to glean.
read more

Tags: , , , , , , , , , ,

July 22, 2008

Are Blog Archives Working for Your Blog?

Your blog archives are the list of months some bloggers keep in their sidebar that link to monthly chronological collections of their blog posts. In the early days, a site with such a monthly listing in their sidebar meant this was a personal blog. Without it, it was a website or professional site.

Are you still displaying your blog post archives? What benefit do bloggers get when the offer a long series of months and years in the sidebar of their blog? Do visitors and readers really use them? Do you?

With all the worry about duplicate content and Google’s PageRank, if your blog is generated similar or duplicate content within the categories and tags, then why do you need to clog their databases with archives?

Have you ever found archives in a search result? I do all the time. I click though hoping to find the answer to my question and find nothing. That information might have been on page 4 of that month’s archive of posts, but now, the natural chronological push from the present to the past of the blog structure may have pushed the information I need onto page 6.

How would I know? read more

Tags: , , , , , , , , , , ,

May 24, 2008

This is the week to redesign your blog it seems

Filed as Features with no comments

Apparantly, this is the week for blog redesigns – with both Joi Ito and John Battelle of Federated Media either deploying new looks, new blog frameworks, or posting new screenshots of what their blogs could look like.

I know Thord has been working on the redesign of The Blog Herald as well.

Anyone else dropping a new look & feel on their blog this week?

Tags: ,

April 30, 2008

Some WordPress Plugins and Services I Recommend

Over the past few months I’ve added some new plugins and services to my blog at Webomatica that are solid and useful enough to recommend. All are working great with WordPress 2.5.

read more

Tags: , ,

April 22, 2008

Emersian on Limiting your Design, and a few comments on the current BH Design

Filed as News with no comments

Paul Scrivens, aka Scrivs, talked about limiting your design at his design blog Emersian.

As a part of that post, he talked about the current design of The Blog Herald:

Now let me say that I think BH has a beautiful aesthetic about it. However, without trying to read anything do a quick scan and scroll of the page and ask yourself what caught your eye? What were you inclined to clickthrough on? Now going back to look at the site let’s see what content is being offered to the reader on the homepage excluding any ads which take up a ton of space on their own.

Interesting thoughts considering that Thord is working on a redesign…

And a final thought from Scrivs’s post:

This constant struggle between achieving business objectives and making sure your audience gets everything possible out of a site without overwhelming them is one of the things that I love about design so much. it is one of the reasons that we have no problem redesigning so often to the enjoyment and dismay of our audience. Design never seems to be a finished product even when you reach the deadline. There never seems to be a 100%, but a constant struggle to maintain a 90% completeness.

Tags: ,

April 16, 2008

How to Blog Design Style Guide

Filed as Features with 4 comments

Skimming through Twitter tonight, I came across a blog that I had not read before – The Blog Design Blog – which is an excellent resource on blog design – including tips, tricks, galleries, and how-to guides revolving around the business of designing great looking weblogs.

Their current feature post is entitled How to Blog Design Style Guide. The post takes a look at nine key areas that you should examine while designing a blog – and provides great examples that you can emulate and aspire to in your design.

The post is full of great advice – such as this section on how to ensure that your blog has a great header design:

How to make your header design great for your blog:

1. The first element in a blog design that I like to design is the header, because I feel that it sets the tone for the rest of the blog design. So I recommend to decide on what message you want to convey, title, and taglines before getting to work in photoshop. This will prevent a lot of headaches and changes down the road.

2. While there are many different ways you can design a header for you blog, it is important to remember to prioritize the communication of the purpose of your blog above everything else. A reader needs to be informed as quick as possible as to what the purpose of your blog is.

3. Get creative and don’t be afraid to try different things until you find a header design that works for your blog. This is generally the first thing people see when they come to your blog so make it memorable.

Take a look – you won’t be disappointed…

Tags: ,

July 26, 2007

WordPress: Dynamic Sub-Page Navigation

The more and more I study the WordPress architecture, the more and more convinced I become that WordPress is a great choice for use as a feature rich Content Management System (CMS). Basically, WordPress can be used, not only as a blog platform, but as software to manage the content of any website, with or without a blog. Because WP added the ability to use “Pages” to hold relatively static content, and because WP includes functions to call and display the content of those pages just about any way you can think of, all it takes is a good WordPress theme to get the job done.

But where WordPress lacks as a CMS is the ability to further exploit the sub-page system. Not so much in their use, but in their application to the actual website design.

However, this plugin did wonders for people looking to take advantage of the hierarchal structure of pages and sub-pages by allowing only the “parent” pages to be displayed on the homepage. And if a “parent” page has children, and that page’s link is clicked, then the child pages will “fold” down, displaying “deeper” options (much like the features of the more mainline CMS out there).

But There’s a Problem

I’m not here to just give props to a cool plugin. You see, I had a client who wanted the original “parent” list across the top of the page (just under the header image) and when one of the “parent” page links was clicked, he wanted the “sub-pages” to display as a list in the sidebar. As far as I could tell, there was no way to do that with the Fold Page List plugin. So, I went searching. I promise, if I could find the original website I got this from, I’d give a link. As it turns out, I can’t find it. Sorry :-)

First thing to do is just list your pages. Be sure to make it top-level only!

<?php wp_list_pages('title_li=&depth=1'); ?>

Then, I used the code I found (with a few modifications, I’m sure):

<?php
global $wp_query;

if( empty($wp_query->post->post_parent) ) {
$parent = $wp_query->post->ID;
} else {
$parent = $wp_query->post->post_parent;
} ?>
<?php if(wp_list_pages("title_li=&child_of=$parent&echo=0" )): ?>
<div id="submenu">
<ul>
<?php wp_list_pages("title_li=&child_of=$parent" ); ?>
</ul>
</div>
<?php endif; ?>

Without getting too technical, I’ll explain roughly what all that means.

if( empty($wp_query->post->post_parent) ) {
$parent = $wp_query->post->ID;
} else {
$parent = $wp_query->post->post_parent;
}

This code checks to see if the current page (the active page) as a parent. If it does NOT have a parent … it assigns the current page ID as the “parent”. If it DOES have a parent, it assigns the parent ID as the “parent”. The reason this is necessary is for top-level parents. If we simply used the parent ID to assign the “parent”, then if a top-level parent was active, the “parent” variable would be empty and we wouldn’t get our sub-page list.

<?php if(wp_list_pages("title_li=&child_of=$parent&echo=0" )): ?>
<div id="submenu">
<ul>
<?php wp_list_pages("title_li=&child_of=$parent" ); ?>
</ul>
</div>
<?php endif; ?>

This last part is pretty simple. All it checks for is IF there are any sub-pages (in a very rudimentary way). If it does have sub-pages, then it lists them (along with a title and some div wrappers for style).

One Limitation

I didn’t spend too much time doing research on this, but as far as I can tell, this only works 2 levels deep (top-level and 2nd level). If you have 3 levels of sub-pages, this won’t work (or at least won’t work like it’s supposed to). Sorry, but all I needed was 2 levels, so that’s all I developed it for :-)

Download the Source

Click Here to download the source for this script

So, if you are looking for a quick and dirty way to use WordPress as a CMS, this little bit of code can go a long way. I’ve used it several times since the time I developed it, and I plan on using it many times in the future!

Next week, I’m writing a tutorial on how to do the same thing we did here, but with categories and sub-categories. Don’t miss it!

Tags: