Fluid fullscreen fixed width column layouts with JavaScript

Been having lots of fun lately trying to get fluid JavaScript column layouts working on the new Jumpstart website.

We were inspired by www.michaelpaulyoung.com and www.wolffolins.com amongst others to try and create a design agency site that breaks the standard (and totally overused) ‘home, about us, our people, our thinking’ type tosh that you normally get.

Michael Paul Young has turned a simple WordPress Blog into a fullscreen fiesta of fixed width columns. It has some lovely jQuery fade transitions but the real star is the site’s ability to present a full screen, fluid layout that really does work on any screen space. Obviously it helps that he has some killer work to show off but hey, we’re a digital design agency right? No problemo.

The basic structure is fairly straightforward. A series of 245 pixel wide columns (the precise number dictated by how wide the window object is), all floated left with CSS. Within the columns are content ‘boxes’ of varying heights that combine to present a full screen appearance – regardless of screen resolution or window object size.

There is a natty Jquery drop-down menu (love the way it pushes the content below it down on opening) and the logo block strands two columns but the overall effect is a kaleidoscope of content ordered by date rather than some arbitrary categorisation. If you need to filter the items to help you find what you want then you can do this and only show, say, logo work, if that’s what you want.

The truth is most visitors to a design agency site don’t know what they want in specific terms. They want to see your work and who you do it for and a few reasons why they should use you and not the million other options available to them.

So how does it work? Well, the columns are all floated left and within a CSS ‘wrapper’ given absolute positions from the left and top margins. So you get:

column 1 – left: 245px
column 2 – left: 490px
column 3 – left: 735px
etc.

We’ve allowed for up to 10 columns (if you have a screen resolution greater than 2450 pixels and you view your sites full screen then you must have a pretty strange web browsing experience anyway). We then hide all the column DIVs with display: none; CSS.

The cool bit is a JavaScript function that calculates the available screen real estate and shows only the columns it can accommodate. The columns are absolutely positioned to avoid the last column wrapping underneath when it slightly overhangs the available space. This provides a much nicer full screen effect.

Next we have all our content in a hidden UL list. The JavaScript loads the content items into an array and then ‘deals’ them out one by one into the available columns – just like a croupier in a casino.

The effect is run on page load and resize so you always get the full screen effect. We’ve decided to fix the columns for very low resolutions but there is no reason why you couldn’t just have a very basic consistent column layout – would look cool on an iPhone.

We had a few issues with the way Internet Explorer deals with a screen resize event but hey, no surprises that I.E. was our main headache, right?

Anyway the site should be live by end of June and will be on www.jumpstartdesign.com if you see the Flash version it is not live yet. Anyone interested in the code can email me for a copy.

Meerkats benefit from viral injection

You’ll be hard pressed to miss the latest viral marketing campaign from insurance comparison site comparethemarket.com. The ads, which began appearing on Youtube around Christmas time and which have now migrated onto mainstream TV, feature a spoof site called comparethemeerkat.com.

The premise of the ad is that the Meerkat presenter (a CGI creation called Aleksandr, complete with Russian accent) is fed up with people confusing his Meerkat comparison site with the well known insurance version.

This could all be dismissed as frivolous fun but there is some inspired marketing creative behind the campaign. London agency VCCP were tasked with a single minded proposition – increase the amount of people searching for comparethemarket.com by name via Google.

In a crowded space comparethemarket.com were finding that similar sounding competition with an almost identical proposition were watering down it’s Internet search traffic – a vital element of it’s overal customer base. VCCP therefore decided to employ viral marketing techniques by setting up what appeared to be a spoof site and waiting for the social networking buzz and ‘pass it on effect’ to set in, before finally releasing the ad on terrestrial television.

Cliff Hall, director at VCCP, says, “Much of the previous communications in the category had become formulaic. This creative challenges category conventions. It is a great example of how quality creative will have a direct effect on a client’s business. comparethemarket.com has a strong offering for consumers and is well respected as a partner by insurance brands – this way we can help it become an even more efficient business.”

I’ve seen similarly impressive results from some of my own viral campaigns. A Christmas shoot ‘em up game called StopDerek! that we produced at qube (in the absence of being able to get a paper card produced in time for the festive season) was initially mailed to 900 recipients. Six months later the site was getting 200,000 hits a day.

Viral marketing may not be right for every brand. Successful campaigns tend to be a little ‘edgy’ or left field and this can frighten off many customers. However, for the right brand, there is no more efficient way of spreading awareness. What these campaigns also illustrate is that this is a fast moving space. As the lumbering giants of marketing are just starting to wake up to digital as a viable platform the small, fleet-footed agencies are already moving the whole game forward by embracing web 2.0 and the social networking revolution.

Links:

http://www.comparethemarket.com/
http://www.comparethemeerkat.com/
http://www.leerendell.co.uk/clientzone/stopderek/

Is Chrome Welcome?

2008 saw the release of Google’s entry into the (already crowded) Internet browser market with Chrome. On the face of it Chrome comes packed with some pretty impressive features and with the exception of a few initial bugs looks like a welcome addition.

However, spare a thought for your web developer in all of this. Web design is not like designing for print. Print designers have the luxury of knowing that every end user sees their work in an identical context. Web designers have to cater for an ever changing user environment that takes in different operating systems, different screen resolutions, different colour depths and, of course, different web browsers.

You might imagine that the diverse range of browsers freely available would be a good thing for the casual web browser and in many respects it is. New innovations such as tabbed browsing are a direct result of this competition.

There is, however, a downside. The disadvantage of this proliferation of browsers is that they all function slightly differently. The manner in which each browser implements HTML and CSS standards varies greatly, resulting in web developers the length and breadth of the land pulling their hair out as sites that they thought were finished get tested in a lesser known browser.

Perhaps the worst aspect of all this is the fact that the most popular browser, Microsoft’s Internet Explorer (shipped free with every version of Windows) is one of the worst at implementing HTML and CSS in a standards compliant way. Developers are therefore faced with the invidious choice of adhering to standards and having most of their visitor’s experience a compromised layout or ignoring the standards to satisfy the majority.

Fortunately, in most cases, experienced developers can use skill and patience to circumvent these inconsistencies. What it does highlight is the need to test websites in a wide variety of user environments and not to assume that everyone uses the same browser as you.

At Bradley Dyer we strive to create sites that meet W3C standards for usability and accessibility and we routinely test all of our sites in the following broswers:

Internet Explorer (version 6.0 and above)
Firefox
Safari
Opera
Chrome

The Sellers

I was about to go to bed and got sucked into this last night instead. Oh what a waste of valuable sleeping time! Absolute scumbags one and all – except for the nice man at the window company they were sent to work for. He seemed like a really nice man and if I ever decide to pursue a career in double glazing sales I’ll definitely be applying to West Yorkshire windows.

More telly thoughts

Watched Autumnwatch with my Dad and my wife last night. Whilst they think he is a bit odd they don’t share my views on Bill Oddy. My wife thought, ‘He might be nice to children and just not like adults’, which was a little on the charitable side of credible to my mind. I have to admit that last night he didn’t come over all that grumpy but I was a bit shocked at the glee he took in the positively pornographic display of deer rutting on the Isle of Rum. Aparantly it is against common decency to show a human schlong in a state of arousal on television but a rampant and well endowed stag trying to hump several different female deer (what do they call them?) is perfectly acceptable! Watching this display with your dad doesn’t help I promise you.

 Most dissapointing thing about Autumnwatch last night was that we didn’t get to see Simon King get his face bitten off by a wild boar. We were left with a shot of the Kingster face to face with a 30 stone boar. Tomorrow we will get to see the camera widen it’s angle to reveal he is actually 300 feet away and the effects of foreshortening were being used to con us the audience yet again – I guarantee it!

Last nights telly

Is it me or do you have to be a complete twat to get on TV these days? I started off with Bill Oddy who has to be the most loathsome piece of crud on television – and that Kate Humble is so nice, how did she ever agree to work with the Oddster? I’m always deeply suspicious of people who value animals higher than humans.

 Anyway Oddy is like an old friend in comaprison to the Dragons in the Dragons Den who are without exception the smuggest offal on the whole planet. If I am ever successfull I hope to exhibit a degree of humility when faced with those in a less fortunate position. The dragons seem to revell in sneering at the struggling entrepreneurs. Last night one of the dragons gave a three minute deadline for his offer. No amount of money would have been worth this kind of power trip and I was praying for the entrepreneur to make him look like a total twat by telling him to go stuff his time limit up his arse but unfortunately even the contestants are twats on the dragons den.

Cheese

There are many fine cheeses but by far my favourite is Parmesan – that lovely crumbly full fat cheese from Italy. In my youth I thought that the manky stuff you get in cartons that smells like sick was Parmesan but it is not! If you use this stuff you have a faulty tongue and should see your GP for a taste bud transplant.