Grow your CSS skills. Land your dream job.

Making Websites for Geezers

Published by Guest Author

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!

Comments

  1. Great read, loved the “Geezer Vision” page and the overall look of the website.

  2. Thanks for the code on “HTML text appear blurry”. I will use it my own blog.

  3. Permalink to comment#

    …I try not to comment when I have nothing useful to say, but I love this so much I just had to. Awesome.

  4. Cooper
    Permalink to comment#

    The irony is that in writing about the design done with “geezer references” (blurry type etc.) the article for this site is set in horsey 16pt type and a 1.4 line height (according to my inspector). Which makes it legible almost 5 feet from a monitor! Was the article designed with “geezers” in mind too?

  5. Shabba Doo
    Permalink to comment#

    Here’s one for you:

    Ex nihilo

    Alea iacta est

    Audeamus

    Res ipsa loquitur

    Non omnis moriar

    Tohuvabohu!

  6. Camaron Ornelas
    Permalink to comment#

    Great article, I rofl’d through most of it realizing as well how excruciating it can be to achieve a perfect reader website, considering that your reader may have bi-focals.

  7. Future Geezer
    Permalink to comment#

    I wish you would have articles about designing websites to be accessible for older people for real instead of this nonsense. We’re all going to get there sooner than we think, and the eyestrain and carpal tunnel isn’t going to be funny then.

    • Nonsense? NONSENSE?! Seriously, did you say nonsense? I’m a little hard of hearing. Don’t belittle our grandsons’ work, sonnyboy. If you can’t say anything nice, come to one of our shows. You’ll fit right in. Cheers ,Geezer

  8. Permalink to comment#

    nice thing to attract ppl
    but I won’t use it for reading. It’s hard for eyes.

  9. ADR
    Permalink to comment#

    It’s a cute idea, but I had a lot of trouble getting the “geezer vision” to activate. You have to mouse in just right. I highlighted some text, thinking that would help, and the whole page jumped to the right! Not to mention there isn’t hover on mobile devices and I couldn’t even read the history on my phone.

    I know I’m nitpicking, and that the site is supposed to be very tongue in cheek, and perhaps making a site which mimics the difficulties that an elderly person might have reading on the web is useful and funny to some. However, the irony is that on most of my sites I set the default font-size and line-height much larger than the “large type” version here.

    I certainly feel like a downer for saying so, but I think the concept is great but the execution is poor. A little too gimmicky. I wouldn’t usually comment like this, but CSS-Tricks always has great articles and relevant information, and I really respect it. I must be in a weird mood today because I can’t help but think that this site example does nothing to help move the medium of the web forward; it feels entrenched in the past — something from the last decade.

  10. samxim
    Permalink to comment#

    i can understand css but can not read js!!!

  11. Ok, after looking at the Geezer site, I had to bookmark it into my “Way Cool Websites”. All I can say is the mind that created this site, Genius!

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".