Suitsupply, a fast growing international fashion brand that GQ calls “purveyors of attainably priced — but exactingly crafted — tailoring and sportswear,” has launched its spring catalog with something extra this year – interactive print from Layar!

The well-known brand is internationally recognized for its award-winning marketing campaigns. This spring, to keep with this strong reputation, Suitsupply has enhanced its brochures in the U.S. and Europe with the help of Layar partner Limebizz. 

The brochures are completely shoppable thanks to Layar’s interactive print. Scanning the brochure brings up links to purchase the various fashion items available from Suitsupply, as well as behind-the-scenes videos from the very artistic photo shoots.

The brochures are available internationally, but have also been distributed as an insert in FD (Het Financieele Dagblad), the leading Dutch business newspaper. It’s a great example of how interactive print can add an engaging layer to any print product. Check out some of the examples below from our fashionable friends at Suitsupply!

^{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.

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!

^{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!}

Next up for HTML Week we share a really great way to get readers interacting with your print products: maps! Whether you’re providing travel information about far off locales or just trying to help people find your local business, a map does the trick best, and a little interactivity can go a long way!

The interactive map that we added to the “Lonely Planet’s Travel Guides Just Got Better” article on page 12 of LAYARED Magazine is a perfect example of using interactive print to provide extra detailed information to readers.

Just scan the page and up pops a map with different locations throughout the world highlighted. The cities are from Lonely Planet’s annual list of top destinations. Tap one of the icons and photos and links for more information slide out of the bottom of the map. Each city features a YouTube video, links to airline and hotel services, additional country information and a link to download the Lonely Planet app.

Like the Superhero Puzzle from yesterday’s post, this example uses jQuery to produce the animation, namely the “.animate” function. Here’s how we did it.

The points on the map were placed “by hand” with CSS on their corresponding positions on the map. It’s a little time consuming to get right, but easy in the end. The smooth drop effect for the info pane was made using only simple jQuery code. After the map fades in, the info pane fades in behind it, remaining out of view.

When a user taps on one of the map points, three things happen. First the map point becomes white, which is accomplished simply by switching the image with an alternate white version. Second, the pane is dropped by using the jQuery “.animate” code function to increase the top margin. And lastly, all of the elements in the info pane, corresponding to the country map point that was clicked on, are loaded into the pane. When a user taps “View More,” the preliminary content fades out and the new slideshow content fades in.

The slideshow is also very easy to build using a trick with the “overflow:hidden” option for HTML “<div>” tags. Essentially, we created a smaller window ”<div>” through which a larger ”<div>” with the content passes through. That’s just how we did it, but there are lots of ways to create slideshows with basic HTML. Check out this resource for tips.

^{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!}

To kick off our series of HTML Week examples, we’ve got some fun that everyone can enjoy – puzzles and games! Adding some entertaining interactivity to otherwise static print makes for a more enjoyable reader experience, increasing the value of your publication.

Newspapers, magazines and other publications have long included simple crosswords, word jumbles or sudoku puzzles, but now things can get really interesting with interactive print! Check out the two examples below which can be found in the new LAYARED Magazine.

Drag-n-Drop Puzzle

The Drag-n-Drop Puzzle (found on page 8 of LAYARED Magazine) is a quick and easy way to add some fun to any kind of content. By simply cutting up an image into as many parts as you like, you can create a puzzle for readers to solve by dragging the pieces into place on their smartphone or tablet.

This example shows off the “draggable” capability of jQuery. It’s straightforward and easy for readers to understand – first you see one piece float up and snap into place, and then you have to do the same with the remaining pieces. Here’s more about this HTML example and how to make your own.

• Puzzle Pieces are created by splitting any image of choice into desired sections.
• Pieces are made “draggable” by using the “touch-punch” plugin explained and found here.
• Draggable and Snap UI can be found here.
• You could alternatively allow all puzzle pieces to be shown immediately from the beginning.
• To create a smoother look on the Layar App, the “light beam” effect (when the puzzle is loaded) was made using only jQuery and two images of light beams.
• The widget also offers a “Play Again?” button that refreshes the widget.

The Drag-n-Drop code may sound complex but the idea behind it is simple. First we placed a black-and-white version to serve as the area where all the puzzle pieces would end up. This doesn’t have to be done but we thought this would make it easier for users to see where they would be dropping puzzle pieces. If you want to have the puzzle snap into place above the physical image in your print content, simply remove the background image.

The way the snap feature works is one HTML “<div>” snaps onto another. For this puzzle to work, all you have to do is make one image snap onto an invisible copy of that image.

You need a piece to drag and a piece to snap onto and they need to be the same, so you just duplicate your puzzle pieces. You should have two of each piece, those for the user to drag and the others for them to snap onto. You then place the snap pieces where you want the pieces to fit together, but make them invisible, otherwise it will look as if the puzzle is already put together!

Now, when you drag the other visible pieces over the invisible ones, the drag designated pieces will snap into the correct place. Since the invisible images can’t be seen, it will look like the visible pieces are snapping into place on top of the black and white background, and presto! You’ve got a really fun and interactive puzzle game with very little effort.

Scratch-Away Game

People love scratch-away games of all kinds. The Scratch-Away Puzzle (found on page 27 of LAYARED Magazine) implements this brand of fun in AR. After scanning the page with Layar, readers simply scratch away at the puzzle to reveal the hidden message. Here’s more about this widget:

• Uses Canvas and Javascript, which you can find here.
• Users essentially scratch away normal image to reveal solved image below.
• Alternatively, a drawing feature could be added so that user can “paint” onto a canvas.

The Scratch-Away Puzzle may seem like complicated code, but it isn’t. The way we use the Canvas in our demo is by first layering two images on top of one another. One is the picture you see at the beginning, and right below it is the image with the appropriate letters blurred.

When you drag your finger across the screen and “scratch” it, you are actually erasing the front image and revealing the image behind it. It’s really as simple as that. This code can, of course, be reversed or a paint element could be added to create a canvas where a user can draw anything that they want.

That’s all for Puzzles and Games found in LAYARED Magazine. These examples were built with very basic HTML tools and techniques, but can add a lot of great interactivity to your print products!

Stay tuned here on the Layar blog throughout HTML Week for more great examples!

This week is a special one here at Layar – it’s HTML Week! Over the next few days you’ll be introduced to the world of possibilities created by our recently released HTML widget for the Layar Creator.

The HTML widget lets you embed a frame of HTML on top of print content which anyone can then view by scanning the page with Layar. It opens up nearly endless possibilities for interactive print, and we’re going to show you just what you can do and even how to do it.

Each day for the rest of the week, we’ll be posting some great examples of how the HTML widget can help bring print to life in a whole new way. We’ll even share the plugins and tools we used to make it possible.

To kick things off, we’re introducing an entirely revamped LAYARED Magazine, which has been loaded with great HTML widget examples. It’s the same print magazine as before (with some updated stats) so if you have your own copy, just scan it again today to see all the new content. Don’t have your own copy? You can order one, download a PDF or view it online here!

Here’s a look at some of the examples from the new LAYARED that we’ll be going into more detail on this week.

• Full Mobile E-Commerce Experience
  Now you can provide a complete mobile shopping experience directly from the pages of a magazine! You can switch through various product options, add items to your cart and proceed to checkout.
• Fun Puzzles & Games
  Adding a bit of entertainment to your print is easier than ever, and it’s way better than a simple crossword or sudoku. We show a few quick examples of interactive games that can be easily built in the Creator.
• Interactive Lonely Planet Map
  This clickable interactive map shows you hotel and flight information for some of Lonely Planet’s hottest locations around the world. It’s an excellent example of how you can provide more info to readers in an engaging way.
• Layar Creator Step-by-Step Guide
  Our infographic spread showing the steps to using the Creator to launch a campaign comes alive with interactivity, taking you on a guided, click-by-click tour through each step.

Order your copy of LAYARED Magazine here, and stay tuned here on the blog this week to learn all about the power of HTML in interactive print!