The Dutch magazine Print Power has created a truly magical cover for its latest issue with Layar’s interactive print. Scanning the cover with Layar brings the static cover to life with a truly awesome video of a magician doing several great close-up card tricks in less than 60 seconds. It’s really something to see!
When we talk about adding the “Wow” factor to your print, this is what we mean! This is a very effective implementation of Layar’s interactive print technology. The call-to-action in the upper right instructs the reader to watch as the magician on the cover comes alive.
The association represents companies and individuals involved in all parts of the magazine media industry, providing business strategies and emerging trends in an effort to improve industry skills worldwide. Each year it publishes its World Report focusing on the top magazine innovations, and this year, the entire report has been enhanced with the most exciting of these innovations: interactive print from Layar.
In the report, readers can see pages come alive with videos, social media links, interactive image carousels, Twitter feeds and even an embedded survey to vote for the most innovative ad. Check out the video above – featured as an ad on the inside back cover of the report – to see the interactive print elements of this year’s World Report.
“We’re very thrilled to be working with FIPP to bring the added value of interactive print to the 2013 Innovations in Magazine Media World Report,” said Layar CEO Quintin Schevernels. “As new print innovations increasingly gain momentum, interactive print is emerging as the leading way to engage readers and generate revenue opportunities that the print industry has never seen before.”
Welcome to HTML Week here on the Layar blog where we’ll be taking a look at some of the great ways you can bring print alive with HTML widgets in the Layar Creator. We’ll provide a closer look at how each example was built, and provide you with some resources to add similar techniques to your own projects. Each example we feature can be found in the completely refreshed and updated LAYARED Magazine! Get yours today and see how interactive print is creating more engaging reader experiences!
Today for HTML Week we are taking a look at one of our several ecommerce solutions found in LAYARED Magazine. Print is often advertising a product being sold, and now readers can buy items right off the page with interactive print!
We have multiple mobile shopping examples in LAYARED Magazine. On page 18, scanning the advertisement for a men’s briefcase brings up photos and information on similar products, and on page 22, you can interact with detailed information about the products found in the photo spread. But be sure to check out page 20 where things get really interesting!
Simple Shopping Cart
Everyone these days is familiar with an online shopping, and some may have even purchased an item from the mobile device via the web. In this example, we offer a way to bring the shopping cart experience in augmented reality with interactive print.
Essentially this example is a proof of concept, showing how the Layar App can handle “cookies” of information which can be translated into an actual shopping cart experience. On page 20 of LAYARED Magazine, you’ll see an ad for several products, including a wristwatch. Scanning with Layar displays two widgets – one for picking a color and adding the item to a cart, and one for viewing your cart info and proceeding to checkout.
When a user taps on one of the three color squares, the color of the watch in the magazine changes, much like in a traditional web-based shopping experience. This is accomplished with some simple jQuery code. There are many ways to accomplish this effect, but we chose the simplest route.
First we stacked the three different images of the watch on top of each other, but set two to be “hidden.” When a user taps on one of the colored swatches, the corresponding watch image is set from “hidden” to “visible,” and the watch which was previously “visible” is then made “hidden.” It’s a really simple, quick and easy way to showcase different colors of products with interactive print.
Tapping “Add to Cart” then stores the chosen product as a “cookie.” The top widget tracks the changes on this “cookie” and changes the number of items whenever a product is added to the cart. Readers can then tap the link to proceed to checkout with the shopping cart they have filled. In our case, it’s a dummy shopping cart so no product can actually be purchased, but it shows how a shopping cart experience can easily be implemented.
Layar behaves like a normal web browser, which means you can use normal HTML tactics to display different AR content based on user input, providing for a more personalized experience for readers. Here’s more about how this widget works:
Uses jQuery and “cookies” to save information.
Multiple “Add to Cart” buttons and widgets could be used.
More features and options could be added: color, quantity, size, design, etc.
The ultimate version of the shopping cart widget would allow one widget to be used throughout an entire campaign.
More: Photo Grid & Animated Ad
Of course, the shopping cart isn’t the only ecommerce example found in LAYARED Magazine. Check out page 18 for a dynamic photo grid and page 22 for an animated advertisement. Here’s a little more on how we made these great interactive items.
For the photo grid, we wanted to showcase some similar products to the one in the photo. Using similar jQuery tricks we mentioned yesterday with the Lonely Planet map, we created some slick animation effects and slideshows to provide more information about each product. Alternatively, you could add “Buy now!” buttons for each product and connect it with a shopping cart widget.
You can also create a slick photo slideshow with no HTML at all. Just use the built in Image Carousel widget in the Layar Creator! You can see an example of this widget in action in the image on the right. All you do is upload your images, put them in the order than you want, choose the size of the carousel and it’s ready to go!
The animated ad on page 22 was created to show off the possibilities of simple animation with jQuery. Tapping the button which appears on the page animates more buttons which hover over the various products. Tapping these buttons triggers slick animated windows that provide the reader with added information about the product.
Like a lot of HTML examples, it seems complicated but is actually relatively simple to create using the jQuery tactics we’ve gone over so far in HTML Week.
That’s it for today’s examples! Be sure to keep it here tomorrow as well as we wrap up HTML Week with our final widget example!
We’ve teamed up again with the World Wide Fund For Nature (WWF, or WNF in Holland) to bring interactive print to the readers of Panda Magazine.
It was almost a year ago that the WNF launched a campaign to promote its 50th anniversary using Layar Vision technology on a special postcard that showed a beautiful 3D planet Earth when scanned with Layar. They even got Game of Thrones star Carice van Houten to help promote it!
“WNF wanted to increase interaction with its donors,” said Mandy Vinkenvleugel of Label. “When we told WNF about Layar and the possibilities, they were very enthusiastic and wanted to try it because it’s an easier way for readers to get extra information.”
“It gives the content an extra dimension, especially when it concerns videos,” said van Luijk. “I like it that it brings the two separate worlds of online and offline a bit more together.”
Check out the slideshow of photos below!
Here’s more from our interview with Mandy Vinkenvleugel of Label, including how readers can see with more with Panda and her views on the Creator and Layar’s support staff!
“What I like is that we can show more content with Layar,” said Vinkenvleugel. “In the March issue, we published a spread about the retreat of Pasterze glacier in Austria. We show a photo from 1875 and a picture of the glacier in 2004. The difference is shocking, a lot of ice has disappeared. But the retreat of glaciers is a problem worldwide. With Layar, people can see 3 more examples of glaciers that have partially disappeared.”
“Label has been using Layar Creator for about 6 or 7 months now and it keeps getting better,” she adds. “The new HTML elements in particular are very nice. We usually ask our Layar contacts to check a campaign before it goes online to see if they have suggestions on how to implement things better, and they always come back with good advise.”
Publishers Weekly (or PW as it is commonly known), a leading American weekly trade magazine aimed at publishers, booksellers, librarians, literary agents and more, has added interactive print from Layar to its pages.
The trend is clear: the biggest names in the print industry think Layar’s interactive print is here to stay. Just take this headline from Publishers Weekly describing the interactive print content in the magazine: “Welcome to the future.”
“Publishers are looking for new technology like interactive print to connect with readers in different ways,” said PW publisher Cevin Bryerman. “Publishers Weekly is a leading publication for the book industry and discusses new technology trends, so we felt it was important to feature Layar’s interactive print.”
Scanning the cover of the most recent issue of Publishers Weekly, which features a young girl’s body health book, reveals an interview with the author and links to download an excerpt, meet the author and more. Give it a try yourself on the cover and these examplepages.
“The Layar staff has ben awesome and responsive to our needs as clients,” added Bryerman when asked about PW’s experience with Layar and the Layar Creator. “We are looking forward to using Layar in editorial and advertising in the future.”