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.
In 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.
Responsive 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.
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.