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

133
Nick Floro [email protected] Twitter.com/NickFloro HTML Designing for Mobile Devices Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com Designing for Mobile : Concept to Launch 02/05/14 1 of 133

description

This presentation will provide you with the foundation you need to get started in mobile design and development. You'll learn best practices for designing for mobile and what challenges you may face in platforms, smartphones vs. tablets vs. next generation touch devices. Floro will discuss and provide techniques for designing mobile apps that work, from sketching to wireframing to prototyping and launching a course, web app or mobile app. You’ll learn what tools you can use to help visualize concepts and how to prototype quickly without breaking the bank.

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

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

Nick [email protected]/NickFloro

HTML

Designing for

Mobile Devices

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 1 of 133

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

share

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 2 of 133

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

Mobile devices everywhere

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 3 of 133

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

138.5million smartphones in US

58% of phone market

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 4 of 133

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

4.5 billionsmartphones by 2018

60% on LTE

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 5 of 133

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

70 billion apps in 2013

Smartphones 58 billion and 14 billion to tablets

estimated

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 6 of 133

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

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 7 of 133

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

Define

Design

Develop

Deliver

ProcessMobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 8 of 133

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

7 Questions to Define a Project

What is the goal?

Who is the audience?

What is the timetable?

What technology?

What is the budget?

Does the content exist?

How will they use it?

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 9 of 133

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

Focus on the

Audience

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 10 of 133

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

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 11 of 133

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

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 12 of 133

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

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 13 of 133

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

Content Strategy

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 14 of 133

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

desktoptabletphone

Content Strategy

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 15 of 133

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

How do you define mobile?

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 16 of 133

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

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 17 of 133

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

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 18 of 133

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

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 19 of 133

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

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 20 of 133

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

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 21 of 133

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

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 22 of 133

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

What technology will you support?

a. smartphoneb. tabletc. laptopd.all of the above

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 23 of 133

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

Create a Road Map

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 24 of 133

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

desktoptabletphone

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 25 of 133

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

Think Mobile First

desktoptabletphone

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 26 of 133

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

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 27 of 133

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

desktoptabletphone

Think Mobile First

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 28 of 133

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

desktoptabletphone

Think Mobile First

Progressive Enhancement

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 29 of 133

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

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 30 of 133

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

What is Design?

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 31 of 133

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

Content is Key

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 33 of 133

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

Content Strategy

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 34 of 133

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

Content Strategy

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 35 of 133

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

simplify.

write it down

cut in halfcut it again

breakcut & refine

then done

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 36 of 133

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

Sketching where ideas begin

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 37 of 133

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

Visual Thinking

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 38 of 133

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

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 39 of 133

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

Prototyping test driving your idea

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 40 of 133

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

Paper by FiftyThree

Adobe IdeasEvernote Skitch

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 41 of 133

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

Tools:

• Wireframes– Keynote / PowerPoint

Quick Prototyping Techniques

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 42 of 133

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

keynotekungfu.com

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 43 of 133

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

Custom Template in Keynote

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 44 of 133

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

Adobe Acrobat

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 45 of 133

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

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 46 of 133

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

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 47 of 133

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

POP - Prototyping on Paper

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 48 of 133

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

POP - Prototyping on Paper

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 49 of 133

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

POP - Prototyping on Paper

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 50 of 133

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

POP - Prototyping on Paper

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 51 of 133

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

balsamiq.com

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 52 of 133

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

Sketchy & iMockUps

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 53 of 133

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

teehanlax.com/tools/

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 54 of 133

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

User Interface | UI

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 55 of 133

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

User Interface | UI

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 56 of 133

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

User Experience | UX

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 57 of 133

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

WebApp

HTML Javascript CSS API’s

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 58 of 133

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

Responsive Design

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 59 of 133

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

• bandwidth• input mechanism• context

• form factor

Mobile Factors

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 63 of 133

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

Internet Explorer 9

Which browser’s support HTML 5?

Chrome Safari Firefox

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 64 of 133

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

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 65 of 133

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

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 66 of 133

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

Flow chartAPI’sMobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 67 of 133

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

Flow chartAPI’smotion camera gps sensors

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 68 of 133

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

// the geolocation api brings browser based location to your apps

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 69 of 133

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

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 70 of 133

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

You are entering research. Learn More>>

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 71 of 133

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

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 72 of 133

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

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 73 of 133

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

AmazonA Quick Example

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 77 of 133

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

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 78 of 133

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

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 79 of 133

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

The mobile environmentsingle early failure = non-returning user

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 80 of 133

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

The mobile environmentcrucial first 30-60 seconds usage

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 81 of 133

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

The mobile environmentFewer options

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 82 of 133

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

Example

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 83 of 133

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

Star Walk

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 84 of 133

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

Getting InspiredUI/UX

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 85 of 133

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

Flat Pages

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 86 of 133

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

Apple Weather

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 87 of 133

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

Yahoo Weather

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 88 of 133

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

Yahoo Weather

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 89 of 133

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

Tab Bar

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 90 of 133

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

Apple Clock

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 91 of 133

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

Tree Structure

One

Two

Three

Four

Five

Six

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 92 of 133

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

Tree Structure

< Back

Screen One >

Screen Two >

Screen Three >

Screen Four >

Screen Five >

Screen Six >

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 93 of 133

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

First Aid

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 94 of 133

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

First Aid

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 95 of 133

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

First Aid

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 96 of 133

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

Innovation

>

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 97 of 133

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

evernote

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 98 of 133

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

evernote

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 99 of 133

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

Pulse

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 100 of 133

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

Zite

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 101 of 133

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

Zite

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 102 of 133

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

Design for Flexibility

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 103 of 133

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

Development: App or Web Delivery

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 104 of 133

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

Native App

• Faster performance

• Unique platform features

• Requires programming

• iOS / Android / Amazon

• Increased Costs per OS

AppWeb App

• Use web standards

• Easy to deploy & update

• Support all devices

• Faster development cycle

• Works everywhere

• Requires web connection

Web

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 105 of 133

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

How will you distribute?

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 106 of 133

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

How will you distribute?

App Store Deployment Web

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 107 of 133

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

How will you distribute?

App Store Deployment

Data Analytics / Reporting

Web

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 108 of 133

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

How will you distribute?

App Store Deployment

Data Analytics / Reporting

Updates

Web

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 109 of 133

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

Testing

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 110 of 133

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

Test on Mobile− iOS 4.x - 6.x

− Android 2.x - 4.x

− 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 15-21 +

- Chrome 15 - 19 +

Test on OS X− Safari 4, 5+

− Firefox 15-21 +

− Chrome 20 - 26 +

Testing Code

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 111 of 133

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

Capture & Analyze

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 112 of 133

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

Using CoverFlow view and Preview of

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 113 of 133

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

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 114 of 133

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

what’s next...

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 115 of 133

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

ResourcesTo help you grow.

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 116 of 133

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

html5rocks.com

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 117 of 133

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

w3schools.com

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 118 of 133

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

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 119 of 133

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

www.uxmag.com

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 120 of 133

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

typekit.com

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 122 of 133

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

HTML5 for Web DesignersJEREMY KEITH | A Book Apart

aBookApart.com

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 123 of 133

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

www.smashingmagazine.com

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 124 of 133

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

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 125 of 133

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

960.gs

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 126 of 133

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

reflectorapp.com

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 127 of 133

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

airserver.com

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 128 of 133

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

abookapart.com

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 129 of 133

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

kuler.adobe.com

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 130 of 133

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

Adobe Kuler kuler.adobe.com

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 131 of 133

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

Don’t Settle

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 132 of 133

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

Thank You

Nick [email protected]/NickFloro

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

Mobile Learning Certificate @ Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

Designing for Mobile : Concept to Launch 02/05/14 133 of 133