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; }