Responsive Design

Owned by Nick Schwieterman (Unlicensed)
Last updated: Feb 05, 2021 by Tom Garbelotti
2 min read

Responsive design is an approach to web design that attempts to provide optimal website viewing experiences across a wide range of devices, especially mobile phones and tablets.  

CCLE is designed with this principle in mind, so it is important to know how the user interface changes across platforms.

Simulate Mobile View on Computer

  • You can simulate the different viewing experiences on your computer through features on your browser.  Most browsers have a screens icon (pictured here) that allow you to toggle this option when in Developer Mode.

 

 

  • Firefox users, go to the Menu in the upper right (far right from the web address bar), and select Web Developer > Responsive Design Mode [or, Mac keystroke Command+Alt+M]. 

  • Chrome users, go to Menu > More Tools > Developer Tools and toggle the device toolbar by clicking the second icon . You may select specific mobile devices to simulate from here.

  • Safari users, enable “Develop menu” by going to Safari preferences, and under Advanced, toggle the checkbox to “Show Develop menu in menu bar”. Then go to Develop > Enter Responsive Design.

Once in Responsive Design mode, you can select attributes to simulate specific models of phones and tablets.

 

The most noticeable change in CCLE is that the three-column layout in the desktop version reduces to a single scrolling column on mobile devices. This layout makes items on the course site the primary content of CCLE, with weekly tabs and activity types reduced to a hidden sidebar. To access the CCLE course menu, tap the three horizontal lines, or the hamburger menu icon, on the top left corner of the site.

 

Adding and editing activities and resources in the mobile view works similarly to the desktop version. However, there are certain functionalities that are slightly more difficult to use in the mobile interface, such as the “Grader Report” and embedded Google Docs and PDFs, since they do not conform to smaller screen sizes.

 

Responsive design in CCLE is ideal for faculty and students hoping to view course materials on a variety of devices. For editing content, we recommend using a larger screen due to the natural limitations of the smaller screen.