PlanetPress Connect: Designer

Erik van Heuvel is the mastermind behind Objectif Lune’s newest designer. Many people who have used both PrintShop Mail, PlanetPress, and maybe dabbled in PrintSoft knows that for each software, you would need to know a different designer. Albeit, each tool was intended for different audiences, it wasn’t the type of elegance Objectif Lune was known for. So with our newest technology – OL Connect, this is about to change. And Erik was tasked to combine the best of three worlds into one. And I think he’s done a pretty good job. So how does the new stand against the old? Erik gives us a run down on why the new designer reigns superior.

What’s your favourite new feature?

My favorite thing about our newest generation of products is the fact that I can use a single skill set across different channels supported by the software. Although each channel (print, web, email) has its own design/layout challenges, the user can fall back on a solid foundation. These include a single approach to extract data using the DataMapper, having a powerful scripting language (JavaScript) and a wide range of layout features. Hooking things up with our existing PlanetPress Watch workflows provides the user with an extensive and powerful toolset to automate the personalization of print, web and email output. Combining the different channels makes it even more impressive.

But if I were to pick an individual feature, I would definitely have to say the loadhtml() and loadjson() scripting commands of the Designer scripting API. It allows you to retrieve content and layout snippets from external systems. This plays extremely well with Content Management Systems like Alfresco, Drupal and WordPress. In fact any system capable of serving content via an URL.

I also fell in love with creating HTML email templates. When creating such templates in the new Designer, it’s a blessing to be able to send test emails from within the application after making some changes.  And with the Send Test Email dialog I can do so easily. It allows you to send a test copy to yourself and others.

What differences can a user see now that he is creating templates directly in HTML?

The Designer comes with a Design view allowing the user to construct templates in a graphical manner. More experienced users could take a look at the actual page/content structure –  Document Object Model (DOM) in the Source view. This exposes the underlying HTML providing direct access to the elements. The same applies to specifying formatting of page objects and text. Formatting can be applied via the toolbar, Formatting menu, and in the various formatting dialogs. In fact the user is applying Cascading StyleSheets (CSS) properties. Once again more experienced users could toggle between the Source view and design view to change/apply these directly to the source.

The application also has a Stylesheets manager similar to the Styles as seen in MS Word. When creating stylesheets via this User Interface the user is actually editing a CSS file which can also be edited in a plain CSS view.

What else is now easier with the new designer?

By using open standards like HTML, CSS and JavaScript, it is now possible to personalize both content and appearance. Especially the latter was a bit tedious in our previous products.

Having page overflow is another important feature for print templates. HTML provides us with options to have inline elements that flow with the content. A simple example is a signature image in a letter. These images can be placed inline with the text and automatically go to the next page when additional content is added and a page break is invoked or flow back when information is omitted/hidden.

The pagination algorithm is capable of keeping content together on a page based on “widows and orphans”-control and page-break settings. In the case of a letter these options allow you to keep the salutation, signature image and the name of sales reps name on the same page. The same algorithm provides table breaking for dynamic tables in, for example, invoices. Tables headers and footers can be repeated across pages to layout transport line information and subtotals.

What are some things existing customers should know about the new designer?

There are two main things: selectors and contexts.

Selectors are the foundation for both styling and scripting. Selectors allow you to apply formatting to specific page elements (e.g. make all headings red) or tell the application to hide/swap specific page elements (e.g. show or hide a paragraph based on the value of data field).

Selectors may apply to a specific element by targeting an unique identifier (aka ID) or target a group of elements e.g. all heading elements or all paragraph elements with a user defined label (aka classname). You can get ‘wild’ with selectors by doing things such as targeting the table cells in the odd or even table rows (for example to apply a banded background color pattern), by making the first paragraph bold or by aligning the text in the last table cell to the right etc.

Contexts in the new Designer lets you create print templates (paginated content), web pages and email messages. These can be combined in a single template and share parts of the content or have channel specific information. Updating content in one context automatically updates it in the other context. That’s a pretty powerful concept. In case of the invoice you might share the table with product lines and some address information but keep channel specific elements tied to that channel. So your print context will probably have a postal barcode, show preprinted media and have a payment slip whereas your email contains social media links, a clear Call-to-Action (e.g. a ‘Pay Online’-button) and benefit from a responsive design providing an optimal reading experience on desktop and mobile devices.

You’ve been sharing some design resources on @evdheuvel. Which are your favourite?

Although we try to keep the underlying technologies (HTML, CSS and JavaScript) hidden for the user as much as possible. I believe it wouldn’t harm to gain some knowledge in those fields. A basic understanding of HTML, CSS and JavaScript will definitely help the user. A good starting point is

When we print a document the media doesn’t change after the output is created (unless you fold a paper plane). We know exactly how final product looks and what the recipient will see. In web design and email this is a totally different ballgame. There is wide variety of email clients or web browsers out there each interpreting/rendering your message slightly differently. Every month new apps, new browsers, new updates and new devices are released. An email message that looks nice on your new iPhone 6 might not look good in Outlook on your desktop PC or in the Gmail app on your Android phone. It can be a challenging task to have a somehow consist look across these devices and applications. But do not let this discourage you, there are tools out there to help you preview, test and debug your message. My personal favorite is Litmus Link your Designer with your Litmus account to kick off tests from within the Designer.

Last but not least, I suggest you subscribe to the Smashing Magazine email newsletter for useful tips and valuable resources on HTML, CSS and JavaScript. You can find them at:

Learn more about the designer here.