Posts tagged "html"

On the Web it's not uncommon to see characters with no inherent meaning used for stylistic reasons. A good example is the Read more » link. Perhaps the directionality of the "»" is suggestive of travelling to another page, or perhaps the letterform is included solely for its aesthetic appeal. Whatever the case, one thing is certain: links do not require right-pointing double angle quotation marks in order to function.

The inclusion of such a character is therefore a design decision. It is decoration, not content. It belongs in a style sheet, not in a page's markup.

Modern browsers can display exciting visual effects such as drop shadows (without the use of background images). CSS3 makes it possible to turn submit inputs and even links into rich, Aqua-like buttons in these browsers (alternative style rules can be provided for older browsers).

I began this post three months ago, got stuck, and put it in the too hard basket. I wanted to devise a workable solution to my stumbling block before publishing this information. I'm getting ahead of myself, though. First, the background.

As I began writing this post, I had just completed a redesign of this site. The new design removed unnecessary distractions to allow readers to focus on the clearly presented content. I moved site navigation from the sidebar (which I axed altogether) to the header. I decided to fix the header in place so that the navigation and search form would always be visible. This required very little effort, but overcoming the problem posed by fixed-position headers took a great deal of trial and error. To save others from going through this tortuous process I'll describe my various approaches, and list the benefits and drawbacks of each.

Sticky footers should be ubiquitous. They are not.

This leads me to believe that many developers are unaware of how to prevent footers from floating up on pages without much content.

In my post titled Captions over images I advocate the use of definition lists for captioning images. Earlier today I was asked whether this meaningful markup could be used in conjunction with an "image slider" such as Easy Slider 1.5.

I had a look at the Easy Slider source code and decided to write my own image slider using Prototype rather than hacking someone else's code to pieces. It's a proof of concept rather than a full-blown "plugin", but it demonstrates that such functionality is achievable using elegant, meaningful markup.

Check out the Prototype image slider demo to see the code in action.

There are blog posts all over the Web explaining how to write valid XHTML markup to embed YouTube videos. There are also a number of online converters that generate this markup automatically.

I've always found it easier to write the markup myself, as there's really nothing to it. Simply replace both instances of video_id in the following code with — you guessed it — the video's ID.

<object class="youtube"
        type="application/x-shockwave-flash"
        data="http://www.youtube.com/v/video_id&hl=en&fs=1&rel=0">
    <param name="movie" value="http://www.youtube.com/v/video_id&hl=en&fs=1&rel=0" />
    <param name="allowFullScreen" value="true" />
</object>

rel=0 is often useful to include (as I've done in the example above) as it prevents thumbnails for related videos from being displayed at the end of the clip.

One important point to remember when you're "rolling your own" markup is that the character entity & must be used for all ampersands.

Finally, be aware of the fact that it's possible to change the size of the YouTube object using CSS. There's no need to include the width and height attributes in the markup.

object.youtube
{
    width: 100%;
    height: 385px;
}

This is my response to Chris Coyier's screencast titled jQuery Part 3 – Image Title Plugin which I watched a couple of days ago. Something didn't sit right with me at the time, and I've now worked out what it was: JavaScript is not required!

I'll present a JavaScript-free approach for displaying captions over images that uses truly meaningful markup.

Recently I've been on a mission to minimize the number of HTTP requests made while loading pages on this site. Until yesterday, the archives page was making an HTTP request for each of the tiny calendar icons used on the page. Therefore, up to 31 HTTP requests were required just to retrieve the calendar icons. Not good.

The same result can be achieved with a single HTTP request through the use of a sprite:

Tiny calendar icons sprite, which you're welcome to save and use

Hooray! It's now possible to insert images into Gmail messages. About time, I say.

Gmail's insert image icon, visible in rich formatting mode

Today I noticed that a page on this site failed validation. W3C's markup validation service gave the following error:

element "strike" undefined

<strike> is not valid XHTML; I'd forgotten the correct XHTML markup for this purpose:

my favourite colour is <del>red</del> <ins>white</ins>

The above gives: my favourite colour is red white

It's a good idea to explicitly define the appearance of deleted and inserted text in your style sheet:

del { text-decoration: line-through; }
ins { text-decoration: underline; }