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

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

Calligrams for a calm like nothing else

Image
by Joni James I started my journey in calligraphy when I was in my early 20's and living in Alaska. Often asked to make name place cards or inspirational quotes for people, I began taking classes when I returned to the Seattle area in 1984. I was always fascinated with calligrams but never really made any until this year. One of my favorite artists is Picasso, so I was thrilled when I did some searching for calligram information and discovered that Guillaume Apollinaire was a friend of his! For me, more then any other art form, making these calligrams gives me a calm like nothing else . I can feel the rhythm of the words as I create and the white space tells me what to do next. I'm so thankful to find other calligram artists! It's a beautifully unique form of art and can be used in so many ways! 1932 Ford Coupe Calligram This was made especially for my uncle and I sent it to him as a surprise recently. He was thrilled! Motherhood and Pregnancy Calligram...
Read more

Woman's Day

Image
Go out  Federico Gene Advertisement for Woman's Day Magazine, 1953. All rights reserved. [...] Federico’s best-known ad for Woman’s Day typifies this rhythmic sensitivity. It has the catch-line “Go Out,” and shows a photo of a woman riding a bicycle with wheels made from the two lowercase Futura ‘o’s in the headline. The aim of this ad was to persuade potential advertisers that three million-plus devoted readers went out of their way to buy this check-out counter magazine. The ads apparently did well for the client, but more importantly proved the power of persuasive visual simplicity in a field that often errs on the side of overstatement. [...] From  Gene Federico: The Art Director’s Art Director  by Steven Heller. Read more info about Federico Gene on  AIGA and  New York Times .
Read more