This document summarizes the redesign of an online educational platform to be responsive. It discusses surveying users, sketching layouts, choosing the responsive framework SkelJS, and using the preprocessor Less. Prototypes were created in HTML/CSS. The design adapts to phones, tablets, and desktops. Panels and overlays were added for navigation on small screens using SkelJS. Videos and interactions were converted to be responsive using tools like SublimeVideo.

1. mLearnCon 2014
A ResponsiveWeb Solution
for a Complex Online Educational Platform
Amy Rae Som, University of Arizona Center for Integrative Medicine

2. Overview
✤ Project background!
✤ Mobile learning delivery options!
✤ Responsive web design !
✤ Technology options for responsive web!
✤ Our design/development process

3. Project background

4. Just a bit about me
BA Studio Art Graphic & Web Design ~9 y
MSEd Instructional Systems Instructional Design ~6 y

5. 01
Online learning
at AzCIM
✤ 2-year Fellowship program for physicians,
PAs, NPs (5 concurrent international cohorts)!
✤ 6-month IH program for licensed health
practitioners (2 cohorts/year)!
✤ 1-month Medical Student Rotation program
(2 cohorts/year)!
✤ 4-year Medical Student Distinction Track (4
concurrent cohorts)!
✤ 3-year Medical Residency program (over 50
sites across US)!
✤ 150+ students concurrently enrolled in stand-
alone courses

6. 01
Usage Statistics
Based on video downloads. Excludes 5% video through iTunes.
iPad 14%
iPhone 2%
Android <1%
IE 9% (IE8 4.6%)
Chrome 19%
Safari 35%
Firefox 15%

7. 01
Device support
Prior to Redesign Project!
✤ Any OS !
✤ Any browser (even IE 6!)!
After Redesign Launch!
✤ Any modern browser, with the
exception of IE 8+

8. Options for mobile delivery
of AzCIM learning platform

9. 01
Options for
mobile delivery
✤ Do nothing:
same website for all!
✤ 2 websites: one mobile version,
one desktop (full) version!
✤ Native mobile app!
✤ Responsive web

10. Mobile option:
Do nothing / Same site for all
✤ Deliver the same website to every device!
Do nothing +!
✤ Deliver the same website to every device, but use
mobile-accessible technologies: HTML 5 video,
eliminate Flash interactions

11. 01
Mobile option:
Two websites
✤ Keep the current full website as
“desktop” version!
✤ Create a separate mobile
version of the site:
m.website.edu

12. 01
Mobile option:
Native app
✤ Kind of like the 2 website
option, except the mobile
version is not web-based, but a
native app built for Android/
iOS!
✤ Or you can look at particular
use cases for a mobile app in
addition to the full website,
either second-screen or
separate experiences

13. Mobile option: Responsive web design
✤ Deliver the same website to every device, BUT!
✤ Visual display adapts to suit the device

14. Responsive web design:
What, how & why

15. 01
What: One set of code,
2 or more designs
✤ Initial design process is very
similar to designing for the 2
website option!
✤ Think about ideal experience
for phone, tablet, PC!
✤ May have 2 or more sets of UI
designs

16. 01
How:
Technology options
✤ From scratch: Use CSS media queries
to create custom responsive layouts!
✤ Use a framework: !
✤ Bootstrap!
✤ Foundation!
✤ many more:
22 Best Responsive Frameworks
HTML 5 Frameworks
Responsive Design Frameworks
@media only screen and (min-width: 769px)
{
.block1 {
position: relative;
width: 20%;
padding: 5%;
margin-right: 5%;
float: left;
overflow: auto;
}
}
@media only screen and (maz-device-width:768px)
{
.block1 {
position: relative;
width: 90%;
padding: 5%;
margin-bottom: 5%;
overflow:auto;
}
}

17. 01
Why from
scratch?
✤ You and your team are design
ninjas and CSS gurus!
✤ You can design a solution
exactly to your specifications,
with no extraneous features or
code bloat
@media only screen and (min-width: 769px)
{
.block1 {
position: relative;
width: 20%;
padding: 5%;
margin-right: 5%;
float: left;
overflow: auto;
}
.block2 {
position: relative;
width: 20%;
padding: 5%;
margin-right: 5%;
float:left;
overflow: auto;
}
}
@media only screen and (maz-device-width:768px)
{
.block1 {
position: relative;
width: 90%;
padding: 5%;
margin-bottom: 5%;
overflow:auto;
}

18. 01
Why use a
framework?
✤ Documented browser support:
less debugging required!
✤ Can reduce development time: !
✤ Grid system already built!
✤ CSS/JS schema devised

19. AzCIM design
& development process

20. Steps in our process
✤ Survey different learner / user groups!
✤ Start designing for different groups with pencil sketches!
✤ Create more refined layout drawings in Adobe
Fireworks/Photoshop!
✤ Choose a framework!
✤ Rapid prototype in HTML/CSS/JS

21. 01
Pencil sketches
✤ Pencil sketches were the genesis
of reimagining the entire UI and
UX of our learning website!
✤ Sketch templates:!
✤ http://www.looks.gd/
design/sketchbooks-of-a-web-
developer!
✤ http://www.hongkiat.com/
blog/useful-offline-utensils-
and-toolkits-for-designers/

22. Digital layout drawings
✤ Digital layout drawings were more refined than pencil
sketches, but not polished design comps

23. 01
Choose a
framework: skelJS
✤ Flexible grid system!
✤ Lightweight (20k)!
✤ Compatible with jQuery!
✤ Works in the browsers that we
need to support!
✤ Has a useful Panels plug-in!
✤ Good documentation!
✤ Easy to learn

24. 01
Rapid prototype
in HTML
✤ Create static HTML pages in
skelJS to represent site
templates!
✤ Create system templates in
skelJS!
✤ Iterate layers of visual
refinement with CSS

25. Phone layout

26. Tablet layout

27. PC layout (Fellowship program)

28. PC layout (medical student rotation)

29. Two core technologies: skelJS and Less
Less: CSS preprocessorskelJS: responsive web framework

30. Overview: skelJS

31. How to: skelJS
✤ Define grid-based layouts in HTML!
✤ Define breakpoints for skel!
✤ Create stylesheets for different breakpoints!
✤ Define content for Panels plug-in

32. 01
Define grid-based
layout in HTML
<div class="row">
<div class="12u">12u</div>
</div>
<div class="row">
<div class="3u">3u</div>
<div class="9u">9u</div>
</div>
<div class="row">
<div class="6u">6u</div>
<div class="6u">6u</div>
</div>
<div class="row">
<div class="6u">6u</div>
<div class="6u">6u</div>
</div>
✤ “row” is the fundamental structure
for the grid!
✤ each row is 12 units (“12u”) wide

33. Define display-size breakpoints
window._skel_config = {
prefix: "/css/style",
preloadStyleSheets: true,
resetCSS: true,
boxModel: "border",
grid: { gutters: 15 },
breakpoints: {
wide: { range: "1200-", containers: 'fluid', grid: { gutters: 30 } },
notnarrow: { range: "801-1199", containers: 'fluid' },
narrow: { range: "591-800", containers: 'fluid' },
mobile: { range: "-590", containers: "fluid", lockViewport: true, grid:
{ gutters: 0, collapse: true } }
}
};

34. Create stylesheets for different
display-size breakpoints
✤ If three breakpoints, e.g., !
✤ mobile !
✤ narrow!
✤ wide!
!
✤ Need stylesheets for each
breakpoint!
✤ style-mobile.css!
✤ style-narrow.css!
✤ style-wide.css!
✤ plus a general
stylesheet, style.css.

35. AzCIM site setup
✤ Four breakpoints:!
✤ mobile (-590 px)!
✤ narrow (591-800 px)!
✤ notnarrow
(801-1199 px)!
✤ wide (1200- px)!
✤ Two color palettes:!
✤ Community!
✤ Curriculum program

36. AzCIM site—mobile

37. AzCIM site—tablet

38. AzCIM site—PC (“not narrow”)

39. AzCIM site—PC

40. Overview: Less

41. Less: a CSS preprocessor
✤ Less extends CSS with !
✤ variables!
✤ mixins !
✤ functions!
!
✤ Write styles in Less,
compile to CSS!
✤ Allows for development
in discrete chunks and
deployment of compiled
minified files

42. Variables
@default_font: 'Source Sans Pro', sans-serif;
!
/* colors */
@center_taupe: #7b7464;
@center_light_green: #68a957;
@center_dark_green: #134c36;
!
/* paragraph formatting */
@default_type_size: 1.6rem;
@default_line_height: 1.4;
@para_space_after: 6px;
!
/* block formatting */
@gutter_size: 15px;
@default_padding: 6px;

43. Mixins
.linkTextNoDeco {
text-decoration: none;
color: @default_txt_color;
}
.basicBlock {
padding: @default_padding;
border: @default_border;
}
.featuredBlock {
background: @featured_bg;
.basicBlock;
.boxShadow(14px, -2px);
}
.toolBlock {
background: @button_bg;
font-weight: 600;
.basicBlock;
.linkTextNoDeco;
a {
.linkTextNoDeco;
}
}
.specialToolBlock {
.toolBlock;
background: @special_btn_bg;
}

44. Functions
.roundedCorners (@radius: 6px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}
.boxShadow (@shadow_blur: 10px, @shadow_spread: 0) {
box-shadow: 1px 1px @shadow_blur @shadow_spread #555;
}
.textShadow (@shadow_blur: 12px, @shadow_color: #333) {
text-shadow: 1px 1px @shadow_blur @shadow_color;
}

45. Discrete development files,
compiled deployment files
style.less:!
@import "common_vars.less";
@import "campus_skin.less";
@import "default_sizes.less";
@import "default_styles.less";
style-mobile.less:!
@import "common_vars.less";
@import "campus_skin.less";
@import "mobile_sizes.less";
@import "mobile_styles.less";
style-programs.less:!
@import "common_vars.less";
@import "programs_skin.less";
@import "default_sizes.less";
@import "default_styles.less";

46. Less files in Crunch

47. AzCIM site—mobile

48. AzCIM site—tablet

49. AzCIM site—PC (“not narrow”)

50. AzCIM site—PC

51. skelJS panels

52. Panels plug-in

53. Panels code
window._skel_panels_config = {
panels: {
leftPanel: {
breakpoints: 'mobile',
position: "left",
size: 200,
style: 'push',
html: '<div data-action="moveCell" data-args="mainNav,mainSection"></div>'
}
},
overlays: {
menuToggler: {
breakpoints: "mobile",
position: "middle-left",
width: 88,
height: 48,
html: '<div class="toggle" data-action="togglePanel" data-args="leftPanel">Site
Navigation</div>'
}
}
};

54. skelJS Panels plug-in
✤ Includes two UI elements:!
✤ Panels!
✤ Areas that can slide in/out from the sides of the
viewport!
✤ Overlays!
✤ Always-visible areas anchored to the edges of the
viewport

55. AzCIM Panels
✤ Linked to the “mobile” breakpoint, so they only appear on
small-screen devices!
✤ Important options:!
✤ Position (“left”, “middle-left”)!
✤ Size (“size: 200”, “width: 88, height: 48”)!
✤ Style (“push”—slides panel in, pushes the page over)!
✤ Action (“moveCell”, “togglePanel”)

56. “Rich media” elements

57. Learning interactions and
information viewers
✤ Flex ➛ HTML
conversions!
!
!
!
!
✤ HTML ➛ jQueryMobile

58. jQueryMobile
for information viewers
Old version:
HTML with JS behaviors
New version:
jQueryMobile inside <iframe>

59. Fluid video
Ideally, video in a responsive design will resize fluidly as
the container resizes.!
✤ SublimeVideo http://sublimevideo.net/ !
<script type="text/javascript" src="//
cdn.sublimevideo.net/js/[YOUR_KEY].js"></script>
<video src="/path/to/video.mp4" type="video/mp4"
class="sublime" data-autoresize="fit"
preload="none"></video>

60. Questions?

61. Contact me:
Amy Rae Som!
asom@email.arizona.edu!
twitter.com/avisualmind!
avisualmind.tumblr.com