Is HTML5 powerful enough to build rich digital publications? And what does it take to make it powerful?

About the author

My name is Florian Franke, 26 years old. I'm living in Frankfurt/Germany and Laker is part of my final diploma thesis, supervised by Prof. Robert Paulmann. I studied visual communication at the University of Applied Sciences in Mainz/Germany.

Why building digital publications with HTML5.
Aren't there easier and better solutions?

There are quicker solutions for building digital publications like magazines or books. Products by WoodWing or Adobe tightly integrate Adobe InDesign into the workflow, a tool well known by any editorial designer. But these products come at a high cost (500$/month minimum). For big publishers and anyone who wants to really sell a lot of publications it may be worth the price, but for students or independent designers it is not.

While writing a small book about digital magazines on iPad, I started to wonder wether it's possible to design and deploy a digital publication without any cost and with "open source" technologies. I stumbled across the great "Baker ebook framework", which basically takes a bunch of HTML files, displays them in an iOS app and adds some page swipe interactivity. It lacked some features that I wanted, like a "table of contents" or support for iPhone and smaller screens. I added these features (among a few smaller others) with the help of Sebastian, a dear friend and xCode-guy. Now I had a customized version Baker which fulfilled my needs and ran even on small screens. Because of that I needed a layout mechanism which adapts to screen size and orientation. I discovered a CSS framework called "Less Framework", which allows targeting of different screensizes and orientations with special CSS-Styles. Fortunately, I gain some experience in building websites in the last couple of years, so CSS and HTML were not a problem.

With the help of Baker and the Less Framework I designed a monothematic digital magazine, which is about "zuviel" (german for "too much"). It consists of 17 dossiers, each one specifically designed. It works on iPad, iPhone and even in a desktop browser. Theoretically it also works on Android devices and other smartphones, but Baker is not yet available on these platforms (The layout resizes nicely, but the function for changing pages is without the app not present). Due to copyright reasons, a submission to the App Store is not possible. But here are some screenshots:

Picture of the boy on cover & App-Icon by Andrew Hall

Main features of "zuviel":

  • All benefits of Laker (Layout adapting to screen size and so on)
  • Videos, Slideshows, Audio content
  • When shaking the device in a special dossier, a new quote about "zuviel" is being displayed. You could even submit your own quote within the dossier.
  • Table of content within a dossier
  • A lot of cool content and interesting articles about "zuviel"

Laker – Work in progress and thank you!

While developing "zuviel" I asked myself: Wouldn't it be cool to release all information, files, styles etc. to the public? I discovered and solved some problems along the way, so there are a lot of interesting hints for other designers. My professor agreed. I started to clean up the code of "zuviel", added comments, built an example app and finally this website. The word "Laker" is a combination of the two main frameworks I used, named "Baker" and "Less Framework".

Thank you!

Thanks to the developers of Baker and Less Framework for providing such cool open source frameworks. The support in the forum of Baker on GitHUB was outstanding and very fast. I hope that I can give something back to the community with Laker. Hopefully it will evolve over the next few months. I'm happy about any suggestions or tipps of how to improve the compendium.

If you built a publication with Laker, please let me know! If there are some submissions, it would be my pleasure to show them here!