BloggingPro » Blog Design

Track & Test To Improve Your Website’s Usability

James Dunaway — Wed, 14 Sep 2011 10:57:15 +0000

Usability is one feature of a website that no designer can afford to overlook. Of course, some obvious rules apply such as underlined and highlighted links so they are easy to find and use. Also, using a sitemap for easy navigation and SEO optimization are other tools that help your website be as useable and visitor friendly as possible. It is true that these rules are not necessary for every website. However, understanding these rules so that you can choose the best ones for your website will help lead to more traffic, more return traffic, greater sales and happier visitors from the market you are trying to attract.

Despite how obvious these rules appear the how and why of these rules are often a mystery. Some rules have become accepted as simple common sense when it comes to good graphic design. Others were found to be practical tools to determine how a user navigates and uses a website. Regardless, over time these tools became standard for any designer wishing to keep their website as useable and visitor friendly as possible.

There are additional tools that can be implemented along with the basics that will not only allow you to measure your websiteâ€™s usability, but may actually increase usability. Once you implement the tools, your visitors will be able to navigate and use your website as it was intended, with no confusion, making a return visit an easy decision when they next need the information or service your website provides.

User Testing As An Obvious Testing Option

Sometimes the most obvious method is the easiest one to overlook. Putting your website in front of individuals and getting feedback on how easy it is to use, find pertinent information and interact, is probably the most obvious way to get accurate, user-based feedback on your website design. Although user testing is most likely the best way to test your website, it is not feasible for everyone due to what can amount to significant time and money investments incurred by hiring individual testers. However, there are companies that provide this service. UserTesting will set up testing and allow you to view the user’s results using QuickTime for a small cost of $29. Silverback is another well-known testing tool that gives a 30-day free trial for Mac testing. After the trial period, the testing costs $49.95.

Using Heat Maps

A Heat Map is an overlay that records how long a visitor stays at any given point on your website, how the website is viewed and how users scroll through the website. In a nutshell, it provides pertinent information on how people view your website. It shows what they are clicking, what parts they are viewing and how long they dwell on any one given element. ClickTale is one heat map tool that is commonly considered to be a top choice for this. It provides eye tracking, click tracking and has an attractive overlay all in one package. Other heat map options include ClickHeat, SimpleMouseTracking and UserFly.

Using Google Website Optimizer

Used as a part of Google AdWords or all on itâ€™s own, Google Website Optimizer will take you through a testing procedure that tells you whether basic testing is sufficient, or if your website needs a more involved, multivariate testing. Provided free by Google, it determines the best type of testing for your website. You must have your website already designed for this tool to work, and it is necessary also to keep the website simple so that it does not get lost trying to follow too much information at one time. While Google does not suggest changes, it is very helpful in helping to design great landing pages and showing you the best way to optimize your website information.

Using Google Analytics/Click Tracker

Another handy tool from Google, Click Tracker shows what part of your website users are clicking and how often they click. It effectively supercharges Google as a part of JavaScript, allowing you to receive more information from Google than normally would normally be available. It records every click whether it is an image, link, div, form element or span once it is embedded in the event handler. It is great at showing which links visitors like the most and points out possible confusing elements.

Brian Flores is a blogger for InMotion Hosting, a leading webhosting provider in the United States.

Blogging Pitfalls: It’s Time to Kill the Popup (Again)

Jonathan Bailey — Wed, 03 Aug 2011 19:57:14 +0000

Popups: A single word that drives both fear and anger into the hearts of nearly all web surfers.

The Web is filled with stories about embarrassing popups loading in the background, annoying, never ending popup loops and, more recently, overlays and other annoying tools that obstruct and restrict access to the desired content.

Popups are annoying but they are also extremely common and, despite technology to block most of them, they are becoming much more common. However, the time has come for bloggers to put a stop to this, to fight back against popups and other visitor annoyances.

The History of the Popup War

The war over popups has been a long and interesting one not too long after scripting on the Web became advanced enough to make them possible.

In the early days of the Internet, popups were incredibly common, many sites opened new windows immediately after a visitor landed on them and they quickly took off as a popular way to deliver advertising to viewers.

Many advertisers, in fact, paid a premium to have their ads featured in a popup because they knew A) They would be definitely seen and B) Sites that used popups risked angering their users.

This spawned a two-prong war against popups. One one side, software developers wrote applications that blocked popups, usually running the background like virus protection. These applications, in turn, had to be updated as websites developed new popup techniques. On the other side, sites without popups began to advertise and promote themselves as “popup free”, this giving visitors a reason to choose them over their competitors.

However, slowly but surely, all of the major browsers began to build in anti-popup technology and, more importantly, turn it on by default. The result was that fewer and fewer visitors were seeing most popups and that reduced both its effectiveness and its frequency.

Unfortunately though, that wasn’t the end for the popup. Instead, it just took on a new form and came back, possibly stronger than ever.

Enter the Modern Popup

With nearly all browsers automatically blocking popup windows, the popup had to get smarter to survive, and it did.

One way was, instead of having the popup load automatically, was to have it load when the visitor clicks a link. These popups are difficult to block because, as far as your browser is concerned, you wanted the popup and requested it. Browsers can’t distinguish between links you click wanting a popup and those you don’t, at least not without breaking many popular sites.

The other way, however, has been to change the definition of a popup. Where, traditionally, a popup has been a new browser window that opened either in front of or behind the existing window, popups now are scripts or pieces of Flash that load within the existing window but on top of the content.

These have become incredibly common, hawking everything from newsletter subscriptions, surveys, ads for new services, and offers to chat. They’ve become incredibly common, including on many mainstream media sites, and are growing in popularity as more and more services and toolkits come online to offer these kinds of popups.

These types of popups are difficult to block, at least without blocking all ads and/or scripts, and are every bit as annoying to visitors as traditional popups. Yet, the’re growing in popularity every day. This is something that has to stop.

Not only will a continuation of this kind of behavior likely result in new tools to block them, tools that may result in the blocking of other, less intrusive, ads, but it risks drawing the wrath of readers in much more dire ways.

The result, inevitably, will be legitimate sites and services caught in the crossfire and a Web that is just a little bit more restrictive.

Killing the Popup

The truth is that popups are a highly effective way to market to readers. They’ve been shown to increase responses drastically. However, they do so at the cost of annoying visitors. Though some will join your newsletter or get your coupon code, others will go away immediately and never come back.

The simple solution is to just not use them. If you don’t like popups, don’t put them on your site. It’s that easy. However, the problem is a bit deeper than that. The taint of a popup doesn’t just affect the site it’s on, but can even hurt the site that sent them there too, especially if they regularly post such links.

This is why I have a policy on my sites and articles of not knowingly linking to sites with popups. Though some slip through, don’t popup every time or change their policies at a later date, I never link to a site that gives me any kind of content-obstructing popup.

That, in turn, is part of the reason why finding links for this article has been so difficult.

To be clear, there is some room for discussion and debate. For example, many sites use various bars such as the Meebo Bar or the Apture Bar (I use Apture on my main site). While these bars do annoy some visitors, they also don’t require any action to view the content and, generally, are out of the way.

For right now, it seems reasonable to focus these efforts on sites that use popups that require action to view the content. They are the most egregious and the ones earning the most wrath.

On that front if bloggers work to not give links to sites with popups, thus depriving them of SEO benefits as well as traffic, then the negatives may start to outweigh the positives and more site owners will take the issue a bit more seriously.

Until then, popups are only going to grow and we may find ourselves in the middle of another war against them. This time, however, there will almost certainly be innocent bystanders hurt.

Bottom Line
In the end, the issue is simple. As bloggers and webmasters, our sites are supposed to be about our visitors and giving them what they came for. Through we may blog for more selfish reasons, those goals are usually met by being as selfless as practical with the site.

Give readers what they want and they will return, link to you and generally help you. Get in their way and any help will be begrudging.

This goes for you, the sites you link to and the partners you make. Keep your house clean and don’t do business with those who use popups and your visitors, most likely, will be very grateful indeed.

Get backlinks to your Blog!

If you are looking to promote your blog and get high quality backlinks from a PR6 2003 domain then Blogsearchengine.com is for you. For as little as $14.99 you can submit your blog and have a review written and published there with a backlink to your website or blog, we accept all niche!

Blogging Pitfalls: What You Need in Your Site’s Footer

Jonathan Bailey — Wed, 06 Jul 2011 17:30:20 +0000

When it comes to blog design, most put the lion’s share of their effort on the area that “above the fold” or what appears on the screen before the user has done any scrolling.

This makes a lot of sense because this is the first thing that visitors see and, as we have discussed before, you can’t ignore blog design as these first impressions can literally make or break your blog.

But what about the content at the other end of your blog? While it might not be the first thing that people read or even something your casual visitor will observe at all, it still has a series of critical functions for your site and ignoring it outright simply is not an option.

Most importantly though, it is the first place at least some of your visitors will look for key information and, if they do, you need to make sure you have what they’re looking for there. Otherwise, there could be legal or other related issues to not having your information available.

In short, you can’t afford to ignore your site’s footer. It’s an important part of your site and one you need to craft carefully both to maximize its usefulness and to avoid any unnecessary trouble.

The Pitfall

The bottom of a page, whether in print or online, has become synonymous with “the fine print” meaning the legalese and other important data that, while necessary, likely isn’t what you readers want to see nor what you want to put the focus on.

But much like the fine print in a contract or an advertisement, though most people don’t even notice it, some do and, even for those who never see it, there are important implications of it for both the person using the fine print and the person subjected to it.

Also like fine print is the fact that the site’s footer, at least the important information, is primarily there to protect the person who created it. In this case, that means you as the blogger.

So, if you ignore your footer, you are putting yourself at risk needlessly and the problems can range from increased instances of copyright infringement of your work all the way to a possible FTC investigation. You also risk upsetting your visitors by forgoing policies they expect and you may even find yourself in violation of copyright by failing to attribute some of your sources.

In short, your footer is something of a legal shield that can head off many of the Web’s nastiest legal problems before they arise but almost none of your stock footers offer all of the content that is necessary, leaving sites that ignore footers open to problems that could have been avoided easily.

Fortunately, fixing footer issues only takes a few minutes to an hour or so, making it time and energy well spent.

How to Avoid it

One of the problems with website footers is that no two sites have the same set of needs. Though some footer content is practically universal, other elements might not apply to all sites. As such, it’s important to be aware of your site’s situation and decide what is and is not necessary for you.

That being said, here are some of the more common elements that may need to be in your footer as well as some hints on how to easily add them.

Copyright Information: This one is practically universal. Though you don’t need to have a copyright notice for your work to be protected under the law, including one is a good idea as many people have misconceptions about the law and it sends a strong message about misusing your content. Also, if you are licensing your work in any regard, you should include the license information in the footer, even if it is elsewhere on your site, as this is the first place many people will look for it.
Disclosure Policy: Blog disclosures became a hot topic recently after the FTC announced new policies for bloggers when endorsing products, however, even without a legal threat they are good to have in many cases. Best of all, you can actually generate a disclosure policy easily, making the process of creating one quick and painless.
Privacy Policy: If you collect any information from your visitors, even for their comments, a privacy policy is a must. Once again, it is very easy to generate a privacy policy for your site and include it.
Attribution: Did you get any help with your logo, graphics, template or other elements of your site? Many artists will let you use their work freely provided you attribute their contributions and the footer is the best place to do so in those cases. It keeps the attribution out of the way but available on every page and easily located by anyone looking for it.
Contact Information: Finally, if someone needs to get ahold of you, how can they do so. Though you probably ahve a contact page elsewhere on your site, you have to realize that people who are looking for any kind of legal information are going to jump to your footer. As such nice to have that information there as well as in your navigation if at all possible.

All of this being said, it doesn’t meant that your footer has to be all fine print and legalese. Many of your visitors who view your footer will arrive there after reading all of the content on a particular page and will be looking for what to do next.

This makes the footer a great place to also repeat your social networking information or suggest some other pages for them to visit. There’s actually a lot of great things you can do for your visitors beyond covering your legal bases.

So, while you have to ensure that you do what’s required of you with your footer, don’t pass up the chance to make it useful in other ways as well, your visitors will definitely thank you.

Bottom Line

There’s little doubt that the footer is the most neglected design element of most blogs. Where the header file is often honed to be pixel-perfect and users will debate endlessly which side of the blog the sidebar should be on (or if one is even necessary), few pay any attention to the footer and many just leave it as stock.

That’s a terrible shame though and one that not only puts a site in danger of legal troubles but can also misses a lot of great opportunities to do amazing things with your footer.

But even if you don’t make your footer an artistic statement, you still need to pay attention to it and make sure that it does its job. Otherwise, it’s likely both you and your visitors will suffer due to the lack of important and necessary information.

15 Awesome WordPress Home Pages

Franky Branckaute — Wed, 06 Jul 2011 10:20:43 +0000

WordPress, which was just released in version 3.2, has always been at the forefront of creative design and we continue to see many great WordPress designs. Too often WordPress designs are immediately recognizable because of the linear, blog home page. For this entry we looked for greatly designed home pages of sites using WordPress.

OctavoDesign

The very bright and colorful homepage of octavo designs is all about scrolling. Not only does the main image scroll down when hovering over it, the whole home page does scroll horizontally.
If you don’t believe this site is made with WordPress, check the source code.

ArtDog

The website of ArtDog Gallery clearly showcases work from artist exhibited on the home page and dynamically resizes with the window. A JQuery plugin is used for the image grid.

Justine Ungaro

The home page of photographer Justine Ungaro‘s home page has only one aim and that is to make the visitor marvel at Justine’s awesome photography. Header and footer are kept simple and don’t get in the way of the pictures.

The site navigation is integrated stylishly and expands upon click on the arrow at the top right of the pictures.

About The iPad

About the iPad benefits a design optimized for mobile devices and the number of columns dynamically switches depending on the screen width of your browser or mobile device.
Except for a minor issue with the footer, the site also displays very well on the mobile Webkit browser in Android.

IDi Journal

The home page of the Catalan Idi uses a great and colorful homepage to indicate the next events in the Catalan community.

Pollier

French construction company Pollier who specialize in constructing with wood, manage to give the website visitor immediately a warm feeling, exudes touches of wood, on their home page.

Ten18 Photography

American photographers Ten18, who met via eHarmony, make sure that the user immediately knows what they do and how to follow them. The home page gives a brief glimpse into their portfolio, with an nicely expanding animation, and list their Facebook and Twitter profiles very prominently.

Imagineria Creativa

Texan Design studio Imagineria Creative has an creative, original way to greet the visitors of their website. At first the background text ‘Hello’ might not be clear but it is a great way to great everyone, all while staying focused on what they do: design creatively.

Card Observer

Business Cards gallery Card Observer displays the most recent entries on their home page, all while smartly including two rows of ads. While we are no big fan of the disturbingly animated ad thumbs, we like the integrating of the Moo.com ad.

Transformology

Besides smooth colors Ken Mann’s Transformology has a great flow and the flow of the home page is at the same time an awesome navigation through the site. The home page is rather long but consists of elemental blocks to the site and deserves to be totally analyzed.

Eggleston | Farkas Architects

The Eggleston|Farkas Architects home page is an exercise in simplicity and grid design as well as showcasing awesome work while still offering a great navigation to the user.

Lombard Chambers

UK based barristers’ chambers Lombard Chambers welcome the website visitor with a simple home page, including every section of their work on the home page. The home page is kept short and excerpts of the latest news entries can be seen upon click.

The Best Colleges

The Best Colleges has a rather simple home page setup, reminiscent of the regular blog setup of used by most WordPress sites but we like the welcoming animation on the web site’s home page.
The Best Colleges also has a extensive best college rankings.

King Scooty

Another WordPress design with animation on the home page is KingScooty the home of graphic designer Scotty Vernon.

Komodo Media

Komodo Media‘s contrast rich design is a classic we couldn’t leave out. Check out the awesome foliage density slider and how the last.fm album thumbnails are integrated to the design.

Bonus Sites

The following sites are part of our network, but we are proud of the work done by our BusinessLogs lead designer, Sophia Lucero.

Infographiclabs

BusinessLogs

Blogging Pitfalls: Why You Need to Know HTML & CSS

Jonathan Bailey — Wed, 08 Dec 2010 18:48:35 +0000

It wasn’t that long ago that starting up a website required a great deal of expertise, time and commitment. There was a reason that those who created sites in the early days of the Web were stereotyped as “dorks” and “nerds”, it was because you had to know HTML, the ins and outs of site construction and at least a decent amount about how the Web worked just to get a basic site off the ground.

However, for Web development, the march of technology has been toward simplicity and ease of use. Blogging and Web publishing in general are both more approachable than ever. Not only can one set up a Facebook account in minutes but they can do the same with a WordPress.com account or a Tumblr blog as well.

In short, anyone who wants to publish a blog can easily do so and almost no experience is required, just the ability to fill in a short form and write some new content.

But this doesn’t mean we’ve gotten away from HTML and CSS being a requirement for creating a successful site. Not knowing these languages can be very detrimental to your site and not only keeps great content from finding the audience it deserves, but can actually cripple your site in ways you can’t predict.

Simply put, if you don’t know HTML and CSS, at least to a minimal extent, you are holding your blog back and gambling with its future.

The Pitfall

To be clear, advancements in blogging platforms have greatly reduced the importance of HTML and CSS knowledge in running a site. Not only is it possible to set up a site without looking at any code, but widgets, customizable themes and plugins now make it possible to do a lot of the more common coding tasks without cracking open the theme files.

But while this is great, there are also problems with it.

The first is that, when you can’t edit your theme by hand, you are limited to what is provided with it. You can only make the changes and additions that are built in. Even though some themes can be very flexible, it also means that your site will wind up looking like the other sites that use the same theme and there isn’t much that you can do about it.

Second, there are some things you simply can’t add via a plugin or widget, such as many external services, tools and other changes that require you to add the HTML code by hand. Though the process is trivial, if you’re intimidated by HTML it can be a trying experience.

Finally, and this is possibly the most important, is that things break. If your theme begins to have trouble, images start to break or a service you were using stops functioning properly, you need the ability to leap in and fix the theme. Otherwise, your site might appear to be broken or, even worse, generate nothing but an error.

Though these types of incidents are very rare, if it happens to you and you can’t fix it, you’re at the mercy of those who help you and that can greatly slow down the time it takes to get back online.

In short, if you don’t know HTML and CSS, at least some, you’re both limiting what you can do with your site and putting yourself at risk of not being able to respond effectively if something should go wrong.

These are risks you don’t have to take and shouldn’t if you can avoid it.

How to Avoid It

The simple answer on how to avoid this pitfall is “Learn HTML and CSS”. But the answer isn’t that easy.

There is no real reason to aim to become an expert on HTML and CSS, unless you plan on developing your own themes from scratch or do more heavy manipulation. It is more important that one understand the basics of both the languages, including possibly some JavaScript and PHP, than they be able to answer everything off the top of their head.

So, before one considers going back to school, here are a few quick ways to get just the HTML knowledge you need without spending a lot of time or money.

Online Tutorials: W3Schools has a great basic HTML tutorial for the complete notice that familiarizes you with the basics of HTML structure and tags. Has a similar one for CSS. There are many other great tutorials out there but these are great for learning as you can work “live” and learn by experimentation.
Get a Book: As powerful as online tutorials are, you might also want to spend a few bucks and get a decent HTML/CSS book. Not only is it a great reference, but many learn better from a book and it lets you look at your work and the guide without changing tabs.
Set Up a Test Site: Finally, consider setting up a test site with a duplicate theme at a different URL (perhaps test.yourdomain.com) so that you can dabble with your HTML code without destroying your main site. This is a great way to get practical practice and understanding of your theme without any risk.

All in all, to get the amount of knowledge you need to move forward with your site, you only need to spend a few hours of time. However, it is time well spent as it can help you take your blog to new heights and fix problems as they arise.

Bottom Line

In short, there’s nothing magical about learning HTML and CSS. If you know how to use a word processor or other office applications, there really isn’t significantly farther as much of the results are similar (bold, headings, tables, etc.), you’re just learning how to indicate it in a new way.

Considering the doors that HTML and CSS can open up for your site and the headache it can save later, it’s a worthwhile investment.

Even if you never actually use it in your theme, you’ll be able to not rely so much on the visual editor of your blog and that will let you ensure that posts are formatted exactly right and give you complete control over how your entries look.

In the long run, that may actually be the biggest benefit of all in getting a primer on HTML.

154 Free Monochrome Developer Icons

Franky Branckaute — Wed, 24 Nov 2010 14:20:19 +0000

WPZoom released a free set of icons for designers and developers. The icons are designed by David Ferreira and available in .PNG, .AI and .PSD format. The icon set features most common icons, also social media buttons, and is rather complete for most uses. A preview of the set posted below.

The set can be downloaded for free at WPZoom.

5 Free Social Media Icon Sets for Back to School

Susan Gunelius — Thu, 02 Sep 2010 10:08:03 +0000

It’s been about a month since I posted free social media icon sources (last time I offered some fun niche blog social media icon options), and with a new school year starting, I though it might be a good time to search for some creative social media icon sets that can give your blog some back to school flair.Â Check out the options below!

1. Puzzle Social Network Icon Set

What grade school student doesn’t love puzzles?

2. Sewn Badge Icon Set

This set reminds me of badges on Cub Scouts uniforms!

3. Moleskin Icon Set

For the discerning student, only a moleskin notebook will do.Â Are moleskin icons right for your blog?

4. Color-stroked Free Hand Icon Set

This is one of my favorite hand-drawn icon sets.Â I wish my doodles looked this good, and I love the crumpled paper.

5. Hand Drawn Social Media Icon Set

Here is another option if you like the hand drawn style.Â This one offers consistent square shapes with simpler designs drawn on grid paper.

What do you think?Â Will any of these social media icon sets give your blog the bling it needs?

Follow the link to read more about back to school and blogging basics on Performancing.

Magic 8 Ball and More Cool Blog Widgets

Susan Gunelius — Thu, 26 Aug 2010 10:08:06 +0000

Who doesn’t love the classic Magic 8-Ball toy?Â Did you know you can add one to your blog?

It’s true!Â There are tons of free widgets that you can add to your blog to make it fun, interactive, and even more useful.Â Listed below are several sites where you can find free widgets that you can install on your blog right now.

Some widgets will display on your blog with ad content, but some widget directory sites offer an option to pay for a pro account and remove the ads from the widgets.

Keep in mind, not all widgets are created equal.Â Read the reviews, check the star-ratings, and be prepared to delete the widget if you don’t like it or it doesn’t function properly once you install it on your blog.

Most importantly, make sure the widgets you choose to use on your blog match your blog’s topic, tone and your audience’s expectations.Â For example, if you write a blog about finance and investing, the Magic 8-Ball widget (like the one shown in the image at the beginning of this post) might not be appropriate, unless your audience knows you for having a sarcastic tone or sense of humor.

Check out these sites and browse around the widgets available.Â From countdown clocks to Etch-a-Sketches, there is a widget for everyone!

1. Widgetbox

Widgetbox offers a huge selection of widgets and several different types of accounts with varying price tags and features.Â The basic account is free, and a free 7-day trial offer is available for the pro account.Â You can follow the link to see current Widgetbox fees.

2. SpringWidgets

SpringWidgets is owned by Fox Interactive Media and offers a directory that includes tens of thousands of free widgets that you can add to your blog by simply copying and pasting specific share code.

3. Widgipedia

Widgipedia is owned by Vendio Services, Inc. and aims to be the ultimate widgets resource.Â Widgipedia is free and you don’t need an account unless you plan to create and upload new widgets to the directory.

What do you think?Â Are you going to spice up your blog with a widget?Â Can you resist the mysterious allure of the Magic 8-Ball?

5 Free Social Media Icon Sources for Niche Blogs

Susan Gunelius — Thu, 05 Aug 2010 10:01:13 +0000

Do you write a niche blog about food, spirits, Asia, clothes or science?Â If so, you’ll be interested in the social media icons highlighted in this post.Â Even if you don’t write a blog about one of those niche topics, you might like the social media icons featured below.Â They could add some color, visual appeal, and interest to any blog!

Check them out and see if the right social media icons to give your blog some zing are included in the list!

DelliFeed Icon Set

These food-related social media icons are available in six sizes and include cakes and popsicles!

Cheers Web 2.0 in a Glass Set

This set of social media icons includes martini glasses, wine glasses, margarita glasses, beer mugs, and more!

Panda Social Network Icons

This social media icon set includes 21 icons in 128×128 size, and all use the same cute Panda bear!

T-shirt Social Icons

This set of social media icons would be perfect for a fun fashion blog!

Science Social Media Icon Set

Surely there are far more blogs than just science-related blogs that could use the clever bottle designs in this social media icon set!

What do you think of these social media icon sets?Â Do you use fun, interesting, or niche icons on your blog or do you stick with simple square, circle, or rectangle icons?Â Leave a comment and share your preferences.

How To Easily Edit Your WordPress Theme Design With The Firebug Firefox Addon

Robyn-Dale Samuda — Mon, 02 Aug 2010 17:24:54 +0000

As bloggers, we aim to provide unique user experiences for all our visitors online through the use of the best blog designs and templates we can find. Although there are thousands of free and premium themes available, there comes a time when we want something specifically suited to our taste as well as our readers’ without hiring a developer.

The ability to customize your own blog theme is an invaluable skill and will save you lots of time and money in the long-run; and through the use of a tool like the Firebug Firefox Add-on, making simple and advanced customizations are easier than ever. Firebug is a tool I use extensively as a developer to help me understand a site’s layout and quickly implement design changes through CSS. So here are some tips and ideas to get you started on customizing your own WordPress themes.

Firebug’s Features

Firebug provides the most common features for almost every customization you can think of. While you browse you can edit, debug and monitor your CSS code and tweak styles to see what they would look like before you implement. Firebug basically allows you to:

Tweak and position HTML elements with CSS and the Layout panels.
Find specific elements on a webpage with ease and precision.
Monitor the performance of each file to identify slow loaders
Visualize CSS Metrics
Plus a host of additional features

To download this neat tool and find more details regarding its powerful features, visit Getfirebug.com.

Identifying & Editing CSS Properties & Values

For WordPress blog theme users with Firebug installed, customization is a breeze regardless of who designed the template and how. Once Firebug is installed a small icon will be available in your web browser that gives you access to it’s panel as shown below.

In the image above, the left panel shows the HTML that controls the site’s layout and on the right we have its CSS. Usually WordPress themes’ CSS are editable through the style.css file which is found in your theme’s directory.

Common Challenge Overcome

Trying to figure out what each selector and property represents can be an impossible task especially if the developer of the theme does not provide comments and descriptions within the code. To overcome this, Firebug allows you to select page elements, using its element inspector, to find out its HTML code as well as the CSS selectors and properties that control the elements.

Once you have found the selectors you want to edit, simply access your style.css file through the WordPress dashboard Appearance >> Editor option and use your browser’s search feature to find the code.

Learning to edit and tweak your CSS within the theme’s stylesheet file is the first step to creating a unique theme for your blog even if its from a free design.

Additional Resource

To gain more insight into the power of CSS and learn all the possibilities that exist in design, check out the CSS section of the WordPress.org codex – They have many references to W3Schools, which is where I learned most of my CSS. W3Schools provides all the information you will need to learn CSS from the basics to advanced.

Conclusion

Not all of us as bloggers are interested in becoming developers but think of CSS as a tool to control the layout, colors and feel of your blog’s theme as you would think of customizing a Microsoft Word document. It can be a very fulfilling feeling to know that you can make your blog stand out by simply implementing some very basic code. So CSS is definitely worth learning a bit.

Firebug is the simplest tool I have found so far for gaining control and understanding a WordPress blog theme design and is very useful for getting started as a new blogger and editing your theme.

Are there any other tools you have tried that offer comparable features and capabilities thatÂ have helped you to master your blog’s design? Please share them with us in the comments below, we would love to hear of your experiences.

How To Create A Cool “Bubble Up” Effect For Your Blog’s Icons Using CSS

Robyn-Dale Samuda — Mon, 05 Jul 2010 15:00:45 +0000

A few years ago, the bubble effect that I’m about to show you to create could only be executed using flash animation but thanks to some CSS innovation, the limitations and boundaries to simple yet elegant design are crumbling. For any blogger or website owner, its very important to learn a little HTML and CSS; you will find that you have more control over your blog’s design and will be able to implement simple changes that can make your blog’s design stand out.

Here is a short and simple tutorial to give your buttons a nice bubble up effect that is sure to catch your readers’ attention, using the image swap method in CSS.

Step 1

Access the page that you would like your icons to show and insert the code below:

The code above uses 2 images for each button link and will be arranged in a horizontal list format. In the next steps you will see that the code allows the buttons being hovered to seem to be above the others.

Also, ensure that the links in the code above are replaced by your own social profile links and you need to upload your icons to the relevant directories. You can find lots of free icons at Iconfinder.net.

Step 2

Add the CSS code below to your style.css file.

#bubble {
list-style: none;
margin: 20px 0px 0px;
padding: 0px;
}

#bubble li {
display: inline-block;
margin: 0px 5px;
padding: 0px;
width: 70px;
height: 70px;
}

In the above code we had to specify the height and width of the

elements because we do not want the list to be moving and changing sizes when the cursor hovers. 70 px is the size of the small images before hovering so we don’t want these too big.

Step 3

Still in the style.css file, add the following code for the links.

#bubble li a img {
 position: relative;
 border: none;
}

#bubble li a img.large {
 display: none;
}

#bubble li a:hover img.small {
 display: none;
 z-index: 0;
}

#bubble li a:hover img.large {

 display: block;
 margin-top: -30px;
 margin-left: -30px;
 z-index: 1000;
}

Note: In the above it is very important to set the position to relative.

Step 4

Finally, for Internet Explorer and its limitations, we will add some extra code to deal with conflicts along with your HTML code.

That’s it! You should now have that cool bubble up effect for your share buttons on your blog. Remember, the HTML code can be placed anywhere on your blog, so be specific with the files you choose to edit.

Discussion

If you have any difficulties implementing the code please feel free to ask questions in the comments below and we will be happy to help.

I Love that WordPress Plugin – WP Maintenance Mode

Susan Gunelius — Thu, 01 Jul 2010 09:30:50 +0000

It doesn’t take much to make me happy.Â Sometimes a little WordPress plugin comes along that makes me smile, and WP Maintenance Mode is one of them.

Let me start by saying — I’m not a web developer.Â I’m not a blog designer.Â I know just enough CSS and HTML to be dangerous, and I have no problem keeping it that way.Â Would it be super handy to know CSS and HTML?Â Absolutely, but it’s one of those things that always gets pushed down in my list of priorities.

So now that I’ve revealed that little snippet from my life, back to the WP Maintenance Mode plugin.

Why do I like this plugin so much?Â

Because I’m not a code-guru and I don’t have test sites set up where I can test new things, slowly redesign my blogs, and be a cool designer.Â The design changes I make myself are typically fairly minimal because I don’t have time to spend tweaking, testing, and so on.Â That means my blog could be down for a few hours or overnight while I do the redesign or work through any kinks in the process.Â However, I certainly don’t want people to visit my blog during that time and find a complete mess when they get there!Â I’d rather they see some kind of “under construction” page for that short amount of time.

That’s where the WP Maintenance Mode plugin comes into the picture!Â This free plugin allows you to choose from several pre-designed pages to be your WordPress blog’s temporary landing page while you’re doing any edits that you want to hide from the world.Â Visitors who come to your blog when the plugin is activated land on your chosen “under construction” page, which you can customize with your own messages and in multiple languages.

The coolest part is that when the plugin is activated and you’re logged into your WordPress account, you can see all of the pages of your blog as you update them while visitors only see that under construction landing page.

Like I said, I love WordPress plugins that offer simple yet very useful functionality, and WP Maintenance Mode does exactly that.Â Plus, it’s incredibly easy to set up your customized landing page.Â Check out a few options below:

Oh — and WP Maintenance Mode has been tested and is compatible with WordPress 3.0!Â What do you think?

20 Easy Ways to Ruin Your Blog

Susan Gunelius — Thu, 13 May 2010 09:30:40 +0000

If you want your blog to be successful, then you need to start thinking immediately about how your blog is designed and configured.Â In other words, the way your blog is set up could ruin your chances of building a successful blog.

With that in mind, following are 10 of the easiest and most common ways that people ruin their blogs.Â Avoid them!

Too many ads
Blinding colors or colors that are too light to read
Pop-up ads – make them go away!
Keyword stuffing – you’re not fooling anyone with that list of keywords stuffed into the sidebar or footer.
Clutter – where’s the real content?
Content scraping – be original, don’t just copy content from other blogs and sites.
Text overload – long blocks of text are hard to read.
Poor formatting – floating sidebars, images that don’t load, and so on
Too many links – links are important but don’t go crazy with them or no one will know what to click on!
Publishing offensive content or comments – consider your target audience and make sure your content matches their wants, needs and expectations.
Content overload on the home page – many themes and templates allow bloggers to include a lot of different content, widgets, boxes, etc. on the home page, but doing so can backfire, because it can be hard to find the most interesting content within the flood.
Too much scrolling – No one wants to read a novel on a blog.Â Keep your content and pages to a reasonable length.
Dishonesty – don’t get caught in a lie — it’s that easy.
Hard to read fonts – you might like that fancy font, but if it’s hard to read on screen, visitors will click away.
Missing contact information – some anonymous bloggers find success, but in order to establish your authority or at the very least, make it seem like your blog is written by a credible person, you should include a bio and a way for readers to contact you.
Splash pages – they’re pretty, but they’re annoying.
Sound – turn it off, please!
Registration requirement – an easy way to get people to click away from your blog is to require them to provide an email address to read any part of it.
Too much flash or animation – no one wants to wait for your cute flash animation to load, they want to get to the real content quickly.
Too many ads – did I say that already?Â Can I say it 10 more times?Â Most bloggers want to make a bit of money (at least) from their efforts, but don’t take it to the extreme.

Time to add your own to the list!Â Leave a comment and share the easiest way (or ways) you can think of to ruin a blog.

Image: Flickr

Awesome WordPress Customizations That Don’t Require Plugins

Robyn-Dale Samuda — Fri, 07 May 2010 16:35:18 +0000

WordPress, being the most popular blogging / content management platform in existence, has a huge community of developers and designers worldwide who are constantly brainstorming new and improved ways of making this legendary system more extensible through the use of plugins. Thanks to these plugins (9,486 Plugins according to WordPress.org), the average user can add style and functionality to their blog or website
as easy as the click of a couple of buttons. No coding required.

However, adding tons of plugins can significantly slow the loading time and overall performance of your blog. Therefore, its really important to use those that are absolutely necessary and delete the ones you’re not using. So, for those of you who may want to go the extra mile to guarantee 100% loading efficiency and dabble in a little code, here are some unique customizations that can replace some plugins that you may have installed.

1. Add Author Bio Box Below Posts

Depending on your style and preference, having an author bio section below your posts can provide useful information about yourself and any other authors who may write for your blog. The code below will show you how to add this box for each of your posts.

Inside your WordPress dashboard, select Appearance, then Editor and select your single.php file to edit. Paste the following code below the_content code section. Ensure that the code is placed after the “?>” php tag.


		
		Article by 
		 
   has written  awesome articles for us.

You will then need to edit your style.css file by adding the code below to give your author bio box some style.

/* Author's Bio Box */
.postauthor { background: #F5F5F5; border-top: 1px solid #e1e1e0; border-bottom: 1px solid #e1e1e0; overflow: hidden; padding: 1.5em; }
.postauthor img { border: 5px solid #e2dede; float: left; margin-right: 1.5em; }
.postauthor h4 { color: #666; font-size: 2em; margin-bottom: 5px; }
.postauthor p { color: #515151; font-size: 13px; margin-bottom: 12px; }

That’s it. There really is no limit to how you can style your bio box. So have some fun.

2. Highlight Author’s Comments

You may want to differentiate your comments from others who comment on your blog. This is especially useful if you maintain a blog where you give advice and follow-up through replying to comments. This way your replys can be easily found. To do this copy the code below to your Style.css file. (Simply change the HEX color code to a color of your choice.)

.bypostauthor {
background-color: #7BB7E4 !important;
}

3. Add Tweet Meme Button Without a Plugin

Within your Single.php file enter the code below to add the twitter retweet button to your posts.

4. Use a Custom Page for your Home Page

We may not always want our WordPress sites to be all about blogging so the ability to create custom pages for your blog will give you the flexibility of adding any type of content in whichever format you choose. This is very useful if you would like to create flashy introductory or sales pages before visitors get lost in your blog.

i) First you will need to create a duplicate of your Page.php file within your theme’s directory and give it a name of your choice.

ii) Add the code below to the top of your new page, replacing “New Page Template” with a name of your choice.

iii) Create a new page and select the new page you created in the template selection drop down menu as shown below in figure 1.

iv) Once you have published your new page go to Settings then Reading in your dashboard and select your front page display as your new homepage in the drop down menu as shown in figure 2 above.

There you go! There are many customizations that can be done without the use of additional plugins that require more system resources. It’s really worth it to learn the basics in PHP coding as well as a little CSS which will allow you to have full control over your WordPress theme’s look and functionality

How many plugins are you currently using for your WordPress site? Have any useful tips that you would like to share? Please let us know.

What’s the Right Blog Template Width?

Regnard Raquedan — Sat, 09 Jan 2010 09:01:50 +0000

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.

3 Ways to Make Your Blog More Usable

Regnard Raquedan — Tue, 06 Oct 2009 08:13:34 +0000

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:

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.
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.
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.

A review of PSD2HTML

Mark — Tue, 23 Jun 2009 04:23:17 +0000

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.

Speed Up Your WordPress Theme

David Peralty — Wed, 28 Jan 2009 22:27:48 +0000

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.

CSS Sticky Footer – Design Helper

David Peralty — Tue, 27 Jan 2009 15:46:32 +0000

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.

10 Design Tips from Tech Soapbox

J. Angelo Racoma — Sat, 09 Aug 2008 02:08:40 +0000

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.

Short tip: WordPress Image Captions

jim — Tue, 29 Jul 2008 09:20:41 +0000

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

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???

Google Now Indexes Flash. Should Bloggers Rejoice?

J. Angelo Racoma — Wed, 16 Jul 2008 10:21:29 +0000

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!

Cross Browser Compatibility On The First Try

jeff — Sat, 28 Jun 2008 22:03:08 +0000

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:

Always use strict doctype and standards-compliant HTML/CSS
Always use a reset at the start of your css
Use -moz-opacity:0.99 on text elements to clean up rendering in Firefox, and
text-shadow: #000 0 0 0 in Safari
Never resize images in the CSS or HTML
Check font rendering in every browser. Don’t use Lucida
Size text as a % in the body, and as em’s throughout
All layout divs that are floated should include display:inline and
overflow:hidden
Containers should have overflow:auto and trigger hasLayout via a width or
height
Don’t use any fancy CSS3 selectors
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.

How Much Would You Pay for Blog Design?

J. Angelo Racoma — Sun, 25 May 2008 16:31:50 +0000

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.

Comment Design Inspiration

David Peralty — Mon, 07 Apr 2008 17:51:21 +0000

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.