Progressive Web Apps (PWA)

Technically PWA are HTML5, however with a lot of JavaScript. So by definition they work in any modern browser. And typically the HTML5 behaves in such a way, so that the experience is more like an app: On mobile devices you don’t see the browser interface and you get interactive experiences that you know from native apps, slideshows, animations, swipe pages. Also, the experience “adapts” to the device, so are different for small mobile devices and for Desktop computers. Still, one format serves all, as there is no platform-specific code.

Additionally, PWA use “Service Workers”, which give you services like notifications or the ability to “read/work offline”.

Sounds promising.

Hurdles of PWA?

I currently see three hurdles of PWAs:

Monetization

Browser Support

Ease of creation

Ease of creation?

The third point is slowly vanishing.

For example, if you use WordPress, you can create a PWA using the “Progressive” plug-in:

If you want to create a PWA out of Print, you can use QuarkXPress 2018 to create a PWA, static or with interactive effects:Either by creating the design and layout from scratch; by converting a PDF or AI; or by importing an InDesign via IDML Import.

Monetization

To sell your app or content within the app probably is the last hurdle for PWAs compared to native apps. However if your content is free or you have an existing paywall, then this should not be an issue.

Chances of PWA

Think of publishing a book digitally?

A website will give your readers a rather unexpected experience.

A PDF is not adaptive to the device, especially on smaller screen sizes.

An ebook (ePub) might play well on iOS and MacOS, for Android and Windows there are no got ePub readers yet.

A native app might be costly to develop and restricts you to a certain platform or forces you to maintain several apps.

So a progressive web app might be the best of all worlds. And it is easily created out of WordPress or out of Print and PDF (using QuarkXPress).

Both an engineer and a layout artist, Matthias bridges the gap between technology and people.

Before joining Quark, Matthias pioneered print, Web, and multimedia products for multiple German publishing companies. Since 1997 he has played a central role in shaping Quark’s desktop and enterprise software.
Starting 2003 Matthias has focused on Quark’s interactive and digital publishing solutions. He is an active participant in design and publishing communities and represents Quark in the Ghent PDF Workgroup.

Since February 2014 Matthias heads Quark’s Desktop Publishing business unit and is therefore responsible for QuarkXPress.

Often you want to share a Print layout over the internet. What are your options?

The “old” way

PDF?

Typically you might create a screen PDF and put it on your webserver. Though great for Print, PDF have several shortcomings over the web. In a browser they look strange (double navigation). On mobile devices they do not really offer interactivity. And accessibility depends on how you created the PDF. And so on.

Flash???

Not really. Go six years back and though Flash was widely spread it was already not the ideal format. Security holes, high CPU requirements (remember the fans of your device starting to howl?) and – maybe worst – they never worked on mobile devices.

Flipbook Services?

Sure, they offer you a one-stop solution. Typically you submit a PDF to them, pay them a fee and they create some kind of interactive format. In the past often Flash, nowadays some kind of HTML.

Have you ever used a flipbook? The issues beside having to pay a fee and maybe having to host it somewhere outside your web infrastructure are in my humble opinion the user experience:

Often these flipbooks only offer two zoom levels, one that lets you hardly read text, the other so large that it is difficult panning around. Text is often an image, which doesn’t make them available to accessibility features like screen readers (to read out loud). “Searching” is mostly not possible in the browser, it’s prefabricated in the UI. And interactivity is limited to maybe videos and audio. And should the flipbook service decide to discontinue the service, you are stuck again.

The modern way: Pixel-perfect HTML5

Wouldn’t it be great if you could just convert a Print layout with three mouse clicks to an interactive, web-friendly format? That allows you to add interactivity, works in a browser, giving you search and magnification?

And of course it should work on all devices, Desktop and mobile. And without additional fees.

That’s what HTML5 Publications promise to do:

Convert out of a Print layout created in QuarkXPress 2016 with just three clicks

Export standard HTML5

Run on all platforms (mobile and desktop browsers)

Text stays text and all typographic and design features are kept, pixel-perfect, as you created them

No extra charge (besides QuarkXPress and web space)

Have a look how easily this is created out of QuarkXPress 2016, as many and as often as you want:

Warning:

If you use PostScript fonts (Type-1 fonts) then these will not work in HTML5. You have two options to replicate your Pritn layout as HTML5 Publication then:

Substitute the Type-1 font with a TrueType font or OpenType font. Both formats will work well and keep typographic features such as kerning.

If you need to keep your Type-1 font, then make sure QuarkXPress exports these text boxes as an image. You can define that in the measurement palette when being in a Digital layout. At the very right for each text box there’s a check box besides a small camera symbol to “Convert to Graphic Upon Export”. Use Item Find/Change to easily change all text boxes to export as image.

In the next post I’ll show you how to add interactivity like video, animations and slideshows and how to deploy them on your own webserver.

Both an engineer and a layout artist, Matthias bridges the gap between technology and people.

Before joining Quark, Matthias pioneered print, Web, and multimedia products for multiple German publishing companies. Since 1997 he has played a central role in shaping Quark’s desktop and enterprise software.
Starting 2003 Matthias has focused on Quark’s interactive and digital publishing solutions. He is an active participant in design and publishing communities and represents Quark in the Ghent PDF Workgroup.

Since February 2014 Matthias heads Quark’s Desktop Publishing business unit and is therefore responsible for QuarkXPress.

As the book is available on amazon with “Look Inside”, please preview the book to see what it covers. In my humble opinion it not only gives you great background on QuarkXPress 2016 and all its new features, it’s more than that: It also helps you understand brand considerations, design rules, printing and finishing techniques.

Both an engineer and a layout artist, Matthias bridges the gap between technology and people.

Before joining Quark, Matthias pioneered print, Web, and multimedia products for multiple German publishing companies. Since 1997 he has played a central role in shaping Quark’s desktop and enterprise software.
Starting 2003 Matthias has focused on Quark’s interactive and digital publishing solutions. He is an active participant in design and publishing communities and represents Quark in the Ghent PDF Workgroup.

Since February 2014 Matthias heads Quark’s Desktop Publishing business unit and is therefore responsible for QuarkXPress.

The interesting thing is that this book is not only about QuarkXPress, it is also about design and brand considerations, about print processes and about finishing. So definitely an interesting read, I can highly recommend it.

Martin, the author of the book, who is also an author for Planet Quark, says about it:

““Over the years, I’ve seen dozens of designers, some straight from college, some hardened veterans, whose work came to a halt because they lacked some crucial piece of knowledge. In this book, I have tried to include the answers to all of their questions, and to uncover the richer possibilities that QuarkXPress 2016 offers. Its new features—especially native import and HTML5 publishing—allow us to be more productive, more creative and more satisfied in our work. Whether in print or online, more than ever before, QuarkXPress 2016 gives us the power to delight the eye and intrigue the mind.”

Both an engineer and a layout artist, Matthias bridges the gap between technology and people.

Before joining Quark, Matthias pioneered print, Web, and multimedia products for multiple German publishing companies. Since 1997 he has played a central role in shaping Quark’s desktop and enterprise software.
Starting 2003 Matthias has focused on Quark’s interactive and digital publishing solutions. He is an active participant in design and publishing communities and represents Quark in the Ghent PDF Workgroup.

Since February 2014 Matthias heads Quark’s Desktop Publishing business unit and is therefore responsible for QuarkXPress.

Visual Language includes more than 1,000 extremely detailed illustrations from the early 1900s. Subject matter includes plants, fruits and flowers, animals and human anatomy, machines and equipment, picture frames, mountains and landscapes, maps, holiday figures, etc. The collection is worth a look, if only for inspiration.

To find it, search for “Visual Language” and then uncheck “Photographs” under Image Type.

Jay Nelson is the editorial director of PlanetQuark.com, and the editor and publisher of Design Tools Monthly. He’s also the author of the QuarkXPress 8 and QuarkXPress 7 training titles at Lynda.com, as well as the training videos Quark includes in the box with QuarkXPress 7 . In addition, Jay writes regularly for Macworld and Photoshop User magazines and speaks at industry events.

Recent News

Due to popular demand, the first update for QuarkXPress 2018 adds back the font sub menus on MacOS. The free update further adds new JavaScript methods and further improves stability, quality and performance.

Progressive Web Apps (PWA) are promising to combine the positive aspects of both, native apps and HTML. Learn how you can easily create a PWA out of WordPress. Or by converting an AI, PDF, IDML (InDesign) or QuarkXPress into a PWA.

Need to sort text in QuarkXPress? See how this free sample script allows you to sort paragraphs in a selected text box with a single click.

When QuarkXPress behaves erratic or crashes, in most cases corrupt preferences are the cause. Deleting preferences will fix that. Just, where do you find preferences for QuarkXPress on MacOS / OS X and Windows? See here.

Quark has launched a new webinar series with free tutorials about how to create HTML5 Publications (PWA), ebooks and print-ready PDF. Topics also include typography sessions, tutorials about how to use Image Editing and OpenType features and more. First three webinars are online, a new one is coming every two weeks.

Apple announced the next major version of MacOS, MacOS 10.14, called Mojave. Who wouldn't want to try it immediately? Of course risk-free, without jeopardizing production if you have just one Mac. You need a way to revert if not yet satisfied. Here's how to safely test and how to quickly revert if needed.

How do you check whether your website complies to the PWA standard (PWA = Progressive Web App)? See how and see an example scoring 100 (out of 100). And how to easily create a PWA yourself.

This website uses cookies to improve your experience on our website. By continuing to browse this site you are agreeing to our use of cookies. You can disable cookies in your browser settings at any time.Accept CookiePrivacy Policy