Digital publishing trends: Responsive or responsible design

by PETER DRAGAR, EDITION DIGITAL

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:

Create a pre-press version with your favourite DTP application
Convert it to a digital edition by thinking “mobile first”
Create a desktop version
Create a mobile version
Don’t make interactive elements more important than content
Describe your content well to gain better SEO recognition
Go live!
Start promoting
Analyse your stats and make changes if necessary
Start monetizing this edition to keep you positive and happy, so you may create further beautiful editions and stay in this business because you love it
And so the lifecycle goes on …

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:

Find a solution which operates with templates where you can easily change blocks of text, images, galleries and videos. The downside is that you are locked in to this template and you can’t change much there. Do you need to implement corporate identity? Well, you need a CSS programmer for that.
Keep working with your DTP program and keep your creativity intact. We offer a canvas the same size and proportion as your InDesign file or any other DTP program. Whatever you have created you can easily transfer to a page without altering your design. For screens and tablets this is right approach, but for mobile devices a mobile responsive version made of elements from your DTP page must kick in.

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:

Always treat an article divided over several pages as one piece of content.
Try to recognize additional content such as a gallery, video, additional story, etc. …
Additional content should be used for building a desktop and mobile page
Try to plan how interactive elements will follow each other on the mobile page
Put the most attractive content at the top of your mobile page to engage the user
For an article divided over more than one page create subpages. Publication must not be set as “Facing pages”
A landing page should always be the start of the article.

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.

Landscape publications are more adoptable for a huge variety of screens.
Landscape publications have only 1 page to load at a time compared to facing pages which require 2. Faster loading time!
All pages within a PDF must be the same size when importing to Edition Digital system. If not, the system shrinks or fits PDF pages.
PDF replicas should have layout set as “Single in portrait”. It means that on portrait devices only one page is shown.

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.

Galleries should have a full-screen button, if the areas they occupy are too small to show them on the page.
HD images or bigger files should be reserved only for situations where an image within a gallery requires details. Please keep in mind that bigger images mean longer loading times.
You should use the same gallery on the desktop and mobile pages.

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.

If don’t have an MP4, use YouTube video instead
One minute of MP4 video shouldn’t exceed 16MB, do not upload MP4 files bigger than 80MB
Remember, nobody will watch a very long video which requires constant buffering
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.

Text-block has predefined paragraph styles which are tested to assure the best UX across different devices.
Text-block colour should contrast enough with other layout.
System offers 6 optimized font families which have Latin, Extended-Latin and Cyrillic characters included. More will be included later on.
One font family (regular, strong, italic, bold italic) has about 1MB file size and we offer this service in good faith that only one or two font families are selected throughout the entire publication to maintain reasonable loading times.

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:

Animation should always enrich UX.
Better to animate small details rather than create huge animations which cover pages and makes the reader wait to see the content.
Try to synchronize steps. Animations should follow each other, avoid using more than one strong animation at a time.
If you would like to animate an element in a page, you have to remove it from the PDF and create a PNG to use it for animation.
An animated line below a title is a better approach than animating the entire title. If the user has to wait more than 5 seconds to see the title it is not a very good UX.
Try to use the same look and feel in all pages, so the user has an idea of what to expect in each page.
If you don’t know how to animate, use fade in.
If you don’t know what to animate, do not create any animations on that page.

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