{"id":144850,"date":"2013-07-29T00:54:39","date_gmt":"2013-07-29T07:54:39","guid":{"rendered":"http:\/\/css-tricks.com\/?p=144850"},"modified":"2017-04-13T16:45:31","modified_gmt":"2017-04-13T23:45:31","slug":"making-websites-for-geezers","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/making-websites-for-geezers\/","title":{"rendered":"Making Websites for Geezers"},"content":{"rendered":"

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<\/a>. Now now Michael is back with Mark (Hand Carved Graphics<\/a>) to share some more fun ideas from a recent project they worked on.<\/em><\/p>\n

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\u2019t 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. <\/p>\n

We recently worked on a website for the cover band Geezer (www.getoffofmylawn.com<\/a>). 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.<\/p>\n

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\u2019ll be covering here:<\/p>\n

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

    Click to View in Large Print<\/h3>\n

    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.<\/p>\n

    <\/p>\n

    It was achieved using jQuery onclick listeners that change the element’s class and inline CSS properties.<\/p>\n

    $(\".click-large-print, .decreaseFont\").click(function() {\r\n  var type= $(this).val();\r\n  var curFontSize = $('.content').css('font-size');\r\n\r\n  if ($(this).hasClass('click-large-print')) {\r\n    $('.content').css('font-size', '2.8em');\r\n    $('#click-large-print').text('Click to view in small print')\r\n    $('#click-large-print').removeClass('click-large-print')\r\n    $('#click-large-print').toggleClass('click-small-print')\r\n  } else {\r\n    $('.content').css('font-size', '0.8em');\r\n    $('#click-large-print').text('Click to view in large print')\r\n    $('#click-large-print').toggleClass('click-large-print')\r\n  }\r\n\r\n});<\/code><\/pre>\n
    The ‘click-large-print’ and ‘click-small-print’ classes are empty and only serve as identifiers for jQuery.<\/p>\n
    Not an earth-shattering idea or implementation, but it’s good for a laugh. Plus we’re just getting warmed up.<\/p>\n
    I’VE TUMBLD AND I CAN’T GET UP<\/h3>\n
    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.<\/p>\n