Create a WordPress Recent-Posts Widget

Widgets are a cool new feature built into wordpress version 2.2, and allow you to drag mini plugins into your widget-enabled theme’s sidebars.

They have all kinds of uses, searches, polls, you name it.

This article will show you how to create a customisable Recent post widget for yourself.

Using Image replacement techniques

This week Ive been trying out a lot of image replacement techniques in main headings, and their are quite a few available. If you have a graphical header logo on a website, with the sites name, often you wont want to have another heading as plain text. Yet, you should want to have the heading readable by screen-readers, and you also want the SEO benefits of the heading.

Ive rounded up my favorite methods, and this entry will show you how to use them, and when to use them.

Experiments with floats: whats the best method of clearance?

When developing websites there is one thing I have never kept consistent; the method of clearing floats. It seems every project I take, I seem to do it a different way, well Its about time I sorted it all out in my mind.

For those with no clue about what I’m rambling on about, with CSS layouts, when you have a float inside an block-level element, it will collapse in most browsers, since floats have no dimensions. So for instance, if I had a div container with a blue background, and a float inside it, the blue background would not surround the float (and the floats contents), due to the div ignoring the height of the float.

To fix this you need to ‘clear’ the float, so the container recognises the fact the float is there, and adjusts its height accordingly.

There are many methods of doing this, personally in the past Ive used most of them, so in this article I will compare the main ones and rate them in terms of:

• The extra markup
• The Amount of CSS
• Cross Browser compatibility (I’m limited to IE5-7, Opera 9, Firefox)
• Ease to implement

Introduction to Microformats + a look at hCard & hAtom

Recently ‘Microformats’ has been a major buzz word in the web design community, but what are they all about? If you are feeling lost then this article is for you. This article explains what Microformats are, the benefits of using microformats, and how to implement them.

This article focus’ on the microformats hCard, and hAtom; both of which are used on the Blue Anvil site if you hadn’t noticed.

Going elastic with ems, layout techniques

Most sites on the web are coded using pixels for widths, which is acceptable, however these sites make it harder for users with poor eyesight to increase the text size whilst keeping the layout in place and usable.

That is where ems can help. This guide will explain ems, and show you how to convert a layout to utilize ems.

Guide to Semantic Mark-up

Many people make the mistake of using tags for appearance only in their websites, but with semantics you get the benefit of describing your data as well. This makes it more accessible and of a higher quality, and of course fulfills the main objective; separating content from presentation.

This article is aimed at semantic mark-up beginners, including clients who want to learn more about code so they can ensure their sites are semantically correct. It also shows the mark-up available and it’s usage.