We’ve been working with Tim and Wandy, the owners of Planula Bed and Breakfast/Divers Retreat, for over three years now on their site underwater.com.au and for almost the same amount of time have been saying that we need to update the Planula site.

Well of course we’re happy to say it’s now done and was released a few days ago.

Having successfully maintained their own website for years, Tim and Wandy were, and still are, understandably hesitant about moving from a static HTML site they knew, to a new database-driven solution. I’d like to run through a few of the reasons we encouraged (bullied?) them into using WordPress.

I’ve mentioned some general reasons to use a solution like WordPress in a previous post. Here are a few more specific ones which, while referring to Planula, are equally relevant to many sites.

Speed and relative simplicity of publishing.

They were already doing a lot of copying and pasting to add new content which works fine for consistent content but is a more work if, for example, new pages need to be added.

Consistency.

It’s very easy on a static html site for small inconsistencies to build up over time and become harder to change, e.g. with navigational elements. Altering the left navigation in the new site is now as simple as adding new pages and/or shuffling current ones in admin.

Syndicated content

Their latest content can now be consumed by anyone who subscribes to it via the automatically generated newsfeeds. This is an effortless form of marketing and can be used in a variety of ways such as their “Latest News” on the Planula listing page on underwater.com.au.

More freedom to change their minds

There are always sections in websites that aren’t immediately clear and need time and use to get a better idea on how they should be approached. This is much easier if things can be moved around quickly to respond to changing needs or circumstances.

But what if…

It would be naive to pretend that this solution is the be-all, end-all and I’ve already mentioned Tim and Wandy having some hesitation. Their primary concern was how much they would be tied to this solution and what if they needed to change to another or back to a static HTML site?

Thankfully this is also a common concern for developers and therefore there are several solutions or “exit strategies”:

Changing to another system

Methods exist to import WordPress data into other solutions, such as Textpattern and Drupal. As a sidenote; It’s quite notable just how many more there seem to be for [importing into WordPress](http://codex.wordpress.org/Importing_Content “Importing content into WordPress).

Converting back to static HTML

It would be possible to do this via WordPress itself but there already exist other solutions like Blue Crab which “is a program that you use to copy the contents of a website to your computer, in whole or in part”. This is a Mac desktop application but of course Windows equivalents exist

Some other things

Another point worth mentioning; the site has now moved from a tables-based layout to one based on CSS stylesheets which on the whole (apart from the markup introduced by a few plugins) means somewhat smaller pages sizes and more content dense HTML. The separation of the page styling also means future changes to the look of the site can be introduced across the whole site much more quickly.

Final words

We’re waiting to see how these changes affect the visits and search engine behaviour of what is already a popular website. Of course we’re hoping they improve even more.

So go visit the site and even better visit Byron Bay and stay at Planula!

I like the fact that Jon Hicks, who is well known for designing, amongst other things, the logo for the Firefox web browser, talks about using a cheap rounded corner punch on his business cards in his New Business Cards are here! journal entry.

I’d ruled out rounded corners as being cost prohibitive but this is an obvious and simple workaround. Searching locally (in a brief Google Australia search) I’ve so far come up with ones like Fiskars’ photo corner punch which is not quite what I’m after. I’ll keep looking…

Using a specific font in brochures, stationary and other printed material is simple, so why then is it such an issue when developing web pages?

Unlike the printed page the display of web page text is limited to the fonts available on each viewer’s own computer. The most commonly available Western fonts are just a small selection of around 10 or so, which can include Times New Roman, Arial, Verdana, Georgia, Trebuchet, Impact, etc.

When developing a web page the font to be used for say headers or paragraphs can be specified in a stylesheet like so:

h1 { font-family: Helvetica, Arial, Sans-Serif; }

This tells the page that for all headers size 1 (h1) try to use the font Helvetica, or, if that is not on the viewers computer, try Arial, or, if that is not on the viewers computer, try whatever sans-serif font they do have.

What if I want to use a font that is not commonly available?

If you decide you want to use a font that is not commonly available on your viewer’s computer, such as Sand, you could try and specify…

h1 { font-family: Sand, Helvetica, Arial, Sans-Serif; }

…which would work great for the ones that have Sand installed as we can see below…

…unfortunately for everyone else it would work down the list until it hit a font they do have installed. In the image below the viewer does not have Sand but does have Helvetica …

But I really want my viewers to see my font!

If you really want all your viewers to see the headers in your font of choice, just about the only way to do so is to use an image made using that font. Below is an example of such an image which, in contrast to this paragraph, you’ll notice you cannot cut and paste text from:

The downside of using images over text

Since the text is in fact a picture of text, it is essentially invisible to anything that can only read actual text such as a search engine or a text reader.

If you’d like to see this for yourself, try making the following setting in Internet Explorer:

Go to Tools > Internet Options > Advanced Multimedia > untick “Show pictures”

If you then reload this page you will be able to see how the “I look like text but I’m really an image” image disappears, leaving no actual text at all. That is how a search engine sees your page (Sidenote: that setting is also useful if you have a very slow connection and don’t want to waste time waiting for web page images to load.).

Another downside is the need to generate images for every header on the page. Updates to the page may also require redoing those images.

So what are the solutions?

Stick to fonts commonly available on the majority of computers.

While this is the least exciting option, it is the most failsafe and practical solution.

Use an image but make sure it is not crucial to the understanding or value of the page

By making the header more of a decorative addition you can somewhat side step the potential loss of functionality should it not be able to be seen. In practice it would be very hard to do this on a page with a number of headers. Search engines and text readers would also be less able to weight the elements of the page since there would be less structure to the text.

Use an “image replacement technique”

These are really hacks that try to have the best of both worlds; the viewer sees the image if they can but if not the text is available as a backup. There are many different alternatives, none of which have conclusively solved the issue.

Ultimately all web developers are waiting for this issue to be solved by updates to the various technologies involved. In the meantime, we are left to decide on the most appropriate solution (or combination of solutions) from those mentioned above.

Further Reading

Image Replacement. Again.

Thierry Image Placement

The Anatomy of Web Fonts

An almost too exhaustive collection of free stock images. Great for non-profit work and also, depending on the license of the particular images used, commercial work:

Free Stock Images