Today is the beginning of a new era. A time of change. A glorious new beginning… Politics aside, we now have a President who understands the power of the internet. As of 12:01 p.m. EST, White House dot gov has a new look.

Powered by some form of ASP, it’s a valid XHTML site. Getting a Microsoft based site to validate is an impressive feat all by itself, but this one is done with style. As well as the usual stuff you’d expect on a government site, they’ve included a blog and photo galleries. Not only included the blog and galleries, but made them the face of the site. Rotating imagery, dynamic content, and enough RSS feeds to satisfy even… me.

I have to admit, I’m rather impressed. Who really knows how the Presidency will go, but I like the start. Neat, clean and very professional looking.  You could almost say, Presidential.

My hat is tipped to the designer. Beautifully done.

The results of a fascinating study of the design of the top 50 blogs is available at Smashing Magazine. Some interesting results, but I was most interested in the ratio of fluid to fixed width layouts. 92% used fixed width. That seemed a little high to me, but I have noticed a strong trend that way in design lately. I was even more surprised to note that the writer describes the other 8% as “uses fluid elements”, but none used “used an elastic layout”.

I’ve always thought that a fluid width layout was a better design solution for most websites. Defining a minimum width for a site isn’t a bad thing, but a full fixed width layout is just too rigid. It doesn’t take the viewer’s preferences into account. You’ll also note that 56% of blogs surveyed used a site width of 951-1000 pixels. I don’t know about you, but that means if I’m viewing the site with my feed reader open, then I have to scroll left and right. Annoying! I’m sure I’m not the only person who dedicates less than 1000 pixels of screen width to their main browser window.

My favorite statisctic though was about the percentage of the layout used for main content.

“on average, 58% of the overall site layout is used to display the main content.”

The most important part of thelayout only deserves 58%? That’s the best you could do? That’s just sad, it really is.

A Small Design Study Of Big Blogs | How-To | Smashing Magazine

It is truly remarkable that among 50 top blogs not a single one used an elastic layout (width of layout grows with the growing font size) and only a small fraction uses fluid elements (layout changes depending on the size of the browser window). Here are the exact findings:

* 92% of top blogs used a fixed layout,
* 8% used a fluid layout or a hybrid layout with fluid layout elements
(Engadget, Smashing Magazine, Gigazine, Coorks and Liars).

Jessica Claire has a new site design. I always love to see a blog merged seamlessly with the rest of a site. Honestly, I just love to see a complete site working seamlessly together, but it’s often the blog that gets left out of the design loop. They’re an afterthought, left on some default theme. Or worse, linking to an entirely different site on Blogger. Nothing wrong with Blogger, but if you’re going to the trouble of writing and maintaining a blog, shouldn’t the improved stats benefit your own URL? There are ways to use Blogger and WordPress.com and still use your own URL.

Back to Jessica Claire’s new site. Seamless is the key word. Red Door and infinet design did a beautiful job putting all the pieces together. I’m a sucker for classic design elements like they’re using in the background and elsewhere. The colors work well for me too.Nicely done. Good luck with it Ms. Claire.

The answer is probably yes, but I’ll come back to that in a moment.

There is a lot of confusion over what exactly an RSS feed is, and how it’s made available. An RSS feed is a simple XML file. As a blogger, you don’t need to know that. They come in one of several (7?) formats. You don’t need to know that either. The benefit of RSS feeds, is that they allow people to subscribe top your content. In other words, it lets people know that you have fresh content, and brings them back to your site. That’s the point you need to know.

Back to the original question. If people can’t find your RSS feed, is it still there? WordPress and other blogging platforms create and update RSS feeds automatically. Most blog themes have the feeds linked in the header in such a way as to notify browsers and feed readers of their presence. If you were to remove those links, intentionally or by accident, your site would appear to viewers as if it had no RSS feeds. The RSS feeds however, are still there. So if your RSS feeds aren’t visible to site visitors, check the header to see if they’re linked properly. It should look something like this:

<link rel=”alternate” type=”application/rss+xml” title=”RSS 2.0″ href=”(your URL)/feed” />

There may be several of these, and the type and file name might vary, but that’s because most blogging platforms offer several kinds of feeds. If you’re looking at your theme files, you might see some PHP in there, so it would look like:

<link rel=”alternate” type=”text/xml” title=”RSS .92″ href=”<?php bloginfo(‘rss_url’); ?>” />

For a good example of an unlinked feed, look at the comment feed in WordPress blogs. It is part of the basic WordPress template, but isn’t linked to the header. So in effect, it exists, but nobody can see it. You want a comment feed on your WordPress blog? Link it to the header, and it will appear to feed readers. There may be a little variation in your WordPress installation, but the feed should be at:

<link rel=“alternate” type=“text/xml” title=“Comments” href=“(your URL)/wp-commentsrss2.php” />

Add that to your header, with your correct URL of course, and it should work.

Why would you want to remove access to your feeds? FeedBurner would be one example. By removing access to the normal feeds, and installing a FeedBurner feed, you direct all subscription traffic to FeedBurner. This allows you to track subscription statistics more carefully.

Feeds, no feeds, lots of feeds, or just one? That’s a question I’ll leave for another day. Until then though, at least you’ll know why they’re visible on your site, or why they aren’t.

As the second in my reviews of the Cowboy Code Marshal blogs, I’ve chosen American Truckers at War.

Style
My biggest problem with the style of American Truckers at War is that it needs more. The subject is passionately presented, and the blog theme needs to catch up. That may sound overly negative, but it shouldn’t be taken that way. Blog design should make a statement, and this design doesn’t speak loudly enough.

I like the red white and blue color scheme, it’s totally appropriate for this sort of site. This is one of the elements that I think could be pushed more. More red, more blue. It’s important with any design to present a balanced and unified color scheme, but with a red, white and blue palette, this is even more important. It’s very easy to let this color palette slip into disorder, which will significantly lower the site’s impact. The solution is to carefully control the range of colors used. By keeping the color palette carefully confined, the scheme becomes more unified, making the design feel more organized.

This is a three column site, with a lot of links and images. The site is using twenty one scripts, most of them blogrolls. This has the potential for wholesale chaos when it comes to site organization and structure. Chaos however, is held in check. While the organization could be improved, it is nowhere near as bad as could be. There is room for improvement though. Making an effort here to unify the format of the various blogrolls would pay off with a cleaner look and improved usability.

Most of these blogrolls come with their own image. This is another area that could be a horrible negative, but is at worst a neutral. Making an effort to unify these images in some way would go a long way to cleaning up the sidebars.

One of the things I like about the design is the unified look over all. A common error in this kind of web design is failing to keep the various parts of the site looking like they’re supposed to be together. This site doesn’t make that mistake. The whole site holds together nicely. Defining the sidebars a little more might improve the overall look, but care should be taken not to loose the unification that currently exists.

The sidebars are a too wide in my opinion. They are encroaching on the content a bit too much. While I can see the reasons behind this, a little more width in the content, and a little less in the sidebars would make noticeable difference. This could be done by removing or altering the wide elements which are forcing the sidebar widths. The left sidebar is being forced wide by a single image, which could easily be edited. The right sidebar is being forced by several elements which are more difficult to edit, but it might be worth it to either force this change, or remove those elements. An alternate option would be to move wider elements to one sidebar. This would allow for an increase in the content section, while also allowing for the retention of the wider elements.

Structure
Site structure is reasonable. While there are a number of validation issues which I personally would address, none of them are significant. Most of these issues are the result of a DocType which doesn’t match the HTML coding. Not too serious, but worth fixing. Another issue is some extraneous code that appears to be part of the blog design. This also is insignificant, but would likely be easy to fix.

This blog is powered by the Serendipity Weblog System. While I’m not familiar with this system, it is somewhat similar to WordPress in that it is a PHP based blogging platform which uses themes to control style. It should be a solid platform if executed properly.

This is also a site which uses frames. Not good from a search ability point of view. Frames are notorious for interfering with search engines. In this case it also must be interfering with the ability of other bloggers to link to this site. This is caused by the framset disguising the URL. If you go to the homepage, it shows the URL as www.americantruckersatwar.com. No problem there. If you go to any other page in the site however, it still shows that same URL. I don’t know whether the use of frames is utilized here because of hosting issues or the blogging platform, but I would give some thought towards rectifying this. Removal of frames should improve traffic from search engines, as well as other blogs. If for some reason this change isn’t possible, I’d make a few minor changes to the frameset in order to improve it’s functionality. My strong preference however, would be to dump the use of frames.

Content
Content is what you’d think from a blog called American Truckers at War. It’s always good to have a site’s content match it’s name, and this is the case here. Nothing annoying like a designer’s site called something silly like High Desert Wanderer.

What would I change
I’d unify and amplify. Unify the images, color palette, and blogroll structure, and amplify the style. The various unification schemes would simplify the overall site. It would improve readability, usability, and flow. I’ll clarify the unification points a little bit later, but here’s a short list.

1. Unify color scheme
2. Unify blog roll images
3. More clearly define sidebars
4. More clearly define content sections

A big part of the unification would be to get the various blogrolls with their associated images into some sort of consistent organization.

I’d increase the content section width. I’d do this by decreasing the width of both sidebars. While I’d attempt to keep them symmetrical initially, there’s nothing wrong with asymmetrical sidebars as long as they are neat, clean, and functional.

I’d consider reorganizing the sidebars. Ads on one side, blogrolls on the other is one option. Making the sidebar content more intuitive would be the goal.

I’d amplify the style by adding more red and more blue to the content section. I’d do this by adding color and graphic elements to the individual post template. I’d add more negative space between posts, and increase the size of the blog titles in order to improve flow.

The big change I’d make, would be to the header. This site needs a stronger header. It’s talking about and to truckers, it needs to make a strong and unwavering statement. Some sort of truck or trucking associated image seems obvious, but I’d work with site author to see what would be most appropriate. My first choice would be to use an almost abstract image of a truck. It could be an extreme close-up, or an unusually angled photo. You don’t want to go with a traditional or predictable photo of a truck here. Drama and impact are important, and this is the place for it.

Summary
This review may sound overly negative, but that’s not how I see it. I see the style of this site more as a blank slate than anything. The style current style isn’t a negative, but it’s not as much of a positive as it should be The site structure is much the same way, not a negative, but not a positive enough. This site needs to make a stronger statement.

In some ways this site’s style is being pushed too much by various blogrolls and associated images. They each make a statement of their own, and it confuses the overall style.

The key here is unifying the various site elements, and amplifying the overall style. Easy to say, not always easy to do. However, the improved usability, functionality, and dramatic effect that will come from an improve design will be well worth the effort.

Since joining the The Cowboy Code Marshals, I thought I’d review a couple of the members. To get the ball rolling, I’ll start with the Conservative Cowboy.

Style
I’m not sure what I’d call the style of this site. I have the same problem defining my own site’s style. The idea of cowboys and web design doesn’t lend itself towards any name that doesn’t sound like the punchline of a joke. Cowboy Geek? Techno Cowboy? Those both sound like bad movies from the 70s or 80s. “Classic Western Web Design” might work, I’ll give that some thought. Regardless of the naming problem, the site’s style is distinct. A web site designed for, and probably by, a cowboy.

Christopher uses a fairly simple white on black color palette for the site, and I think that works. This sort of simple color palette can really catch the eye if done carefully. I would consider changing the link style however. Small fonts with red on black can be hard to read, as at the bottom of each post. I’d also consider working more white into the design to break it up visually a little more.

Some key text in this site is highlighted by being made red. Nice impact, but I found it distracting that it was the same color as the link text. Made it look like a link, when it wasn’t. I’d consider clarifying that in some way, so that highlighted text and links can more intuitively be told apart.

This site has a fixed width layout. Nothing wrong with that, though I personally prefer fluid width. Despite being fixed width though, it could still use space a little better. The header for instance could fill the space a little better. The header image has a lot of potential and modifying the layout slightly would use it to better advantage. The twin revolver image at the bottom of each post could also be used to define that space better. By putting an outline around that image, it limits its impact. While these are small changes, they’d make a noticeable difference. That outline is likely an unintentional artifact added by the CSS, but it could be removed the same way.

I like the fact that negative space is considered in this layout. I would adjust that here and there for more impact. A little more space between posts, and a little less between paragraphs for instance, would help the flow.

Content formatting needs to be a little more standardized. For instance most of the content is left aligned, but some posts are mostly centered. This is distracting. I’d also suggest not centering blocks of text, it makes it more difficult to read. As this seems to be most often used with quotations, I’d suggest changing those to blockquotes, and editing the blockquote CSS to an easier to read, but also more distinct, style.

There are two other style factors in this site that I don’t usually discuss. One is music. This site plays country music when it’s loaded. Nothing against country music, I listen to it daily, but I like to choose my own. I’d either remove that option, or make it optional in some way.

The second style feature I don’t often mention is animation. Animation, or any moving objects on a page, are a distraction. While they can be an interesting graphical addition to a page, they should be used with care. A number of objects on the Conservative Cowboy’s navbar move. I’d limit the use of these elements, or eliminate them entirely. Pick one maybe, like the flame’s at the top, and get rid of the rest. I’d also consider limiting the movement of that one item. For instance, instead of an infinite loop, make it cycle for 10-15 seconds, then stop. Another option is to do what is done at the Day by Day Cartoon by Chris Muir site. Go take a look at that site, then hover your mouse over the Day by Day logo above the cartoon. Notice how it pulses? It didn’t do it for me today, but in the past it’s played music when the animation turns on as well. An interesting alternative to having the animation turned on when the site loads.

My final thoughts on style are that this site has a good start on a great style. It needs some refinement, and it needs to push the style a little more too. Both the simplicity of the color palette, and the cowboy theme elements can be accentuated more, with good effect.

Structure
This site as you can tell is a blogger.com site, and is largely based on one of their themes. Nothing wrong with that. It is a safe and reliable blogging platform. I personally like WordPress better, but that’s more a matter of personal preference than anything else.

I tested the site using WebSiteOptimization.com as I normally do for this sort of post, and I found some interesting things. The first thing that caught my attention when I read the report was load time, which seemed unnecessarily long (289.27 seconds on 56K modem, 103.99 seconds on 128K ISDN). This was explained when I read further. 75 images and 27 scripts. 75 images is a lot for a non-photo blog, but it isn’t unrealistically high. 27 scripts however, is I believe, a new record for me. That’s going to significantly impact load time, especially since they all appear to be pulling content from remote sites.

Images are not without fault here though. While the images placed here are not very large in physical dimension, their file size is unnecessarily big. Optimizing them would go a long way towards decreasing file size and improving load time.

I see a number of validation errors which I’d fix, though none of them are serious. Most everything I’m seeing seems to be a Doctype discrepancy. The document is one Doctype, but the code is written for another. Changing either to match the other should fix the problem.

Font and Center tags are used in at least a couple of locations for highlighting sections of text. A better solution would be to create a few new CSS classes to use in place of these tags. That’s much easier to maintain over time. If the site style changes, the highlight classes can simply be changed to match, while Font and Center tags would have to be updated manually on an individual basis.

Content
The content is exactly what you would think it was from the title. The writing of a conservative cowboy.

What would I change
The first thing I would change would be standardizing the code. Fix the Doctype issue, then replace the Font and Center tags with CSS. From a viewers point of view, this might have little or no effect, but it would allow my next style changes to reliably have global effect.

I’d next adjust the negative space to improve flow. I can eleborate if anyone is interested, but for now I’ll just say that some small changes to the use of spacing will make significant improvements in the flow and readability.

I’d add some white to the overall style, probably n the form of graphic elements of some kind. With a little more white to balance the black, the already strong effect of the simple color palette would be accentuated.

Change the link style to a more readable solution. While the red works good in the main content, in smaller links and bigger blocks of text it doesn’t work so well. The option I’d try first would be to change the link color in the post footer and the navbar. For instance there’s no reason those couldn’t be white with or without an underline. They could be considered of secondary importance to the blog posts themselves, and this color change would reinforce that.

I really like the header image, but it’s not being used as well as it could. I’d change it to better use the space, removing the outline would be a start. I’d also consider changing it’s shape and positioning slightly as well.

I’d change the use of the twin revolver images to better use the space at the bottom of each post. Here again I’d remove the outline, and probably add another graphic element to balance that small image with the wider text blocks above and below. I’d start with adding a CSS line above or below the image, the full width of the text column, to see if that alone wouldn’t balance it. I think that would be enough.

I’d limit or eliminate the flash and animation, as well as making the music optional, preferably with the default as off.

I’d strongly consider using some of the space outside of the fixed width portion of the site. Currently the site floats in the middle of a black page. Depending on the viewers monitor resolution, up to several inches down either side of the screen is empty. This space could be made more graphically interesting using a subtle repeating image of some kind. As you can see, I’m currently using a leather texture on my site to do that sort of thing. On the Conservative Cowboy site I’d do something much more subtle, and more in line with the simple color palette already in use. I would use an image like mine however, in that I’d repeat it either across, or down, but not both. The key here is subtle. It’s very easy to overdo this sort of image and really make a site look cluttered. With this sort of thing you should always try to err on the site of too subtle. Better to have viewers miss it, than overpower them with an image that’s too strong.

Summary
In summary, I like the site. I like its potential even more. It needs a little work, but all sites do. A little structural improvement, a little stylistic improvement, and it will be a stunning site, and easier to use and maintain as well.

Not all sites can use this sort of color palette and style, their content just wouldn’t support it. The Conservative Cowboy however, is one of those sites that will really make this sort of style work. The combination of text and imagery used here is set off nicely by this sort of presentation.

As with all of my Design Review posts, feel free to ask for clarification about any of my comments or ideas. I’ve always intended for these to promote discussions on design, that’s why I write them.

Trackposted to Pirate’s Cove, The Pink Flamingo, Right Truth, The World According to Carl, and Shadowscope, thanks to Linkfest Haven Deluxe.

The Blog Studio has announced a new Blog Design for HELLO, my name is BLOG!. It’s a perfect example of repetition of color as a design element. A beautiful site design as usual for the Blog Studio.

Designer review thy self! Someone asked me how I would review my own site yesterday, so I gave it some thought. I won’t do a full review, but I’ll hit some of the high points, and the low points.

Style:
Perfect! OK, not exactly.

Too much stuff for instance. While the content layout is fairly good, the header could use a little more open space.

The style is also somewhat inappropriate. It’s a Western WordPress theme on a design related site. Not exactly what readers are looking for, and not reassuring that I can talk knowledgeably on the subject. I should use something more modern, and design oriented. That said, I’m not going to change it. This is my place to play. I change themes when I want, and I use any theme that amuses me. This site was intended a s a stress reliever, and if I start worrying abut traffic and appropriate themes then it becomes more like… work. I design for other people for a living, this is for me.

On the plus side, I do think that as Cowboy WordPress themes go, this current one works. Especially since I’ve removed the wolf image from the header. (A whim I grew tired of) If I had more cowboy themed content in this blog, this would be an appropriate theme to use.

I also think my use of images tends to be reasonably good. You may argue that my choice of images is bad, I can’t argue with that. I would however stand up for how I use them. I like to use carefully optimized images, repeating images, and overlapping images to give the effect of a single large image. This keeps my load time reasonable, and allows me to use a fluid layout which I’ve always been fond of. I’m particularly pleased with how the tooled leather texture on the left edge turned out. Again, you may not like it, but I think the repeat worked well, and the textural aspect works well with the other images.

Structure:
One word for you. WordPress! I keep it on one of the more recent editions, and I use fairly solid themes. While my load time is occasionally a little high, it’s a pretty solid site for the most part.

Content:
A random mix of politics, humor and design. If I’d stay on any one of those topics, my site statistics would be much better. I should also write more consistently, more less, anything that’s consistent… but I probably won’t.

What would I change:
Somewhat of a moot point, since I can change anything I want.

Summary:
Perfect! Well… it at least works for me. A good, structurally sound site with good layout and readability. Content is a little random as is the posting regularity. The themes are usually well functioning, but often inappropriate for the subject. Traffic could be improved by a series of known improvements which I’m likely never going to make.

Trackposted to Blog @ MoreWhat.com, DeMediacratic Nation, DragonLady’s World, Nuke’s news and views, Pirate’s Cove, Webloggin, Conservative Thoughts, and Pursuing Holiness, thanks to Linkfest Haven Deluxe.

Blogging Tips: First Impressions Count

There are several “first impressions” your blog makes as it struggles to attract and hold on to readers. Few of those first impressions come directly from your blog’s design and layout. – (a guest post by Lorelle VanFossen of Lorelle on WordPress and an excerpt from her popular book, Blogging Tips, Tips Bloggers Won’t Tell You About Blogging.)

Mitt Romney’s campaign web site is up and running. It probably has been for a while, but I only recently noticed it. Here’s a few of my thoughts on the site.

Before I start with my usual review, I thought I’d mention the Five Brothers Blog. Mr. Romney has his sons blogging for him on a subdomain of his political site. A nice touch I thought. It’s dynamic nature should help drive traffic. Five people writing about Mitt Romney should definitely get good placement in the search engines. It seems to be well written too. They’re all following the campaign’s direction I suppose, but they all sound sincere. I think this aspect of the site will turn out to be big benefit as the campaign goes on.

Style
A fairly simple color palette, red, white, blue with a couple grays. Simple, but well done. The palette gives it a very clean and neat look, and the layout takes advantage of that.

The home page plays a sequence of campaign photos with links to press releases. They had the decency to run the photos fairly slowly, which is nice. A lot of sites seem to try to rush images by you at a rapid rate, but this isn’t unpleasant. It’s also, with one exception, the only moving part of the site, which is nice too. Too many sites find a technology like this scrolling images, and use it repeatedly. One moving image is interesting, two is annoying, and three will get you convicted of cruel and unusual punishment by any jury. The one exception I mentioned is a flash piece the plays when you hit the site for the first time. It’s a clever little bit of flash that shows Mr. Romney appear to walk out into your browser and welcome you to the site. My screen capture above shows him in the lower right corner. While it is clever, and is well done, I’m still undecided on whether it’s a benefit to the site or not. I’d think it would be found annoying by most people, but I could be wrong. It didn’t annoy me, but I’m a geek, and I’m fascinated by this sort of technological geekery.

The layout is mostly a three column affair. Nice and neat, everything in it’s place. They’ve so far stayed away from the clutter that can infest this sort of site. Hopefully they’ll continue that trend.

White space is used well. A fairly tight layout, but not too much so. Everything flows nicely, with no crowding.

It’s a fixed width page, which is a negative for me. I almost always think a fluid layout would be better. That said, this layout does work well. I wouldn’t hold it against the designer too much that this is fixed width. It probably wasn’t their choice anyway.

Structure
The site structure is decent. Almost entirely CSS with a table thrown in a couple of times. All tables appear to be used appropriately for tabular data of one kind or another.

While the site does view well in a variety of browsers, it could use some help. It has an unusually high number of validation errors and warnings. They appear to be mostly from the use of outdated or inappropriate coding. No individual problem is severe, but I’d be concerned that out of date browsers might have problems here. More than anything it looks like the Doctype doesn’t match the coding. Someone has upgraded the Doctype to something newer than the code can support. Again, not a big thing, but it should be fixed.

There are also some accessibility issues. A lot of images don’t have alt coding for instance. While this might be insignificant on a blog like mine, a campaign site needs to be really active on this. If you don’t give your viewers the information they came for, they’ll get it at another candidate’s site.

Content
The kind of political jabbering you’d expect from a campaign site. Nothing you wouldn’t expect with the possible exception of what could turn into a decent blog.

What would I change
I’d really only change the structure. Get the Doctype matching the code, and clean up the accessibility issues. Leave the style alone, and execute the style a little better with some cleaner code.

Summary
I’m a little surprised actually. It’s better than I thought it would be. Candidates seem to be taking the web much more seriously this campaign cycle, which is a good thing. A lot of people are using the web to do political research, and not taking it seriously can really hamstring a campaign. I think Mr. Romney will be well served by this site if it’s maintained properly.

Trackposted to Perri Nelson’s Website, Right Celebrity, DeMediacratic Nation, The World According to Carl, Blue Star Chronicles, The Amboy Times, Leaning Straight Up, Conservative Cat, Right Voices, and The Yankee Sailor, thanks to Linkfest Haven Deluxe.

Michelle Malkin’s blog has been redesigned by the nice people at The Blog Studio.

This month marks my third year in the blogosphere. To celebrate, I’m launching MM.com version 2.0. Thanks to the wizardry of Mark Jaquith and the design gurus at The Blog Studio, you’re looking at a radically re-tooled blog format with some cool new user features -Michelle Malkin

Well done! It’s a three column design, with a double sidebar on the right. While this is a style which I’m generally not fond of, this works. The two columns of content, primary and one sidebar, visually separate nicely from the traditional sidebar.

Whitespace is used well, as it was in their HotAir design. Also reflective of the HotAir design is their subtle use of color. The very simple color palette on both sites works well with the the large number of images they tend to use.

The coding looks good as I’d expect from The Blog Studio, though I’m seeing an odd use of Font tags here and there. I suspect the final design is being tweaked as I write this and those will likely go away soon. Time will tell.

Congratulations to Michelle Malkin on her new design.

Trackposted to Perri Nelson’s Website, Blue Collar Muse, Committees of Correspondence, third world county, Right Truth, The World According to Carl, The Amboy Times, Right Voices, and The Yankee Sailor, thanks to Linkfest Haven Deluxe.

I saw a political website that I liked for Fred Thompson. I even like the URL, I’m With Fred dot com. Most politicians take themselves way too seriously, and I thought this was a nice change. This will be a simple review, I just had a few comment I’d like to make.

The key to this design in my view is the simplicity.

• Simple color scheme
• Simple graphics
• Simple layout
• No animation or flash in the basic site design

I was shocked. A nice clean layout without all of that @#$% that this sort of site usually has. Political sites are usually design by committee nightmares at best. Maybe this will turn into one of those, but the initial site is refreshing.

A blog with open comments was another nice touch. I was particularly impressed by the fact that Mr. Thompson actually appeared to be doing some of the blogging. We’ll see how that turns out. I’ve been less than impressed with celebrity blogging as a whole, but his first few posts were not bad. No long diatribes. Just short notes about current events for the most part.

I’m not sure what I think of this campaign politically, but I’m impressed with the way they’ve put together this site and using it to their advantage. It appears to be well thought out, and well executed. While this alone won’t get my vote, it will keep me watching to see what he has to say. When it comes down to it, keeping people watching what Fred Thompson has to say should be the primary purpose behind this site, and in my opinion, it’s fulfilling this duty well.

Trackposted to Perri Nelson’s Website, Blue Collar Muse, Committees of Correspondence, third world county, Right Truth, The World According to Carl, The Amboy Times, Right Voices, and The Yankee Sailor, thanks to Linkfest Haven Deluxe.

Should You Design Your Own Blog? « Lorelle on WordPress

A blog’s design is only as good as the blog designer.

That’s the truth. Like it or not.

Web design, especially blog design, is not about moving a sidebar to the left or right or changing your header art. It’s not about making the background blue instead of green and adding pictures to the overall design.

Web design is about matching the design with the content, the design with the blogger, the design with the blog’s purpose, the design with the audience, and about making the connections between all these pieces come together.

That last paragraph is the best. The idea of matching design with the content, the blogger, the purpose and the audience is wonderful. Very well said. I wish I’d said it in fact. This concept is one of the reasons I would suggest that bloggers should consider using a well designed but somewhat generic template when they get started. Better to be somewhat design neutral until you can get a feel for your audience and for yourself as a blogger. It’s also, in my opinion, better to have a well thought out neutral them, than a poorly designed them made just for you. A blog design says something about you, and about the site. It’s better that your blog’s design says little, than to have it say something poorly.

This new theme I have up has been working nicely for me. Just enough cowboy in this theme to make me feel at home. I tested it extensively in Internet Explorer and Firefox. It was tested in Opera too. No problems. One of the recent IE updates seems to have induced a margin collapse error in the left margin though. Not too difficult to fix. That is, not to difficult to fix once you realize what’s happening. Really annoying if you don’t initially realize what the problem is. It seemed to be a poorly nested element, and I searched for that for quite some time to no avail. Because that wasn’t what it was. Turns out I had two problems. The margin collapse that I eventually found, and a plugin that was garbling some code.

Anybody having trouble with the Comments QuickTags Plugin? I ended up turning it off here and on several other blogs I maintain. It was breaking the permalinked pages on all of them. Turn off the plugin and they snap right back.

The solution to the margin collapse error in case anybody is interested, is to add a border to the element outside the one with the collapsing margin. Not exactly intuitive. Go read Andy Budd’s No Margin for Error post for a really good explanation of this.

Trackposted to Blue Star Chronicles, Perri Nelson’s Website, Webloggin, The Amboy Times, The Random Yak, and On the Horizon, thanks to Linkfest Haven Deluxe.

And now back to our regularly scheduled Design Review series. OK, not very regular, but I’m working on it. Today’s choice of subjects is Grouchy’s Liberaltopia. It’s a fairly new site, having been started earlier this year, but the design has a very mature and professional look.

Style:
Their style starts off with a bang. Anyone who can design a WordPress theme around a header image of the US Constitution and flag has my vote. A dark red gradient background anchors the page nicely.

Good use of color. While I normally cringe at making links blue (often looks unintentional), it works very well here as an accent to the red background and white page.

I’m particularly impressed with the layout, a very nice use of space. They have avoided the common blog design error of crowding and cluttering. Everything is nicely space, and highly readable.

Using a flag image in the blockquotes adds a nice touch. It balances nicely with the rest of the theme.

Overall good marks for style.

Structure:
This is a WordPress site, and as you might expect from me, I like the site structure. It’s not perfect however. There is some sloppy coding I don’t like. After a quick look I’d guess it’s a widget or two. Nothing wrong with using them, but I don’t always like the code they produce. More of a matter of personal preference than anything, I’d be shocked if this coding caused any problems, it’s pretty insignificant.

Content:
Content is well written by authors that have a sense of humor. They take their subjects seriously, but not themselves. All of these things are pluses in my book.

What would I change:
I’d think about changing the login bar at the top. To my eye it’s not quite right. I’d say it either needs to be more prominent, or less. Removing it and putting those option into the sidebar would be another solution.

I’d make an effort to clean up the code somewhat, but that’s likely produced by widgets or code from external sources so that may not be an option.

I’d consider changing the use of the flag image in the blockquotes so that it doesn’t repeat in long quotes. I like it’s use, but I’d fading it out in long quotes rather than repeating. This is one of those things I might change my mind on as soon as I tried it, but I think it would visually work better.

I’m personally not a fan of animated site elements for the most part. I’d likely replace the rotating gear element that begins each post.

Summary:
A very good design, with decent execution. While I see things that I’d personally change, I don’t really see anything I’d consider an error.

The coding could improve, but that could be said for most blogs. I don’t see any coding issue that’s likely to cause a problem.

What would I not change? White space. The use of space is good, and I’d be very careful about changing that.

Like their friends/rivals the Rotties, they’ve got the beginnings of a good branding effort going here, and I’d make an effort to maintain that in future. I think the use of historical imagery, and the red, white, and blue color palette should continue on any future design updates.

I’m fond of this theme and give it good marks, and I think the owners and designer of it should be very pleased.

Trackposted to Perri Nelson’s Website, third world county, The Crazy Rants of Samantha Burns, Pirate’s Cove, Blue Star Chronicles, Dumb Ox Daily News, Pursuing Holiness, The Yankee Sailor, and Gone Hollywood, thanks to Linkfest Haven Deluxe.

A regular reader, I’ll let her identify herself if she chooses, asked me a question about background images. Since I’ve received similar questions before, I thought this would be a good forum for answering them. Here is a short list of background questions that I’ve received. I’ve taken he liberty of rewording them so that they are more generally applicable.

• Do you make your own backgrounds?
• How do you make backgrounds?
• Can you just take a picture and make it repeat with code?
• Some backgrounds are very subtle, almost invisible, how is that done?
• Can you use more than one background?

Do you make your own backgrounds?
Yes, I do all of my own backgrounds. I do all my own image work for the most part. I’m a perfectionist, and rarely satisfied with using someone else’s work. It’s not so much that I dislike the quality of work of other designers, but that their vision of a design isn’t the same as mine. By doing my own image work, I can create an image for exactly the purpose I want, rather than adjusting the design to match the image I have.

How do you make backgrounds?
Background images come in two general types, repeating and non-repeating. Repeating images are used a lot more often than people think. It can be a great way to reduce load time. Take my sidebar image for example. Every theme I’ve put together for this site in recent memory has used a repeating image to define the sidebar. One of the things to take into account with a blog design is it’s fluid nature, you never know how long the page is going to be. By using an image that repeats vertically allows me to compensate for that. The sidebar image’s repeating nature allows it to fit regardless of page length, and it loads in a fraction of the time of a longer image.

How do I make a repeating background image? Some image by their nature can repeat. For instance a solid black box could be repeated both vertically or horizontally to make a black line, or repeated both directions in order to change the background color of whole containing element. More complex repeats like the saddle texture I like to use on the left side of this site take software like PhotoShop. I first carefully select the area I wish to repeat. Don’t underestimate this step, because the smaller area you can select, the faster your page will load when you use it. Then I use a PhotoShop filter called Offset. It’s listed under the Other menu at the bottom of the Filter pull-down menu. This allows you to shift the image so that it wraps. For instance when you offset upward, the top of the image wraps around and comes up from the bottom. This doesn’t fix the seam caused by repeating an image, but it allows you to do it manually. Just make sure to offset your image in the direction it’s going to be repeated. This is where choosing your section carefully helps out. If you’ve chosen to repeat an area that has similar colors and textures, fixing the seam takes only the slightest use of a couple of key PhotoShop tools. A little Healing Brush or Clone Stamp, and the area disappears. Other image editing software can do the same work, I just happen to use PhotoShop.

How do I make a non-repeating background image? Creating background images that don’t repeat isn’t technically difficult, but it can be frustrating. What I’ve seen to be the most important question is where is it going to be placed, and in what context? As an example, let’s consider header images. If you have a fixed width site, the header width is determined by the page width. If your page width is 760 pixels, the header image you’re using either needs to be 760 pixels wide, or look appropriate in that context. Personally I prefer fluid width blog designs. This makes the header image a little more tricky since the header size isn’t constant. Any header image I use must look appropriate at any reasonable page width. I’ve recently used two different solutions. My current solution is to use four smaller images which blend into the background color that I’ve assigned my header. This allows the background to stretch or shrink, without showing image edges because the header background color fills in between them. My previous fluid blog theme used repeating texture to fill the space and the header image had a transparency to allow it to blend into the repeating pattern. These two factors gave the impression of one seamless header image, but loaded much faster.

So, how do I actually create a non-repeating background image? The key to background images in general, and non-repeating ones specifically is mostly about context. It has to fit with the rest of the page. If you’re using a fixed width page, it has to fit the space. If you’re using a fluid width page, it has to look good at various sizes or be placed in a portion of the page that doesn’t stretch. For the actual image work I use PhotoShop as I’ve mentioned before, but any image editing software could be used. The actual techniques vary dramatically. Your can fade to a background color or fade to transparency. You can extend the image to fit into a predefined space. You can adjust color or make any of thousands of other adjustments. Your techniques will be defined by the type and nature of the image needed.

A few words of warning. Always consider load time. Big images take a long time to load. Image formats that allow for transparency tend to have noticeably larger file sizes than JPEG files with similar images. So, given the choice, fading to a background color and saving as a JPEG will give you a smaller file than using transparency and saving as a GIF or PNG.

Can you just take a picture and make it repeat with code?
Of course, however using some form of image editing software and modifying the image to better suit your purpose is always a good idea. Just because you can repeat an image doesn’t mean you should.

Some backgrounds are very subtle, almost invisible, how is that done?
Subtle fades and transparencies can be done in most image editing software. Using the GIF or PNG formats, you can give a image actual transparency, letting it fade into the background of your choice. A better choice though would be to fade the image into the background color or your choice while still in the image editing software. Then you can save as a JPEG which will save you on load time. While this doesn’t allow for transparency, it give the effect of transparency, which in this context, is the same thing.

Can you use more than one background?
No… and yes. While it isn’t possible to give an HTML element two backgrounds, it is possible to make it look like you did. The trick is to use concentric DIV elements, each with their own background. This can give the visual effect of two backgrounds, or of one background larger than either individual image. As I described above, you can use one repeating element to fill the space, and one non-repeating element for visual interest. It’s a great technique, and I use it frequently.

None of the techniques I’ve described here is the perfect solution, but used together, they’ll help you find the technique that’s perfect for you.

Trackposted to Perri Nelson’s Website, Rightlinx, A Blog For All, The Crazy Rants of Samantha Burns, stikNstein… has no mercy, Adam’s Blog, basil’s blog, The Right Nation, Pirate’s Cove, Stuck On Stupid, Cao’s Blog, The Bullwinkle Blog, , Conservative Cat, and Right Voices, thanks to Linkfest Haven Deluxe.

I’d like to apologize profusely to the owners of A NEWT ONE for not being more clear in my latest latest design review. It was not my intention to say that your blog’s design was poor. I think the site actually has a lot going for it, but that it is not living up to it’s potential due to some structural issues.

While the list of suggestions I had seems long, it’s not as bad as it looks. Most of the suggestion I had could be enacted without visibly changing much. The site would visibly look very similar to how it does now, but load time would be noticeably reduced.

I use the Web Page Analyzer for all load time estimates. This has in the past been very reliable and consistent in it’s estimates. It does however, seem to be a little flaky today. I reran the estimates for the site, and they came back noticeably better (about 20% better), though still not good. It is currently showing estimates of 494.24 for dial-up, 164.27 for DSL, and 31.24 for T1. This coincides closely with my personal experience on this site.

I’d also like to request that anyone who read this review please re-read it in a few minutes. Several sections of my post don’t seem to have posted properly, and I’m in the process of correcting them as well as the revised load times.

Update:
The review is now fixed, and this correction has been track-backed to all sources that the original was.

Trackposted to Blog @ MoreWhat.com, Perri Nelson’s Website, Mark My Words, Faultline USA, basil’s blog, DragonLady’s World, Blue Star Chronicles, Pirate’s Cove, The Amboy Times, The Bullwinkle Blog, Dumb Ox Daily News, Conservative Cat, and Conservative Thoughts, thanks to Linkfest Haven Deluxe.

I’ve been getting some traffic from A Newt One lately. My link is included in the 101rst Fighting Keyboardist blogroll somewhere on their sidebar.

Style:
The style of Newt One is based on white and colored text on a black background. This is harder to pull off than most people think. This is a much more unforgiving color scheme than its’ inverse . It’s difficult not to cross that subtle line where it becomes cluttered. I think that Newt One has gone over that line. What might be borderline cluttered on a dark on light color scheme might be cluttered on the light on dark version.

This site needs a much more unified color scheme. It currently visually breaks up into several blocks of content. This can cause it to be difficult to follow and difficult to navigate. This is exaggerated by the multiple fonts, font colors, font sizes, and varying background colors present. I think this is more because different authors post in slightly different styles than anything. Using a very tightly controlled color scheme, and a good CSS would remove the need for on the fly formatting, and would improve consistency. As I said above, the light on dark color scheme is much more unforgiving than the inverse color scheme. Variations in color and formatting are much more obvious here than they would be in another theme.

While there are a number of interesting graphical elements, they are almost entirely swallowed by other elements of this site. As an example, the 9/11 graphic on the top of the navigation bar is very interesting, but completely overpowered by other images. It is also placed incorrectly, and slides behind text when the page is scrolled.

Structure:
The site is built with a table layout, but incorporates some CSS as well. I don’t see that the table layout is helpful here. A strictly CSS layout would give much finer control over the overall style of the site.

Font tags are used extensively here, and this exaggerates the cluttered nature of the site. When each paragraph’s font styles are defined on an individual basis, differences, regardless of intent, occur. CSS controlled text styles, carefully designed and applied, would give this site a much more unified look, and significantly reduce the cluttered effect. This may seem insignificant, but this use of font tags also clutters up the RSS feeds for this site, making them difficult to read as well. Making your site cluttered is one thing, making your feed cluttered is something else entirely. An RSS feed is targeted at regular readers and people with visual impairment of some kind. These are two groups who are not going to appreciate this sort of treatment, and likely will unsubscribe.

Load time for this site is beyond unreasonable. Load time is 31.24* seconds for a T1 connection! How many of their viewers do you think have a T1 connection? I’d guess not many. DSL load time is 164.27* seconds, while dial-up is 494.24* seconds. Slow load time was caused by the 92 images and 15 scripts that were on the homepage when I tested it. This is completely unrealistic. They’re doing their traffic great harm by having load times like this. Whether they know it or not, they’re losing a lot of viewers who might have otherwise become regular visitors.

Content:
Content is a nice mix of current events and politics by conservative writers. Content has a lot of potential, and I think they are going to exceed even their wildest expectations with this website.

What would I change:
In short… everything, and nothing. This site needs to be taken carefully apart, and put back together. The general site layout is acceptable, as is the style, but it needs to be shifted to a CSS layout, with no tables or font tags. Then some simplification needs to happen.

• The number images needs to be brought under control
• Images that are used need to be optimized for faster load time
• The number of scripts needs to be lowered
• A unified posting format needs to be put together and strictly implemented
• The site navigation needs to be cleaned up
• Anything that interferes with the RSS feeds needs to cease

Summary:
This is a fine example of what not to do with a blog design. What did they do wrong? They did too much. Bigger and flashier isn’t always better. This site’s blog design is a hindrance to it’s performance, probably significantly so. Their traffic is being controlled and limited by their site design, rather than their content. I’d guess that within a short time after updating their style, their traffic will go up noticeably.

Contrary to what you might think from the previous paragraph, I think the design of this site has a lot of merit. I’m a big fan of the light text on dark background style, I used it myself for a while. Simplification and clarification are the key. This site needs to simplify it’s formatting and it’s use of images, and both clarify and simplify it’s color scheme. With those two things done, it will be able to live up to the potential of it’s content.

Update:
This post was originally posted in an incomplete manner. Due to technical problems on my end, the content section as well as several individual paragraphs were not posted. I write these posts in sections, then do an over-all revision. It appears that my last section, and the over-all revision were not initially posted. As I noted elsewhere, my apologies.

* Load times have been rechecked and revised. The resource I use to check load times may be malfunctioning, and these numbers are at best a guideline at this point. I did test this site on DSL and T1 connections, and my personal load time estimates were close to my automated test times.

Trackposted to Blog @ MoreWhat.com, Perri Nelson’s Website, Mark My Words, Faultline USA, basil’s blog, DragonLady’s World, Blue Star Chronicles, Pirate’s Cove, The Amboy Times, The Bullwinkle Blog, Dumb Ox Daily News, Conservative Cat, and Conservative Thoughts, thanks to Linkfest Haven Deluxe.

Blog design doesn’t matter, long live blog design!

Confused yet? Web design, like graphic design, is at it’s core, communication. Is your site communicating clearly? Here are a few things you should consider when looking at blog designs.

• Legibility
• Readability – I’ll explain why I’m listing this separately from legibility in a moment.
• Good navigation
• Consistent formatting
• Don’t annoy your viewers!
• It’s all about the feed

Legibility is a bigger factor than you might think. Some blogs are hard to read. You can play around with decorative fonts and flashy colors if you want. When you get to the content though, use something that’s easy to read. Dark text on a light background is probably your safest choice. Reversing those is also possible, but a noticeable percentage of people find light text on a dark background straining to the eyes. Do you use bold and italic a lot? This too can be difficult to read. Used as an accent they’re perfectly acceptable, but use them carefully. They are to add emphasis where needed, and not everything needs emphasis. Keep this in mind while considering blog designs… If they can’t read it, they won’t come back.

Readability and legibility are really the same thing. That said, there is another aspect of legibility that you should consider. Even when you’re using a perfectly legible font, are you adding something in the way of formatting or organization that makes your site difficult to read? To many graphics? Too much color? Unusual or confusing formatting? Look over your design and see if something can be interfering with your reader’s ability to read the text. What did I ask you to keep in mind? If they can’t read it, they won’t come back.

Navigation is also often overlooked. Someone at Websites that Suck coined the phrase Mystery Meat Navigation for a reason. Your navigation should be intuitive. Anyone with a minimum of web experience should be able to navigate your site within a few minutes. If that’s not the case, then you have a problem. If they can’t navigate it, then they won’t find what they want, and therefore can’t read it. If they can’t read it, they won’t come back.

Formatting is important in one sense, and not in others. The finer details of formatting are important for the overall style, but they won’t make or break a site’s traffic for the most part unless they’re quite atrocious. What is important is that formatting is consistently used. If you format consistently, people know what to expect, and reading becomes easier. If your formatting is always changing, readers can’t “learn” how to read the site. You may have heard this before, but if they can’t read it, they won’t come back.

Don’t annoy your viewers may seem like a stupid point to make, but it really isn’t. Animation may be cool, but a lot of people find it annoying. Splash screens have been popular before, and likely will be again, but some people hate them. Adding music on your site may seem like the perfect thing to do, but a lot of people wish you wouldn’t. Adding 478 images down your sidebar may seem like a good idea, but how many of your viewers use dial-up? While your site is designed for you, its real target audience is the viewer. Keep this in mind, because if you annoy them, they won’t come back.

Always keep in mind your RSS feed. It gets it’s content from your posts. An RSS feed ignores your default settings like font, and color, but it remembers formatting you add within your post. It remembers things like bold and italic, underlines and strikethroughs, photos, graphics, and bad links you forgot to fix. In a lot of ways an RSS feed is less forgiving than a regular web page. I strongly suggest that you subscribe to your own site’s feed so that you can make sure that it’s functioning. The people who are reading you feed fall into three basic categories. Your loyal readers, people in a hurry, and those using a reader because of some sight related disability. All three of these groups are going to be annoyed if your feed is not functioning or otherwise unreadable. What have I been drilling into you? If they can’t read it, they won’t come back.

I love a good website design. If you have good content though, and keep these few things in mind, your readers will keep coming back, regardless of your design. Blog design doesn’t matter, long live blog design!

Trackposted to Blue Star Chronicles, Perri Nelson’s Website, A Blog For All, The Random Yak, Conservative Thoughts, The World According to Carl, Right Voices, and Pursuing Holiness, thanks to Linkfest Haven Deluxe.

I saw an interesting post over at Like It Matters today. One sentence caught me eye.

I’ll catch some flack for this, but your blog design doesn’t matter all that much.

This may come as a surprise form some who does design reviews. I agree with Brian Oberkirch. Blog design isn’t as important as everyone thinks. Most blogs don’t last. If you have to choose between a good design, and good content, choose content.

There are exceptions of course. Businesses that blog in conjunction with an existing site should probably have a theme that integrates into their existing web presence for instance. Design professionals need a custom theme, as would most web design or blogging related businesses. People for whom a significant part of their livelihood depends on their blog should also be using a custom theme. For most people, a nice off the shelf template will do. For a beginning blogger, you want a nice legible theme, that doesn’t annoy the readers. If after a year, you’re still blogging, then worry about a good design.

Trackposted to Perri Nelson’s Website, third world county, Big Dog’s Weblog, stikNstein… has no mercy, basil’s blog, Overtaken by Events, Cao’s Blog, The Bullwinkle Blog, Pursuing Holiness, Right Voices, and Conservative Thoughts, thanks to Linkfest Haven Deluxe.