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: www.LauraRuggeri.com

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

Comments

Post a Comment

Popular posts from this blog

Bembo's Zoo

Image
by Roberto de Vicq de Cumptich Very creative calligrams of animals using the font Bembo. The book published by Henry Holt and Co. is available on Amazon . But it's very interesting to watch the same calligrams "animated" on the website BembosZoo.com . Here the use of Flash, motion and sound add more character to each animal/calligram. "This high-concept abecedary, the picture book debut for de Vicq de Cumptich, should delight collectors of stylish picture books and aficionados of the graphic arts" —Publishers Weekly "In this first book for children, de Cumptich,... has created an abecedary of animals made entirely from bembo letterforms and punctuations marks-nothing els. And you know the conceit works." —New York Times It's just a joy to see these calligrams. Bravo Roberto!
Read more

Forsythia

Image
Finally spring arrived showing its first splendor with the forsythia! I was walking this afternoon and saw the yellow forsythia around the corner... it reminded me the famous concret poem by Mary Ellen Solt, Forsythia, composed in 1965 and published in 1966. “The design of Forsythia is made from the letters of the name of the flowering shrub and their equivalents in the Morse Code. The text is part of the design.” ~ Mary Ellen Solt " Forsythia by Mary Ellen Solt was typographically concretized by John Dearstyne. In the introduction to Flowers in Concrete , George Zadek writes: “Traditionally the typographer has given form and order to words, thus serving both the writer and the reader. His problem is mainly one of clarity of communication, literary meaning, and hopefully aesthetic contribution to the art of the printed page. When publishing concrete poetry, it is sometimes difficult to draw a line between the contributions, as well as the final responsibilities, of the poet and
Read more