September 10 - 12, 2013

Making Complex Web Apps Responsive


Making Complex Web Apps Responsive



Want to create a compelling mobile experience while avoiding a complete rebuild of your site? Responsive design techniques are not just for brochure web sites -- they can be used to adapt complex web apps to make them mobile friendly. Until very recently, complex web apps were not designed with the mobile experience in mind. With users adopting phones and tablets as their primary browsing devices, there is an expectation for websites to offer the same experience on mobile as they do on a desktop. Responsive design is well suited to overhaul websites without completely rewriting the front-end.

CCLE (Common Collaboration and Learning Environment) runs the primary course management system for UCLA based on Moodle 2. Using SASS and leveraging CSS media queries, CCLE has been able to improve Moodle’s mobile usability without a complete rewrite of the front-end.

We will begin by discussing the importance of using a framework, and how you can integrate that framework into your web app. Then I will show you how to override CSS with minimal friction using SASS. Next, I will show how to use responsive mixins to make a website’s grid responsive. Finally, we will address some caveats you should keep in mind when using responsive design and ways to work around the constraints.


Alfonso Roman is a developer for CCLE (Common Collaboration and Learning Environment), the primary course management system for UCLA.




Technical Level


  • The Web, Today and the Future
  • Frameworks of the Modern Web
  • Responsive Design
  • CSS 3
  • CSS Precompilers
  • Responsive Web Design
  • Mobile Web App