Interactive calligram

by Rick Ligas

I must confess that I would not ordinarily think of a calligram in terms of search engine results. Laura Ruggeri however would. In fact figuring out how a calligram could effect search engine results was part of Laura's thinking when she set about designing a calligram to celebrate her (first) 25 years as a graphic designer and I am happy that she involved me.
Laura had the idea to create a "25th anniversary" calligram and post it as the home page of her website. At first it sounded straightforward: a block of text describing her projects would spell out the numbers "25" in color, but Laura wanted it to be more than that. In addition to the "25" calligram she also wanted the individual words to be links that showed corresponding examples from her portfolio - and the words would be something that she hoped the search engines would take note of, after all, she intends to be an active graphic designer for another 25 years.

So, with this specification she came to me and asked, "Can I create a square, fill it with text, colorize some of the words to create a 2 and 5 then add links here and there and have them show portfolio images when visitors roll over them? And do it in html and css and have that work in all the browsers?"

Well, I like a challenge so I said, "Ahhh, sure." It took a bit of work in HTML/CSS/JavaScript but the results are what I believe to be the first ever in the world interactive calligram, a calligram that responds to you hovering your mouse over it.

Give it a try on her home page:

There were a number of technical challenges to overcome, as there always are in HTML/CSS/JavaScript. For anyone interested in how we did it just view the page source. All the necessary HTML/CSS/JavaScript is contained in the page. We were able to make it work in recent versions of all the major browsers except FireFox on the Mac. And for that I created a special exception in the JavaScript.

Congratulations to Laura for her first 25 years of design and also for creating what seems to be the first ever interactive calligram.

Rick Ligas


Post a Comment

Popular posts from this blog

Bembo's Zoo