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.
- 1 Introduction
- 2 Relevance to SAM
- 3 State of the Art Analysis
- 4 The SAM Approach
- 5 Articles
- 6 References
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 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.
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:
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:
- Responsive Web Design
- Architectural Support for ubiquitous access to multimedia content
- A look at the new multimedia landscape
- Responsive Web Design with HTML5 and CSS3