Accessible Page Titles - sIFR

The problem

You want to have an accessible website. You want a website with seperate presentation code so that you can restyle it easily, and you can vary the presentation depending on the device that is viewing it. But above all, you want it to look great. You want your page titles to be in a really individual, high quality font. However, browsers only support a handful of standard fonts, and once these get to any size appropriate for a page heading, they get all ragged and blockey. You can set Windows to smooth the edges of fonts, but this isn't the default setting for XP. Most people will see text that looks very basic and unprofessional.

A common solution

A common solution is to replace the page title text with an image of the text, so that you can get the look you intended. However, this is inaccessible, impacts development time, inhibits rebranding and the ability to tailor your page to the device type, slows page load times and increases server load. You can generate the images on the fly, but this is a server overhead and also suffers from similar disadvantages.

The new solution

A far better solution is sIFR. It basically replaces the text on your page with a small flash movie. Most people have Flash, so most people will see the intended result. However, it degrades gracefully, and it they don't have Flash, they will see the original text in standard HTML. The HTML document is untouched, it is accessible, it doesn't impact development time and it can be rebranded easily. You can even have the text multi coloured.

More information

sIFR 2.0 can be downloaded here, and more information can be found on the sIFR Wiki. A huge library of fonts in swf format is available here.

Quick tutorial

I found the wiki and other tutorials didn't really make it clear how simple the whole thing was. So here's my cut down version:

1. Download and unzip sIFR 2.0.
2. Copy the following files to the same location as your webpage: sIFR-screen.css, sIFR-print.css, sifr.js, *.swf.
3. Reference these files in your web page, in the header, eg: <link rel="stylesheet" href="sIFR-screen.css" type="text/css" media="screen" /> <link rel="stylesheet" href="sIFR-print.css" type="text/css" media="print" /> <script src="sifr.js" type="text/javascript"></script>
4. Add this bit of javascript just before the closing body tag: <script> if(typeof sIFR=="function") { sIFR.replaceElement("h1", "tradegothic.swf", "#ffffff", null, null, null, 0, 0, 0, 0, null, null, "transparent"); } </script>

Now your page title, within the h1 tag will be rendered using sIFR. If you want the text within different tag replaced using sIFR, add another line with this tag name as the first argument.

Flash Videos

Introduction

With broadband and cheap hosting space available, it's now the norm to have videos on your website. Sites such as utube host videos for you. But how do you get your video directly onto your own website?

Video Formats

There are many different video formats available; for example MPEG, AVI, DivX and MOV. However, browsers don't support these formats themselves, so the video usually opens in another program such as WinAmp, RealPlayer or Windows Media Player. To allow browsers to run a video within the page, I find that streaming the video as a Flash movie is best.

Flash Movies

1. If your video is already on DVD, then rip it onto your PC's hard-drive. For this I used DVDDecrypter. This exports the video as an .IFO and a .VOB file. Otherwise, export the video from your video editing software (eg iMovie) as a DVD image file (.img) and use MagicISO to extract the .VOB file.
2. Use AutoGK to convert this to an .AVI format. The input file is the .IFO, and I left most settings at default, with a 75% quality. This gives you an .AVI file with an XviD codec which will be potentially hundreds of MB.
3. The final stage is to convert this .AVI file to a .FLV. Use Adobe (nee Macromedia) Flash 8 Video Encoder. You can download a trial version from Adobe. You can also use the free Riva FLV Encoder.

Add Video to Web Page

Now you will need a flash-based video player. The best one I found was this one. Then upload the SWF files to your webserver, and add the following code to your html:

<object type="application/x-shockwave-flash" width="320" height="261" wmode="transparent" data="flvplayer.swf?file=video.flv&autoStart=false"> <param name="movie" value="flvplayer.swf?file=video.flv&autoStart=false" /> <param name="wmode" value="transparent" /> </object>

The height is 261 rather than 240 to allow for the control bar at the bottom of the movie. The flvplayer.swf is the name of the flash player, and the name of the movie (in this case video.flv) to play is passed to it. Put these files in the same directory on your webserver, and you should be good to go.

Publishing Photos

Publishing Photos

The best free software for publishing photos to your website is JAlbum.