View
113
Download
1
Category
Tags:
Preview:
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
Designing Learning formobile devices
Nick FloroNick@sealworks.comTwitter.com/NickFloro
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 1 of 79
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 2 of 79
Understanding the Technology
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 3 of 79
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 4 of 79
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 5 of 79
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 6 of 79
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 7 of 79
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 8 of 79
desktop
Content StrategyDesigning for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 9 of 79
desktoptabletphone
Content StrategyDesigning for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 10 of 79
desktop
tablet
phone
Content StrategyDesigning for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 11 of 79
Content Strategy
desktoptabletphone
> Think Mobile FirstDesigning for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 12 of 79
• Documents• Audio• Video• Web
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 13 of 79
Designingyour mobile content
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 14 of 79
Flat Pages
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 15 of 79
Apple Weather
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 16 of 79
Yahoo Weather
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 17 of 79
Tab Bar
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 18 of 79
Apple Clock
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 19 of 79
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
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
First Aid
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 22 of 79
Innovation
>
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 23 of 79
evernote
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 24 of 79
evernote
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 25 of 79
Pulse
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 26 of 79
Pulse
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 27 of 79
Zite
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 28 of 79
Zite
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 29 of 79
App or Web Delivery
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 30 of 79
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
Web AppServer
Game / SimulationTool
Hybrid
InfoTool
Resources
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 32 of 79
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
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
PhoneGap.com
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 35 of 79
• 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
AmazonA Quick Look
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 37 of 79
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 38 of 79
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 39 of 79
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
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
The mobile environmentFewer options
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 42 of 79
Examples
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 43 of 79
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 44 of 79
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 45 of 79
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 46 of 79
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 47 of 79
Focus on the
Audience1
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 48 of 79
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 49 of 79
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 50 of 79
is the keyContent
2
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 51 of 79
Transparent
Interface3
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 52 of 79
Designing Apps
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 53 of 79
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 54 of 79
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
Design for Flexibility
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 56 of 79
Testing
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 57 of 79
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
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
Capture & Analyze
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 60 of 79
Using CoverFlow view and Preview of Graphics
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 61 of 79
MoreExamples
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 62 of 79
Downloads
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 63 of 79
ResourcesTo help you grow.
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 64 of 79
kuler.adobe.com
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 65 of 79
abookapart.com
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 66 of 79
SmashingMagazine.com
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 67 of 79
Nancy Durate Garr Reynolds
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 68 of 79
Screencasts 101 Mini-Session
JingProject.com
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 69 of 79
html5rocks.com
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 70 of 79
www.uxmag.com
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 71 of 79
www.twitter.com
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 72 of 79
www.lrnchat.com
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 73 of 79
evernote.com
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 74 of 79
reflectorapp.com
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 75 of 79
Don’t Settle
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 76 of 79
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
www.launchcycle.com
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 78 of 79
Thank You
Nick Floronick@sealworks.comtwitter.com/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
Recommended