Investigating website adaptation to large screens

Lucas Streit
In recent years, desktop screens have become bigger both in terms of physical size and screen resolution. Still, many of today's websites do not scale well when viewed on large screens. On the one hand, the additional space available on such screens is usually not used, which leads to an increasing amount of unused screen real estate. On the other hand, text properties such as font size are usually optimised for a fixed width only, leading to readability issues on large screens. We therefore
more » ... estigate possible forms of adaptations in order to optimise website layouts for large screens. The proposed solutions include the use of multiple columns as well as flexible font size adaptation based on the user's screen size. Moreover, means to handle fixed-size media resources such as images or videos are presented. The solutions are mostly based on the upcoming HTML5 and CSS3 standards, which offer a wide range of new features to website developers. Where the new standards do not provide a convenient solution, we fall back on JavaScript-based solutions. Our approach can therefore be applied to existing websites in a simple way. Based on the proposed adaptations, we designed a flexible layout template for an existing website capable of adapting to various screen contexts. The quality of this template was confirmed by a user study. All but one participant preferred the adaptive layout to the original layout. Users particularly appreciated the better usage of the available space, as more content was presented in the first screen and therefore less scrolling was necessary. iii iv 1 4 STRUCTURE OF THE THESIS
doi:10.3929/ethz-a-006250434 fatcat:olv6cvvlszcppod22arv3cqvam