Twas The Night Before Responsive

A few years ago when publishing on Christmas Eve, I decided to have a little fun and rewrite the poem Twas the night before Christmas as Twas the night before Google. This year I’m once again publishing on Christmas Eve and I thought why not rewrite the poem yet again? This time with responsive design as the subtext.

I hope you enjoy.

Pageant float - sleep mouse
The mouse on the Twas the Night Before Christmas float at the Credit Union Christmas Pageant, 2008, in Adelaide

Twas the night…

before responsive, and all through the web,
not a site could adapt, not even ESPN.
Designs were all fixed and centered with care,
in the hopes that IE would display them as planned.

Designers were nestled all snug at their desks,
While visions of mobile danced through their heads.
You in Sublime. Me working in Coda.
We fixed browser quirks and downed a few mochas.

When on A List Apart there rose such a clatter.
Ethan had written and shown us what matters.
Away to my laptop, my code editor to fetch,
To develop a site; from edge to edge it would stretch.

A glow from my laptop cut through the dark,
leading the way as new thoughts did spark.
When what to my WordPress site should arise,
than a design that flexed when my browser resized.

With a little old % and 'em' by its side,
I knew in that moment I had found my stride.
No more measurement absolute would ever there be,
The web it is flexible and I think you'd agree.

Now Coda! now, Sublime! now TextMate and Eclipse,
On BBEdit! On Espresso! On Komodo and HTML-Kit.
Download and install, download and install.
Now coda away! Code away! Code away all!

I'll figure it out I know that I will,
And once that I do there will be such a thrill.
With a max-width before me and dropped column or two,
My site will reflow. I know that it's true.

Visitors will be happy, delighted and such,
They'll view it on devices that include mutli-touch.
I looked again at my browser and again and again
Ethan's ideas would be with me. They'd guide my hand.

His words they did wring, the ideas were a must.
Build sites that respond, adapt, and adjust.
The techniques that were offered had existed for years.
Why weren't we using them never was clear.

It didn't take long to realize the error,
even as some said the old way was better.
But flexibility had come at last it was clear,
No fixed-width and centered. No more do you hear?

A media query I typed at incredible speed.
My browser resized, could this really be?
It's working, it's working, I shouted out loud.
My site is responding I smiled all proud.

It changed it's shape as room would allow.
I laughed when I saw it then uttered a wow!
A smartphone there and a desktop here.
It's working, it's working, there's nothing to fear.

I spoke not a word and got right back to coding.
There's so much to do, my head was exploding.
So many sites to update and new ones to build.
My head filled with ideas, and it filled and it filled.

It was then that I heard way off in the distance,
A rumbling online that needed assistance.
Off like the wind Ethan flew out of sight.
Responsive coding to all and to all a good night!

Merry Christmas and Happy Holidays!

« »

Download a free sample from my book, Design Fundamentals.


  1. Brilliant description of when the Eureka insight transforms to the “Now, what?”:

    “I spoke not a word and got right back to coding.
    There’s so much to do, my head was exploding.
    So many sites to update and new ones to build.
    My head filled with ideas, and it filled and it filled.”


    • Thanks Alen. I’m glad you enjoyed the post. I did a similar one about seo and Google a few years ago and they are fun to write. Maybe I’ll write them more often even if my usual post day doesn’t fall on Christmas Eve.

Leave a Reply

Your email address will not be published. Required fields are marked *