March 26, 2014 Last Updated 7:03 am

Wednesday column: How new trends in web development impact magazine design

Each Wednesday, Talking New Media invites digital publishing leaders to discuss industry topics, or explain and demonstrate the latest solutions involving digital media. In this week’s columnist is Tobias Strebitzer, co-founder and CTO of MagLoft.

Over the last decade, as internet technology quickly evolved and expanded all over the world, digital magazines have opened not only a new way of distributing magazines, but also significantly changed the look and feel of magazines. While many magazines are still published in PDF Format, which can only serve static, unresponsive and non-interactive content, new types of magazines were introduced to allow more dynamic content in magazines, to furthermore engage its readers on a new level.

smartphoneIn 2007, the International Digital Publishing Forum (IDPF) released the first successful standard for creating responsive, reflowable magazines: The EPUB standard. In that time, smartphone- and tablet- coverage increased significantly, and various different devices-sizes needed to be taken care of. As PDF magazines could not reflow its content, they were unable to serve smaller screen sizes, and therefore magazines based on the EPUB standard filled the gap and became a huge success.

Back in 2011, the guys from Baker (www.bakerframework.com) released a new HTML-based standard: HTML Publication (HPUB). Their intention being to finally close the technical gap between Web Development and Magazine Design.

Should a magazine look like a website?
A common confusion about HTML/CSS technology is a lack of understanding its full potential. Obviously, a magazine and a website are two very different things, and as a magazine designer we know that this distinction is very important: If magazines would align to the layout and design of classical websites, the purpose of magazines would vanish. But, even if HTML/CSS originated from web(site) development, it has emerged to many different fields of application over the last years: Think about web applications, parallax design trends and event semi-native desktop applications (like the new GitHub Editor ‘Atom’, www.atom.io). HTML/CSS ultimately is a flexible and robust way to put content into shape, just like PDF, Photographs, or even a piece of paper and a pencil.

Generally, I’ve yet to see an application that could not be represented in HTML and CSS.


tabletResponsive vs Absolute
Now this is where two worlds collide: The pioneers in Magazine Design are used to place object in exact position, like dragging and sizing a background image to fit half of the page, placing text above it, aligning all elements with snappy guides and rearranging their display order. Of course, this is a very convenient way to build a magazine, and you always have full control over a pixel-perfect magazine page. This method is called absolute positioning.

Still, there’s some major downsides to this procedure. As with EPUB, users were enabled to resize and re-wrap the text of magazine, which means that more or less space is available. Accordingly, in Web Development we see a similar shift to have a more layout-dynamic and responsive experience, by arranging all exelemts in a hierarchical structure, which reacts to different screen-sizes. This trend is called ‘Responsive Webdesign’ and soon started to use relative positioning to keep the layout flexible and functional.

Complexity vs Simplicity
Obviously, relative positioning can become a real pain, especially if you want to maintain a unique and complex magazine design. Still, this complexity does not necessarily mean that it’s more complicated to design. Actually, after leaving behind the idea of absolute positioning and get friends with relative placement of elements, magazine designers experience some real advantages: There’s no more need for guides, no more pixelwise arranging of elements, and no more worrying about different screen sizes.


desktop


Tobias Strebitzer is co-founder and CTO of MagLoft. Strebitzer has mastered about 15 different programming languages, speaks PHP, Java, Ruby and C++ fluently, and further specialized in UX (User Experience) Design, Application Design and Agile Development Workflows. He is currently developing two businesses in Silicon Valley, California.

Next: MagLoft platform screenshots ➔

  • Tablazines 3 years ago

    Isn’t it amazing how this keeps cropping up. In the late 90s, early 2000’s “fluid design” was the buzz term. I was again it then preferring to design my sites at a fixed width in order to have as much control over a layout as possible.

    Now the buzz word is “responsive design” and I’m torn between whether to carry this over to my publications. Due to the very nature of responsive design, I find that it forces you to simplify your design ambitions. Not necessarily a bad thing, but it you do give up some of those pixel perfect layouts that print designers are so fond of.

    • Nick Martin 3 years ago

      I think that it’s possible to do almost the same with responsive design that you can do with pixel perfect absolute design, it just takes a little different angle of approach 🙂

      Also, I use The Magazine as a good example of how you can make a very successful magazine based on quality content alone, as they have basically no layout designs or fancy graphics etc.

      Ultimately it comes down to the number of screen sizes that you want to support. If you are happy with just 768×1024 portrait then you can go nuts with InDesign etc 🙂

      • Fabio Instanza 3 years ago

        I understanding exactly what your saying, you are saying on the first hand there is pixel perfect indesign with limited screen size options and there is your solution. What if I want the best of all worlds? The solutions coming out now don’t seems to give enough reasons to fully leave print PDF. Responsive design has a place I would think but how do we know that it will be enough for magazines. I wanting to have total control over my magazine, not defined by code or structures. By me as the designer. I alsos don’t want a magazine that has similarities to a website.

        Maybes I’m missing something?

  • Jonah D. Martin 3 years ago

    I agree with this article. Simplicity is the best. complicated setups can invite over-kill. I will learn more about , Responsive design.

  • […] One of the newer companies, MagLoft, contributed the Wednesday column last week. […]