Nishant Sinha
ABSTRACT
As the web becomes ubiquitous, developers are obliged to develop web applications for a variety of desktop and mobile platforms. Re- designing the user interface for every such platform is clearly cumbersome. We propose a new framework based on model-based compilation to assist the designer in solving this problem. Starting from an under-specified visual design mockup drawn by the designer, we show how faithful and flexible web pages can be obtained with virtually no manual effort. Our framework, in sharp contrast to existing web design tools, overcomes the tough challenges involved in mockup compilation by (a) employing combinatorial search to infer hierarchical layouts and (b) mechanizing adhoc principles for CSS design into a modular, extensible rule-based architecture. We believe ours is the first disciplined effort to solve the problem and will inspire rapid, low-effort web design.
- Adobe Dreamweaver CS6. http://www.adobe.com/ products/dreamweaver.html.Google Scholar
- Balsamiq. http://www.balsamiq.com/.Google Scholar
- Cascading Style Sheets Level 2 Revision 1 (css 2.1) Specification. http://www.w3.org/TR/CSS21/.Google Scholar
- Cisco visual networking index: Forecast and methodology, 2011-2016. http://www.cisco.com/en/US/solutions/ collateral/ns341/ns525/ns537/ns705/ ns827/white_paper_c11-481360_ns827_ Networking_Solutions_White_Paper.html.Google Scholar
- CSS flexible box layout module. http://www.w3.org/TR/css3-flexbox/.Google Scholar
- Drupal - open source cms. http://drupal.org/.Google Scholar
- Gecko - mozilla | mdn. https://developer. mozilla.org/en-US/docs/Mozilla/Gecko.Google Scholar
- Html5. http://www.w3.org/TR/html5/.Google Scholar
- Interactive wireframe software and mockup tool. http://www.axure.com/.Google Scholar
- Less: The dynamic stylesheet language. http://lesscss.org/.Google Scholar
- Maqetta. http://maqetta.org/.Google Scholar
- Microsoft Expression Web 4. http://www.microsoft.com/expression/ products/Web_Overview.aspx.Google Scholar
- node.js. http://nodejs.org/.Google Scholar
- Normalize.css: Make browsers render all elements more consistently. http://necolas.github.com/normalize.css/.Google Scholar
- Sass - syntactically awesome stylesheets. http://sass-lang.com/.Google Scholar
- Techniques for web content accessibility guidelines 1.0. http://www.w3.org/TR/WCAG10-TECHS/ #tech-style-sheets.Google Scholar
- Unbeatable javascript tools - the dojo toolkit. http://dojotoolkit.org/.Google Scholar
- The webkit open source project. http://www.webkit.org.Google Scholar
- Wordpress: Blog tool, publishing platform, and cms. http://wordpress.org/.Google Scholar
- Yahoo! design pattern library. http://developer.yahoo.com/ypatterns/.Google Scholar
- Zen grids: a responsive grid system built with compass and sass. http://zengrids.com/.Google Scholar
- G. J. Badros, A. Borning, and P. J. Stuckey. The cassowary linear arithmetic constraint solving algorithm. ACM Trans. Comput.-Hum. Interact., 8(4):267–306, December 2001. Google ScholarDigital Library
- Greg J. Badros, Alan Borning, Kim Marriott, and Peter Stuckey. Constraint cascading style sheets for the web. UIST ’99, pages 73–82, 1999. Google ScholarDigital Library
- K. Z. Gajos, D. S. Weld, and J. O. Wobbrock. Decision-theoretic user interface generation. In AAAI, pages 1532–1536, 2008. Google ScholarDigital Library
- K. Z. Gajos, D. S. Weld, and J. O. Wobbrock. Automatically generating personalized user interfaces with supple. Artif. Intell., 174(12-13):910–950, 2010. Google ScholarDigital Library
- G. Gange, K. Marriott, and P. Stuckey. Optimal guillotine layout. In Proceedings of the 2012 ACM symposium on Document engineering, DocEng ’12, pages 13–22, 2012. Google ScholarDigital Library
- P. Geneves, N. Layaida, and V. Quint. On the analysis of cascading style sheets. In Proceedings of the 21st international conference on World Wide Web, WWW ’12, pages 809–818, 2012. Google ScholarDigital Library
- V. Grigoreanu, R. Fernandez, K. Inkpen, and G. Robertson. What designers want: Needs of interactive application designers. VLHCC ’09, 2009. Google ScholarDigital Library
- N. Hurst, W. Li, and K. Marriott. Review of automatic document formatting. In Proceedings of the 9th ACM symposium on Document engineering, DocEng ’09, pages 99–108, 2009. Google ScholarDigital Library
- P. M. Marden Jr. and E. V. Munson. Today’s style sheet standards: The great vision blinded. IEEE Computer, 32(11):123–125, 1999. Google ScholarDigital Library
- M. Keller and M. Nussbaumer. Cascading style sheets: a novel approach towards productive styling with today’s standards. In WWW, pages 1161–1162, 2009. Google ScholarDigital Library
- M. Keller and M. Nussbaumer. Css code quality: A metric for abstractness; or why humans beat machines in css coding. In QUATIC, pages 116–121, 2010. Google ScholarDigital Library
- S. Khanna, S. Muthukrishnan, and M. Paterson. On approximating rectangle tiling and packing. In Proceedings of the ninth annual ACM-SIAM symposium on Discrete algorithms, SODA ’98, pages 384–393, 1998. Google ScholarDigital Library
- D. E. Knuth. Digital Typography. Cambridge University Press, New York, NY, USA, 1997. Google ScholarDigital Library
- Ali Sinan Köksal. Live tiles from end-user mockups. CHI 2012.Google Scholar
- R. Kumar, J. O. Talton, S. Ahmad, and S. R. Klemmer. Bricolage: example-based retargeting for web design. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, CHI ’11, pages 2197–2206, 2011. Google ScholarDigital Library
- H. W. Lie. Cascading style sheets. PhD thesis, University of Oslo, February 2006.Google Scholar
- S. Lok and S. Feiner. A survey of automated layout techniques for information presentations, 2001.Google Scholar
- A. Mesbah and S. Mirshokraie. Automated analysis of css rules to support style maintenance. In ICSE, pages 408–418, 2012. Google ScholarDigital Library
- Leo A. Meyerovich and Rastislav Bodík. Fast and parallel webpage layout. In WWW, pages 711–720, 2010. Google ScholarDigital Library
- S. Muthukrishnan, Viswanath Poosala, and Torsten Suel. On rectangular partitionings in two dimensions: Algorithms, complexity, and applications. In Proceedings of the 7th International Conference on Database Theory, ICDT ’99, pages 236–256, 1999. Google ScholarDigital Library
- M. W. Newman and J. A. Landay. Sitemaps, storyboards, and specifications: a sketch of web site design practice. In Proceedings of the 3rd conference on Designing interactive systems: processes, practices, methods, and techniques, DIS ’00, pages 263–274, 2000. Google ScholarDigital Library
- F. K. Ozenc, M. Kim, J. Zimmerman, S. Oney, and B. Myers. How to support designers in getting hold of the immaterial material of software. CHI ’10, pages 2513–2522, 2010. Google ScholarDigital Library
- Vincent Quint and Irène Vatton. Editing with style. In ACM Symposium on Document Engineering, pages 151–160, 2007. Google ScholarDigital Library
- D. Reed and J. Davies. The convergence of computer programming and graphic design. J. Comput. Sci. Coll., 21(3):179–187, February 2006. Google ScholarDigital Library
- K. A. Sakallah and J. Marques-Silva. Anatomy and empirical evaluation of modern sat solvers. Bulletin of the EATCS, 103:96–121, 2011.Google Scholar
- Manuel Serrano. Hss: a compiler for cascading style sheets. In PPDP, pages 109–118, 2010. Google ScholarDigital Library
- B. V. Zanden and B. A. Myers. Automatic, look-and-feel independent dialog creation for graphical user interfaces. CHI ’90, pages 27–34, 1990. Google ScholarDigital Library
Index Terms
- Compiling mockups to flexible UIs
Recommendations
Designing web accessibility
The majority of websites have not been designed to make them accessible to all the people for whom they are intended. Nowadays, eEurope initiative (European Commission-eEurope, 2005), wants the institutions to become aware of the necessity of ...
The portrait of a common HTML web page
DocEng '06: Proceedings of the 2006 ACM symposium on Document engineeringWeb pages are not purely text, nor are they solely HTML. This paper surveys HTML web pages; not only on textual content, but with an emphasis on higher order visual features and supplementary technology. Using a crawler with an in-house developed ...
Responsive designs in a snap
ESEC/FSE 2015: Proceedings of the 2015 10th Joint Meeting on Foundations of Software EngineeringWith the massive adoption of mobile devices with different form- factors, UI designers face the challenge of designing responsive UIs which are visually appealing across a wide range of devices. De- signing responsive UIs requires a deep knowledge of ...
Comments