Download - Mobile Design & Prototyping
![Page 2: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/2.jpg)
The Web Platform is Accelerating
![Page 3: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/3.jpg)
Graphics Location Storage Speed
Solving Developer Challenges
![Page 4: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/4.jpg)
480 million Newspapers
![Page 5: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/5.jpg)
1.4 billion Internet users
![Page 6: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/6.jpg)
1.5 billion TV’s
![Page 7: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/7.jpg)
1.7 billion Credit Cards
![Page 8: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/8.jpg)
2.25 billion Tooth Brushes
![Page 9: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/9.jpg)
4 billion Mobile Phones
![Page 10: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/10.jpg)
Develop oncePush everywhere
![Page 11: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/11.jpg)
![Page 12: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/12.jpg)
7 Questions to Define the Project
What is the goal?
What are the learning objectives?
Who is the audience and how will they use it?
What is the timetable?
Current technology or solution in place?
What is the budget?
Does the content exist?
![Page 13: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/13.jpg)
Understanding the
Technology
![Page 14: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/14.jpg)
![Page 15: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/15.jpg)
![Page 16: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/16.jpg)
![Page 17: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/17.jpg)
![Page 18: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/18.jpg)
![Page 19: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/19.jpg)
![Page 20: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/20.jpg)
![Page 21: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/21.jpg)
Android Xoom1280 x 720
HTC Incredible800 x 480
Selecting a SizePixels & Aspect Ratio
iPad1024 x 768
iPhone 4960 x 640
iPhone480 x 320
Droid854 x 480
![Page 22: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/22.jpg)
• network latency• input mechanism• memory
• form factor
• computational power
• context• battery
![Page 23: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/23.jpg)
![Page 24: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/24.jpg)
![Page 25: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/25.jpg)
The mobile environmentsingle early failure = non-returning user
![Page 26: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/26.jpg)
The mobile environmentcrucial first 30-60 seconds usage
![Page 27: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/27.jpg)
The mobile environmentFewer options
![Page 28: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/28.jpg)
Sample Simulation with HTML 5
![Page 29: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/29.jpg)
![Page 30: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/30.jpg)
![Page 31: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/31.jpg)
![Page 32: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/32.jpg)
![Page 33: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/33.jpg)
Web App
![Page 34: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/34.jpg)
AppWeb
![Page 35: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/35.jpg)
HTML 5CSS3 AJAX
JAVASCRIPT JQuery
![Page 36: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/36.jpg)
ToolsDevelopment
![Page 37: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/37.jpg)
Publish for iPhone
![Page 38: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/38.jpg)
Publish for iPhone
![Page 39: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/39.jpg)
Publish for iPhone
![Page 40: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/40.jpg)
Publish for Android
![Page 41: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/41.jpg)
Publish for Android
Publish for iPhone
![Page 42: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/42.jpg)
labs.adobe.com/technologies/wallaby/
![Page 43: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/43.jpg)
![Page 44: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/44.jpg)
![Page 45: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/45.jpg)
Text MessagingSMS Integration
Would you like to sell, hold or buy?
1. Sell
2. Buy
3. Hold
![Page 46: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/46.jpg)
www.runrev.com
![Page 47: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/47.jpg)
www.gamesalad.com
![Page 48: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/48.jpg)
anscamobile.com
![Page 49: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/49.jpg)
Understand Design
![Page 50: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/50.jpg)
It’s about communication and problem solving.
![Page 51: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/51.jpg)
Design is how it works.
![Page 52: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/52.jpg)
People don’t know what they want. We need to tell them.
![Page 53: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/53.jpg)
![Page 54: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/54.jpg)
Text
![Page 55: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/55.jpg)
Text1. Create Text2. Make a selection3. Invert select4. Save alpha channel5. Deselect6. Load Alpha Channel7. Load Color8. Offset9. Apply Blur10.Reposition11.Save12.If the copy changed, start
over
![Page 56: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/56.jpg)
![Page 57: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/57.jpg)
![Page 58: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/58.jpg)
![Page 59: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/59.jpg)
How do we start?
![Page 60: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/60.jpg)
Sketches
![Page 61: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/61.jpg)
Wireframes
![Page 64: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/64.jpg)
http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/
![Page 65: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/65.jpg)
www.uistencils.com
![Page 66: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/66.jpg)
Wireframes
![Page 67: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/67.jpg)
![Page 70: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/70.jpg)
Tools:
• Fujitsu SCANSNAP – Scan direct to pdf– includes full Acrobat Pro
Quick Prototyping Techniques
![Page 71: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/71.jpg)
![Page 72: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/72.jpg)
![Page 73: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/73.jpg)
![Page 74: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/74.jpg)
Wireframes
Using Acrobat Pro for Prototypes
![Page 75: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/75.jpg)
![Page 76: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/76.jpg)
![Page 77: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/77.jpg)
![Page 78: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/78.jpg)
![Page 79: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/79.jpg)
![Page 80: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/80.jpg)
![Page 81: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/81.jpg)
![Page 82: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/82.jpg)
![Page 83: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/83.jpg)
![Page 84: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/84.jpg)
![Page 85: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/85.jpg)
![Page 86: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/86.jpg)
![Page 87: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/87.jpg)
![Page 88: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/88.jpg)
![Page 89: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/89.jpg)
![Page 90: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/90.jpg)
GamersBorn ≥ 1980
![Page 91: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/91.jpg)
GamersBorn ≥ 1980
‣ 8-10 1+ hour/day
‣ teens 13+ hours week
![Page 92: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/92.jpg)
GamersBorn ≥ 1980
‣ 43% females
‣ 5 hours a week
![Page 93: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/93.jpg)
experiencesDesigning
![Page 95: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/95.jpg)
![Page 96: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/96.jpg)
![Page 97: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/97.jpg)
How should we
Design?
![Page 98: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/98.jpg)
Focus on the
Audience1
![Page 99: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/99.jpg)
is the keyContent
2
![Page 100: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/100.jpg)
Transparent
Interface3
![Page 101: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/101.jpg)
![Page 102: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/102.jpg)
![Page 103: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/103.jpg)
![Page 104: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/104.jpg)
Keep it Simple
![Page 105: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/105.jpg)
![Page 106: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/106.jpg)
Design: Keep it Simple
![Page 107: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/107.jpg)
![Page 108: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/108.jpg)
Resources
![Page 109: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/109.jpg)
Games1.Play
2.Watch others play
3.Experiment
![Page 110: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/110.jpg)
![Page 111: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/111.jpg)
Resources
• Designing Interactions• Bill Moggridge
![Page 112: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/112.jpg)
Resources• Designing the Obvious:
A Common Sense Approach to Web Application Design• Robert Hoekman Jr.
![Page 113: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/113.jpg)
Capture & Analyze
![Page 114: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/114.jpg)
Using CoverFlow view and Preview of Graphics
![Page 115: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/115.jpg)
Design Scrapbook: iPhoto | LittleSnapper
![Page 116: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/116.jpg)
![Page 117: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/117.jpg)
![Page 118: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/118.jpg)
![Page 119: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/119.jpg)
![Page 120: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/120.jpg)
CSS3 for Web DesignersDan Cederholm | A Book Apart
![Page 122: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/122.jpg)
www.uxmag.com
![Page 123: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/123.jpg)
Introducing HTML5
Bruce Lawson(Voices That Matter)
![Page 124: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/124.jpg)
html5rocks.com
![Page 125: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/125.jpg)
http://www.caniuse.com/
![Page 126: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/126.jpg)
![Page 127: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/127.jpg)
www.css3.info
![Page 128: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/128.jpg)
www.TED.com
![Page 129: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/129.jpg)
Nancy Durate Garr Reynolds
![Page 132: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/132.jpg)
Posterous will automatically wrap and prep for web
![Page 133: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/133.jpg)
![Page 134: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/134.jpg)
Most urls YouTube, SlideShare will get a player
![Page 135: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/135.jpg)
www.launchcycle.com
![Page 136: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/136.jpg)
Pictures
Video
Blog
Audio
3D Models
Multiplayer Environment
ePortfolios
Course Management System
Micro-blogging
Explore
![Page 137: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/137.jpg)
Thank You
Nick Florosealworks interactive studios
twitter.com/NickFloro
Download the Presentation at:http://www.slideshare.net/nickfloro
![Page 138: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/138.jpg)
“Glad Michael and I could work together to score 70 points.”
![Page 139: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/139.jpg)
![Page 140: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/140.jpg)
![Page 141: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/141.jpg)
![Page 142: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/142.jpg)
HTML 4
![Page 143: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/143.jpg)
HTML 5
![Page 144: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/144.jpg)
Improve Web Apps
![Page 145: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/145.jpg)
Re-Address backwardcompatibility
![Page 146: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/146.jpg)
Canvas & SVG
![Page 147: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/147.jpg)
SVG -> High level• Import/Export•Easy UIs• Interactive•Medium Animation•Tree of objects
Canvas -> Low level•No mouse interaction•High Animation• JS Centric•More Bookkeeping•Pixels
When Canvas or SVG?
![Page 148: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/148.jpg)
Quake II - Browser Only
![Page 149: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/149.jpg)
Quake II - Browser Only
WebGL 3D graphics
HTML 5 CanvasHTML 5 Audio
HTML 5 Web Sockets
HTML 5 Local Storage
![Page 150: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/150.jpg)
Video
![Page 151: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/151.jpg)
HTML 5 OptionsVideo Compression
Flash H264MPEG 4
Ogg Theora WebM
![Page 153: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/153.jpg)
geolocation
![Page 154: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/154.jpg)
app cache& database
![Page 155: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/155.jpg)
![Page 156: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/156.jpg)
web workers
![Page 157: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/157.jpg)
Test on Windows 7, Vista• Internet Explorer 6, 7, 8, 9• Firefox 3, 3.5, 3.6• Opera 10
Test on OS X− Safari 4− Firefox 3.5, 3.6− Opera 10
Test Mobile− iPhone− Android− Blackberry, Windows 7 Phon
Test for Usability
![Page 158: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/158.jpg)
![Page 159: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/159.jpg)
Forms
CSS 3
Effects/Transitions
![Page 160: Mobile Design & Prototyping](https://reader034.vdocuments.us/reader034/viewer/2022052301/554d1dbfb4c905ca208b48d6/html5/thumbnails/160.jpg)
Design for Flexibility