Columns and Grails

Has it really been over 4 months since I last wrote something here? Wow, I guess that goes to show how little priority blogging gets from me ;-) Today's post may also not be real blogging material. It is really going to be more of a note to myself, but it may be interesting for other webdevelopers who stumble upon it.

One of the sites I administer, is going to be evaluated for accessibility one of these days. Accessibility in this case basically means that blind people, people with bad eyesight, color-blind people, people with problems controlling a mouse, and various other handicaps need to be able to use the site.

Let's look at some examples:

• Blind people can use websites by using screen readers. Screen readers are hardware or software solutions that basically convert a website to spoken text or braille. And both verbally and in braille, there are no concepts like "columns", "footers", "left aligned", etc. And of course, no images! So, we webbuilders need to make certain our sites are understandable with screen readers.
• People with bad eyesight need to be able to, among others, increase the text size of the web page. And you'll be shocked to see how many beautiful websites totally collapse when increasing the text size (-<+> in most webbrowsers).
  

All of these examples influence your options for a column-based layout of the website. And this website that is being evaluated, uses the very popular 3-column layout. One broad center column for the main text, a narrow left column with a navigation menu, and a narrow right column with links to various related content. A common approach to achieve accessibility in a column-based layout, is to forbid the use of layout tables. This is also the approach taken in the evaluation test for our site. So now I need to go looking for a framework that I can use for the layout without tables, which is not as easy as it should be.

Why are we not allowed to use tables?

This demand is really more historical than it is technical. A good table-based layout poses no problems whatsoever to accessibility, and is much easier to construct and far more stable than a table-less layout. However, it is also so easy that it has been (mis)used by masses of unskilled webdevelopers over the years. They created monstrous, complicated, un-accessible, table-based layouts. Creating a layout that is not based on tables requires planning and knowledge about various webbrowsers and layout techniques. Which is why layouts that do not use tables are generally created by skilled developers, and are much more stable and accessible.

However, webbrowsers have been supporting tables for years, making this a very trustworthy and stable solution. Also, tables have the unique property to extend and rearrange when required to fit around content that is larger than was originally planned. Do you have an image, or a very long word, in a narrow column? No problem, the column widens to fit the content, and all other columns are narrowed to retain the layout. And if all columns need to become wider, then the page just extends beyond the right side of the webbrowser. The user will have to scroll to the left and right to view all content, but the basic layout is retained. The same in the vertical direction; no matter which of your columns is the longest, it is very easy to place anything (more columns, a fill-out form, a footer, whatever) below the columns.

Layout solutions that avoid tables, use technologies that are much younger and where support is varied. This means working around browser bugs and differences in interpretation of the standards. Also, alternative solutions cannot easily extend around large content or put stuff below the columns.

Table-less layout do offer some advantages however. When using a table, you have to fill your page with content following the table structure, from top to bottom and from left to right. This means you begin by writing the pageheader, then the left colum, followed by the center column, the right column, and the footer. Everybody has probably seen the problems on slow connections; we have to wait for the uninteresting header and left column to be loaded, before we can start reading the main content. The same goes for users of screen readers; they have to go through all those sections before they can read/listen to the real content. Layouts that do not rely on tables however, are free to deliver content in any order they wish, at least theoretically. They should be able to start with the main content of the page, and after that generate the navigation and headers.

Ok, so I need to convert my table-based site into a table-less layout. Luckily for me, this is a subject that many great minds have been working on for the last few years, so there are enough resources to be found on internet. However, after a few reasonably stable years in the browser market, everything is now again moving around, with the introduction of Internet Explorer 7 (and 8 coming), Firefox 3, Opera 9, Safari for Windows, and Google Chrome! This means all solutions need to be re-tested, and many that have been build over a year ago will no longer work completely with the current browsers.

The demands

Since the various solutions all have their specialties and problems, I need to start with listing my requirements:

• A centered, fixed-width layout. While I have always been a supporter for flexible layouts that follow the width of the browser window, I can understand the need for a fixed-width layout. With the availability of wide-screen computer monitors with ultra-high resolutions, sized at 20 inches and upwards, combined with the amount of people that use their browser full-screen, you end up with layouts that are just too wide if you try to fill the whole browser window.
• Graceful solutions around content that is too wide. What happens with large pictures and ultra-long words? This should not break the layout.
• Columns of equal length. While this is a no-brainer for paper-based layouts, it becomes a technical challenge for table-less web layout. But I need to place a footer underneath the columns, and I don't want short columns to show any gaps when they have background or borders. One workaround against gaps underneath short columns, is to not give the column itself a background, but to put a background image underneath the whole page that creates the visual impression of column backgrounds. This is called "faux columns".
  
• Header and footer that span over all three columns. Like I mentioned in previous point, I need a header and a footer, that are the same width as all three columns together.
  
• Main content first. Not the most important demand, but it would be great if I could supply the main content first, before the navigation columns and maybe even before the page header.
• Cross-browser compatible and future-proof. The layout has to be useable (perfectly the same might be too much to ask) across all popular browsers, and I don't want to redesign everything when the browser versions come out.
• As little browser-hacks as possible. This connects to the previous point; browser-hacks are work-arounds for current browser peculiarities, but are not future-proof.
  

The list

And now we can start building a list of possible solutions:

• Perfect multi-column CSS liquid layouts (Oct. 2007)
  Only works with full-width, but works perfectly in any browser I throw at it, and says it uses no hacks. If we would ever go for a full-width layout, this is going to be my starting point.
• Relatively Simple 3 Equal-Height Columns CSS Liquid Layout (Oct. 2007)
  Not centered in Internet Explorer
  
• Position Is Everything: One True Layout (Apr. 2006)
  Not centered
  
• 3 columns, the holy grail (2001?)
  Not fixed width, no equal column lengths.
  
• In Search of the Holy Grail (Jan. 2006)
  Not fixed width. In Internet Explorer 5.5, the right column disappears.
  
• Position Is Everything: Three Column Stretch (Sep. 2002)
  Not fixed width
  
• FreeCssTemplates: Ornate (Mar. 2007)
  Not fixed width
  
• FreeCssTemplates: Primitive Element (2006)
  No equal column lengths, main content not first
  
• Open Source Templates: Eco Business (?)
  No equal column lengths, main content not first. Content is not centered in IE 5.5, while the background is.
  
• Open Source Templaes: Nautica 05 (?)
  No equal column lengths, main content not first. Messed up in IE 5.5.
  
• Arcsin Templates: Dark Ritual (Oct 2006)
  No equal column lengths, main content not first
  
• 3 Column Layouts
  No equal column lengths, main content not first, no footer
  
• A simple introduction to 3 column layouts (Mar 2005)
  This looks like a keeper; equal length columns, main content first, footer. Extra-long content does not ruin the column design, but it can make the left column overlap the main content. It can also cause horizontal scrolling, but this does not ruin the centering of the columns. However, the left column does not show in IE 5.5, and the right column comes below the body content.
  
• Open Designs: Modern Lucent
  Also interesting, except that the main body is not the first content. No layout at all in IE 5.5.
• Open Designs: City
  In this one, the body is actually the last content! Both sidebars are loaded before the body...
• Open Designs: Stylevantage
  Another one that seems to work, but also with the columns loaded from left to right.
  

Privacy

Norwegians and privacy, it does not seem to be the strongest combination. Lots of stories to be told here, and today I run into one again.

For starters, the Norwegian telephone guide lets you search for anything you want. You want to know who that unknown telephone number is that just called? No problem, just type it in. Want to know who is living in that big villa? No problem, just enter the address. Want to give that sexy woman on Facebook, who doesn't accept your friend request, a call? No problem, just enter her name and you get it all!

To complement this, the telephone guide also happens to be linked to a very high-resolution, birds-eye view map of Norway...

But things get worse. It's that time of the year again, the tax papers have to be send in. And nothing helps soothe the pain of paying taxes better than knowing your neighbor has to pay more! Or at least, that is what the government seems to think... Just type in their name, and you get to see what they pay in taxes, how much they earn, and what they have on the bank. Want to know who pays the most tax in Norway? No problem!

Now, in good Web 2.0 style, this calls for a mashup! I will leave the programming to you, my dear reader, but I will present to you a nice look at the mansion of one of the richest people in Norway (117 million NOK in taxes, that is over 23 million USD or 15 million EUR):


And Bo Joachim here has the biggest bank account of Trondheim (almost 202 million NOK, that is over 40 million USD or almost 26 million EUR):


So if you are in need of some quick money, you know where to go. (No seriously, that is a bad suggestion!)

FFmpeg

Taking long trips with the small one is getting difficult. An hour is about the maximum, after that she starts protesting like anything.

What does help in such a situation, is playing a video. But the portable DVD player is a bit clunky to drag around, and she keeps on pressing the screen of my PocketPC making any video playing there stop. I need a mediaplayer for my PocketPC that can block the touchscreen but keep the backlite on at the same time. TCPMP doesn't do that.

Anyway, I thought I'd convert some stuff to play on my phone. Looking for some software to do AVI to 3GP conversion, I came across FFmpeg. Don't be fooled by the oldskool site, this command-line based audio and video converter is a real powerhouse. A bit like ExifTool, which I love.

The problem with these kind of swiss knives, is the learning curve. I haven't been able to get anything to actually convert yet...

Edit: Ok, I have gotten started. To convert a video to 3GP:

ffmpeg -i input.avi -s 176x144 -ar 8000 -ac 1 output.3gp

The trick was that the video needs to be resized to 176x144 pixels, and the audio needs to be resampled to 1-channel 8000 Hz.

Photoshop Disasters

I think today is the first time I actually saw the Blogger Dashboard page, and I picked this one up from the "Blogs of Note" section: Photoshop Disasters. Great fun with other's mistakes...

1. Clearly he's lying on the armrest. Lame.
2. This blog used to be great but now it sucks.
3. I don't get it. What's wrong with it?

First post

There it is, my own blog.

I know I have enough to say. But will I have the time and perseverance to put things in here? Will it have any use to have a blog? Answers I won't be able to answer until I try...

Anyway, from a professional point of view, I just need to know what blogging is about. So, there we go, here is the first post. Don't expect much more ;-)