Making Websites for Geezers

The following is a guest post by Michael Buchmiller and Mark Kearns. Last time we had Michael on, he wrote about executing a crazy idea he had to use decoder glasses on the web. Now now Michael is back with Mark (Hand Carved Graphics) to share some more fun ideas from a recent project they worked on.

Let me start off by saying that if you are looking for practical applications of CSS that could apply to any website and improve usability, this isn’t the article for you. If you are looking for creative implementations of code for comedic effect, and possibly inspiration for your next ridiculous project, then welcome.

We recently worked on a website for the cover band Geezer (www.getoffofmylawn.com). And yes, it’s a bunch of guys that dress up as old men, pass out Werther’s Originals candies, and rock the mike while playing covers and mash ups of songs by Weezer, Beastie Boys, and a host of others. I’m not generally a fan of cover bands, but what they do transcends the genre, and for them I make an exception.

Sure, they needed a website to post their concerts and news on, but more than that, they wanted something that reflected their brand of humor and captured the spirit of the band. They wanted something over the top. And that’s what they got. Aside from the general turn-of-the-century aesthetics, there were three features in particular of note that we’ll be covering here:

1. “Click to View in Large Print”
2. Their tumbling Tumblr link
3. (My personal favorite…) a page of blurry text dubbed “Geezer-Vision”

Click to View in Large Print

You know how some websites allow visitors to control the size of the body’s HTML text for better usability? That’s not what this is. Instead, clicking on the link blows the body copy wildly out of proportion for comedic effect.

It was achieved using jQuery onclick listeners that change the element’s class and inline CSS properties.

$(".click-large-print, .decreaseFont").click(function() {
  var type= $(this).val();
  var curFontSize = $('.content').css('font-size');

  if ($(this).hasClass('click-large-print')) {
    $('.content').css('font-size', '2.8em');
    $('#click-large-print').text('Click to view in small print')
    $('#click-large-print').removeClass('click-large-print')
    $('#click-large-print').toggleClass('click-small-print')
  } else {
    $('.content').css('font-size', '0.8em');
    $('#click-large-print').text('Click to view in large print')
    $('#click-large-print').toggleClass('click-large-print')
  }

});

The ‘click-large-print’ and ‘click-small-print’ classes are empty and only serve as identifiers for jQuery.

Not an earth-shattering idea or implementation, but it’s good for a laugh. Plus we’re just getting warmed up.

I’VE TUMBLD AND I CAN’T GET UP

If you watched television at some point in the last 30 years, there’s a good chance you are familiar with the ubiquitous medical alert services commercials targeting senior citizens and Mrs. Fletcher’s catch phrase, “I’ve fallen and I can’t get up.” If somehow you are not, it wouldn’t hurt to take a quick peek at the classic commercial.

The campy re-enactments combined with the unimaginable volume of airtime it consumed seared the slogan in to our collective memory.

There was never a question of if we’d try to work this in to the site somehow, but rather how would we do it. We discussed having a photo of a senior citizen that fell over on a hover state, but that seemed too expected. So instead we mashed up the idea with a link for the aptly named Tumblr. When you click on the Tumblr icon, the entire site rotates 90 degrees using CSS Transform properties and “falls” over. There’s a slight delay before the visitor is redirected to the band’s Tumblr page entitled “I’ve Tumbld and I Can’t Get Up.”

var tumblrbutton = document.getElementById('tumblr-button');
  tumblrbutton.addEventListener('click', function() {

  // Apply the "rotate" class to the body
  $("body").toggleClass("rotate");

  // This delays opening the Tumblr link for 1.5 seconds
  setTimeout(function() {
    window.location.href = "http://www.username.tumblr.com";
  }, 1500); 

}, false);

body {
  -moz-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

body.rotate {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

The code to make a site rotate isn’t anything new, but this is the first time I’ve found a worthwhile reason to use it. To make sure the icon didn’t go unnoticed, we added a little animation to the GIF to draw some attention.

As a side note, yes the band has sent this link to the folks at Tumblr, and yes, they did think it was hilarious.

HAND ME MY READING GLASSES, SONNY

A while back I wrote an article for CSS-Tricks.com explaining how I’d re-appropriated AnythingZoomer to work as a set of retro decoder glasses rather than as a way to zoom in on a photo. As we were working on the Geezer website, that was still kicking around in the back of my mind. The concept for it this time around was to have the History page filled with blurry text, and visitors would have to use virtual reading glasses to make any of it out.

See it in action at http://getoffofmylawn.com/pages/history.

Blurry Text

The first step was to figure out how to make HTML text appear blurry. This was accomplished with a CSS Text Shadow, but instead of making the shadow black and offset, it is a color very close to the text color and directly behind it, giving it a sort of glow.

.small p.active {
  color: #bca47f;
  text-shadow: 0 0 6px #4d250f;
}

Is my eyesight going? It’s getting more and more blurry.

We got that working, but as we were playing with it, we thought… you know what would make this funnier? If the text slowly got more and more blurry as you were on the page. Cruel and Kaufman-esque? Undoubtedly. But for Geezer’s target audience, we thought they would appreciate the gag. We pulled this off with more CSS Transform properties triggered by jQuery.

// Change the class to the final blur state to initiate the transition
$(".small p").toggleClass("active");

./* Default class pre-blur within CSS transition properties */
.small p { 
  -webkit-transition:color 9s ease-in, text-shadow 9s ease-in;
  -moz-transition:color 9s ease-in, text-shadow 9s ease-in;
  -o-transition:color 9s ease-in, text-shadow 9s ease-in;
  -ms-transition:color 9s ease-in, text-shadow 9s ease-in;
  transition:color 9s ease-in, text-shadow 9s ease-in; 
  font-size: 16px;
  width: 630px;
  color: #af9572;
  text-shadow: 0 0 1px #4d250f;
}

/* Final class with full blur */
.small p.active {
  color: #bca47f;
  text-shadow: 0 0 6px #4d250f;
}

Tying It All Together with AnythingZoomer

Now that the text is completely unreadable, we used AnythingZoomer to act as a pair of reading glasses and reveal the crisp version of the text. It is designed to transform small text with magnified, large text as you hover over it, and works with both images (like the decoder glasses project) and HTML text. Instead of going from small to large, here we are going from blurry to crisp.

<script src="/js/jquery.anythingzoomer.min.js"></script>
<script> 
  var zoomertimer;
  $(document).ready(function() {

    // timer to delay the start of the blur effect
    setTimeout(function() {
      $(".small p").toggleClass("active");
    }, 10000);

    // timer and function to delay anythingZoomer from cloning the zoom area BEFORE the full blur is reached but allow for mouse-over override
    zoomertimer = setTimeout(function() { zoomer(); }, 24000);
    $(document).one('mouseenter mouseleave', "#zoom", function() { 
      if (zoomertimer) {
        zoomer();
        clearTimeout(zoomertimer);
        zoomertimer = null;
      }
    });
  });

  function zoomer() { 
    $("#zoom").anythingZoomer({
      clone: true
    }); 
  }
</script>

/* Default class pre-blur within CSS transition properties */
.small p { 
  -webkit-transition: color 9s ease-in, text-shadow 9s ease-in;
  -moz-transition: color 9s ease-in, text-shadow 9s ease-in;
  -o-transition: color 9s ease-in, text-shadow 9s ease-in;
  -ms-transition: color 9s ease-in, text-shadow 9s ease-in;
  transition: color 9s ease-in, text-shadow 9s ease-in; 
  font-size: 16px;
  width: 630px;
  color: #af9572;
  text-shadow: 0 0 1px #4d250f;
}

/* Final class with full blur */
.small p.active {
  color: #bca47f;
  text-shadow: 0 0 6px #4d250f;
}
.zoom { display: block; margin: 0 auto; }
.large p { font-size: 16px; width: 630px; }
.large { margin-top: 75px; margin-left: 175px; }

We are already testing visitors’ patience with this page as is, so we made sure that this instance of AnythingZoomer spanned the width of our content to make it easy to just scan down the page without having to weave too much back and forth with the mouse to decipher the text.

Other Implementation Ideas

Don’t have a project where you need to make it easy to read intentionally blurry text? Who does? But all is not lost. If you take the concept and apply it in different ways, you might be able to find some other fun applications.

Archeologists, You Dig?

What if instead of the text initially being blurry, the copy was rendered in a foreign font? You could have users translating ancient Egyptian text just by hovering over it.

Conspiracy Theorists Unite

If the initial text state was set to be the same color as the background of the page, it could be invisible until you hover over it to reveal a secret message.

Thanks for reading about how we made a website for Geezers!