O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Learning Path: Design for Mobile

Video Description

Learning Path: Design for Mobile

Design great experiences for mobile devices

What happens when people use a smartphone to connect with your website or application? Are they delighted or frustrated? With more than a million touch-screen phones shipping every day, it’s vital that you design your site to appeal to the mobile crowd. This Learning Path will teach you how.

Table of Contents

  1. Why Care about Mobile? 00:12:32
  2. Why Care About Mobile Web Experiences 00:16:13
  3. Mobile Capabilities 00:13:02
  4. Mobile Constraints 00:14:02
  5. Aligning with Mobile Behaviors 00:09:38
  6. Navigation Elements 00:20:56
  7. Designing for Touch Targets 00:13:58
  8. Designing with Touch Gestures 00:16:33
  9. Cover Hovers 00:11:01
  10. Embrace Mobile Input 00:06:20
  11. Mobile Form Structures 00:11:37
  12. Asks 00:16:17
  13. Designing for Different Devices 00:22:50
  14. Viewports and Pixels 00:14:14
  15. About The Author 00:02:33
  16. Course Introduction 00:02:11
  17. How Sketch Makes Designing Easier And Faster 00:00:42
  18. Project Introduction 00:00:29
  19. Organizing Your Design With Pages And Artboards 00:03:45
  20. Reducing Repetition In Your Design With Symbols And Styles - Part 1 00:03:04
  21. Reducing Repetition In Your Design With Symbols And Styles - Part 2 00:03:20
  22. Designing Quickly With Grids And Rulers 00:04:13
  23. Selectively Show Off Your Design With Masks 00:02:54
  24. How To Get The Most Out Of Text 00:05:08
  25. Using Plugins To Improve Your Design Process 00:05:04
  26. Getting Real Content Into Your Design With Plugins 00:02:40
  27. Designing Your Own Icons With Paths 00:04:45
  28. Time-Saving Tricks 00:03:09
  29. Making Wireframes - Part 1 00:04:33
  30. Making Wireframes - Part 2 00:02:28
  31. Making Style Tiles - Part 1 00:05:23
  32. Making Style Tiles - Part 2 00:03:57
  33. Making A Pattern Library 00:07:56
  34. Organizing And Naming Your Assets Effectively 00:03:01
  35. Exporting And Working With Slices 00:04:18
  36. Making An Interactive Prototype With Invision - Part 1 00:05:24
  37. Making An Interactive Prototype With Invision - Part 2 00:04:30
  38. Making An Interactive Prototype With Flinto - Part 1 00:03:45
  39. Making An Interactive Prototype With Flinto - Part 2 00:04:19
  40. Making An Interactive Prototype With Framer Studio - Part 1 00:03:45
  41. Making An Interactive Prototype With Framer Studio - Part 2 00:04:19
  42. Resources - Where To Go From Here 00:00:43
  43. Wrap-Up 00:00:34
  44. Framer And Prototyping 00:02:23
  45. Course Overview 00:02:08
  46. About The Author 00:01:28
  47. Downloading Framer Studio 00:01:46
  48. The Framer Studio Interface 00:03:33
  49. Hello World 00:05:36
  50. Preview Your Framer Prototype 00:02:29
  51. Framer.js For PC Or Without Framer Studio 00:05:17
  52. Overview 00:01:13
  53. Variables 00:04:00
  54. Strings 00:01:41
  55. Numbers 00:00:49
  56. Boolean 00:01:13
  57. Operators 00:04:22
  58. Conditionals 00:03:27
  59. Arrays 00:02:29
  60. Objects 00:02:07
  61. Loops 00:02:13
  62. Functions 00:02:58
  63. Comments 00:00:43
  64. CoffeeScript Exercise 00:00:34
  65. CoffeeScript Exercise Solution 00:05:24
  66. Resources 00:00:40
  67. Overview 00:03:17
  68. Positioning 00:02:17
  69. Size 00:01:28
  70. Appearance 00:04:21
  71. Hierarchy 00:03:30
  72. Layer Types 00:02:42
  73. Layer Exercise 00:00:46
  74. Layer Exercise Solution 00:03:55
  75. Import Designs From Sketch And Photoshop 00:01:42
  76. Selecting Layers In Framer 00:03:15
  77. Hidden Layers And Artboards In Sketch 00:01:26
  78. Structuring Your Design Files 00:02:59
  79. Import Design Exercise 00:01:18
  80. Import Design Exercise Solution 00:01:57
  81. Making Layers Move 00:04:20
  82. Timing, Delay, And Repeat 00:04:20
  83. Linear, Ease, And Bezier Curves 00:03:43
  84. Spring Curves 00:03:14
  85. Animation Objects 00:03:27
  86. Animation Exercise 00:00:41
  87. Animation Exercise Solution 00:02:50
  88. Animation Resources 00:00:35
  89. Snippets 00:02:34
  90. Layer And Animation Defaults 00:03:08
  91. Keyboard Shortcuts 00:02:23
  92. Utilities 00:05:23
  93. Working Faster Exercise 00:00:34
  94. Working Faster Exercise Solution 00:02:58
  95. Click And Touch Event 00:03:43
  96. Click Prototype: Quotes - Part 1 00:04:32
  97. Click Prototype: Quotes - Part 2 00:02:44
  98. Animation Events And Chaining 00:04:19
  99. Animation Chaining: Random Hearts - Part 1 00:06:07
  100. Animation Chaining: Random Hearts - Part 2 00:04:37
  101. Animation Chaining: Random Hearts - Part 3 00:06:33
  102. Drag Event 00:06:12
  103. Drag Prototype: Pull Down To Refresh - Part 1 00:06:45
  104. Drag Prototype: Pull Down To Refresh - Part 2 00:04:43
  105. Drag Prototype: Pull Down To Refresh - Part 3 00:05:39
  106. Property Change Event 00:02:17
  107. Events Exercise 00:00:30
  108. Events Exercise Solution 00:06:06
  109. Adding States 00:07:05
  110. Switching States 00:04:15
  111. Default State 00:01:32
  112. Editing States 00:01:28
  113. Animation Options 00:02:07
  114. States Exercise 00:00:37
  115. States Exercise Solution 00:03:06
  116. Scroll Component 00:05:12
  117. Scroll Prototype: News - Part 1 00:05:06
  118. Scroll Prototype: News - Part 2 00:05:37
  119. Page Component 00:05:34
  120. Page Prototype: Weather - Part 1 00:02:45
  121. Page Prototype: Weather - Part 2 00:04:14
  122. Combining Scroll And Page Components 00:04:47
  123. Slider Component 00:05:31
  124. Vertical Slider 00:06:30
  125. Slider Prototype: Color - Part 1 00:04:41
  126. Slider Prototype: Color - Part 2 00:03:58
  127. Components Exercise 00:00:40
  128. Components Exercise Solution 00:06:05
  129. Overview 00:02:44
  130. Creating And Using Modules 00:06:11
  131. Modules Exercise 00:00:36
  132. Modules Exercise Solution 00:07:02
  133. More Modules 00:01:07
  134. Where To Go From Here 00:01:45
  135. Framer Beta 00:00:39
  136. Framer Resources 00:00:25
  137. Thank You 00:00:27
  138. Introduction And Overview 00:01:30
  139. About The Authors 00:01:09
  140. 3 Types Of Mobile Apps 00:01:07
  141. Native Apps 00:01:38
  142. Web Apps 00:01:25
  143. Hybrid Apps 00:01:25
  144. Effective Mobile App Design 00:01:28
  145. User Centered And Mobile First Design 00:02:09
  146. Introduction To Prototyping 00:02:29
  147. Prototyping The ToDo Game App 00:03:05
  148. Installing The Development Environment 00:03:21
  149. Configuring The Development Environment 00:03:23
  150. What Is HTML? 00:01:54
  151. HTML5 Syntax 00:02:32
  152. Types Of HTML Elements 00:02:19
  153. Document Structure 00:01:34
  154. Semantic HTML 00:01:47
  155. Initial Demo App Layout 00:03:18
  156. What Is CSS3? 00:01:58
  157. Introducing CSS Selectors 00:03:23
  158. CSS Properties 00:04:11
  159. CSS Positioning 00:04:55
  160. Adding CSS To HTML 00:02:26
  161. Styling The Demo App - Navigation 00:06:10
  162. Styling The Demo App - Headers 00:02:44
  163. What Is Javascript? 00:02:54
  164. Javascript Variables 00:03:04
  165. Introducing Data Types 00:02:13
  166. Numbers In Javascript 00:02:22
  167. Working With Strings 00:02:59
  168. Booleans, NaN And Undefined 00:01:35
  169. Javascript Expressions 00:01:00
  170. Javascript Operators 00:04:50
  171. Control Structures 00:01:41
  172. Loops 00:02:44
  173. Javascript Functions 00:03:06
  174. HTML DOM - Part 1 00:06:13
  175. Applying Javascript To The Demo App - Part 1 00:06:42
  176. Applying Javascript To The Demo App - Part 2 00:03:26
  177. What Can JQuery Do? 00:02:06
  178. JQuery Selectors 00:01:50
  179. JQuery Functions 00:02:41
  180. Converting The ToDo App To JQuery 00:03:55
  181. Introducing JQuery Mobile 00:04:14
  182. JQuery Mobile Pages And Navigation 00:02:53
  183. JQuery Mobile Content And Widgets 00:02:19
  184. Applying JQuery Mobile To The ToDo App 00:06:20
  185. Offline Apps 00:06:09
  186. Local Storage 00:05:19
  187. Understanding The Viewport 00:02:18
  188. Mobile Meta Tags And App Icons 00:06:33
  189. Uploading Your App To The Web Using FTP 00:04:39
  190. Creating A Hybrid App With PhoneGap Build 00:05:12
  191. Wrap Up 00:02:05