I hereby decree

by David LeMieux


Responsive Design
All the different layouts. 1) Large. 2) Medium Large (iPad Horizontal). 3) Medium Small (iPad Vertical) 4) Small (iPhone)

Continuing last years example I made another digital family Christmas card.

Last year I experimented with different HTML5 features including audio and canvas. That card was JavaScript heavy. This year I decided to try my hand at CSS and everyone's favorite buzz-work: Responsive Design. The result is a page with a lot of rectangles and images. Clicking (or tapping) each image will flip it over with CSS 3d transitions and show new content. The JavaScript used is minimal.

I had originally set out to use a framework or library like Twitter's Bootstrap. I found, however, that there was a certain amount of feature overkill for what I was trying to accomplish.

I also attempted to use CSS media queries to support Retina devices, but I failed miserably. Maybe next year?

I've made the code for both cards available at github. As usual, it only works in modern browsers, and even then only really in the webkit ones. I didn't want to take the time to make it compatible. Sorry.


blog comments powered by Disqus