Performancing Metrics

Archive for the ‘Blog Design’ Category

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
    overflow:hidden
  8. Containers should have overflow:auto and trigger hasLayout via a width or
    height
  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

Comment Design Inspiration

Comment areas on blogs don’t have to be uninspired, and to that effect, Blog Design Blog has posted a great article that showcases thirty different comment designs that will hopefully get you from using a boring default comment setup.

Comment design is an art. Comment design is often overlooked by a lot of web designers when they are designing their blog. It tends to be one of the last things a web designer works on and because of that it suffers. This list shows 30 blogs where the web designer didn’t just throw together the same old comment design and put extra effort into their comment design to make it fit with their blog design.

Some of my favourites include Snook.ca, Larissa Meek, and Ordered List.

Categories: Blog Design

The 449: Blog Design Interview

I recently had a chance to speak with Chris Garrett, owner of Chris Garrett Media Ltd about his new company The 449, which sells beautiful, custom themes for £449.

So, lets start with a little about the 449, and its history. Who is involved, and you mentioned somewhere that you had worked on this idea before?

I started the 449 originally as a spin-off of my main design business, Chris Garrett Media Ltd but about six months ago decided to stop doing it as I’d been doing much more involved work on large web applications. I noticed that a lot of people missed it and discontinuing the 449 had left a large hole in the market, so I reinvented it and bought in my good friends Chris Rowe, Indranil Dasupta and Dave Nichols to help tackle the work. I’m now acting as project manager and the work being rolled out is the excellent result of everyone working together.

Next question: Why £449? Why not more or less, and why in Great Britain Pounds?

I’m based in the UK, and I’ve always considered it professional to charge in your own currency, it also saves my accountant a lot of effort. When I started the 449 I was working at a rate of £150 a day, we worked out that to put together a high quality, bespoke WordPress theme would take about 3 days. We knocked a pound off because “the 450″ just didn’t sound that good.

Indie Anthems

What is special or different about 449? Couldn’t I get the same thing for $50 off SitePoint?

Harsh! We don’t just spend time pushing pixels in photoshop and hacking together some WordPress code. When you come to us, we take the time to dig deep into what it is your looking for and respond with a design concept that reflects that. We also take the time to get into the head of your user, my expertise lie in user experience design so you can be sure that your theme will be optimised to make life as easy as possible for your readers. By encouraging discovery by cross-pollenating content and defining calls-to-action for the parts of your site that really command attention, we can make sure that your visitors convert to customers, subscribers and lovers.

Our code is also highly optimised, accessible and includes use of cutting edge niceties such as microformats. This alone will get you a major boost in search engine results. We also don’t work off any standard templates, everything we do is unique to your project and we’re always on hand to offer the best support money can buy.

One client even mentioned that we should be charging more for our service, so I think that alone is reason enough to not just buy something cookie cutter off SitePoint.

You guys are the only people that I have heard of that do Microformats for WordPress themes. Can you tell me why that is interesting or even a basic bit on what Microformats are?

Microformats are basically a series of predefined standards for marking up specific pieces of information, such as contact information, events and even blog posts. By assigning specific classes to data, we’re able to add a deeper level of semantic richness to it which makes the data more machine readable (without impacting on human readers). They’re essentially bridging the gap between XML and HTML. Microformats are rapidly being adopted by emerging search engines and can even benefit users with disabilities such as visual impairments, so while the benefits right now aren’t that obvious, in a years time you’ll be glad you ordered a microformat rich blog from the449.com.

Wow that was a lot of buzz words, but it sounds like something serious companies and bloggers will want to invest in.

Why WordPress and is that the only blogging software your deal covers?

WordPress is a fantastic platform, our clients love it, we’re able to work very quickly on it and the community is unprecedented. Having said that, we’re established developers and can work with any platform you need, in the past we’ve worked with Textpattern, Expression Engine and Movable Type. I’m really looking forward to Habari reaching a stable release and hoping some clients will request we use it.

What else can you tell me about the 449 that bloggers en masse will be interested in? Can we expect any freebies from the 449?

Well the site only launched last week so it’s been a hectic few days, but we’re in talks with some very high profile bloggers who will be offering their readers discounts and we’ll also be running a few competitions with free blogs as the prize. But with Blogging Pro being such a cutting edge resource, I think it’s fitting that it’s readers be the first to take advantage of our early bird discounts The first 10 people to email the promo code “bloggingpro” to chris[at]cgmmail.com will receive a £50 discount. A 449 for just £399.

Lastly, if we want to find out more about 449, where do we go, and who do we contact?

http://the449.com is the place to go for more information, I recommend you also check out the blog as we’re in the process of preparing some really good content. To get in touch, you can email me at chris[at]cgmmail.com, give me a call on +44(0)1453890326 or use our contact form at http://the449.com/contact/.

Categories: Blog Design, Interview

45 Excellent Blog Designs

Smashing Magazine has put together a list of 45 excellent blog designs from various different publishing platforms like WordPress, Expression Engine, Movable Type and others.

What really caught my eye is that our intrepid designer over at Design Disease made the list.

A big congrats to everyone listed as there are some absolutely amazing blog designs. For me it just goes to show that it doesn’t matter what platform you are using, each and every one can be manipulated to create amazing blogs.

Categories: Blog Design

Content


Receive the top stories from BloggingPro and the Splashpress Media network every week, right in your Inbox. Relevant and timely content is yours for FREE!