Introduction

Desktop Web App 2.0 (DWA2) is an HTML-based solution, which facilitates publications and related content like articles, editions, and supplements.

Desktop Web App 2.0 supports and is optimized for mobile devices to deliver an out-of-the-box featured user experience in every aspect expected today on desktop and mobile devices.

DWA2 is bringing the content structure and familiarity from our app solution into the browser across devices. Making branding and marketing initiatives even more aligned – as well as making communication strategies easier.

With additions such as modules, a side panel, and customization possibilities the DWA 2.0 provides a better presentation of your content along with a great user experience – regardless of device.

In addition to DWA2 Article View 2.0 is on desktop solutions default integrated with a standard Article View 2.0 template when either existing solutions are updated - or new solutions are onboarded and implemented. Read more about Article View 2.0 and enhanced possibilities for branding and reader engagement features here.

The combination of Desktop Web App 2.0, Article View 2.0, and the fact that DWA2 supports mobile devices in every aspect provide the possibility for a unique and optimized solution across devices and platforms.

Functionality 

When readers open DWA2 they are either presented with the News Modules overview page unless a region/edition picker is active.

If a region/edition picker is active, readers will have to choose a region/edition to open the News Module overview for the selected region/edition. 

From the News Modules overview, readers have the ability to scroll through the content structure.

Either horizontal to reveal further articles or publications in a specific module or vertical to explore more modules placed structural to fit publishers' needs.

To assist the user in scrolling left-right, arrow indicators are placed at the edge of the module allowing the user to scroll through the content. In addition to that, a scrollbar is also shown underneath the content of the modules.

On desktop, a side panel is shown to the left where readers can switch between menus to expand the selected content into a full screen view. 

On mobile devices, readers have to activate the “Burger Menu” in the upper left corner to expand the menu and select the content they want to address.

Visual overview

1: Side panel

2: Newest publication module

3: Newest publication 

4: Sections / related / supplements

5: Other/previous editions

6: Article teaser module

7: Supplements module

8: Advertisement module

9: Web view module

10: Archive module

Visual overview - Tablet and phones devices:

1: Side panel

2: Newest publication module

3: Newest publication 

4: Sections / related / supplements

5: Other/previous editions

6: Article teaser module

11: Current view

Modules 

The DWA2 modules allow the possibility for styling and customization in terms of order, colors and font options. This supports familiarity between our App solutions and DWA2 for those customers who have both solutions on a Visiolink platform. 

Global settings

The DWA2 features global settings, where the effect of the customization will be shown in multiple areas.

Module header

Each module has a header, which can be customized in terms of font, font size, and color.

See more shortcut

Whenever a module features content which has its own view ,a "see more" shortcut is added. Clicking the shortcut will open the view for content. The shortcut is shown at the top right of the module.

 

Brand color

Brand color is a color used in various places throughout the DWA2. Including the active item in the side panel, the branded line in the article teaser module, and the "see more link" on the modules.

2) Newest publication module

The top module on Desktop as well on mobile solutions displays the newest publication alongside sections or related publications. Previous publications are displayed in a box with a shortcut to the archive in the top right corner of the same container.

On Mobile devices related sections/related publications are available beneath the newest publication.

On top of the newest publication, the release date is shown.

This is placed on top of a background image free of choice. For the best results, a wide image with high resolution is recommended. For best results provide a 4:3 or 16:9 format image with a minimum width of 3840 px.). The top module image will be cropped to fit the device's resolution.

The customization possibilities include choice of background (Color / Image)  and font options for the release date, section header, and header for Previous Editions.

6) Article teaser module

The Article Teaser module presupposes delivering of XML to be displayed. Articles in each individual card are organized in a horizontal one-level row grid. The order of articles is determined by an algorithm. (Contact Visiolink for further information on that subject).

Each article card features the article image, headline, preview of the blurb or body text, and the page number as well option to activate Text2Speech for listening to the article directly.
(Note: This requires 3. Part implementation as Google API or other services to take effect).

The customization options include module name, module background color along with font, font size, font color for the header, blurb or body text, and page number. 

7) Supplements module

 

The Supplements module displays related publications – or publications which publishers want to have displayed. Examples include magazines or weekly publications.
The publications are placed horizontally with the date shown underneath.

The customization options include changing the name of the module, module background color and hiding the date and/or label of the publications.

8) Advertisement module (DFP)

The Advertisement / DFP Module displays an advertisement from a Google DFP server.

The customization options include changing the name of the module and module background color.

9) Web View module

Web View modules display a preview of a website in a rectangle. When the user clicks the preview they will open the specified website in a new browser window – on both desktop and Mobile devices.

The customization options include changing the name of the module and background color.

10) Archive module

The Archive module displays previous publications from previous years on the same date as today. The publications are placed horizontally with the year increment shown underneath. 

The customization options include changing the name of the module, module background color, and the year increment. 

 

1) Side panel

The side panel in the DWA is used to browse between multiple views.

The content available in the side panel includes:

A: Logo

B: Region/Edition picker

C: Start/News Modules overview

D: Supplements

E: Web view

F: Archive

G: Search

H: Guide

I: Information

J: GDPR

On mobile devices, the side panel will be hidden inside a burger menu.

The customization options include the order of menu points, menu point text/label, and icons. 

Region / Edition Picker

The region/edition picker is an overview of all the available regions or editions. Each region/edition is represented by a front cover in a 3-column grid. Clicking on a cover will take the user to the respective News Modules overview.

 

Responsive layout

To provide the best user experience on multiple device sizes the DWA2 is fully responsive. One of the key differences is how to activate the side panel. 

To adapt to the small screen of phones and tablets a top bar is introduced which displays the name of the active menu with a back button. To the left is the burger menu that stores the content of the side panel. 

 

When the burger menu is expanded on a phone device it will be in a full screen view. On tablets, the burger menu will expand from the side and become a side panel with the content behind the side panel becoming blurred. When tapping on X the menu collapses. 

On tablets however, the burger menu will expand from the side and become a side panel with the content behind the side panel becoming blurred.

Reader

The publication reader is opened when readers click on a publication and the spread view (PDF view) is presented. In the reader the functionality includes zooming in and out, go to the next and previous page.

In the reader side panel the functionality includes going back to the previous view, full screen mode, open page overview, open articles overview, download as PDF, search, share, guide, information, and GDPR settings.

In addition to DWA2 Article View 2.0 is on desktop solutions default integrated with a standard Article View 2.0 template when either existing solutions are updated - nor new solutions are onboarded and implemented.
Read more about Article View 2.0 and enhanced possibilities for branding and reader engagement features here.

The reader side panel expands when the cursor hovers over it. Otherwise, the side panel stays minimized. 

When the cursor hovers the current page a navigation box appears from the bottom providing functionality like zoom in and out, next/previous, go to next/previous section.