Everyone is talking about web-to-print systems. In this article about our client Utsch24.de, we’ll take a closer look at exactly how our printformer can be used in a practical and straightforward way.

Every car has one, yet it rarely gets a second glance: the license plate. Behind it all is Erich Utsch AG in Siegen, where millions of license plates are manufactured each year for customers around the world. For over five decades, the company has been the global market leader in technologies and comprehensive system solutions for the production, personalization, registration, and identification of license plates. In addition, the company offers a wide range of products, such as blank license plates, vehicle recycling systems, laminators, and laser coding equipment. Alongside traditional license plates, the product lineup also includes “windshield labels,” license plate holders, and FUN signs.

How can a license plate manufacturer use our web-to-print system? Utsch AG, in collaboration with the agency dotfly, has developed a creative service for its private customers: an online store where users can design a custom license plate holder, a personalized license plate, or a decorative “FUN” sign. Clicking the “Configure” button opens our modified HTML5 editor in a mobile-first version, making it usable on a tablet.

The idea behind Mobile First is that the layout works on mobile devices first. Until now, optimization for desktop screens has been the top priority. This means that the Mobile First version is limited to the essentials. The clear advantage here is that there’s no need to use an additional app.

Let’s take a step back: how exactly does the Web2Print system work as a “business tool”? Using the printformer, quotes can be generated for any print product. The system is universally applicable across the entire printing industry, allowing settings to be flexibly adapted to the specific product. Thanks to the printformer’s API functionality, the calculator can be embedded into any external system; at GGP Media, this is the Magento shop system. Before calculating, there are two options: predefined price lists and configurable functions. First, an Excel file with predefined prices can be imported, and our Web-to-Print system links these to selectable properties. This allows price combinations to be customized for each customer. Alternatively, properties can be defined in the admin panel, where an option—such as book finishing—is linked to a specific price. Depending on the settings and the quantity of the product, the price changes automatically.

The printformer therefore serves not only asa design tool, as is the casewith the online store Utsch24.de, but also enables quick and easy pricing of books from GGP’s 18-kilometer-high book tower.

To give you an idea of where web-to-print is used and how our printformer can be utilized, I’ll be showcasing a few projects with our clients on this blog.

Symbolically speaking, a tower of 1 million printed products, 18 kilometers high, is created every day at GGP Media. Eight books are produced every second. This requires 70,000 tons of paper annually, which is equivalent to an area the size of the state of Saarland. The large-scale printing plant has been part of the Bertelsmann Printing Group since early 2016. GGP Media offers a wide range of services: prepress services, production of e-books and print products such as brochures, paperbacks, catalogs, and flyers, as well as finishing and logistics.

When you hear the terms "print jobs," "prepress services," and "catalogs," web-to-print can’t be far behind. And that’s exactly the case. At GGP Media, our printformer is used as a powerful calculation tool for massive quantities of paper and countless print products. The Web-to-Print system is used, for example, to calculate the cost of a book with all its specifications, such as page count, material, and finishing. Once the selection process is complete, a PDF file is generated and saved as a quote. Presenting a binding quote to your customers is a time-consuming process; with the calculator, GGP Media can show in just a few minutes how much it costs to produce a book.

The past year has been both exciting and challenging for us in the field of editor development. As our client base expanded, we had the opportunity to gain valuable insights into new industries and, through our clients’ visions, gain additional experience in the field of 3D visualization.

For the first version of our web-to-print editor, Adobe’s Flash platform was our platform of choice. The deciding factor was the ability to implement editing functions, such as text or image manipulation, directly in the browser and to develop cross-browser compatibility relatively easily. While native browser development using HTML and JavaScript was technically feasible at the time, the HTML standard did not yet meet our high standards for developing a sufficiently powerful editor.

However, the introduction of mobile devices—such as Apple’s iPhone and, later, the iPad—heralded the gradual decline of Flash technology. Some of the reasons behind this trend included poorer performance on tablets and smartphones, as well as the complete exclusion of Flash from all Apple mobile devices. We therefore decided to transition our existing Flash-based editor development to HTML5. Our primary focus was now on implementing all functions available in Flash using HTML and JavaScript and adapting them to the new development environment. In addition to accommodating the numerous browsers, our developers also had to grapple with the transition from ActionScript (Flash) to JavaScript at the outset. However, thanks to new approaches, overcoming these natural hurdles was ultimately only a matter of time. Looking back, our consistent decision to rely on HTML5 for editor development was the only right one. The e-commerce sector and the associated product customization for mobile devices are now indispensable in their current form and are already considered standard by most consumers today.

The topic of 3D in Web2Print is a hot one right now. Many consumers want to be able to get an even better visual sense of the product they’ve designed in the editor. In my opinion, there are certain industries—depending on the complexity of their respective products—that can benefit more from this added value than others. The “packaging” sector is a prime example here, as the option to use an additional 3D preview experienced a veritable boom last year. We are observing a trend here where more and more online printers are expanding their product portfolios to include the “packaging” category, and standalone portals dedicated to the “packaging” sector are increasingly emerging. While the focus remains primarily on the B2B sector, the B2C sector is also offering increasingly diverse opportunities to gain a foothold in this industry.

From a technical standpoint, implementing a high-quality 3D preview in a browser poses a major challenge. For this reason, it has not been possible until now to generate a real-time image of the product and then overlay it onto a three-dimensional object. To make the most of the technological possibilities here as well, we phased out our previous editor last year and developed a completely new solution from the ground up, which now also relies on HTML5 but is built entirely around the HTML5 Canvas element.

You can think of this HTML element quite simply as a canvas on which text, shapes, and images can be placed. With the help of Canvas, we can now generate a representation of the customization and then overlay it directly onto a corresponding 3D model. In addition to this, Canvas offers us a number of other advantages. For one thing, we are no longer dependent on HTML for text functions as we were before, and for another, we can achieve improved editor performance by minimizing DOM elements.

In conclusion, I believe that we have made significant technological strides over the past year, and as a result, our “printformer” is ideally positioned to address the many future trends in the fields of “web-to-print” and “mass customization.”