Templates: Responsive Design for the Mobile Web

orwinr
Community Champion
7
3615

The Information School, iSchool, at the University of Washington has been providing templates for our Canvas courses since about late 2012. We started using Canvas in fall of 2011. Our templates have evolved with the available technological advances and we have spent the last few months designing for the next iteration. One of my colleagues, putrih‌, has spent a great deal of time working on this new generation of templates.

 

Part of the design process was to do a detailed usability study with a number of our students from the various programs that we offer at the iSchool. We offered gift cards to the participants and then sat with them as they worked their way through two different versions of the next gen templates. By far, they preferred our "compact" design for the less complex courses. This design uses collapsible sections that work pretty well in most browsers both on the desktop and on mobile. Unfortunately, we haven't been able to get the javascript right so the collapsible sections work on the apps. We are working with  @kenneth_larsen ‌ from Cidi Design Tools to help us figure out what is happening in the apps. Yes, Design Tools was used heavily throughout the coding process and really simplified the task in many ways.

 

The question that we always struggle with is whether to optimize our templates for responsiveness or make them work best in the app. There are pros and cons either way but we are currently leaning more to the responsive design that works in the mobile browsers. For what our students do on mobile, based on a survey from a year ago, I think our focus on responsive is better at this point. What are your thoughts about developing for the apps, mobile web or both?

 

So, let's take a look at our "compact" template on both the Desktop and Mobile:

 

280486_pastedImage_1.jpg

 

The image above show the desktop version of the template on the left and the mobile version on the right. The desktop version is shown in the Chrome browser and the mobile version is from Chrome on an Android device running Android 5.1 Nearly identical other than the purple menu wrapping and the course stream link loading at the bottom on mobile.

 

The next image shows "Week 1" expanded on both platforms, desktop on the left and mobile on the right:

 

280487_pastedImage_2.jpg

 

You can see that the 3 column layout on the desktop collapses really well to a single column on the mobile side.

 

The next image show the comparison between the two platforms showing the menu on the syllabus page:

 

 

280488_pastedImage_3.jpg

 

The last thing I will share is a two minute screencast of this template being used on my phone. It works really well.

 

 

I hope people find this post useful 🙂

7 Comments
scottdennis
Instructure
Instructure

Thanks, Randy!

danielcktan
Community Contributor

Our institution add support for Bootstrap Framwork to create mobile-friendly course page layout. 

We did not include everything from Bootstrap CSS. Just the Grids and selected components to our theme's customise CSS for desktop and mobile.

rseilham
Community Champion

Thanks for sharing! Do you have any screenshots to share? 

danielcktan
Community Contributor

Hi  @rseilham ‌,

Here is a sample of what we have done on our Canvas.

311393_pastedImage_1.png

rseilham
Community Champion

This is really neat. Thanks for sharing. Do you have any screenshots from the Canvas Teacher and/or Student apps as well? 

danielcktan
Community Contributor

Hi  @rseilham ‌,

Here is a screen shot of the same page viewed using Student App on iPad.

The layout is responsive and re-organised and stacked accordingly to the view-port.

314099_pastedImage_1.png

314100_pastedImage_2.png

BStutzman
Community Champion

Hi,

Where could I get these templates?  Are they in commons?  Thanks!