Multi-Device Representation

From SAM
Revision as of 12:57, 5 October 2015 by Apostolidis (talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Multi-Device Representation is about presenting the same content on different devices in a reasonable manner. In order to achieve this many factors and attributes have to be taken into account. The next sections will try to list the main problems and techniques regarding multi-device representation.


With the rise of web and mobile apps, the concept of responsive design came into prominence. A web app can nowadays be displayed in numerous device formats (e.g. phones, tables, desktop computers, TV’s) not to mention the various dimensions each model of a given type has. Web apps have to conform to the limitations of each device if they want to stay relevant for the user and facilitate her interaction with them.

Various attributes can be modified in order for an app to remain responsive such as:

  • Image and text size
  • Alignment of content
  • Size of content displayed
  • Functionalities (e.g. support for video formats)

Relevance to SAM

The term Multi-Device Representation in SAM describes the mechanism that will handle the adaptation of SAM content to the user's devices by taking the characteristics of the target device into account. This mechanism essentially dictates how the content produced by the SAM 2nd Screen and SAM 1st Screen components will be displayed.

State of the Art Analysis


Within the context Multi-Device Representation, the following concepts are applicable.

Responsive Design

Responsive Web Design (RWD) has been introduced above as well as some of its main concerns. Various approaches have been developed within the area of RWD. "Mobile First" is for example one of them. The basic idea behind "Mobile First" is to plan a new Website or Application at first for mobile devices and then for the desktop environment. This ensures that all devices provide the information in the best way for the user. Today, the underlying techniques are mostly achieved by the following web standards.

Tools, Frameworks and Services

HyperText Markup Language

HyperText Markup Language (HTML) is a W3C standard. It is a language to structure and arrange elements like pictures, navigations, Hyperlinks, etc in a Webbrowser. The current HTML version is HTML5. HTML5 includes new Elements to play videos / audio files in an internal player and it allows the designer to draw elements on a canvas. HTML is the foundation of web development and most other web technologies build on it.

Cascading Style Sheets

Cascading Style Sheets (CSS) is a declarative language for style templates. It is a W3C standard and the current version is CSS3. The responsibility of CSS is located in layouting and formatting a document, written in a markup language. Any element contained in an HTML page can be styled individually.


JavaScript (JS) is a dynamic script language that is used on the client-side and allows the user to interact with the interface. JavaScript allows the programmer to implement business logic into a website, for example form validation or file uploading. With Asynchronous JavaScript and XML (AJAX) it is also possible to communicate asynchronously with other services.

Angular JS

Angular is a framework that allows dynamic generation of content. It enables creation of templates that dictate how dynamically generated content will be displayed. It can be embedded seamlessly into an HTML code by specific attributes that are inserted into normal HTML elements.


A framework that automates several tasks within the RWD principles such as auto aligning and sizing. It also contains templates for elements such as tables and menus.

The SAM Approach

Architecture and Dependencies

As mentioned before the MDR part of SAM relies on:

  • common web technologies (HTML, CSS, JS, AJAX)
  • Frameworks that build on the former (AngularJS, Bootstrap, jQuery)

MDR essentially is composed of two components as seen below:

MDR Architecture

Format Converter is active during Prosumption Time when content is generated and served to the End Users. It helps the 2nd Screen display Assets appropriately by supplying the required CSS and HTML documents. Graphical Editor is active during Production Time when the Content Owner can instruct SAM how to display each type of content. All types of Assets are contained in Widgets that are constructed according to the Responsive Design guidelines mentioned before. The tool used for styling the Widgets can be seen below:

Widgets Editor