More Web Proxy on the site http://driver.im/

research-article

Modular Responsive Web Design: An Experience Report

Authors:

Philipp HallerAuthors Info & Claims

Programming '17: Companion Proceedings of the 1st International Conference on the Art, Science, and Engineering of Programming

Article No.: 22, Pages 1 - 6

https://doi.org/10.1145/3079368.3079404

Published: 03 April 2017 Publication History

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.

References

[1]

Chris Ashton. 2015. Localised CSS. (2015). Retrieved April 29, 2015 from https://github.com/ChrisBAshton/localised-css

[2]

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.

Digital Library

[3]

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/

[4]

Daniel Buchner. 2015. Element Queries. (2015). Retrieved April 29, 2015 from https://github.com/csuwildcat/element-queries

[5]

Gabriel Felipe. 2015. MagicHTML. (2015). Retrieved April 29, 2015 from https://github.com/gabriel-felipe/MagicHTML

[6]

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/

[7]

Grid Style Sheets. 2015. Element queries with precompilation. (2015). Retrieved June, 8 2015 from https://github.com/gss/engine/issues/178

[8]

Daniel Hägglund. 2015. breaks2000. (2015). Retrieved April 29, 2015 from https://github.com/judas-christ/breaks2000

[9]

Tommy Hodgins and Maxime Euzière. 2015. EQCSS. (2015). Retrieved April 29, 2015 from http://elementqueries.com/

[10]

Andy Hume. 2015. Selector queries and responsive containers. (2015). Retrieved April 29, 2015 from https://github.com/ahume/selector-queries/

[11]

Kumail Hunaid. 2015. Responsive Elements. (2015). Retrieved April 29, 2015 from https://github.com/kumailht/responsive-elements

[12]

Tyson Matanich. 2015. ElementQuery. (2015). Retrieved April 29, 2015 from https://github.com/tysonmatanich/elementQuery

[13]

Jonathan Neal. 2015. MediaClass. (2015). Retrieved April 29, 2015 from https://github.com/jonathantneal/MediaClass

[14]

Truong Nguyen. 2015. SickleS. (2015). Retrieved April 29, 2015 from http://singggum3b.github.io/SickleS/

[15]

Mark Otto and Jacob Thornton. 2016. Bootstrap. (2016). Retrieved January 15, 2016 from http://getbootstrap.com/

[16]

David Lorge Parnas. 1972. On the criteria to be used in decomposing systems into modules. Commun. ACM 15, 12 (1972), 1053--1058.

Digital Library

[17]

François Remy. 2015. prollyfill-min-width. (2015). Retrieved April 29, 2015 from https://github.com/FremyCompany/prollyfill-min-width/

[18]

Sam Richard. 2015. eq.js. (2015). Retrieved April 29, 2015 from github.com/Snugug/eq.js

[19]

Marc J. Schmidt. 2015. CSS Element Queries. (2015). Retrieved April 29, 2015 from https://github.com/marcj/css-element-queries

[20]

Alexis Sellier. 2015. LESS. (2015). Retrieved March 9, 2015 from http://lesscss.org/

[21]

Joshua Stoutenburg. 2015. breakpoints.js. (2015). Retrieved April 29, 2015 from https://github.com/reusables/breakpoints.js

[22]

Matt Stow. 2015. Class Query. (2015). Retrieved April 29, 2015 from https://github.com/stowball/Class-Query

[23]

Dan Tocchini. 2015. Grid Style Sheets 2.0. (2015). Retrieved April 29, 2015 from http://gridstylesheets.org/

[24]

W3C. 2000. Document Object Model Events. (2000). Retrieved March 14, 2015 from http://www.w3.org/TR/DOM-Level-2/events.html

[25]

W3C. 2012. Media Queries. (2012). Retrieved May 19, 2015 from http://www.w3.org/TR/css3-mediaqueries/

[26]

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.html

[27]

Lucas Wiener. 2015. ELQ: Extensible Element Queries for Modular Responsive Web Components. Master's thesis. KTH Royal Institute of Technology, Sweden.

[28]

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.01223

[29]

Corey Worrell. 2015. Responsive Elements. (2015). Retrieved April 29, 2015 from https://github.com/coreyworrell/responsive-elements

Cited By

Jayashree SDias GAndrew JSaha SMaurel FFerrari S(2022)Multimodal Web Page Segmentation Using Self-organized Multi-objective ClusteringACM Transactions on Information Systems10.1145/348096640:3(1-49)Online publication date: 7-Mar-2022
https://dl.acm.org/doi/10.1145/3480966
Arévalo Arboleda JMoreno Sánchez INavarro Newball AContreras Roldán V(2021)Usabilidad y geolocalización narrativa para el seguimiento del patrimonio artístico españolArte, Individuo y Sociedad10.5209/aris.7029833:4(1117-1135)Online publication date: 12-Jul-2021
https://doi.org/10.5209/aris.70298
Riyana SRiyana NNanthachumphu S(2021)Privacy Preservation Techniques for Sequential Data ReleasingProceedings of the 12th International Conference on Advances in Information Technology10.1145/3468784.3470468(1-9)Online publication date: 29-Jun-2021
https://dl.acm.org/doi/10.1145/3468784.3470468
Show More Cited By

Index Terms

Modular Responsive Web Design: An Experience Report
1. Software and its engineering
  1. Software creation and management
    1. Software development techniques
      1. Reusability
  2. Software notations and tools
    1. Context specific languages
      1. Domain specific languages
      2. Markup languages
        Hypertext languages

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-Business

At 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
EICS

Over 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 Education

Although 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

Please enable JavaScript to view thecomments powered by Disqus.

Information & Contributors

Information

Published In

cover image ACM Other conferences

Programming '17: Companion Proceedings of the 1st International Conference on the Art, Science, and Engineering of Programming

April 2017

193 pages

ISBN:9781450348362

DOI:10.1145/3079368

Editors:
Jennifer B. Sartor
Vrije Universiteit Brussel
,
Theo D'Hondt
Vrije Universiteit Brussel
,
Wolfgang De Meuter
Vrije Universiteit Brussel

Copyright © 2017 ACM.

Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. Copyrights for components of this work owned by others than ACM must be honored. Abstracting with credit is permitted. To copy otherwise, or republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee. Request permissions from [email protected]

In-Cooperation

AOSA: Aspect-Oriented Software Association

Publisher

Association for Computing Machinery

New York, NY, United States

Publication History

Published: 03 April 2017

Permissions

Request permissions for this article.

Request Permissions

Check for updates

Author Tags

Qualifiers

Research-article
Research
Refereed limited

Conference

Programming '17

Programming '17: International Conference on the Art, Science, and Engineering of Programming

April 3 - 6, 2017

Brussels, Belgium

Contributors

Other Metrics

View Article Metrics

Bibliometrics & Citations

Bibliometrics

Article Metrics

4
Total Citations
View Citations
415
Total Downloads

Downloads (Last 12 months)36
Downloads (Last 6 weeks)2

Reflects downloads up to 20 Jan 2025

Other Metrics

View Author Metrics

Citations

Cited By

Jayashree SDias GAndrew JSaha SMaurel FFerrari S(2022)Multimodal Web Page Segmentation Using Self-organized Multi-objective ClusteringACM Transactions on Information Systems10.1145/348096640:3(1-49)Online publication date: 7-Mar-2022
https://dl.acm.org/doi/10.1145/3480966
Arévalo Arboleda JMoreno Sánchez INavarro Newball AContreras Roldán V(2021)Usabilidad y geolocalización narrativa para el seguimiento del patrimonio artístico españolArte, Individuo y Sociedad10.5209/aris.7029833:4(1117-1135)Online publication date: 12-Jul-2021
https://doi.org/10.5209/aris.70298
Riyana SRiyana NNanthachumphu S(2021)Privacy Preservation Techniques for Sequential Data ReleasingProceedings of the 12th International Conference on Advances in Information Technology10.1145/3468784.3470468(1-9)Online publication date: 29-Jun-2021
https://dl.acm.org/doi/10.1145/3468784.3470468
Wohlmuth CCorreia N(2020)Keeping Digital Libraries Alive: Designing an Interactive Scientific Publication to Drive Demands of Scholars Based on Participatory DesignInteractivity, Game Creation, Design, Learning, and Innovation10.1007/978-3-030-53294-9_46(623-632)Online publication date: 28-Jul-2020
https://doi.org/10.1007/978-3-030-53294-9_46

View Options

Login options

Check if you have access through your login credentials or your institution to get full access on this article.

Full Access

Get this Publication

View options

PDF

View or Download as a PDF file.

eReader

View online with eReader.

Media

Figures

Other

Tables

View Table of Contents