Performancing Metrics

Archive for the ‘Blog Design’ Category

What’s the Right Blog Template Width?

One of the good (or bad, depending how you look at it) things about being a blogger is that you’re the publisher, editor, writer, and graphic artist rolled in into one. Apart from finding out a good topic to write about, most bloggers look for a good template to use, whether the blog is on WordPress or Blogger.

One of the most common questions that stump in the template decision is  “How wide should my blog’s template be?” And there’s a a couple of good reasons to why this is a bottleneck in the template selection decision.

See, the thing is that screen resolutions are as varied as the topics about blogging. It used to be that the only relevant resolution was 1024 pixels by 768 pixels (1024×768). But now, only roughly 1/3 of screens out there have 1024×768. The majority is now a resolution bigger than that.

The other reason is readability. With the changing resolutions, I won’t be surprised if people also tweaked their screens DPI (dot per inch) setting. This setting can make text and images to be displayed bigger (or the same with a lower resolution screen), even when the physical screen becomes bigger. This makes text more readable even with a ultra-high resolution display. Nonetheless, the upper limit in nice, readable web typography is 75 characters wide, give or take a few characters.

Now, with the variety in user needs, what’s the best width for blog templates? (Length or height is rarely an issue because people are used to vertically scroll).

Assuming you are using a 14 pixel size for the text and default character spacing, you would need at least 520 pixels for the main content area. Plus, if you add two columns 160 pixels wide (Why 160 pixels? This is to accommodate the widest standard skyscraper ad size), you would need an extra 320 pixels. Finally, you’d need approximately 10-15% buffer for margins. The final total? 924 to 966 pixels wide.

Surprisingly, this is very near the favorite 960 pixel-wide designs today. This number also seems optimal for common screens based on W3Counter’s final 2009 stats,  60% of displays out there range from 1024 pixels to 1280 pixels wide.

Categories: Blog Design, Blogging Tips
Tags: , ,

3 Ways to Make Your Blog More Usable

Blog Usability is something taken for granted because most bloggers don’t design the template of their own blogs. But that shouldn’t be reason for bloggers to ignore usability completely.

If you’re a web designer, there are some easy to implement practical usability methods, such as basic heuristic review, user research, and prototyping. Bloggers who are more into the writing can do other little things that can go a long way to improving the blog’s usability:

  1. Write in short paragraphs – The principle behind is that research found that people who use the web scan pages rather than reading them outright. Meaning good spacing between paragraph blocks is a must.  This also means that you have to alter your writing if you’re used to long and meandering paragraphs.
  2. Place elements consistently – One thing about usability is setting the expectations of your users. What this means for you as a blogger is that it may be better to lay-out images, block quotes, and even headings. This will help your readers “learn” how your blog is laid out and avoid getting confused with other elements.
  3. Avoid overriding your template’s styles – While most blog software like WordPress and Blogger do have a mature WYSIWYG editor, overriding the default styles defined in the template can do more harm than good.

Just remember, the guiding principle of blog usability is to make it easy for your readers to use your blog and read your content. You don’t really have to invest much to achieve improvements in your blog’s usability.

Categories: Blog Design, Blogging Tips

A review of PSD2HTML

One of the goals of operating a website or blog is to make them stand out among the sea of other sites and blogs on the internet. You want to be as unique as possible to enable recall and put your own mark of individuality. One of the best ways to do this is by producing code that is especially made for your website or blog. But producing code can be a herculean task especially if you know little more than a little HTML coding. What you need to do if you are looking to make code is to hire a company to do the code development for you. The challenge is to find the company that is best suited to meet your needs and have the skills and experience to deliver quality work. One company that has built a reputation for delivering high quality, professionally done code for websites is PSD2HTML.

PSD2HTML is a well respected company that specializes in converting web artwork to working code, like PSD to HTML. The company ensures that it comes out with quality output by hiring experienced web experts who produce codes that meet their clients’ specifications.

Using PSD2HTML’s services brings many benefits to a client. One of the biggest advantages is PSD2HTML’s commitment to customer service. The company values customers so much that it has implemented a 24 hour live chat option that allows clients to get instant feedback with regards to their project. A click on the live chat button will bring the client immediately to a PSD2HTML staff who can discuss the details of the project. Even though the live chat staff is available only on weekdays arrangements can be made to extend work on weekends if it is necessary.


Feedback can also be obtained by using the other contact options available to the clients. Clients can send messages through an online contact form or they can call PSD2HTML’s telephone number at +1 877 721 8040. This close collaboration with the client is PSD2HTML’s way of ensuring that the client will get exactly what he asked for.

Whatever the markup needs of the client, PSD2HTML can address them. The PSD2HTML website has recently undergone a welcome facelift that has made the site easier to navigate and find the information that clients need. Among the services that PSD2HTML offers are:

• Templates for WordPress, Blogger and other blog engines
• Dreamweaver templates
• Email templates
• Design to semantic code conversion

The number of services that are being offered is easily more than what are currently made available to developers and website owners. This wide array of services is what makes PSD2HTML so popular and a “go to” place for developers.

PSD2HTML has made using their services easy for its clients. IT has made the whole ordering process more streamlined and easy to follow. A client will gather the files that he will submit to PSD2HTML then fill out the order form. He specifies all of his requirements in the form like browser compatibility and certain compliance parameters. The comprehensive order page enables the client to truly “personalize” his requirements, ensuring that what he gets exactly fits his needs. PSD2HTML allows for an unprecedented level of personalization that few companies can provide. There is actually a space within the order form that lets clients include other details that are not included in the established categories. Any extra information that the client wants to provide can be included here.

The client then completes payment in order to end the ordering process. Payments to PSD2HTML is very convenient because of the number of payment options available. In addition to Paypal and Google Checkout options, the company has recently implemented a new Direct Payment option that will let clients pay using major credit cards. Knowing how much the client will pay is also made easy by PSD2HTML. Getting a final quote is not a problem because each option that the client chooses is priced accordingly and is immediately reflected in the final price. This allows the client to add or delete options on the fly to see which configuration would fit both his needs and his budget.

After the whole process has been completed, PSD2HTML will provide the client with instructions on how the files will be received after it has been converted. The deadline set by the company is guaranteed, which is a big plus for any client since they will know exactly when to expect the final product.

And when it comes to quality, clients should never worry. PSD2HTML has built a reputation for making quality work. In fact, it has recently garnered an ISO 9001 : 2000 certification that proves it adheres to international quality standards.

Categories: Blog Design, Blogging Resources

Speed Up Your WordPress Theme

NetTUTS have put up a great post on speeding up a website, but you could easily translate that into speeding up your WordPress blog. While these might not increase your speed like caching or anything else like that, it is still a very useful guide for compressing images, CSS, and finding errors.

If perfomance is paramount for your website, I strongly suggest that you consider compressing your CSS and Javascript files just before deployment. Don’t bother doing it at the beginning of your development. It’ll only cause more frustration than help. However, once the bow has been tied, compress those babies up.

We’ve talked about compressing CSS before on Blogging Pro in a post entitled, CSS Optimization: Make Your Sites Load Faster for Free.

I am really interested in the the section on using libraries and frameworks as I’ve been hearing more and more about people using them to speed up their development time, or require less code, through use of libraries written by other people.

If you are interested in speeding up your blog, or the theme you are going to release, I’d recommend checking out the post on NetTuts.

Categories: Blog Design, WordPress Themes

CSS Sticky Footer – Design Helper

If you have had issues creating a footer that hangs at the bottom of the page, no matter how short or long the content above it is, then check out this new CSS Sticky Footer method.

The advantage of this method over previous methods is that it doesn’t require an extra “push” div to get it down there, and it also works with most major web browsers.

This sticky footer solution is working in all major browsers, including Google Chrome!. It works with floated 2-column layouts and we don’t get overlap in resized browser windows unlike older solutions you find when you Google sticky footer. And you don’t need an empty push div.

If your visitors are browsing your blog using IE 4 through 8, or older versions of Firefox, they’ll still see the proper effect. Being able to support almost all of the major web browsers today, while needing fairly semantic code, makes CSS Sticky Footer an interesting piece of code to use on any project necessary.

I expect to see some WordPress themes taking advantage of this code soon.

Categories: Blog Design

10 Design Tips from Tech Soapbox

AhmedF of Tech Soapbox gives us 10 HTML tips that will help improve speed and efficiency. I say building in the sense that you could either be a theme designer creating a blog template, or you could be tweaking your existing blog for speed.

For instance, Ahmed recommends you put in your content first, then other elements later. Good for SEO. Same with using proper headers and nesting these accordingly (H1, H2, H3). How about loading your javascript at the end of the page rather than the beginning? Great for making sites appear faster.

Then for usability, there’s the use of tabindex, which is great with people who are fond of using the keyboard to navigate rather than the mouse.

And then there’s conforming to web standards and conventions. I know designers these days do their best to conform. However, there are still some who use HTML elements for purposes other than their original intent. Yes, that’s thinking out of the box. But that “box” was created for a purpose. And sometimes structuring things differently makes it difficult to make changes down the road, especially when you change the use of commonly-used tags like LI, SPAN and P.

For non-designers or non-developers, these things might sound a little too technical. But if you look under the hood of your blog (i..e, the underlying code of the theme), or at least even your blog’s source, it pays to clean it up or tweak it to improve on the end-user experience. Even if you shave just a few seconds off loading time, or even if the improvements seem trivial, multiply that a thousand times over, and both your readers and your server will appreciate it.

Categories: Blog Design, Blogging Sense

Short tip: WordPress Image Captions

Not really sure if you’ve noticed the persistent “image caption” feature that WordPress 2.6 has developed.  I was happily blogging this past week when I’ve noticed that some of the images I posted vis a vis the blog posts have defaulted to a “nil” caption.  I do love this improvement, but was a little “blind sided” as there was no announcement regarding it until now, well I read it just now, hee hee. So I had a bunch of images with “nil” captions in them.  Had to manually remove it to blank (thankful they allow blanks).

It has gathered about 185 varied responses from “that stinks!” to “oh ok, it would take getting used to”.  But nonetheless I think it is best practice to put captions to photos to make your blog posts a little friendlier and much understandable.

To add a caption to an image, press the image media icon just above the editor buttons:

In the same pop-up window, you can see there are other image fields to complete like “title”, “description”, “link URL”, “alignment” and “size”.

Problogger wrote a short post regarding the importance of blog images:

  • to enhance posts by giving a visual point of interest
  • to engage people to read (imagine talking about a celebrity minus the juicy photos!)
  • to emphasize the message
  • giving your blog a more personal touch

All in a day\'s work for Jim! :)

From experience, my family blog (sorry, no URLs for privacy) gathered more hits and lesser bounce rates (from Google Analytics) WHEN I include a set of photos.  When I posted that I posed with a python around my neck, guess which album they clicked through and browsed often.  Or when I held a croc in my hands like so…

I RSS read my boss’ personal blog and when I saw a blog pic of him trying a spaghetti noodle up his nose I stayed on and watched the video even! haha.. that was a laugh.

So any crocs in your area that needs taming??? ;)

Categories: Blog Design

Google Now Indexes Flash. Should Bloggers Rejoice?

Word is out that Google is now able to index Flash content. This is probably good news to web developers out there who are into building sites with Flash. However, should bloggers rejoice at this news?

Probably not. Or at least there’s no compelling reason to be too happy because of this news, unless you run a video blog with a lot of flash-based videos. I would agree with our resident designer Ia that Google’s new Flash-indexing ability might be misused by designers who are fond of designing in Flash without much regard for usability and accessibility.

Google’s efforts to read Flash still seem to be in the premature stages. Typical Google, they always release their products in beta without being wary of the consequences.

By consequences I mean clients who are now running around telling their web designers to create animated intros and the extravagant interfaces for their websites. I can’t really shoot down this little achievement by Google—except that it’s getting scarily smarter everyday and should try to have more features than issues when they launch a product.

More importantly, I can only continue to condemn those who misuse Flash without any regard for accessibility, much less usability, whatsoever.

If you are serious about optimizing your blog for the search engines, then I think the first thing to do would make sure you have good content!

Categories: Blog Design, Blogging News, Blogging Sense
Tags: , , ,

Cross Browser Compatibility On The First Try

Based on my own research, cross browser compatibility seems to be the thorn that is in every web designer’s side. Taking a mock up design and coding it to look the way it’s meant to be in all browsers at times, seems like an impossible task. I know when I’ve hacked WordPress themes, getting them to appear correctly in both IE 7 and FireFox 2 was such a pain, I would end up going for the (good enough) approach.

Thankfully, Anthony Short has put together a list of coding conventions ( How To Get Cross Browser Compatibility Every Time ) based on his research that will help get the job done on the first try.

This is a summary of what Anthony Covers in his post:

  1. Always use strict doctype and standards-compliant HTML/CSS
  2. Always use a reset at the start of your css
  3. Use -moz-opacity:0.99 on text elements to clean up rendering in Firefox, and
    text-shadow: #000 0 0 0 in Safari
  4. Never resize images in the CSS or HTML
  5. Check font rendering in every browser. Don’t use Lucida
  6. Size text as a % in the body, and as em’s throughout
  7. All layout divs that are floated should include display:inline and
  8. Containers should have overflow:auto and trigger hasLayout via a width or
  9. Don’t use any fancy CSS3 selectors
  10. Don’t use transparent PNG’s unless you have loaded the alpha

In his research, Anthony only worried about FireFox 2, Safari3+ and IE6.

So if you are creating a theme or any web design for that matter, keep these conventions in mind so you’ll spend more time designing and less time refreshing browser windows.

Categories: Blog Design

How Much Would You Pay for Blog Design?

Recently, Franky asked how much you think a WordPress installation is worth to you, and if you would be willing to pay for it if you had to. For most WordPress users, WP runs as a personal publishing platform. For some of us, though, we run sites on WordPress for a living. This means WP is used as a tool of the trade.

Now I ask, how much would you pay for blog design? How much do you think your blog’s look and feel is worth to you? For most who run personal blogs, free themes would suffice, just as running on a hosted blogging platform under a subdomain (or subdirectory) would be okay. For those who are picky enough to have to run a self-hosted software (such as WordPress) under one’s own domain, perhaps a custom design would be next in your to-do list.

A couple of years back, Chris Pearson wrote that he can design basic–and he means basic–blog themes for $1,500. And he says that’s less expensive compared to other designers he has benchmarked against. That was two years ago. Now considering inflation, the dollar’s decline and other factors, I reckon the starting price point for themes is higher.

On Splashpress Media, we usually run sites on their own custom designs whenever possible. For new sites, we try to set them up with custom themes prior to launch. For acquired sites, we try to redesign within a couple of months of taking over. Still, some sites have retained their old designs, because either the audience is not that big yet, or that the original design is part of the brand. This is especially so, if the cost of design has been incorporated in the valuation of a blog.

The preference in the network is for custom design because we feel we can better establish a blog’s identity with a unique look and feel. Also, we take into consideration the other aspects of design aside from aesthetics, which I think is actually more important than just how a blog looks. The user interface, the flow of information, and the underlying code are also very important, and can make or break a blog.

But to an individual blogger, does it matter at all? How about to corporate bloggers or business bloggers?

I can understand if an individual blogger would have qualms about paying $2,000 for a theme, unless one earns big from a blog (or set of blogs) and can recover the costs quickly enough. A big company who wants to blog can perhaps afford this, and even more. But a startup with a small budget might want to try out free designs first.

So I ask you, how much would you be willing to pay for blog design? Should you stick with free? Would you go cheap? Or would you pay top dollar for top designers?

And as a disclosure, I manage bLogics, a blog logistics consultancy under Splashpress Media. We do have a set starting price for blog design, but knowing your opinion (hopefully from both designers’ and users’ points of view) would help me determine whether this price is fair.

Categories: Blog Design

Performancing Metrics
EatonWeb Portal