John has just passed me the new meme that’s doing the rounds. This one’s something to do with a literary stick. Is that a book club? (ok, ok, that was a really bad joke!)

Well, as it’s Sunday and I haven’t had any more elasticy thoughts this weekend, I suppose we better get started!

5 Random Tunes (iTunes Party Shuffle)

  1. Laura – Scissor Sistors
  2. Teethgrinder – Therapy?
  3. Stories – Therapy?
  4. Stand Inside Your Love – Smashing Pumpkins
  5. Steve Berman – Eminem

Currently Reading

I haven’t got anything lined up at the moment.

Ok, Last Book you Read?

Star Wars, Episode III: Revenge of the Sith

Last film I saw

Star Wars, Episode III: Revenge of the Sith (noticing a connection?)

The Next Victims

Next to be beaten by the stick will be:

Elastic layouts have been getting a bit of talk over the last few months. JohnRoger and Patrick have all talked about them. I use an elastic layout in the new design.

What is an Elastic Layout?

Traditionally, web designers talk about either “fluid” or “fixed” layouts. Fluid layouts change width with the size of the browser window, while fixed layouts are set to a specific width. There are arguments for and against each type. Where elastic layouts fit in, is to try and combine the best of both worlds.

The Theory.

Text sized in em units is scalable in browsers (theoretically). So what if we were to specify the widths of our page elements in ems? Our page elements should scale inline with the size of our text.

The Reality.

Using em units to size page elements does work pretty much as expected. However, there are a few things we need to do to avoid some problems.

Global Reset for Less Hair-Pulling

If you let the browser apply its default font-sizemarginpadding and line-height, you’ll be in for a very rough ride. Make things easy – apply the global reset:

*{ font-size: 100%; line-height: 1; margin: 0; padding: 0;} /* Global Reset */

This resizes the text on everything to 100% of the default size (16px by default), sets the height of a line to the size of the text, and removes any default margins or padding. By doing this, we remove a lot of the guess work. I use a percentage value because I’ve found that this makes scaling text a little less error prone in browsers. 1em is now equal to 100% or 16px.

Browsers are Crap at Maths.

All the major browsers suffer from rounding errors to some degree. I must admit that it’s been a while since I checked on this, but both Opera and Safari used to render text sized in ems and percentages wrong – 10px would render as 9px, for example. To get around this, the fix was to size text slightly larger than 100% on the top level element. 100.01% was found to be the magic number. So our global reset becomes:

*{ font-size: 100.01%; line-height: 1; margin: 0; padding: 0;} /* Global Reset */

Make the Maths Easier.

I was never very good at maths (much like the browsers), so working things out in multiples/fractions of 16px wasn’t appealing. It’s also harder to visualise how big 16px is, compared to, say, 10px. So to make things easier to work out and visualise, we reduce our base font size down to 10px (using percentages, this is 62.5%). We can apply this to the html element and it will inherit down the line:

html{ font-size: 62.5%; } /*Resize text to 10px */

1em is now equal to 10px. Much better!

Make Everything an EM.

Well, almost. I’ve found that some browsers (the Gecko ones, mostly), will not render a 0.1em thick border, when 1em = 10px. Any border you want to be equivalent to 1px by default, just make it 1px – it might not scale but it will render. Other than this small caveat, the rest should be sized in em units: margins, paddings, widths, font-sizes… Doing so will make everything proportional to the text size, stopping things looking crowded at larger sizes.

Remember – EM Sizes Compound!

By that, I mean that if you apply a font size of 1.2em to the body tag in our example, then for all elements contained in the body, 1em now equals 12px. So a 3em h1 would be 36px high, not 30px like you might have expected. It’s something you need to be on the lookout for.

A Note About Background Images

Elastic design is geared towards using repeating background images. Unless it’s something like the “Latest Little Thing” icon on the homepage, using non-repeating images will land you with holes in your design where the container is wider than the image. A great example of using repeating background images in elastic layouts is the Elastic Lawn CSS Zen Garden entry.

Give it a Try

With all this talk about maths, compounds, et al, I’ve probably put you off elastic layouts. Don’t be afraid to try them. Once you get in the swing of things, it soon becomes second nature. Practice does make perfect, so all I can say is have a go!

Last night I finally went to see Star Wars, Episode III: Revenge of the Sith. The place was packed, but I managed to grab one of the few remaining seats with a decent view. It was also hot – the guy in the Wookie costume, 3 rows back must’ve been sweating his arse off. Despite the warnings that Episode 3 wasn’t suitable for younger viewers, there were a lot of young kids in the audience.

I won’t spoil the film for those that haven’t seen it yet, and I don’t really want to “review” it, as such. Maybe later.

Leaving the cinema was kinda strange. Everyone seemed kinda muted. Normally the line coming out’ve a film is loud, full of people gossiping about what they just watched. But there were only handful of people that were chatting and even they seemed aware that most people were quiet. It was one of the wierdest experiences I’ve had at the cinema.

I honestly don’t know how ROTS has left me feeling. I can’t honestly say whether I thought it was good or bad. Perhaps I need to see it again. Maybe watching the original trilogy before going to see it spoiled it. Reading the book might have thrown my hopes and expectations off. I just don’t know.

But the important thing is that the saga has been completed. The missing piece is in place. There’s closure.

At least until the DVD comes out!

Star Wars was an integral part of my childhood. I was too young to see the films when they first came out (I wasn’t even born when A New Hope was first released), but my love of sci-fi from an early age pulled me towards them. Unfortunately, in my formative years it proved near impossible to get to see any of the original trilogy from start to finish, for one reason or another. Instead, I had to wait for the “Special Edition” re-release to the cinemas. Even if it wasn’t the true Original Trilogy, it was still a special moment for me. After that, school finally got in the way and the only real contact I had with Star Wars was at my friends’ house. His mother’s boyfriend was fanaticalabout Star Wars – he had so much merchandise you couldn’t see the walls. I used to sneak a read of his comics if he was at work.

When I first learned the prequels were being made, I was as giddy as a schoolgirl. It may have been a disappointment to most but The Phantom Menace marked a turning point for me and so will always be special. 1999 was the year I left school behind for the Jedi Academy University and started to really grow up.

Although on reflection Episode 1 is not the greatest, at them time I loved it and immersed myself in every scrap of information about the “new” universe. I was fascinated by this glimpse into what that Galaxy, Far, Far Away was like before the Empire and the Rebellion. I guess it was always the back stories that interested me. Not the What, but the Why.

Episode II was released just as I was leaving uni and starting work. I remember finishing a radio show (I helped out on a show on local radio for a summer) late at night (about 10pm-ish, I think) on the night before it was officially released and heading down to the cinema in the hope there were still tickets for the midnight showing left. I was in luck.

Despite Anakin Skywalker being played by a moody plank of wood, Attack of the Clones blew me away. An army of Jedi. The start of the clone wars (and the first glimpse of the future Imperial Army). Jango freakin’ Fett. You can pick holes in the acting/directing/plot/effects all you want, but Ep2 is just a damn fun movie to watch.

Which leads us to the present day. Episode III. “The Saga comes full-cirlce”. The fall of Anakin and the rise of Vader. The fall of the Republic and the rise of the Empire. The end of the old Jedi Order. The end of an era – the final part of a series that has captivated people for 28 years. When the end credits roll, there will be mixed emotions. Joy at finally seeing the final piece in the puzzle, the missing chapter that completes the story. Sadness that it is the end.

There won’t be any more Star Wars after this. There is talk of a TV series, but it could never do justice to the mythology George Lucas has created. Star Wars belongs on the big screen. You can’t fit it into 30 minute TV episodes. It’s too vast, too detailed and too complex. It would be condensing War and Peace into a single page comic strip.

Part of me hopes that this is the end. This year I will be getting married. I find it fitting that the final Star Wars film is released this year, the year I will be starting a new phase in my life, with my new family. It’s like some big karma thing telling me it’s time to move on. After all, Star Wars was an integral part of my childhood – and I grew up a long time ago.

We interrupt our scheduled Star Wars programming to bring you the latest meme spreading through the blogosphere. Pete passed the baton to me, and before I pass it on, here’s the skinny on my music collection:

Total volume of files on my computer is…

8.19GB, although some of it belongs to the Missus.

The last CD I bought was…

Promises/Warnings – Idlewild.

Song playing right now is….

There isn’t one, as I’m at the office. Last one played on my iPod before getting to work was Creeping Death (live) by Metallica.

Five songs I listen to a lot or mean a lot to me are…

Like others, this is just what’s been played a fair bit recently.

  1. Why Do You Love Me? – Garbage
  2. Galvanise – Chemical Brothers
  3. S.O.S.B*Movie Heroes
  4. Duel of the Fates – John Williams
  5. Bleed American – Jimmy Eat World

Five people to whom I’ll be passing the baton are…

  1. Rob Mientjes
  2. Ben Sekulowicz
  3. Andrew Hume
  4. Tom Werner
  5. Jonathan Leighton