Adaptive layout template for effective web content presentation in large-screen contexts

Despite the fact that average screen size and resolution have dramatically increased, many of today's web sites still do not scale well in larger viewing contexts. The upcoming HTML5 and CSS3 standards propose features that can be used to build more flexible web page layouts, but their potential to accommodate a wider range of display environments is currently relatively unexplored. We examine the proposed standards to identify the most promising features and report on experiments with a number of adaptive layout mechanisms that support the required forms of adaptation to take advantage of greater screen real estates, such as automated scaling of text and media. Special attention is given to the effective use of multi-column layout, a brand new feature for web design that contributes to optimising the space occupied by text, but at the same time still poses problems in predominantly continuous vertical-scrolling browsing behaviours. The proposed solutions were integrated in a flexible layout template that was then applied to an existing news web site and tested on users to identify the adaptive features that best support reading comfort and efficiency.

[1]  Eelco Herder,et al.  Not quite the average: An empirical study of Web use , 2008, TWEB.

[2]  Kim Marriott,et al.  MADRID ! Track : User Interfaces and Mobile Web / Session : User Interfaces 831 , 2009 .

[3]  David Salesin,et al.  Adaptive grid-based document layout , 2003, ACM Trans. Graph..

[4]  Wei-Ying Ma,et al.  Detecting web page structure for adaptive viewing on small form factor devices , 2003, WWW '03.

[5]  Farokh B. Bastani,et al.  A Flexible Content Adaptation System Using a Rule-Based Approach , 2007, IEEE Transactions on Knowledge and Data Engineering.

[6]  WeinreichHarald,et al.  Not quite the average , 2008 .

[7]  Alan Borning,et al.  A constraint extension to scalable vector graphics , 2001, WWW '01.

[8]  Jean Vanderdonckt,et al.  A Unifying Reference Framework for multi-target user interfaces , 2003, Interact. Comput..

[9]  Flavius Frasincar,et al.  Engineering the Presentation Layer of Adaptable Web Information Systems , 2004, ICWE.

[10]  Flavius Frasincar,et al.  Hypermedia presentation generation in Hera , 2010, Inf. Syst..

[11]  Mary Czerwinski,et al.  Toward Characterizing the Productivity Benefits of Very Large Displays , 2003, INTERACT.

[12]  Wolfgang Effelsberg,et al.  Adaptation of web pages and images for mobile applications , 2009, Electronic Imaging.

[13]  David Salesin,et al.  Adaptive layout for dynamically aggregated documents , 2008, IUI '08.

[14]  John R. Smith,et al.  Adapting Multimedia Internet Content for Universal Access , 1999, IEEE Trans. Multim..

[15]  Keiichiro Hoashi,et al.  Robust web page segmentation for mobile terminal using content-distances and page layout information , 2007, WWW '07.

[16]  Wilmot Li,et al.  Review of automatic document formatting , 2009, DocEng '09.

[17]  Desney S. Tan,et al.  The large-display user experience , 2005, IEEE Computer Graphics and Applications.

[18]  Fabrice Matulic,et al.  Metrics for the evaluation of news site content layout in large-screen contexts , 2011, CHI.

[19]  Lynne Martin,et al.  Information distance and orientation in liquid layout , 2008, CHI.

[20]  Stefano Ceri,et al.  Model-driven development of context-aware Web applications , 2007, TOIT.

[21]  Randolph G. Bias,et al.  Optimal Line Length in Reading--A Literature Review , 2005 .