79
Designing Learning for mobile devices Nick Floro [email protected] Twitter.com/NickFloro Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 1 of 79

Designing for Mobile Devices

Embed Size (px)

DESCRIPTION

This session will explore the foundation you need to get started in mobile development. You’ll learn best practices for designing for mobile and the challenges you may face in platforms, smartphones vs. tablets vs. next-generation touch devices. You’ll discuss and learn techniques for designing mobile apps that work, from sketching to wire framing to developing the final designs. You’ll learn about affordable tools you can use to help visualize concepts and prototype quickly. You will learn about development tools and how using HTML5 and CSS3 can provide a solution for creating web-based applications that work on multiple platforms.

Citation preview

Page 1: Designing for Mobile Devices

Designing Learning formobile devices

Nick [email protected]/NickFloro

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 1 of 79

Page 2: Designing for Mobile Devices

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 2 of 79

Page 3: Designing for Mobile Devices

Understanding the Technology

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 3 of 79

Page 4: Designing for Mobile Devices

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 4 of 79

Page 5: Designing for Mobile Devices

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 5 of 79

Page 6: Designing for Mobile Devices

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 6 of 79

Page 7: Designing for Mobile Devices

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 7 of 79

Page 8: Designing for Mobile Devices

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 8 of 79

Page 9: Designing for Mobile Devices

desktop

Content StrategyDesigning for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 9 of 79

Page 10: Designing for Mobile Devices

desktoptabletphone

Content StrategyDesigning for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 10 of 79

Page 11: Designing for Mobile Devices

desktop

tablet

phone

Content StrategyDesigning for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 11 of 79

Page 12: Designing for Mobile Devices

Content Strategy

desktoptabletphone

> Think Mobile FirstDesigning for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 12 of 79

Page 13: Designing for Mobile Devices

• Documents• Audio• Video• Web

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 13 of 79

Page 14: Designing for Mobile Devices

Designingyour mobile content

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 14 of 79

Page 15: Designing for Mobile Devices

Flat Pages

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 15 of 79

Page 16: Designing for Mobile Devices

Apple Weather

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 16 of 79

Page 17: Designing for Mobile Devices

Yahoo Weather

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 17 of 79

Page 18: Designing for Mobile Devices

Tab Bar

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 18 of 79

Page 19: Designing for Mobile Devices

Apple Clock

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 19 of 79

Page 20: Designing for Mobile Devices

Tree Structure

One

Two

Three

Four

Five

Six

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 20 of 79

Page 21: Designing for Mobile Devices

Tree Structure

< Back

Screen One >

Screen Two >

Screen Three >

Screen Four >

Screen Five >

Screen Six >

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 21 of 79

Page 22: Designing for Mobile Devices

First Aid

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 22 of 79

Page 23: Designing for Mobile Devices

Innovation

>

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 23 of 79

Page 24: Designing for Mobile Devices

evernote

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 24 of 79

Page 25: Designing for Mobile Devices

evernote

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 25 of 79

Page 26: Designing for Mobile Devices

Pulse

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 26 of 79

Page 27: Designing for Mobile Devices

Pulse

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 27 of 79

Page 28: Designing for Mobile Devices

Zite

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 28 of 79

Page 29: Designing for Mobile Devices

Zite

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 29 of 79

Page 30: Designing for Mobile Devices

App or Web Delivery

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 30 of 79

Page 31: Designing for Mobile Devices

Google Chrome 31% Yes

Mozilla Firefox 20% Yes

Internet Explorer 7-8 11% No

Internet Explorer 9-10 10% Yes

Apple Safari 15% Yes

iPhone / iPad 4% Yes

Google Android 2% Yes

Other 4% No

Market Share HTML5 Support

Browser Stats 2014Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 31 of 79

Page 32: Designing for Mobile Devices

Web AppServer

Game / SimulationTool

Hybrid

InfoTool

Resources

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 32 of 79

Page 33: Designing for Mobile Devices

Web App Native App

• Use web standards

• Easy to deploy & update

• Support all devices

• Faster development cycle

• Works everywhere

• Requires web connection

• Faster performance

• Unique platform features

• Requires programming

• Deploy via Store models

• iOS / Android / Amazon

Which is right for your project?

Enterprise Deployment

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 33 of 79

Page 34: Designing for Mobile Devices

DEVICE ACCESS

PERFORMANCE & INTEGRATION

MULTIMEDIA

OFFLINE & STORAGECONNECTIVITY SEMANTICS

CSS3

3D, GRAPHICS & EFFECTS

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 34 of 79

Page 35: Designing for Mobile Devices

PhoneGap.com

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 35 of 79

Page 36: Designing for Mobile Devices

• network latency• input mechanism• memory

• form factor

• computational power

• context• battery

Mobile Factors

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 36 of 79

Page 37: Designing for Mobile Devices

AmazonA Quick Look

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 37 of 79

Page 38: Designing for Mobile Devices

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 38 of 79

Page 39: Designing for Mobile Devices

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 39 of 79

Page 40: Designing for Mobile Devices

The mobile environmentsingle early failure = non-returning user

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 40 of 79

Page 41: Designing for Mobile Devices

The mobile environmentcrucial first 30-60 seconds usage

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 41 of 79

Page 42: Designing for Mobile Devices

The mobile environmentFewer options

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 42 of 79

Page 43: Designing for Mobile Devices

Examples

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 43 of 79

Page 44: Designing for Mobile Devices

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 44 of 79

Page 45: Designing for Mobile Devices

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 45 of 79

Page 46: Designing for Mobile Devices

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 46 of 79

Page 47: Designing for Mobile Devices

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 47 of 79

Page 48: Designing for Mobile Devices

Focus on the

Audience1

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 48 of 79

Page 49: Designing for Mobile Devices

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 49 of 79

Page 50: Designing for Mobile Devices

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 50 of 79

Page 51: Designing for Mobile Devices

is the keyContent

2

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 51 of 79

Page 52: Designing for Mobile Devices

Transparent

Interface3

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 52 of 79

Page 53: Designing for Mobile Devices

Designing Apps

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 53 of 79

Page 54: Designing for Mobile Devices

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 54 of 79

Page 55: Designing for Mobile Devices

Android Xoom1280 x 720

HTC Incredible800 x 480

Selecting a SizePixels & Aspect Ratio

iPad1024 x 768

iPhone 4960 x 640

iPhone480 x 320

Galaxy1280 x 720

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 55 of 79

Page 56: Designing for Mobile Devices

Design for Flexibility

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 56 of 79

Page 57: Designing for Mobile Devices

Testing

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 57 of 79

Page 58: Designing for Mobile Devices

Test on Windows 8, 7, Vista, XP• Internet Explorer 6, 7, 8, 9, 10, 11

• Firefox 4.0, 10-13 +

• Chrome 15 - 19 +

Test on OS X− Safari 5 - 7+

− Firefox 20 - 23 +

− Chrome 25 - 33 +

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

− Android 2.x - 4.x

− Windows 8

− Tablet vs Phone

− Portrait vs Landscape

Testing CodeDesigning for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 58 of 79

Page 59: Designing for Mobile Devices

Test for Usability

• Have someone with fresh

eyes test drive your site to

make sure it accomplishes

both user goals and site

goals

• Survey

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 59 of 79

Page 60: Designing for Mobile Devices

Capture & Analyze

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 60 of 79

Page 61: Designing for Mobile Devices

Using CoverFlow view and Preview of Graphics

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 61 of 79

Page 62: Designing for Mobile Devices

MoreExamples

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 62 of 79

Page 63: Designing for Mobile Devices

Downloads

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 63 of 79

Page 64: Designing for Mobile Devices

ResourcesTo help you grow.

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 64 of 79

Page 65: Designing for Mobile Devices

kuler.adobe.com

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 65 of 79

Page 66: Designing for Mobile Devices

abookapart.com

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 66 of 79

Page 67: Designing for Mobile Devices

SmashingMagazine.com

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 67 of 79

Page 68: Designing for Mobile Devices

Nancy Durate Garr Reynolds

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 68 of 79

Page 69: Designing for Mobile Devices

Screencasts 101 Mini-Session

JingProject.com

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 69 of 79

Page 70: Designing for Mobile Devices

html5rocks.com

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 70 of 79

Page 71: Designing for Mobile Devices

www.uxmag.com

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 71 of 79

Page 72: Designing for Mobile Devices

www.twitter.com

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 72 of 79

Page 73: Designing for Mobile Devices

www.lrnchat.com

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 73 of 79

Page 74: Designing for Mobile Devices

evernote.com

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 74 of 79

Page 75: Designing for Mobile Devices

reflectorapp.com

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 75 of 79

Page 76: Designing for Mobile Devices

Don’t Settle

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 76 of 79

Page 77: Designing for Mobile Devices

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

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 77 of 79

Page 78: Designing for Mobile Devices

www.launchcycle.com

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 78 of 79

Page 79: Designing for Mobile Devices

Thank You

Nick [email protected]/NickFloro

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

Designing for Mobile Devices Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 79 of 79