The A List Apart Blog Presents:

Responsive Web Design Easter Egg

Article Continues Below

Three years ago in these pages, ALA technical editor Ethan Marcotte fired the shot heard ’round the web. ALA designer Mike Pick thought it might be fun to celebrate the third anniversary of “Responsive Web Design” (A List Apart Issue No. 306, May 25, 2010) by secreting an Easter Egg in the original article; our illustrator, Kevin Cornell, rose to the challenge.

To see it in action, visit alistapart.com/article/responsive-web-design, grab the edge of the browser window (device permitting), and perform the responsive resize mambo. (ALA’s Tim Murtaugh, who coded the Easter Egg, has provided a handy video demo of what you’ll see.)

19 Reader Comments

  1. Ha! Nice! I’ve often thought of that gesture as either “beeping” or “marcotting” but “Responsive Resize Mambo” works, too.

  2. This is not a typical responsive case because it is implemented by javascript but not css media query.

    Perhaps I can guess why @Tim Murtaugh did so. Because there are 4 JPGs totally costs 351KB and media query can not download only one that required. It’s a disaster for mobile performance. Am I right?

  3. Truly nice, but an “easter egg” should not be… secret? Someone else would have to find out, not you 😉

  4. That’s awesome. I’m gonna be up late again tonight coding some Easter eggs of my own into my new portfolio site. Thanks for sharing.

  5. That is so awesome! We do responsive clients for every one of our designs as you can see in our portfolio at http://www.cohesivewebdesigns.com but I had never thought about having the images change with every section! That’s awesome. Would you mind sharing the code that makes that possible?

  6. Really nice concept with the alternating images! My web design agency in Leeds, UK are working on a couple of responsive Drupal websites with an illustrator and doing something similar – totally different art style. Much more graceful than these jQuery parallax scrolling sites that are trending all over the place.

  7. Welcome to Digital Group Media we’re a small but effective team focused on creating the most effective web design Birmingham has to offer. We’re completely fixated with website design that doesn’t just look good, but delivers results for your organisation.

Got something to say?

We have turned off comments, but you can see what folks had to say before we did so.

More from ALA

Design for Amiability: Lessons from Vienna

Computing was born in a Viennese café. Between 1928 and 1934, while Hitler plotted and Europe crumbled, a motley crew of mathematicians, philosophers, architects, and economists gathered weekly to puzzle out the limits of reason—and invented Computer Science in the process. What made their collaboration possible wasn't just brilliance (though they had plenty). It was amiability: the careful design of a social space where difficult people could disagree without destroying each other. Longtime A List Apart contributing author Mark Bernstein mines this forgotten history for lessons that might just save today's embattled web from its worst impulses. Spoiler: it involves better coffee service and the looming threat of public humiliation.

From Beta to Bedrock: Build Products that Stick.

Building towards bedrock means sacrificing some short-term growth potential in favour of long-term stability. But the payoff is worth it: products built with a focus on bedrock will outlast and outperform their competitors, and deliver sustained value to users over time. Liam Nugent shows us how.

User Research Is Storytelling

At a time when budgets for user experience research seem to have reached an all-time low, how do we get stakeholders and executives alike invested in this crucial discipline? Gerry Duffy walks us through how the research we conduct is much like telling a compelling story, complete with a three-act narrative structure, character development, and conflict resolution—with a happy ending for researchers and stakeholders alike.

Discover more from A List Apart

Subscribe now to keep reading and get access to the full archive.

Continue reading