One of the greatest challenges in web programming I found to be the graphical design of sites. Achieving a web site with a modern look with CSS is much like programming a compiler in assembly language. It requires a considerable amount of low-level knowledge. So I was fairly satisfied with the design of my blog as seen in the screen shot on the right. The color scheme was based on Solarized, which was developed to optimize readability of code in editors. The font for the headers was some funny Google font.
However, there was one striking problem with the site. It was not very readable on mobile devices such as phones and tablets. So, I set out to develop a mobile web application in mobl. That project was orphaned when I had other projects to do. But I was also struggling with the motivation for the project; an offline-capable application for a blog/wiki site is not exactly what is needed.
For the WebLab project I had discovered Twitter Bootstrap, which makes web design a breeze. At least, it allows someone like me (with limited time to divulge in CSS hacking) to focus on the functional design and the high-level web design; as opposed to the ad hoc low-level CSS hacking that I was doing before. WebLab has a fixed size layout designed for a screen with 1024 pixels of resolution, as did my blog application.
Now, I've taken a dive into Bootstrap's features for responsive design, and redesigned this site. After porting the layout to Bootstrap, figuring out the drop down menus, and adapting the default Bootstrap CSS a bit, the main work was in making the header and footer menus configurable. The important difference with respect to the old design is that the sidebar is gone; the information has been moved to the header menus or to the itemized lists in the footer. In addition, I extended the wiki with a notion of groups, so that a set of wiki pages can share navigation menus.
You are looking at the result (unless you are reading this in a feed reader). Blog and wiki pages should be equally readable on phones, tables, laptops, and desktop computers. Even the images are automatically re-sized, without a minute of my time.
If you are interested in writing WebDSL applications with Bootstrap you will find my elib WebDSL library useful. It provides templates abstracting from common Bootstrap patterns. In addition it provides a bunch of other useful WebDSL utilities developed over the course of several projects.
Lennart C. L. Kats, Eelco Visser. The Spoofax language workbench: rules for declarative specification of languages and IDEs. In William R. Cook, Siobhán Clarke, Martin C. Rinard, editors, Proceedings of the 25th Annual ACM SIGPLAN Conference on Object-Oriented Programming, Systems, Languages, and Applications, OOPSLA 2010, October 17-21, 2010, Reno/Tahoe, Nevada, USA. pages 444-463, ACM, Reno/Tahoe, Nevada, 2010.
received the student paper award. Today (August 29, 2012) I found the official signed confirmation of the award in my pigeon hole at the university. Hurray!
At Onward 2012 we will present our research agenda for bringing software development to the web:
Lennart C. L. Kats, Richard Vogelij, Karl Trygve Kalleberg, Eelco Visser. Software Development Environments on the Web: A Research Agenda. In Proceedings of the 11th SIGPLAN symposium on New ideas, new paradigms, and reflections on programming and software (Onward! 2012), ACM Press, 2012. (researchr, pdf)
Abstract. Software is rapidly moving from the desktop to the Web. The Web provides a generic user interface that allows ubiquitous access, instant collaboration, integration with other online services, and avoids installation and configuration on desk- top computers. For software development, the Web presents a shift away from developer workstations as a silo, and has the promise of closer collaboration and improved feedback through innovations in Web-based interactive development environments (IDEs). Moving IDEs to the Web is not just a matter of “porting” desktop IDEs; a fundamental reconsideration of the IDE architecture is necessary in order to realize the full potential that the combination of modern IDEs and the Web can offer. This paper discusses research challenges and opportunities in this area, guided by a pilot study of a web IDE implementation.