Designing Mobile Learning

DesigningMobile Learning Design & Strategy

Nick [email protected]/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


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

One

Two

Three

Four

Five

Six



Tree Structure

< Back

Screen One >

Screen Two >

Screen Three >

Screen Four >

Screen Five >

Screen Six >



First Aid



Innovation

>



evernote



Pulse



Zite



Responsive Design



getskeleton.com



http://getskeleton.com




twitter.github.io/bootstrap/



http://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/



http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/




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/



http://www.apple.com/designed-by-apple/




Thank You

Nick [email protected]/NickFloro

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



Designing Mobile Learning

Mobile

size pixels

105 user interface

105 desktoptabletphone

user

mobile

screen

gt

story

Transcript of Designing Mobile Learning

designing mobile learning for children and teenagers living with diabetes

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

Co-Designing of a Mobile Educational Tool for Innovative ... · Co-Designing of a Mobile Educational Tool for Innovative Teaching and Learning at the College of Business Education,

Designing mobile experience

A Review of Models and Frameworks for Designing Mobile Learning Experiences … · Mobile social learning. Mobile social learning means learning that involves interacting with others

Designing Mobile Learning #LSCON13

Designing a Mobile Learning Framework for a Formal ...

Designing Mobile Courses

Designing for mobile

Designing Mobile Interfaces

DESIGNING MOBILE EXPERIENCES

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

Designing and Evaluating a Contextual Mobile Application to Support Situated Learning

Designing, Implementing and Evaluating Gender-sensitive Mobile Learning Projects within Educational Settings

Designing mobile games for engagement and learning

Designing Learning Objects Designing Learning Objects Designing Learning Objects 1.

Designing mobile learning activities for outdoor learning

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

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 learning with education outside the ... · heutagogical approach mediated by mobile technologies could then act to create connections and reinforce learning between