Digital publishing trends: Responsive or responsible design

by PETER DRAGAR, EDITION DIGITAL

December 2015

A responsive design buzzword

It has been a while since a certain word created such a buzz. And as long as you are using the buzzword “Responsive design” you are on trend, regardless of your understanding of what responsive design may stand for. Not long ago we had the “HTML5” buzzword, before that “Canvas”, before that “Cloud”… does anybody still remember “WEB 2” from 10 years ago? Not to mention a bunch of other buzzwords with lifespans of less than one year. So, next year we will probably have a “fill-in-your-best-guess” buzzword. I personally believe that a responsive design is a proper approach for mobile pages and for web sites, but for a design, based on a pre-press version, it is too complex to implement and requires HTML knowledge. I know that sticking with pre-draft template responsive solutions, tons of which can be found on the net right now, is probably not your thing. So instead of blindly following the responsive design template, I suggest using Responsible design. I am going to explain in the following chapters how to become an expert in that.

What is responsive design?

Responsive design makes your page look good across all screen sizes (desktop, tablets, phones). Responsive design uses lots of CSS techniques to shrink, resize, move or hide elements in a page. But, that comes at great cost because it needs some sort of template or pre-defined positions where you are allowed to put your artwork elements. If templates are not made with your corporate identity in mind, you may have lots of problems with implementing new sets of colours, menus, images or trying to alter some of the positions reserved for copy (text). Sometimes a template has themes and in most cases colour schemes which might help you to come closer to your corporate identity, but you still need a CSS developer to implement other changes.

Here you can see some fine examples of what you can do with responsive design if a designer and programmer work together. The designer has created a slick design with responsive and mobile screens in mind and the programmer has just implemented mathematical CSS rules.

But, what can you do if you have already built a pre-press version of your magazine and you can’t afford to hire a CSS developer? I suggest using a Responsible design instead. And for all the HTML and CSS developers reading this, I know, I know it looks easy for you, but some designers and editors do not know much about CSS or HTML.

What is Responsible design? No coding!

Responsible design is a mix of different approaches which helps you create a digital edition and doesn’t limit your creativity or require HTML knowledge. For mobile devices and tablets up to 7’’ - implementation of responsive design is a necessity. For desktop screens and apps an adaptive viewport is the most common approach to the problem.

Lifecycle of Responsible design: 

Why Responsible instead of responsive design

Many online services offer so-called “responsive solutions”. But converting your beautiful InDesign could be a nightmare without HTML knowledge. 

Basically you have two options:

Please keep in mind that there might be big differences between the different solutions and systems available. A solution may be attractive at first glance, but may easily have too many limitations imposed later on. Do not ever forget that a digital publication needs a lifecycle including good SEO, promoting, analytics, monetizing, etc. … If a solution doesn’t have proper analytics you are stuck with Google Analytics, which may sound good enough, but it is not meant for digital publications. You need other metrics for that. Edition Digital is just such a system. It encompasses all parts of a publication’s lifecycle.

Mobile first

Yes, yes, and once more – yes, but I would rephrase that to “Think mobile first”. You should always “think mobile” from the beginning of the creative process, but building a mobile version could easily be done at the end of the process. So, don’t be under the impression that you must build your mobile version first on a limited screen size which can instantly kill all your creativity. Rather, during the creation of an article keep in mind that that article also has a mobile version. And if everything is planned with that in mind, your artwork elements, galleries and videos may be borrowed from the desktop version to build a mobile page - which speeds up the creative process. It becomes one fluid wave.

A few tips on how to think mobile first:

How to start and where

I guess you already have your pre-press magazine designed in your favourite DTP application, such as InDesign, Illustrator or Quark.  The example below shows 8 page spreads – this is how an interview looks in a pre-press version.

I suggest that you invest some extra time and upgrade your magazine to a digital edition. I would like to state at this point very clearly that I am not a designer, but I know how to use DTP programs. The example of a digital publication which you can see below is at the high end of what I am capable of. :). So all you designers, please bear with me.

Basically I have just removed all the copy (text) and reserved some blank spaces for text-blocks which I am going to add later on. Additionally, I will also remove all images and create a slick fade-in animation instead. 

Whenever you have an article divided over more than one page you should always use subpages. Proper use of subpages means that the main page is the start of the article, the start of the mobile page and also the landing page.   Landing pages are very likely to be indexed first by web crawlers so by creating a good landing page you are also automatically promoting your article through organic searches. 

IMPORTANT! Subpages are possible only if a digital edition is not set as “Facing pages”. A 'Facing pages' set-up doesn’t have subpages.

Change a cover to landscape (orientation)

If you have a magazine with portrait cover, you may consider adding an extra page next to the cover to make the entire publication landscape. Make sure to also do the same for the last page. Now the entire publication has facing pages. By doing so you are now able to export a PDF as spreads and use it as a “Single publication” in Edition Digital. This step is not necessary but might improve overall UX and loading times.

Create galleries

A magazine has limited space for images and a gallery is a perfect solution for extra images you couldn’t include in the magazine. Gather images and make sure that you choose the best ones, so you can also use them in the mobile version. Try to reserve a space for galleries on those pages which already have a background image included. The easiest way is to cover those images with galleries.

Include videos

If an article talks about something which you have a video for, try to find a place where you can include that video. If you don’t have any space for a video, you may also consider adding additional pages for videos and maybe for galleries.

  1. If don’t have an MP4, use YouTube video instead
  2. One minute of MP4 video shouldn’t exceed 16MB, do not upload MP4 files bigger than 80MB
  3. Remember, nobody will watch a very long  video which requires constant buffering
  4. If you would like to include other video providers you may do so by creating a popup URL link, but unfortunately we can’t gather video statistics that way

 Text-block instead of pages full of text

Text-block is a very strong tool and improves UX. Text-block has font size controls and can be scrolled up and down. Since a text-block requires suitable space in your page it can sometimes be tricky to use it properly. But we strongly suggest that text-block should be on all pages which have fonts smaller than 14pt. Otherwise your users have to constantly zoom-in to read articles.

 Animation is a powerful weapon - so use it wisely

Cover and landing pages should include some eye-catching animations. But don’t make interactive elements more important than content. Here are some key elements to take into account when building animations:

Create landing pages

A landing page should always serve as an introduction to the start of a section, the start of an article or any other important page. Search engines check landing pages with special care and they are very likely to be indexed first. I suggest that every single mobile page starts as a landing page. If you have 10 mobile pages, you should have 10 landing pages. That is the best way to ensure that a link opened in the mobile version shows the same content as a desktop screen. A landing page should always have a name, description and a proper share image. To pre-populate some of the fields when building mobile pages a landing page’s name should be set first.

Mobile version

Mobile editor is an editorial tool which requires more of an editor than a designer, since all the artwork elements have already been built and placed in the desktop version. Because you were smart and “thinking mobile first”, this has finally paid off.

Mobile editor works best by separating blocks of text. Title, subtitle, intro text and main story should all be in separated blocks. By doing so you are now able to easily change the template and the template’s theme. Basically you are building element order out of those blocks. A responsive template ensures that your mobile page is visible in the same way on all devices. 

To make your mobile page more attractive, try to divide your article into more than one “Story” element. Between “Story” elements you may add other elements such as “Callout”, “Quote” or “Highlighted story” to make an article more attractive. If you have any videos or galleries put them further towards the top. Don’t hide them at the bottom of the article.

What is a page range?

It is very important that the content blocks on the desktop and mobile versions are in sync. You may use a range of pages to mark what is in a mobile page. If those two are synchronized then sharing and gathering statistics will work properly.

Figure shows how a single mobile page can be linked to a range of pages from page 2 to page 3.

Define your edition and start promoting

Do not forget that a well-defined edition with good title, description and an attractive share image published on social media might lure in more users than a paid ad. Make sure you have a landing page on every main section and then start promoting your content. Have I mentioned promoting your content? 

http://live.editiondigital.com/e/15atmqmvj/responsible-design