Lucas Wiener
ABSTRACT
Responsive Web Design (RWD) enables web applications to adapt to the characteristics of different devices such as screen size which is important for mobile browsing. Today, the only W3C standard to support this adaptability is CSS media queries. However, using media queries it is impossible to create applications in a modular way, because responsive elements then always depend on the global context. Hence, responsive elements can only be reused if the global context is exactly the same. This makes it extremely challenging to develop large responsive applications, because the lack of true modularity makes certain requirement changes either impossible or expensive to realize.
In this paper we extend RWD to also include responsive modules, i.e., modules that adapt their design based on their local context, independently of the global context. We present the ELQ project that includes an approach to enabling modular responsivity, and a novel implementation of resize detection of DOM elements. ELQ provides an implementation of element queries which generalize CSS media queries. Importantly, our design conforms to existing web specifications, enabling adoption on a large scale. ELQ is designed to be heavily extensible using plugins. Experimental results show speed-ups of the core algorithms of up to 37x compared to previous approaches.
- Chris Ashton. 2015. Localised CSS. (2015). Retrieved April 29, 2015 from https://github.com/ChrisBAshton/localised-cssGoogle Scholar
- Greg J Badros, Alan Borning, Kim Marriott, and Peter Stuckey. 1999. Constraint cascading style sheets for the web. In Proceedings of the 12th annual ACM symposium on User interface software and technology. ACM, 73--82. Google ScholarDigital Library
- Daniel Buchner. 2013. Cross-Browser, Event-based, Element Resize Detection. (2013). Retrieved March 23, 2015 from http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/Google Scholar
- Daniel Buchner. 2015. Element Queries. (2015). Retrieved April 29, 2015 from https://github.com/csuwildcat/element-queriesGoogle Scholar
- Gabriel Felipe. 2015. MagicHTML. (2015). Retrieved April 29, 2015 from https://github.com/gabriel-felipe/MagicHTMLGoogle Scholar
- Lyza Gardner. 2012. The EMs have it: Proportional Media Queries FTW! (2012). Retrieved March 2, 2015 from http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/Google Scholar
- Grid Style Sheets. 2015. Element queries with precompilation. (2015). Retrieved June, 8 2015 from https://github.com/gss/engine/issues/178Google Scholar
- Daniel Hägglund. 2015. breaks2000. (2015). Retrieved April 29, 2015 from https://github.com/judas-christ/breaks2000Google Scholar
- Tommy Hodgins and Maxime Euzière. 2015. EQCSS. (2015). Retrieved April 29, 2015 from http://elementqueries.com/Google Scholar
- Andy Hume. 2015. Selector queries and responsive containers. (2015). Retrieved April 29, 2015 from https://github.com/ahume/selector-queries/Google Scholar
- Kumail Hunaid. 2015. Responsive Elements. (2015). Retrieved April 29, 2015 from https://github.com/kumailht/responsive-elementsGoogle Scholar
- Tyson Matanich. 2015. ElementQuery. (2015). Retrieved April 29, 2015 from https://github.com/tysonmatanich/elementQueryGoogle Scholar
- Jonathan Neal. 2015. MediaClass. (2015). Retrieved April 29, 2015 from https://github.com/jonathantneal/MediaClassGoogle Scholar
- Truong Nguyen. 2015. SickleS. (2015). Retrieved April 29, 2015 from http://singggum3b.github.io/SickleS/Google Scholar
- Mark Otto and Jacob Thornton. 2016. Bootstrap. (2016). Retrieved January 15, 2016 from http://getbootstrap.com/Google Scholar
- David Lorge Parnas. 1972. On the criteria to be used in decomposing systems into modules. Commun. ACM 15, 12 (1972), 1053--1058. Google ScholarDigital Library
- François Remy. 2015. prollyfill-min-width. (2015). Retrieved April 29, 2015 from https://github.com/FremyCompany/prollyfill-min-width/Google Scholar
- Sam Richard. 2015. eq.js. (2015). Retrieved April 29, 2015 from github.com/Snugug/eq.jsGoogle Scholar
- Marc J. Schmidt. 2015. CSS Element Queries. (2015). Retrieved April 29, 2015 from https://github.com/marcj/css-element-queriesGoogle Scholar
- Alexis Sellier. 2015. LESS. (2015). Retrieved March 9, 2015 from http://lesscss.org/Google Scholar
- Joshua Stoutenburg. 2015. breakpoints.js. (2015). Retrieved April 29, 2015 from https://github.com/reusables/breakpoints.jsGoogle Scholar
- Matt Stow. 2015. Class Query. (2015). Retrieved April 29, 2015 from https://github.com/stowball/Class-QueryGoogle Scholar
- Dan Tocchini. 2015. Grid Style Sheets 2.0. (2015). Retrieved April 29, 2015 from http://gridstylesheets.org/Google Scholar
- W3C. 2000. Document Object Model Events. (2000). Retrieved March 14, 2015 from http://www.w3.org/TR/DOM-Level-2/events.htmlGoogle Scholar
- W3C. 2012. Media Queries. (2012). Retrieved May 19, 2015 from http://www.w3.org/TR/css3-mediaqueries/Google Scholar
- W3C. 2013. W3C public mail archive: The:min-width/:max-width pseudo-classes. (2013). Retrieved April 28, 2015 from https://lists.w3.org/Archives/Public/www-style/2013Mar/0368.htmlGoogle Scholar
- Lucas Wiener. 2015. ELQ: Extensible Element Queries for Modular Responsive Web Components. Master's thesis. KTH Royal Institute of Technology, Sweden.Google Scholar
- Lucas Wiener, Tomas Ekholm, and Philipp Haller. 2015. Modular Responsive Web Design using Element Queries. CoRR abs/1511.01223 (2015). http://arxiv.org/abs/1511.01223Google Scholar
- Corey Worrell. 2015. Responsive Elements. (2015). Retrieved April 29, 2015 from https://github.com/coreyworrell/responsive-elementsGoogle Scholar
Index Terms
- Modular Responsive Web Design: An Experience Report
Recommendations
Visual Design and Code Generation of User Interface Based on Responsive Web Design Approach
ICSEB '19: Proceedings of the 2019 3rd International Conference on Software and e-BusinessAt present, web users may access web sites from various computing devices and the ability to access the web sites on all screen sizes is very important. Responsive web design is an approach that makes web contents render well on desktop, notebook, ...
Responsive and Personalized Web Layouts with Integer Programming
EICSOver the past decade, responsive web design (RWD) has become the de facto standard for adapting web pages to a wide range of devices used for browsing. While RWD has improved the usability of web pages, it is not without drawbacks and limitations: ...
Teaching Responsive Web Design to Novice Learners
SIGITE '17: Proceedings of the 18th Annual Conference on Information Technology EducationAlthough responsive web design has become a standard industrial requirement in recent years, it is rarely emphasized in introductory courses on web front-end development. This paper presents an integration of responsive web design topics with the ...
Comments