How do you define mobile?
What technology will you support?
a. smartphoneb. tabletc. laptopd.all of the above
Mobile devices everywhere
138.5million smartphones in US
58% of phone market
4.5 billionsmartphones by 2018
60% on LTE
70 billion apps in 2013
Smartphones 58 billion and 14 billion to tablets
estimated
Learning
deliver everywhere
apps & tools
customize
mediadocuments
appebook web
Define
Design
Develop
Deliver
Process
Big DataFocus on the Audience
Content Strategy
desktoptabletphone
Content StrategyWhich Device will you support?
Create a Road Map
desktoptabletphone
Think Mobile First
desktoptabletphone
Think Mobile First
desktoptabletphone
Think Mobile First
Progressive Enhancement
What is Design?
How it works.
Homework: Watch www.apple.com/designed-by-apple/
It’s about communication and problem solving.
Homework: Watch www.apple.com/designed-by-apple/
Content is Key
Content Strategy
simplify.
write it down
cut in halfcut it again
breakcut & refine
then done
SketchingPaper Prototyping
Visual Thinking
Mobile Apps
Adobe Ideas
Evernote Skitch
Paper by FiftyThree
Prototyping test driving your idea
Tools:
• Wireframes– Keynote / PowerPoint
Quick Prototyping Techniques
Quick Concept
keynotekungfu.com
Custom Template in Keynote
balsamiq.com
Sketchy & iMockUps
teehanlax.com/tools/
Adobe Acrobat
Adobe Acrobat Pro | Building Prototypes with PDF Links
POP - Prototyping on Paper
POP - Prototyping on Paper
POP - Prototyping on Paper
POP - Prototyping on Paper
POP - Prototyping on Paper
proto.io
User Interface | UI
User Interface | UI
User Experience | UX
Development: App or Web Delivery
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
How will you distribute?
App Store Deployment Web
How will you distribute?
App Store Deployment
Data Analytics / Reporting
Web
How will you distribute?
App Store Deployment
Data Analytics / Reporting
Updates
Web
WebApp
HTML Javascript CSS API’s
DEVICE ACCESS
PERFORMANCE & INTEGRATION
MULTIMEDIA
OFFLINE & STORAGECONNECTIVITY SEMANTICS
CSS3
3D, GRAPHICS & EFFECTS
Create and deliver everywhere.
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
Selecting a SizePixels & Aspect Ratio
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
Selecting a SizePixels & Aspect Ratio
Droid960 x 540
Kindle Fire 71024 x 600
Galaxy Note 21280 x 720
Android Xoom1280 x 720
Selecting a SizePixels & Aspect Ratio
iPad 3rd gen +2048 x 1536
iPad1024 x 768
AmazonA Quick Look
Amazon Windowshop
Responsive Design
Mobile Factors
Form Factors
Bandwidth
Bandwidth
Input Mechanism
Context
Technology is a tool.
PhoneGap.com
Discover Look & Play
Flat Pages
Apple Weather
Yahoo 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
evernote
Pulse
Zite
Zite
Design for Flexibility
Testing
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
BrowserStack.com
Capture & Analyze
what’s next...
ResourcesTo help you grow.
w3schools.com
InvisionApp.com
tv.adobe.com/show/adobe-edge-reflow/
RESPONSIVE WEB DESIGNby ETHAN
MARCOTTE
airserver.com
www.uxmag.com
typekit.com
reflectorapp.com
airserver.com
abookapart.com
Thank You
Nick [email protected]/NickFloro
Download the Presentation at:http://www.slideshare.net/nickfloro
Recommended
