Issues in adapting web content to be displayed on devices with various screen shapes using a JavaScript built screen shape simulator

Abstract

This paper is devoted to an upcoming issue in web design: Styling web content to be displayed correctly on devices with various screen shapes. This issue is a consequence of the rapid development of LED displays with a wide variety of screen shapes. Many of them can be connected to a computer which means that one can display web content on them. Such displays are used as indoor and outdoor advertising panels, which makes them very important for business. Also, various smart devices are developing rapidly and they are often web browsing enabled. They come with various screen shapes, which is an imperative of modern design. Hence the need to style web pages in such a way that their content is displayed correctly on all those devices. By now, responsive web design has a solution only for styling web pages to be displayed on rectangular screens with various dimensions by using media queries and flexible grids. The W3C organization is currently working on media queries for round shaped displays, but all new suggested CSS rules are still in the working draft.  It is obviously that the development of LED displays is running faster than the development of web standards. For this reasons, a responsive web design testing tool with a various screen shape simulator is built in JavaScript and is available on GitHub. Its main features are described herein. An example of styling a web site for various screen shapes using that testing tool is given in this paper in order to highlight the problems that arise during that process.