mLearnCon 2014 - A responsive web solution for a complex online educational platform

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

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

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

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

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%

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+

Options for mobile delivery  
of AzCIM learning platform

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

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

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

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

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

Responsive web design: 
What, how & why

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

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;
}
}

01
Why from
scratch?
✤ You and your team are design
ninjas and CSS gurus!
✤ You can design a solution
exactly to your speciﬁcations,
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;
}

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

AzCIM design  
& development process

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

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-ofﬂine-utensils-
and-toolkits-for-designers/

Digital layout drawings
✤ Digital layout drawings were more reﬁned than pencil
sketches, but not polished design comps

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

01
Rapid prototype
in HTML
✤ Create static HTML pages in
skelJS to represent site
templates!
✤ Create system templates in
skelJS!
✤ Iterate layers of visual
reﬁnement with CSS

PC layout (Fellowship program)

PC layout (medical student rotation)

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

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

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

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 } }
}
};

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.

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

AzCIM site—PC (“not narrow”)

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
miniﬁed ﬁles

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;

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;
}

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;
}

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 "campus_skin.less";
@import "mobile_sizes.less";
@import "mobile_styles.less";
style-programs.less:!
@import "programs_skin.less";
@import "default_sizes.less";
@import "default_styles.less";

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>'
}
}
};

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

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”)

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

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

Fluid video
Ideally, video in a responsive design will resize ﬂuidly 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>

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

mLearnCon 2014 - A responsive web solution for a complex online educational platform

More Related Content

What's hot (9)

Viewers also liked (20)

Similar to mLearnCon 2014 - A responsive web solution for a complex online educational platform (20)

Recently uploaded (20)

mLearnCon 2014 - A responsive web solution for a complex online educational platform