It’s a Smartphone Revolution! Are You In?

(Guest post by Nick Rojas)

Mobile computing is taking over the world the way few technologies ever have. Not only is it a safe estimate that more than 95% of the people you see everyday have a mobile device on them, but we are about to cross the threshold where there are more smartphones than there are people on Earth.

One of the strongest factors in the growth of smartphones is the power every app gives users. With them, users are able transform their device into a multitasking wonder with a tap and a swipe to complete. Virtually every company benefits from being on board with this philosophy, translating as much of their service as possible into a mobile app for convenience.

In the following graphic, we’ll provide some numbers that may surprise you about what makes the smartphone such a necessary platform for businesses to develop for, and how you should tailor your app to make sure it gets downloaded and used as frequently as possible. Whether it’s to pay bills, communicate, collaborate, or scan barcodes, many people can’t leave the house without their phone on them, and so it’s more crucial than ever to tap into this hungry, captive audience with your own mobile app.

Infographic Provided by SmartVirtualPhoneNumber.com

Working With Quote Services In LiveArt HTML5

Unlike many other plugins, LiveArt HTML5 provides flexible way to build your own quoting in online product designer. Any option or design element that is added to working area will affect the quote if it is required by the business rules of your solution. This article describes in brief how quote services work and provides an insight for integration teams.

The quote service is located in the main config.json file. Open the file and locate the line, which designates the endpoint that will handle the quote

"getQuoteUrl": "http://localhost/services/getQuote.php",

Since you would prefer to obtain quote dynamically, based on selections of user, you would place some sort of dynamic script into Get Quote service. Referring a static file, for example, would always return same price and totals no matter what the selections are and you would not want that.

Once the endpoint is set, use Fiddler tool, Inspector or Firebug to see what is being sent to the endpoint when the quote is requested. You would typically get the following JSON structure in POST request as “data” variable.

{
  "product":{ "id":"11", "color":"#FFF", "colorName":"White" },
  "locations":[
    {
      "name":"Front",
      "colors":2,
      "colorsList":["#4682b4","#000"],
      "designedArea": 384.60,
      "designedAreaRect": 480.50,
      "objects":[
        {
          "type":"txt",
          "designedArea":126.97,
          "colors":1,
          "colorsList":[
            "#4682b4"
          ]
        },
        {
          "type":"svg",
          "designedArea":258.63,
          "colors":1,
          "colorsList":["#000"]
        }
      ],
      "objectCount":2,
      "letterings":1,
      "images":1
    }
  ],
  "quantities":[{"size":"XS","quantity":1}],
  "namesNumbers":[]
}

While the product ID, color or location name would be an obvious variables, some of them require explanation, as below:

  • colors - number of colors used in design; this value is very usable for screen printing quotes. A “-1” value would mean the design contains photo or too many colors;
  • colorsList - is a list of hex values for each used colors;
  • designedArea - area in units (inches, feet, any kind you designate as part of Product JSON), occupied by design. The designArea is a sum of designAreas for each of the elements.
  • designedAreaRect - an area of rectangle, in units, occupied by all design elements;

Now once you obtain all that variables, LiveArt HTML5 would expect the following reply from you, the example goes below:

{
  "prices":[
    {"label":"Item Price", "price":"$29"},
    {"label":"Decoration", "price":"$15"},
    {"label":"Discount 0.25%", "price":"-$0.11"},
    {"label":"Total", "price":"$43.89", "isTotal":true}
  ]
}

All in all, you have just got little into Get Quote request, it’s structure, and the way it’s expected to work with LiveArt HTML5. Make sure to check our PHP sample code including reading variables and calculating color-based decoration fees.

Template Based and Variable Data Printing with LiveArt HTML5

In web to print business, it is often required that user can quickly order personalized product out of certain template which already has design elements created by professional artist. Such templates gallery may greatly help customer in visualizing their desired product and streamlining the whole process of ordering.

 

Template based printing may also prevent users from placing design elements in the unlikely position than can be close or in safe or trim areas. While implementing the least is also important for online web to print design tools, a fixed elements template would guarantee that the output would be fine to print without going back to customer for additional approval.

Variable Data Printing is extremely helpful for business cards companies, where user can simply create a batch order by simply selecting template, uploading company logo and sheet with people information. The sheet would contain variables such as name, second name, address and email and so on that will immediately populate on design. Implementing VDP benefits easiness to both customer and business owner as it makes the whole process faster, cheaper and bullet-proof valid.

LiveArt HTML5 Product Designer supports both template based and variable data printing. While integrating, business owner may set specific user flow rules and setup both normal and VDP products. Additionally, there is no need in learning specific software for creating such templates — everything is done within same simple product designer.

To apply for VDP or Template based printing please supply the following information:

  1. Product type you are going to print on.
  2. Pricing rules that are associated with user choices.
  3. How many and which variables will be required in each template.
  4. Applicable examples per each template and product type.

Our team will quickly get back with applicable package and assist with the setup. In future, you will be able to prepare own new templates and lists for VDP printing.

Best Of Online Product Design in 2013

Now that we are about to enter new year 2014, it’s time to remember what happened to us back in 2013 and what we’ve achieved with this great year.

— First and foremost, we’ve finally raised standards for online product designer that is totally cross-platform and compatible by releasing LiveArt HTML5 Online Product Designer. After almost half of year development and refinements we gave users ability to smoothly design their product from various tablets as well as desktop PCs. Yet still, our Flash-based products would please desktop users who prefer solid experience and quick integration.

— Our components started to get integrated into greater variety of platforms like Magento, WooCommerce, OpenCart and many others. Hosted shopping carts like BigCommerce or Shopify can now embed LiveArt HTML5 as a hosted option too!

— As custom decoration industry grows, so do our variety of the products that can be customized by our tool. A recent projects involving bottle opener customizer, online flag designer and do it yourself flask website proved that a design tool can be used to customize any printable or engravable product.

— Finally, our integration partners Peexl.com can now handle a number of ecommerce shopping cart integrations involving an outstanding Magento Community Edition as well as other popular PHP-based platforms.

We look forward to “unlock” new achievements in 2014 and would like to thank to all our clients and partners who stay with us and enjoy our online design products. Wishing everyone a Merry Christmas and a Happy New Year 2014!

Online 3D Design Preview In LiveArt HTML5 Product Designer

Modern online product designers feature realistic previews that are shown in real time. Whether you add text or upload own artwork it is reflected on a product just in a split second. While a flat preview might be sufficient for a printed products industry or stationary, promotional products like cups or uniform might require a better outlook. That is where 3D preview of a design might benefit much to final look and feel of the personalized promotional product.

Basically, a 3D design preview applies design onto a product model, allowing user to rotate the it in a 360 degree, while realizing how the end printed one would look like. A 3D product preview can be implemented for all types of LiveArt software, including LiveArt Lite and LiveArt HTML5 versions. Upon additional request, our team can build custom scenes for a product rather than allowing preview float in a space, which is the most simple implementation.

A realistic touch can be made for phone cases 3d preview, t-shirt 3d preview, mugs, cups, USB drives and a number of various products one can imagine.

Want a 3D Product Preview implemented for your project? Gather up a bit of information and let us know:

  1. Version of a product you are already using or planning to use. Applicable versions are LiveArt HTML5, LiveArt Shop and LiveArt Lite;
  2. A product type you would like to enable 3D preview for - t-shirt, cup, mug, banner, notebook, jewellery etc.
  3. Any additional preferences to controls or scene itself.

Today the personalization comes out of 2-dimensional into complete 3D, where one can 3D print small applicable things like phone cases. A 3D Product Preview or designer would benefit much to further augmented feeling of designing and engagement as well as customer love. Happy online designing!

 

Online Product Configurator with LiveArt HTML5

Having an online product configurator on a website is common for products that are open to customizable options, additional services or qualities. Product configurator captures user preference and helps in conveying it to order details. If the order itself requires more than just shipping product to the address, accurate configuration information is important for backend office of production. 

Most ecommerce websites support product options that are available to user. These could be color of the product, particular variation of it or extra support or service. The options may also affect pricing depending on the choice, provide discount and such. Related pricing changes may render online, giving customer precise quote for the custom product they are going to order.

While LiveArt HTML5 primary function is being all-in-one product designer, it can be also used for products configuration along with putting decorations like text and artwork. While state of the art ecommerce product configuration forms normally don’t allow user to preview the custom product, LiveArt HTML5 preview may change depending on the options chosen.

 

One of the prominent examples is uniform configurator, where normally customer’s goal is to select the colors of their team, upload logo and add some texts like team names. LiveArt HTML5 Product Designer provides shop owners with ability to build configurable products that can change their look as user tries various options. Coupled with the live quote system, product configurator gives user transparent and quick quote making ordering simple and robust.

Not only uniforms, but also other popular products like phone cases can be loaded into LiveArt HTML5 Product Designer for live configuration and decoration. Having a live configuration of the product would eliminate necessity to have heavy forms on your website and make the process easy and fun for your customers.

Going With HTML5 Web Applications. The Battle Price For Mobile

HTML5 serves as a #1 buzzword for a long time now and plays well for marketing a new generation apps. Despite being not fully supported by most of the browsers and having small backward compatibility support, it is highly demanded and well sold. The battle for mobile users plays as a great incentive for company stakeholders that spend significant budgets. They do it with the hope to get fast ROI and calm down the angry mob of mobile users that demand a Flash application they used to running on a smartphone.

Fortunately, HTML5 has shown its drawbacks immediately after first admirations subsided. HTML5 proved to be an expensive development for enterprise-level applications (like Facebook, who switched to native app development), although the internet is full of simple yet glamorous mashups and small utility apps.

When we first started development of HTML5 online product designer application, the QA and tests part of development started to take much more time than it was anticipated. Numerous browsers, platforms, mobile devices, at least 90% of them had to checked against each of LiveArt HTML5 feature. Aside of the touch functionality to work on tablet and smartphone devices, our developers had to continuously verify the look and feel to appear consistently across different resolutions. All of the above took much more resources than required for similar Flash application development.

No doubts, the obvious conclusion everyone will be able to make is that HTML5 development is much more expensive. Add responsive layout here and you will get at least twice as big budget for HTML5 than you would for Flash.

Another challenge is that unlike Flash player updates, which rarely affects much on the existing application, a release of new browser or iOS version may really ruin a day for your HTML5 application or website. While Flash player runs application in a “sandbox”, independent from other elements on your website, the HTML5 application consists of numerous components that work together to let end users feel a Flash-quality application. In Flash application, it’s responsibility of the Flash player to run your application in a correct way. In HTML5 application, it’s browsers responsibility to implement the web standards in a way to make the application work. Standards (like Javascript, CSS and HTML elements) are the ones that differ much in implementation in various browsers and platforms. What may work perfectly in iOS Safari would completely hang up your desktop PC under Firefox, a behavior you will never meet with Flash.

We are not advocating Flash here. As we all know, HTML5 is good because it works on mobile. You want to stay in business, you do the HTML5. It’s expensive, it’s painful in development, but in the end it will pay off in increased audience, become your love mark and keep you in the market.

Considering a Custom Web to Print Solution for Your Printing Business

Going with online product designer for your business is a serious step, especially for brick-and-mortar businesses that have already established themselves on local markets. Becoming a global company that accepts orders online is totally different as you may deal with other type of customers and new challenges. Yet, going online has significant reward in increased revenue and orders coming from all over the world.

Costs involved and expected ROI

The first thing to consider would be the budget, required  to have an online design software enhancement. Study the market and get an idea of what it would cost to get the software deployed for your website. A lot of forums are discussing the available solutions that may or may not work for your particular business.

Another helpful thing would be to gather the necessary requirements for the custom user scenarios you might require for your web to print system. Comparing these against available features of online product design software would help in making the right decisions.

Whether you have an existing website or just plan to have one, defining a budget depending on planned ROI would help in looking for solution that will fit. We assume you already have printing equipment and learned already about existing ecommerce platforms available on the market.

Users of the future system

Looking at the available tools on the market, it is best to envision your average customer using such tools to customize and buy a personalized product from you. Learning about common questions, patterns of behavior and problems is crucial for implementing the web to print technology successfully. It may be also helpful running a survey across the existing website or polling users. The survey results will answer questions like whether designing their product online would be more convenient than using traditional method. If you are using phone operator or in house artist that works on customers’ designs, think whether your customers would feel better with a self-service online design application instead.

Streamline factor - will orders be processed faster?

One of the main benefits you get with web to print system is lowering the costs for each received order. Rather than having a person talk to a customer and prepare a design according to customer’s vision, online product designer allows users to place an order personally without applying for service or talking to anyone. Before implementing a web to print system, think of your present business process and whether deploying online design tool along with ecommerce website would help streamlining existing orders thus lowering the costs and allowing the business to scale.

Bear in mind that you would still require personnel to run the system, accept and process orders and troubleshoot possible questions coming from customers. Make sure to provide adequate training for them when the system is in place and ready for launch.

Products compliance

Some of the most popular promotional items that can be easily deployed for online design software are t-shirts, jerseys, mugs and such. You can find lots of blank images across the Internet, either worn by models or seen plain, and prepare a catalog easily. The customizations such as gallery artwork, text or user uploaded image are seen clearly and perfectly work as live proof. However, certain products require more complex customization and modification of the web to print software itself. Such products may concern printing business that produces signs and banners, business cards (including Variable Data Printing), and complex items requiring 3-dimensional visualization as shoes or gift boxes.

Prepare a plan

Taking available budget, existing customers, streamline factor and products you sell into account is important in order to take some final decisions. Despite having an online product design system for a printing business becomes a firm trend for over 10 years already, one should clearly evaluate and plan such advance ahead.

Accurate budgeting, planning and overall readiness for web to print system implementation would help your business make a solid step forward and get to the next level, acquire new markets and make your customers happy.

5 Common Mistakes When Implementing Online Web to Print Solution

There is no doubt - web to print solutions are becoming common for printing businesses today. They efficiently streamline orders, make proof process easy and reduce costs for each order production in general. If implemented and promoted properly, they generate lots of customer satisfaction especially if online product designer supports smart mobile devices like smartphones and tablets.

Yet, implementing a web to print system is a challenge, both organizational and technical, ergo should be treated in respective way. One should evaluate the task of building a web to print solution for their business carefully before doing any final decisions or starting a promotional campaign in social networks. Let us look at common 5 mistakes one may encounter when diving into web to print offers on the market.

1. No research

While it is common for any beginning, a lack of preliminary research may result in unexpected results after deployment of web to print system. Each business has its own specifics, own ecommerce platform, products, customers audience and so on, which means that you should look for particular vendor and solution that would fit your business and guarantee ROI after implementation. We recommend checking these posts for more information and brief checklists that would be helpful.

2. No personnel to fulfill orders

Implementing a web to print solution to your website without being ready with personnel that will accept and process orders is equal to a failure. While online product design solutions will simplify the process they would still require someone to keep an eye on how the orders are processed and delivered for fulfillment. Make sure you have hired the right person to do this job, report on possible problems and run the web to print system.

3. Poor products selection

Sometimes the personalized products just don’t fit the concept of web to print system. One should consider and ask themselves questions regarding the personalized product:

  • Is my product personalization clean and visible to my customers?
  • Would the product personalization become easier to customers than it was earlier (by phone/email)?
  • Are there any options of the product that might confuse my customers?
  • Are the proofs, given by web to print studio, sufficiently clear and understandable?

Lack of products preparation is a common mistake when implementing design studio as part of web to print system. Make sure you have checked out our post on effective proofing and product preparation for your web to print system.

4. Lack of resources and patience to launch the project

Although launching a web to print system can be really instant fast with hosted solutions, it is often a mistake to expect immediate positive result, customer appreciation and sales boost. Launching a system is not an end in itself, but rather a beginning of lifetime journey your business would board on. Product images support, unique and nice fonts, ready-made design templates, available gallery clip art - all of the above requires resources to be gathered, prepared, checked, uploaded into the system and maintained on a regular basis. It is common that lack of patience often makes customers turn off the logo designer studio and navigate away from your website if they suspect the job not done. Getting resources ready for your online product designer part of the web to print system would prevent user confusion and frustration from the new tools on your website.

5. Failing to count in resistance to change

While not fully a mistake, a business owner should always think of loyal and frequent customers and the way they are used to order their personalized goods. Think of a friend of yours, who would come into your website one day and see everything changed - will they be disappointed or would like the change on your website? Will they like the new way they personalize product, assess proof and checkout? Since there is always a room for change resistance, make sure you inform users well and provide sufficient instructing materials to make transition as smooth as possible and convert change resistance into satisfaction, wow effect and sales boost.

Converting LiveArt HTML5 Online Design Studio Output to Other Formats

LiveArt’s HTML5 Online Design Studio offers cutting-edge mobile experience on iPhone, Android and Windows mobile platforms and uses most of the up to date web standards including SVG. To support the industry demand of high quality output from online product designers, we have implemented SVG as core technology of LiveArt HTML5.

While SVG is supported by majority of the browsers and mobile platforms, it is often necessary to produce lower resolution images as design previews or proofs. The most common scenario is a small thumbnail in a shopping cart that will assure user he has ordered the exact design. For other production purposes, other different images and formats might be required.

Since most of the backends are unix or linux based, our team recommends the following tools to do best for SVG conversion job:

  • ImageMagick - the most popular and very powerful conversion tool. The convert command is widely used for different conversion and can do simple SVG conversions as well.
  • rsvg - a highly-specialized library for SVG processing. Recommended for use if you have complex designs, uploaded images and custom fonts (see also note on custom fonts below). rsvg is also a common delegate tool for imagemagick convert as well.
  • Inkscape - a popular free SVG editor. While we recommend using it as editing tool to convert LiveArt output into different printing formats, it also available for usage as command-line tool for conversion.

If custom fonts are used inside SVG design, make sure to have them installed into the backend system BEFORE you are running the conversion tool. This would ensure your converted output would keep the original fonts inside the designer.

If you are planning to use SVG in a traditional graphic software like Illustrator or Coreldraw, make sure you also run a short checklist to get your output prepared for that:

  • Copy all externally referenced images locally. Ideally, place them into the same folder as your original design;
  • Install the custom font used on your system;
  • Since SVG is open and understandable text formatted file, open it with a text editor. Replace all absolute xlink:href references to local files you have prepared in previous steps;
  • While the design would look exactly as you have designed it in browser, be prepared that professional software may displace certain elements like text. Looks like software grands are still learning to support web standards.

Let us know if the above pieces of advice were helpful to you. Good luck and happy online designing!