logon2 Blog

If you don’t know what favicons are, look up at your tabs. You’ll notice that some of them, or at least this one, will have an icon. These are called ‘favicons’ (short for “Favourite” icon) . You might notice some tabs that don’t have a favicon. To me, sites with favicons seem more professional, complete and polished. Also, they make it easier for me to negotiate my tabs. Have a look at my tabs at the moment:

Notice how one of them has no favicon and a particularly unhelpful title. Now I’ll have to click on that tab (or press CTRL+3, or whatever)
to find out what it is – how annoying, I shouldn’t have to do this.

Because I can tell that you’re smart – I know that you want to use favicons on your site. It’s pretty easy – just create the icon and add some codeThe easiest way to get some favicon action is to use an online ico generator, here are some:

• Favicon.cc
• Dynamic Drive FavIcon Generator
• Favicon.co.uk

Then just add a some lines of code to your template:

<link rel="icon" href="http://yoursite.tld/favicon.ico" type="image/x-icon">

It’s worth noting that some browsers automatically search for “favicon.ico” on the document root of your website so it might be a good idea to name it “(httpdocs)/favicon.ico”. If you don’t want to do that, you can save it anywhere and just use a PNG file, just change the MIME type:

<link rel="icon" href="http://yoursite.tld/favicon.ico" type="image/png">

I personally prefer to edit my favicons locally, so I can make them transparent and high resolution for extra shine. Keep your eyes out for a post on that.

When I moved across to XHTML a few years ago, the transition was mostly quite easy. Using thesse logical rules got me though 90% of the transition:

1. Close all tags, use lower-case tags, use lower-case attributes and maintain nesting order.
2. Markup is for content, CSS is for presentation. That one was easy.
3. Use the right tag for the right job (in the right place) and make things accessible.

However, one thing that can’t be covered by a general rule is the complete removal of tags. Most removed tags were non-standard and started out as proprietary – like <marquee> and the tag we’re going to talk about, <embed>. (more…)

A common website design feature is the inclusion of navigation links (top level or otherwise) in the footer. Often, links are separated by a hyphen ( – ) or a pipe ( | ). It’s very easy to enter these separators in the markup, like so:

<a href="/">Home</a> |
<a href="/about/">About</a> |
<a href="/contact/">Contact</a>

I guess it’s OK to do that, but it’s not really great practice because the pipes ( | ) are not actually part of the content and are only meant for presentation, so they shouldn’t really be part of the HTML. Another problem with this is that it’s inflexible. What if we want more space between the pipes and the links? Do we enter a bunch of “&nbsp;”s? That’s ugly^.

We can use the CSS border property to add the separators for us by adding a left-border to each of the links.

“But what about the first link?“

The answer is the :first-child CSS pseudo-selector. It allows us to define CSS properties to the first element of its kind within a container. So in this instance, we can apply no border to the first child. Here’s how the lot would look:

<ul id="footer">
	<li><a href="/">Home</a></li>
	<li><a href="/about/">About</a></li>
	<li><a href="/contact/">Contact</a></li>
</ul>

ul#footer li {
    display:inline; /* so they display horizontally */
    border-left:1px solid #000000; /* our 'pipe' */
    padding-left:1em;
    padding-right:1em;
}
 
/* here it is, the first-child pseudo-selector */
ul#footer li:first-child {
    border:none; /* no 'pipe' before the first element */
}

It requires a bit more coding initially but it’s more elegant because it separates concerns and it’s also more accessible for screen readers and our friendly neighbourhood search engines*.

^ I know, this very site doesn’t follow this site doesn’t follow these practices. I’m a hypocrite!
* FACT

Inconsistent PNGs

Lovely Caption Maker

Have you ever been working on a website and noticed that in certain browsers a background image isn’t blending properly with one of your background colours or another image? This phenomenon occurs in Internet Explorer and it’s caused by metadata in the PNG file itself. There’s a great program that solves this problem without any hacks. (more…)

A recent trend I’ve noticed on some Australian media websites has been evoking my interest for a few months now. Sites like The Age and Fox FM have started overlaying a lovely coloured banner with a caption over feature images. The great thing is, they’re not rendered but glorious SEO-friendly and accessible HTML and CSS. I’m not surprised, however, since The Age and Fox FM have always been trend early adopters. The ABC still beats them, though.

Unfortunately, this effect can’t be achieved without knowing and entering the width and height of an image – making it kind of tedious to implement. After deciding that I’d like to use it with wordpress posts, it was decided that a tool should be built. And then The Lovely Caption Maker was born. Here’s an example of Lovely Caption Maker’s glory: (more…)

In technology, there’s always the goal of making complex and difficult things more simple – this goal has brought about ‘clean URLs’. Clean URLs are website addresses that are easy for people (and also search engines) to read and understand. For example: An interesting article about the Bermuda Triangle might be at www.articles.com/article.php?id=23452 – That address tells us (and search engines) nothing about the article. Using a clean URL, the same article might be at www.articles.com/articles/bermuda-triangle - much easier, right? Well, here is how you can implement this on your website… (more…)

While working myLookAgain (the second attempt), I’ve had to use a little bit more AJAX through JavaScript. One of the reasons was that I needed to allow users to add as many ‘pieces’ to each look and delete them if they want – preferably without reloading.

In JavaScript terms, I needed to be able to add (or create) and remove (or delete) elements, within another element, the form. After a little bit of research on the internet, I had what I needed to do just that. See a basic example of javascript dynamically adding and removing elements… Here’s how to do it:
(more…)

Although always available, I want to publicise one of the features offered by logon2 that can make your website a living, rich, thriving community – rather than just another website. I’m talking about adding a blog to your website or even turning your website into a blog. If implemented properly, a blog is a communication platform between you and your audience. It improves your relationship with customers, returns feedback from customers, brings you new customers and it gives you total control of your website… (more…)

Just finished rennovating the WizzComb website which offers the ingenious zig zag hair part comb - have a look at WizzComb’s new portfolio page or directly at the zigzag hair comb’s website. If you can suggest any improvement or criticisms, leave them in the comments or email me.

I personally developed the original WizzComb website in 2004, being only the second website I had ever developed it was pretty abysmal when it came to standards, accessibility and even good markup form. The website became out of date so after some tinkering, the WizzComb website is now fresh, valid, accessible, SE-Friendly and better looking.

We’ve all seen dropdown / popup menu lists on websites before, and generally they’re extremely useful because they save space, but offer extra functionality. Sometimes, though they’re tricky to implement. I remember doing a image-only popout menu for the Lonsdale Views, who offer accommodation in Point Lonsdale and it was more difficult than expected – First, there was Internet Explorer’s lack of support for “:hover” and then there was Internet Explorer’s z-index issue. Now that I’ve got a blog, I thought I’d publish a how-to guide for valid, accessible semantic HTML and CSS dropdown menus… (more…)