Designing Mobile Learning

DesigningMobile Learning Design & Strategy

Nick FloroNick@sealworks.comTwitter.com/NickFloro

mLearnCon Nick Floro sealworks.com

Designing Mobile Learning 06/24/14 1 of 105

Learning & Training

deliver everywhere

replace

compliment

desktoptabletphone

Content StrategymLearnCon Nick Floro sealworks.com

Adaptive A unique version for each device type.

desktoptabletphone

Requires maintenance on each version.

desktoptabletphone

Think Mobile FirstmLearnCon Nick Floro sealworks.com

desktoptabletphone

Think Mobile FirstmLearnCon Nick Floro sealworks.com

desktoptabletphone

Think Mobile First

Progressive Enhancement

Things to consider

Browser Support

Content

Current technology or solution in place?

TimePerformance

Specifications

Selecting a SizePixels & Aspect Ratio

iPhone 4960 x 640

iPhone480 x 320

iPhone 51136 x 640

Android Xoom1280 x 720

HTC Incredible800 x 480

iPad1024 x 768

iPhone 4960 x 640iPhone

480 x 320

iPhone 51136-by-640

Galaxy1280 x 720

Galaxy S41920 x1080

Android Xoom1280 x 720Galaxy SIII

1280 x 720

Droid960 x 540

Kindle Fire 71024 x 600

Galaxy Note 21280 x 720

Android Xoom1280 x 720

iPad 3rd gen +2048 x 1536

iPad1024 x 768

Classifying Apps

Flat Pages

Apple Weather

Yahoo Weather

Tab Bar

Apple Clock

Tree Structure

< Back

Screen One >

Screen Two >

Screen Three >

Screen Four >

Screen Five >

Screen Six >

First Aid

Innovation

evernote

Responsive Design

getskeleton.com

twitter.github.io/bootstrap/

Focus on the

Audience

Sketching where ideas begin

Visual Thinking

Adobe IdeasEvernote Skitch

Prototyping test driving your idea

Tools:

• Wireframes– Powerpoint / Keynote

Quick Prototyping Techniques

This is my question example where you would tell a story and ask for a response?

option 1

option 2

option 3

option 4

option 5

This is my question example where you would tell a story and ask for a response?

Answer example the user could select from one of the options.

simplify everything

keynotekungfu.com

Custom Template in Keynote

Adobe Acrobat

Adobe Acrobat Pro | Building Prototypes with PDF Links

POP - Prototyping on Paper

balsamiq.com

Sketchy & iMockUps

www.teehanlax.com/tools/

User Interface | UI

User Experience | UX

AmazonA Quick Example

Amazon Windowshop

Design for Flexibility

Challenges

TestingmLearnCon Nick Floro sealworks.com

Test on Mobile− iOS 4.x - 6.x− Android 2.x - 4.x− Amazon Fire− Windows 8− Tablet vs Phablet vs Phone− Portrait vs Landscape

Test on Windows 8, 7, Vista, XP- Internet Explorer 6, 7, 8, 9, 10- Firefox 25 +- Chrome 25 +

Test on OS X− Safari 4, 5+− Firefox 25 +− Chrome 25 +

Testing CodemLearnCon Nick Floro sealworks.com

What’s next...

ResourcesTo help you grow.

w3schools.com

LearnToProgram.tv

RESPONSIVE WEB DESIGNby ETHAN

MARCOTTE

kuler.adobe.com

Adobe Kuler kuler.adobe.com

reflectorapp.com

How it works.For Homework: www.apple.com/designed-by-apple/

Thank You

Nick Floronick@sealworks.comtwitter.com/NickFloro

Download the Presentation at:http://www.slideshare.net/nickfloro

Designing Mobile Learning

Mobile

Transcript of Designing Mobile Learning

Designing HTML5 Mobile Learning for Browser, Native, and Hybrid App #mlearncon15

Designing mobile learning with education outside the ... · heutagogical approach mediated by mobile technologies could then act to create connections and reinforce learning between

Designing Learning Objects Designing Learning Objects Designing Learning Objects 1.

Designing a Mobile and Socially Networked Learning ... · Designing a Mobile and Socially Networked Learning Assistant for a ... outside the classroom. Using these concepts as guidelines,

Designing the Mobile User Experience€¦ · Designing the Mobile User Experience Barbara Ballard, Little Springs Design, Inc., USA. Designing the Mobile User Experience. Designing

Professional Development Artefact Designing Learning Spaces · 17/03/2012 · Designing Learning Spaces . 2 ... Mobile tools and their ability to podcast, ... access to technological

Designing Mobile Learning #LSCON13

Designing mobile games for engagement and learning

Designing mobile learning - Kineo

designing mobile learning for children and teenagers living with diabetes

Designing mobile learning activities for outdoor learning

Designing Mobile Applications

Designing a Mobile-app-based Collaborative Learning System · Editor: Meliha Handzic . Mobile-app-based Collaborative Learning System . constructivist approach in which learners are

Designing a Mobile Learning Framework for a Formal ...

A Reference Model for Designing Mobile Learning … · A Reference Model for Designing Mobile Learning and ... base of instructional design and development ... Research and Curriculum

Designing Mobile Phone Interfaces for Collaborative ...santec.tudor.lu/_media/team/dosreis/caplivro_mobile.pdfDesigning Mobile Phone Interfaces for Collaborative Learning in ... Designing

PERSONAL MOBILE DEVICES AND LAPTOPS AS LEARNING …...Laptops and mobile devices can be used to enhance learning and designing course activities and assignments that use mobile devices

Designing Mobile Interfaces

Designing for Mobile Learning - Concept to Launch @ Training 2014 TRG14

PMI Forum: Designing Mobile Apps for Learning on 10-04-13