Brand Thinking
Trending Topics
Advertising Blogging Branding Design Digital Cookbook Facebook Google Information Design Innovation Legal Industry LinkedIn Marketing Mobile Mobile apps On Branding Online Advertising Online Communications On Technology Print Communication Professional Services SEO Site of the Week Site Usability Social Media Social Networking Thought Leadership Twitter Video Web Design Web DevelopmentBrand Thinking Blog
Recent Posts
-
Making Text Interactive
Posted on November 17, 2011 at 9:03 am
Have you ever been exploring content on the web and wanted more information about a subject? Perhaps you have been reading a recipe and seen a simple statement along the lines of “1 banana has 105 calories.” Now, what if you wanted to calculate that with 2 bananas or 3? Normally, you would step outside of the article or recipe and calculate this yourself. A new Javascript library, Tangle, allows web developers and designers to put calculations inside of the page using adjustable text.
Now the user can change the number 1 to 2, 3 or 100 and the calorie count will update. In most cases, the transformable text will be underlined and highlighted in blue. Values can be changed by clicking and dragging left and right. This action is well demonstrated by Ten Brighter Ideas. The site has one adjustable value, the 20% under Item 1. As you adjust the percentage of US households that turned off lights in an unoccupied room, the rest of the document updates.
Another feature Tangle brings is inline information. A user can hover over any word with their mouse, strike a key, and Tangle will pull up the related Wikipedia article on that topic. Here‘s an example. Hovering over any word in the outlined block of text and hitting W on your keyboard will bring up information on that selected word.
Here’s the developer secret, variables. An initial adjustable variable is set in the sentence. Additional variables are continually recalculated as the variable is adjusted by the user. All of the work is done through specific HTML Tags and Javascript Functions. The rest of the page is coded and styled as normal.
The potential uses and capabilities for interactive text is growing. Check out the Tangle website and Tangle Pants for a few more examples. Finally, if you would like to play around with Tangle, visit the “Getting Started” page and start exploring how Tangle can make your text more interactive.
Write a comment
