Following on from the CSS v tables for layout debate that is raging (continuously). As detailed in my previous post I feel that a HTML page is the combination of the content and layout. I.e. layout elements (multiple unnecessary divs in the case of CSS, tables in the case of table layouts) should be separate from the content. However that does not actually help with how to get your HTML laid out.

So I am going to mind dump a few possible ways layout could be done. These are not serious suggestions, just ideas.

The first approach is by far the most unlikely. Why? Well it requires extensions to CSS which, as we know, could take a decade to reach our IE6 using friends.

So the basic problem of layouts is that we want to divide our page into distinct areas. A typical layout might look like this (image from java2s.com):

This is called a ‘Border Layout’ (in java terminology at least). For example, you might want to have the header in the ‘North’ section, a sidebar in the ‘East’ section, your footer in the ‘South’ section and your content in the ‘Center’ section. You might not use all sections (i.e. we might not put anything in the West section) at which point it is not rendered. So this is a very flexible layout, able to do two and three columns, and can probably account for 95% of all web layouts out there. There are other basic layout types, and I think that with a few pre-defined layouts you could cover the vast majority of layouts with ease.

Imagine if we had a new CSS attribute in the body element:

body{
layout-manager: border-layout;
}

Ok, so we have said to the browser, we would like to render this page using the border layout model as detailed about. How do we add content to each section?


div#navigation{
position: layout;
layout-position: east;
}


Hmmm, easy hey? Using the CSS file we can assign page elements to the different layout sections. Of course the problem with this is that it limits you to a pre-defined set of layouts. You could probably use the CSS3 layouts module to define your own.

The old debate of CSS v tables has flared up once again (see here and here). Its the same old arguments over and over. However, the very fact that this keeps coming around is evidence that both tools have problems. 

Generally, I think CSS is great at styling content. It was designed to style text based documents, you can see that from the DTP inspired terminology. For example, floats are designed to float paragraphs of text around images, not for making left and right columns on your page. In short, I think layout in CSS is a hack, using CSS for something it was not designed to do, exactly as using tables for layout is also a hack.

So we have to choose between two wrongs right? What would be the ideal situation?

Look at the average website. Most pages have common layout and header elements. Looking at the source code, often only a small fragment of the HTML is actually for content. The rest are ‘layout’ elements that are constant across most pages in the site. So I think, in essence a HTML page is the union of two components, the content (the document in my mind) and the layout (the navigation, header, the search bar thats on every page). Look at this site. Only one small area corresponds to content (the blog post area) and the rest is my overly large sidebar, header and flickr photo stream. Not to mention all the divs or whatever to float the sidebar to the right etc…  

Why is this a problem? Many non-standard uses of HTML (screen readers, search engine crawlers) have great problems separating the ‘content’ of the page from other secondary elements. SEO teaches us that we should have our ‘content’ as near to the top of the HTML as possible, and we have great fun trying to hack our CSS layouts so that order is unimportant in the HTML. Search engines also tend to devalue links in ‘layout’ elements (i.e. sidebars) compared to ‘in-content’ links. Why? Because a link in a layout element tends to occur on all pages in the site, where as a in-text link means that I am actually talking about that page there and then.

To me, this suggests that the most semantic solution would be to somehow separate the content from the layout elements. Therefore, each URI on the site corresponds to a small semantically relevant HTML document that is just the content for that URI. Layout elements could either be ‘included’ from external files in a similar way to the CSS @import directive, or marked as being ’secondary’ content. 

You can achieve similar results on the server side by including document fragments in whatever server side programming language you wish. This is not quite the same though as the full document (including layout elements) is sent to the client. I want to be able to do it sending just the content. Interesting, good old fashioned frames actually allowed us to this. I.e. in a frameset I could have one HTML docuument for the content and one for the layout elements. However, frames are awful and have a bunch of usability issues.

Obviously this is a pie-in-the-sky idea as it would require a standard to be defined and incorporated in the browsers. That could take years, even decades in IE’s case. The debate on tables v CSS is centred around which tool is best to use today, not in the distant future. 

That said, I am looking at an approach to do this ‘layout functionality’  in javascript on the client before the page is rendered. Watch this space…

UPDATE: I realise I did not actually talk about HOW the layout might be achieved. Here is an idea (and just and idea).

I recently found out about malo, a ultra small CSS grid layout library. When I say ultra small, I mean ultra small, 0.25k compressed! It supports various numbers of columns and page widths, and most impressively, nested columns. So if you need a CSS column library that works in all browsers, check it out. Its not as complete as Blueprint, but then, I think Blueprint has lost its way and tries to do far too much.

I have recently been experimenting with writing travel related web apps for the iphone. Its all great. Some of the HTML5 stuff in the new version of iPhone Safari is great (local databases etc..). However, one thing has been bothering me. I cant use Google Maps as I would like to. Ok, I can include links to the google maps site that open in the native google maps application, but this is not optimal because:

• It takes the user out of my web application
• Does not allow me to integrate the maps with my application. I.e. add many markers. Do something when a marker is clicked.

So this got me thinking, would it be possible to do a ‘lite’ version of the javascript maps API for the iPhone? Before the newest version of mobile Safari, this would not have been possible. Fundamentally you cant drag the map! However, with the new version Apple introduced a javascript API for sensing single and double finger drag events. 

So, I went about knocking up a very basic test version (try it on your iphone, tinyurl: http://tinyurl.com/3g5tg4). Is buggy, basic and sub-optimal, but proves it could work nicely. Try zooming with the double finger pinch action! 

I also tried the new webkit CSS transforms to allow free zooming and rotation, however they are buggy and slow on the iphone! Oh well! Anyway, maybe we can have google maps lite on the iphone?

I am a big fan of the google maps on the iphone. I particularly like the way that the little pins drop from above and bounce. I wanted to find a way to do this in the standard google maps, and after a little hacking, I have found a way. Sadly though, the technique detailed here works only with the current version of maps. This is because it interfaces directly with the compressed google code, where the function and variable names are randomised (obscured) with each version increase. Thus, to make this work you need to specify the current version number (2.123) in the map file include.

Anyway, to cut a long story short, I figured, that as you can make markers bounce after you drag them, it should be possible to make them bounce in other situations. I was looking for an function named ‘bounce’ or similar, but it was a bit harder than that! After tracing the flow through the obscured maps code (!) I found that you can drop a marker from above using the following code:

 

// Make bouncable
if (!marker.Xa)
{
marker.Xa = true;
marker.qo(false);
}
marker.Pa = height; // Current height
marker.ri = height; // Max height
marker.av = 1; // Direction (+ = down)
marker.tc(); // Go baby!


Here is a demo. The markers also ‘hop’ when you move the mouse over them. In the source code there are three functions,  dropMarker, hilightMarker and dehilightMarker. Check them out!

Please, please, please google can we make a publicly available ‘bounce’ function?

On a recent trip to Dublin I was rather taken by the buttons they have on their pedestrian crossings (yes I know, I am sad):

Compare this to the overly engineered UK equivalent:

Is it me, or is the main function of this device to have its button pushed? Why then does the UK version have a really, really small button that protected by a raised ring to make it even more difficult to push? I love the simplicity of the Irish version. Its main purpose is to be a button, therefore the button is huge and easy to push. Lovely.

Today and Tuesday I have given myself the day off. What a concept. I plan to do no work whatsoever, not even touch my blog (damn! failed already). I am now off to do something I have not done for a long time, read a book! Luxury…

Amazon S3 is a great service for hosting large media files for your site. At World Reviewer we are soon going to be rolling out our own video hosting for tour operator’s videos. Video hosting has been an interesting little project, and S3 has really made it easier for us (not to mention cheaper).

S3 by default hosts files in the US, but it is possible to host content in Europe. One thing we noticed early on, was that videos did not always stream as smoothly when hosted on the American servers and viewed in the UK (and we assume other European countries). Because of this we wanted to offer “geo-targeting”, where we can host the files twice, once in America and once in Europe and choose the best based on the user’s location. Of course, this means we have to pay for storage twice, but typically bandwidth will be the most expensive element of you bill, so a few more cents for extra storage might not be a problem. Well thats how it is for us, you mileage may vary!

It would be great if S3 had geo-targeting by default, but it does not, so how can we offer it?

Actually its quite simple. Basically we will set up two S3 buckets, say “us.media.worldreviewer.com” and “eu.media.worldreviewer.com” being the American and European buckets respectivly. We then decide between the two bucket urls based on the users location.

Geo-coding of IP addresses is very easy and free (well at least down to the country level). There are a variety of webservices (like hostip) however, we wanted something that could run locally, to cut down the delay. Maxmind offer a free PHP IP to country database called GEO lite (they also sell licenses for a more accurate version, but this is good enough for us). You need to download both the data file (GeoIP.dat) and the PHP library file (geoip.php) from that page. Once you have them you can get the country code for any IP address like this:


geoip_country_code_by_addr('212.140.189.10'); //returns 'GB'


Easy! Now all we need to do is map European countries to the European bucket url and all others to the American url. This function in this file does just that. Useage:


$bucket = '.media.worldreviewer.com';
$bucket = getAmazonS3LocalServer().$bucket;


You can then pass the bucket to your HTML layer to load the media files from the right place. The GeoIP lookup is quite quick, but you are probably better off storing the result in the user’s session, so that you only have to look it up when the visitor first views a video.

Here is a list of my favourite bars / cafes to sip a coffee and get some coding done:

•  Sejuce
• Tin Drums in Seven Dials and Kemp Town
• The Hampton
• The Earth and Stars
• Komedia Cafe

Hmmm… Where shall I try next?