MMWCON

September 10 - 12, 2013
MMWCON

Making Complex Web Apps Responsive

Title

Making Complex Web Apps Responsive

Presenter

Abstract

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.

Presenter(s)

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

Details

Type

Presentation

Technical Level

Intermediate

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