MULTIPLE SCREEN SIZES ONE INSTRUCTIONAL DESIGN Tracy Bissette, Weejee, @tlbissette 6.11.2015
Jul 30, 2015
“IN 2006, JUST TWO SCREEN SIZES ACCOUNTED FOR 77% OF ALL WEB USAGE.
TODAY, EIGHT SCREEN SIZES—VARIOUS LAPTOPS, SMARTPHONES, TABLETS, MONITORS, WEB-ENABLED TVS,
AND NETBOOKS—ACCOUNT FOR 77% OF WEB USAGE.
NO ONE SCREEN SIZE HAS MORE THAN 20% OF THE MARKET SHARE.”
http://www.mobify.com/blog/global-screen-size-diversity/
How to plan and design one learning solution that is instructionally optimized for multiple devices and screen sizes.
Considerations for each device type and screen size
How to communicate your ”convertible” design to team members, clients, and SMEs
Rapid prototyping techniques
SESSION DISCUSSIONObjectives
WHAT IS RESPONSIVE DESIGN?
Design will “fluidly change and respond to fit any device.”
WHAT IS RESPONSIVE DESIGN?
Design will “fluidly change and respond to fit any device.”
WHAT IS ADAPTIVE DESIGN?
Design uses a “predesigned set of layout sizes.” “It detects the device and calls up the properly sized layout
to view.”
-Captivate 8 website
http://www.liquidapsive.com/
WHY DO WE NEED RESPONSIVE E-LEARNING?
› To be learner centric, we want to reach learners wherever they are.
› There is research showing that sitting in a chair reduces concentration and
increases fatigue.
› It’s not cost effective to have different versions for different devices.
› Device sizes change frequently.
› Users expect responsive design because websites are already mobile-
friendly.
› Using responsive design logic, we can provide a single solution for in-depth
course or performance aid, depending on screen size.
How might our approach to ID change for a responsive learning solution?
DESIGNING FOR RESPONSIVE DESIGN E-LEARNING
Think about the learner’s context while using the device.
Leverage the grid concept in responsive design.
Apply responsive web design and mobile-first best practices to
e-learning.
Think about the desired behavior change to determine what
takes priority.
SO, HOW DO WE DESIGN FOR RESPONSIVE OR ADAPTIVE
E-LEARNING?
CONTEXT CONSIDERATIONS FOR DIFFERENT SCREEN SIZES
› On a phone, the user is likely standing or walking, possibly about to perform
the task—
”on-the-go experience”
› On a tablet, the user is likely sitting but may be standing—”lean back
experience”
› On a desktop, the user is likely sitting at a desk
› Consider whether you are using landscape, portrait or both
HOW DOES A FLUID GRID WORK?“ALLOWS LAYOUTS TO ADAPT TO DIFFERENT DEVICES, WITH THEIR MANY VARIED SCREEN SIZES.”
http://www.coffeecup.com/help/articles/grids-for-bullet-proof-responsive-design/
USE THE GRIDwww.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop
A
B
C
A
B C
USE THE GRIDwww.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop
A
B
C D E
F
A
B
C D E
F
USE THE GRIDwww.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop
A
B
D
GF
C
E
A
D
B C
E
F G
RESPONSIVE DESIGN NOMENCLATURE
A
B
C
D…
Menu, Instructions, Key concept
Choices, items to exploreItems may fall out or change
LARGE SCREEN TO PERFORMANCE SUPPORT AID
Immersive simulation Performance support
Inspecting Investigational
Product
Storage area conditionsAuthorized personnel
Last patient, last dose
Last patient, last dose
ANOTHER LAYER--PARALLAX
http://www.nytimes.com/newsgraphics/2014/sochi-olympics/ski-jumping.html
http://nasaprospect.com/
MOVE ELEMENTS ON A PAGE AT DIFFERENT RATES
Great for telling a story.
ANOTHER LAYER--PARALLAX
http://ao.com/life/kitchen/kitchen-tips/wasteless/
HORIZONTAL SCROLLING
THOUGHT PROCESS FOR A RESPONSIVE DESIGN SOLUTION
› Think about the context and performance objectives
› Sort your content into As, Bs, Cs, Ds…
› Establish guidelines for content types in your organization
› Which elements of the grid drop out in smaller screen sizes?
› Which elements of the grid change in smaller screen sizes?
› Wireframe on the grid
ACTIVITY
Design a 1-2 screen module on making the sandwich of your
choice.
› I’ll pass out grid worksheets.
› Identify the key elements in your module.
› Sketch them out on a grid of your choice or create your own
for both larger screen and smaller screen.
› Volunteers to share?
Design a responsive sandwich making module with a partner.
ACTIVITY
Objective: Be able to make a peanut butter and jelly sandwich.
Elements:
› Supplies needed
› Steps
› Visuals or videos of the steps
Nice to haves:
› Nutritional information
› Prep time
Design a responsive sandwich making module.
ONE APPROACH
A--Title
B-Step
Recipe title
Su
pplie
s
Nutritional info (scroll)
Step 1
Step 2
Step 4
Step 5
Step 3
Step 7
Step 8
Step 6
B--SuppliesC-Step
D-Step
E-Step
F-Step
G-Step
H-Step
I-Step
VISUAL PROTOTYPING
Module Name, Navigation
MEET THE TEAMChristina, David, Anita and Wesley are meeting as a Senior Leadership Team to discuss positioning, new business opportunities and strategic relationship development with businesses. The team has been developing relationships with national and regional companies in the food processing, mobile phone technology and banking industries over the last year.
Christina is a country representative
A
B C D E
F
A
B C
D EF
Mobile-first design best practices—http://www.uvu.edu/web/training/tips/adaptive.html
Responsive design device sketches—Interfacesketch.com
Grid templates--http://www.printablepaper.net/preview/storyboard-letter-16to9-3x3
If you’re interested in receiving this PPT presentation, please leave your card at the front.
RESOURCES
CONTACT US
TRACY BISSETTE, M. ED.Chief Learning Officer
[email protected] 919.768.2512o 844.4.weejee
CHRIS MANAROVP of Sales
[email protected] 919.741.3249o 844.4.weejee
IAN HUCKABEECEO
[email protected] 919.619.6119o 844.4.weejee
FOLLOW US
facebook.com/weejeelearning
twitter.com/weejeelearning
linkedin.com/company/weejeelearning