diff options
Diffstat (limited to 'docs/html/design')
29 files changed, 254 insertions, 69 deletions
diff --git a/docs/html/design/building-blocks/buttons.jd b/docs/html/design/building-blocks/buttons.jd index 7957ef8..1f7e25d 100644 --- a/docs/html/design/building-blocks/buttons.jd +++ b/docs/html/design/building-blocks/buttons.jd @@ -9,39 +9,83 @@ page.tags="button","input" </div> </a> -<p>A button consists of text and/or an image that clearly communicates what action will occur when the -user touches it. Android supports two different types of buttons: <em>basic buttons</em> and <em>borderless -buttons</em>. Both can contain text labels and/or images.</p> +<p>A button consists of text and/or an image that clearly communicates what action + will occur when the user touches it. A button can have an image, text, or both. +</p> -<img src="{@docRoot}design/media/buttons_basic.png"> +<div class="layout-content-row" style="margin-top:22px"> + <div class="layout-content-col span-3"> + <img src="{@docRoot}design/media/icon_magnifying_glass.png" style="height:64px;padding:20px 0 0 40px;"> + </div> + <div class="layout-content-col span-3"> + <img src="{@docRoot}design/media/buttons_text.png" style="height:94px;"> + </div> + <div class="layout-content-col span-7"> + <img src="{@docRoot}design/media/buttons_image_and_text.png" style="height:94px;"> + </div> +</div> -<h2 id="basic">Basic Buttons</h2> +<div class="layout-content-row" style="margin-top:0;"> + <div class="layout-content-col span-3"> + <p>An image alone works best when the action can be represented by a symbol that's well understood.</p> + </div> + <div class="layout-content-col span-3"> + <p>Text alone is most appropriate for actions that would be difficult to + represent visually, or are critical to convey in words to avoid any ambiguity.</p> + </div> + <div class="layout-content-col span-7"> + <p> + Both an icon and text is most appropriate when they complement each other: + each carrying its own bit of information, but together making a larger whole. + </p> + + <p> + For example, in a birthday reminder card in Google Now, the button's text + describes the action while its image indicates that the action will be done + in Google+. + </p> + </div> +</div> -<p>Basic buttons are traditional buttons with borders and background. Android supports two styles for -basic buttons: default and small. Default buttons have slightly larger font size and are optimized -for display outside of form content. Small buttons are intended for display alongside other content. -They have a smaller font and smaller minimum height. Use small buttons in forms where they need to -align with other UI elements.</p> +<h3>What about button backgrounds?</h3> -<img src="{@docRoot}design/media/buttons_default_small.png"> <div class="layout-content-row"> <div class="layout-content-col span-6"> - <div class="figure-caption"> - Default buttons in Holo Dark & Light. - </div> - </div> - <div class="layout-content-col span-6"> - <div class="figure-caption"> - Small buttons in Holo Dark & Light. + <p>For <strong>image-only</strong> buttons, a background isn't necessary because + users are accustomed to interacting with objects.</p> + + <div class="layout-content-row" style="margin-left:72px"> + <div class="layout-content-col span-2"> + <div class="do-dont-label bad emulate-content-left-padding" style="width:30px">Don't</div> + <img src="{@docRoot}design/media/buttons_image_bg_dont.png" style="padding-left:14px;"> + </div> + <div class="layout-content-col span-2" style="width:29px;margin-left:10px;"> + <div class="do-dont-label good"><strong>Do</strong></div> + <img src="{@docRoot}design/media/icon_alarm.png" style="width:31px;padding-top:7px;"> + </div> </div> </div> -</div> -<h2 id="borderless">Borderless Buttons</h2> +<div class="layout-content-col span-7"> +<p> + For buttons <strong>with text</strong>, a background is also usually + unnecessary. To invite users to touch, phrase it as a clear action (e.g. + "Start", "Sign in") and use different color and formatting than the screen's + usual body text. +</p> -<p>Borderless buttons resemble basic buttons except that they have no borders or background. You can -use borderless buttons with both icons and text. Borderless buttons are visually more lightweight -than basic buttons and integrate nicely with other content.</p> +<p> + Use buttons with backgrounds sparingly. Because they have a heavy appearance, + they work best when there's only one or two of them on the screen. They're + most appropriate for: +</p> -<img src="{@docRoot}design/media/buttons_borderless.png"> +<ul> + <li>A call to action you really want users to pursue (e.g. "Sign up")</li> + <li>A key decision point (e.g. "Accept" / "Decline")</li> + <li>When the user is about to commit a significant action (e.g. "Erase + everything", "Buy now")</li> +</ul> +</div> +</div> diff --git a/docs/html/design/downloads/index.jd b/docs/html/design/downloads/index.jd index d514c14..16f5509 100644 --- a/docs/html/design/downloads/index.jd +++ b/docs/html/design/downloads/index.jd @@ -1,4 +1,5 @@ page.title=Downloads +page tags="Icons", "stencils", "color swatches" @jd:body <div class="layout-content-row"> @@ -15,7 +16,7 @@ page.title=Downloads <p> <a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'All Design Assets']);" - href="{@docRoot}downloads/design/Android_Design_Downloads_20130814.zip">Download All</a> + href="{@docRoot}downloads/design/Android_Design_Downloads_20131106.zip">Download All</a> </p> </div> @@ -26,8 +27,8 @@ page.title=Downloads <div class="layout-content-row"> <div class="layout-content-col span-5"> -<p>Drag and drop your way to beautifully designed Ice Cream Sandwich apps. The stencils feature the -rich typography, colors, interactive controls, and icons found throughout Android 4.0, along with +<p>Drag and drop your way to beautifully designed Android apps. The stencils feature the +rich typography, colors, interactive controls, and icons found throughout Android, along with phone and tablet outlines to frame your creations. Source files for icons and controls are also available.</p> @@ -40,14 +41,14 @@ available.</p> <div class="layout-content-col span-4"> <p> - <a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Fireworks Stencil']);" + <!--<a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Fireworks Stencil']);" href="{@docRoot}downloads/design/Android_Design_Fireworks_Stencil_20120814.png">Adobe® Fireworks® PNG Stencil</a> <a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Illustrator Stencil']);" href="{@docRoot}downloads/design/Android_Design_Illustrator_Vectors_20120814.ai">Adobe® Illustrator® Stencil</a> <a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'OmniGraffle Stencil']);" - href="{@docRoot}downloads/design/Android_Design_OmniGraffle_Stencil_20120814.graffle">Omni® OmniGraffle® Stencil</a> + href="{@docRoot}downloads/design/Android_Design_OmniGraffle_Stencil_20120814.graffle">Omni® OmniGraffle® Stencil</a>--> <a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Photoshop Sources']);" - href="{@docRoot}downloads/design/Android_Design_Holo_Widgets_20120814.zip">Adobe® Photoshop® Sources</a> + href="{@docRoot}downloads/design/Android_Design_Stencils_Sources_20131106.zip">Adobe® Photoshop® Stencils and Sources</a> </p> </div> @@ -74,7 +75,7 @@ modify to match your theme, plus source files.</p> <p> <a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Action Bar Icons']);" - href="{@docRoot}downloads/design/Android_Design_Icons_20130926.zip">Action Bar Icon Pack</a> + href="{@docRoot}downloads/design/Android_Design_Icons_20131106.zip">Action Bar Icon Pack</a> </p> </div> @@ -114,7 +115,7 @@ requirements of UI and high-resolution screens.</p> <div class="layout-content-col span-5"> <h4>Color</h4> -<p>Blue is the standard accent color in Android's color palette. Each color has a corresponding darker +<p>In Android's color palette, each color has a corresponding darker shade that can be used as a complement when needed.</p> <p><a href="{@docRoot}design/style/color.html">More on Color</a></p> diff --git a/docs/html/design/media/buttons_image_and_text.png b/docs/html/design/media/buttons_image_and_text.png Binary files differnew file mode 100644 index 0000000..b7ffccb --- /dev/null +++ b/docs/html/design/media/buttons_image_and_text.png diff --git a/docs/html/design/media/buttons_image_bg_dont.png b/docs/html/design/media/buttons_image_bg_dont.png Binary files differnew file mode 100644 index 0000000..651d3ce --- /dev/null +++ b/docs/html/design/media/buttons_image_bg_dont.png diff --git a/docs/html/design/media/buttons_text.png b/docs/html/design/media/buttons_text.png Binary files differnew file mode 100644 index 0000000..54d3dd3 --- /dev/null +++ b/docs/html/design/media/buttons_text.png diff --git a/docs/html/design/media/calendar.mp4 b/docs/html/design/media/calendar.mp4 Binary files differdeleted file mode 100644 index cdd72d2..0000000 --- a/docs/html/design/media/calendar.mp4 +++ /dev/null diff --git a/docs/html/design/media/calendar.ogv b/docs/html/design/media/calendar.ogv Binary files differdeleted file mode 100644 index efb23d2..0000000 --- a/docs/html/design/media/calendar.ogv +++ /dev/null diff --git a/docs/html/design/media/calendar.webm b/docs/html/design/media/calendar.webm Binary files differdeleted file mode 100644 index 9d7d9f2..0000000 --- a/docs/html/design/media/calendar.webm +++ /dev/null diff --git a/docs/html/design/media/dialogs_popups_example.png b/docs/html/design/media/dialogs_popups_example.png Binary files differindex 6c98b1f..a8ebacd 100644 --- a/docs/html/design/media/dialogs_popups_example.png +++ b/docs/html/design/media/dialogs_popups_example.png diff --git a/docs/html/design/media/icon_alarm.png b/docs/html/design/media/icon_alarm.png Binary files differnew file mode 100644 index 0000000..36ce643a --- /dev/null +++ b/docs/html/design/media/icon_alarm.png diff --git a/docs/html/design/media/icon_magnifying_glass.png b/docs/html/design/media/icon_magnifying_glass.png Binary files differnew file mode 100644 index 0000000..d443a85 --- /dev/null +++ b/docs/html/design/media/icon_magnifying_glass.png diff --git a/docs/html/design/media/multipane_view_tablet.png b/docs/html/design/media/multipane_view_tablet.png Binary files differindex d59308a..a713591 100644 --- a/docs/html/design/media/multipane_view_tablet.png +++ b/docs/html/design/media/multipane_view_tablet.png diff --git a/docs/html/design/media/navigation_between_apps_back.png b/docs/html/design/media/navigation_between_apps_back.png Binary files differindex a817374..d0c12cf 100644 --- a/docs/html/design/media/navigation_between_apps_back.png +++ b/docs/html/design/media/navigation_between_apps_back.png diff --git a/docs/html/design/media/navigation_between_apps_inward.png b/docs/html/design/media/navigation_between_apps_inward.png Binary files differindex 321d0da..75e7fc6 100644 --- a/docs/html/design/media/navigation_between_apps_inward.png +++ b/docs/html/design/media/navigation_between_apps_inward.png diff --git a/docs/html/design/media/navigation_between_apps_up.png b/docs/html/design/media/navigation_between_apps_up.png Binary files differindex 42d0d8f..67ebb77 100644 --- a/docs/html/design/media/navigation_between_apps_up.png +++ b/docs/html/design/media/navigation_between_apps_up.png diff --git a/docs/html/design/media/navigation_from_outside_back.png b/docs/html/design/media/navigation_from_outside_back.png Binary files differindex 0e1aa04..9153b08 100644 --- a/docs/html/design/media/navigation_from_outside_back.png +++ b/docs/html/design/media/navigation_from_outside_back.png diff --git a/docs/html/design/media/navigation_up_vs_back_gmail.png b/docs/html/design/media/navigation_up_vs_back_gmail.png Binary files differindex d5eaa18..7cc295e 100644 --- a/docs/html/design/media/navigation_up_vs_back_gmail.png +++ b/docs/html/design/media/navigation_up_vs_back_gmail.png diff --git a/docs/html/design/media/touch_feedback.mp4 b/docs/html/design/media/touch_feedback.mp4 Binary files differnew file mode 100644 index 0000000..b91dc4b --- /dev/null +++ b/docs/html/design/media/touch_feedback.mp4 diff --git a/docs/html/design/media/touch_feedback.ogv b/docs/html/design/media/touch_feedback.ogv Binary files differnew file mode 100644 index 0000000..22c9f97 --- /dev/null +++ b/docs/html/design/media/touch_feedback.ogv diff --git a/docs/html/design/media/touch_feedback.webm b/docs/html/design/media/touch_feedback.webm Binary files differnew file mode 100644 index 0000000..a65c142 --- /dev/null +++ b/docs/html/design/media/touch_feedback.webm diff --git a/docs/html/design/media/touch_feedback_thumb.png b/docs/html/design/media/touch_feedback_thumb.png Binary files differnew file mode 100644 index 0000000..49af69f --- /dev/null +++ b/docs/html/design/media/touch_feedback_thumb.png diff --git a/docs/html/design/media/widgets_gestures.png b/docs/html/design/media/widgets_gestures.png Binary files differindex 5e1268d..bbce87d 100644 --- a/docs/html/design/media/widgets_gestures.png +++ b/docs/html/design/media/widgets_gestures.png diff --git a/docs/html/design/patterns/actionbar.jd b/docs/html/design/patterns/actionbar.jd index 939370c..b6e3a16 100644 --- a/docs/html/design/patterns/actionbar.jd +++ b/docs/html/design/patterns/actionbar.jd @@ -182,7 +182,7 @@ files for further customization. <p> <a onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Action Bar Icons (@actionbar page)']);" - href="{@docRoot}downloads/design/Android_Design_Icons_20130926.zip">Download the Action Bar Icon Pack</a> + href="{@docRoot}downloads/design/Android_Design_Icons_20131106.zip">Download the Action Bar Icon Pack</a> </p> diff --git a/docs/html/design/patterns/buttons.jd b/docs/html/design/patterns/buttons.jd new file mode 100644 index 0000000..46e41c8 --- /dev/null +++ b/docs/html/design/patterns/buttons.jd @@ -0,0 +1,151 @@ +page.title=Buttons +page.tags="buttons" +@jd:body + +<p> + Some content is best experienced full screen, like videos, games, image + galleries, books, and slides in a presentation. You can engage users more + deeply with content in full screen by minimizing visual distraction from app + controls and protecting users from escaping the app accidentally. +</p> + +<div style="margin:auto;padding:auto;text-align:center;"> + <img src="{@docRoot}design/media/fullscreen_landing.png" style="margin:1em auto 2em auto;"> +</div> +<p> + In version 4.4, Android offers two approaches for making your app go full + screen: Lean Back and Immersive. In both approaches, all persistent system + bars are hidden. The difference between them is how the user brings the bars + back into view. +</p> + +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + <h4>Lean Back</h4> + <p>Touch the screen anywhere to bring back system bars. </p> + <img src="{@docRoot}design/media/fullscreen_leanback.png" style="width:311px;"> + </div> + <div class="layout-content-col span-6"> + <h4>Immersive</h4> + <p>Swipe from the any edge of the screen with a hidden bar to bring back system bars. </p> + <img src="{@docRoot}design/media/fullscreen_immersive_swipe_bottom.png" style="width:160px;float:right"> + <img src="{@docRoot}design/media/fullscreen_immersive_swipe_top.png" style="width:160px"> + </div> +</div> + +<h2 id="leanback"> + Lean Back +</h2> + +<p> + The Lean Back approach is for full-screen experiences in which users won't be + interacting heavily with the screen while consuming content, like while + watching a video. +</p> + +<p> + In this type of experience, users are leaning back and watching the screen. + Then, when they need to bring back the bars, they simply touch anywhere. This + gesture is easy and intuitive. +</p> + + <img src="{@docRoot}design/media/fullscreen_leanback.png" style="width:311px;"> + +<h2 id="immersive"> + Immersive +</h2> + +<p> + The Immersive approach is mainly intended for apps in which the user will be + heavily interacting with the full screen as part of the primary experience. + Examples are games, viewing images in a gallery, or reading paginated + content, like a book or slides in a presentation. +</p> + +<p> + In this type of experience, when users need to bring back the system bars, + they swipe from any edge where a system bar is hidden. By requiring this more + deliberate gesture, the user's deep engagement with your app won't be + interrupted by accidental touches and swipes. +</p> + +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + <img src="{@docRoot}design/media/fullscreen_immersive_swipe_bottom.png" style="width:160px;float:right"> + <img src="{@docRoot}design/media/fullscreen_immersive_swipe_top.png" style="width:160px"> + </div> +</div> + +<p> + The user learns about the gesture to bring back the system bars through a + message that appears the first time the app goes full screen. +</p> + +<p> + If your app has its own controls that aren't needed when a user is immersed + in content, make them disappear and reappear in sync with the system bars. + This rule also applies to any app-specific gestures you might have for hiding + and showing app controls. For example, if touching anywhere on the screen + toggles the appearance of an action bar or a palette, then it must also + toggle the appearance of system bars. +</p> + +<p> + You might be tempted to use this approach just to maximize screen real + estate. But be mindful of how often users jump in and out of apps to check + notifications, do impromptu searches, and more. This approach will cause + users to lose easy access to system navigation, so a little extra space + should not be the only benefit they're getting in return. +</p> + +<h2 id="variation_using_edges"> + Variation: Swiping from edges with bars also affects the app +</h2> + +<p> + In the Immersive approach, any time a user swipes from an edge with a system + bar, the Android framework takes care of revealing the system bars. Your app + won't even be aware that this gesture occurred. +</p> + +<p> + But in some apps, the user might occasionally need to swipe from the edge as + <strong>part of the primary app experience</strong>. Examples are games and + drawing applications. +</p> + +<p> + For apps with this requirement, you can use a variation on the Immersive + approach: when a user swipes from an edge with a system bar, system bars are + shown and the gesture is passed to the app so the app can respond to the + gesture. +</p> + +<p> + For example, in a drawing app that uses this approach, if a user wants to + draw a line that begins at the very edge of the screen, swiping from the edge + would reveal the system bars and also start drawing a line that begins at the + very edge. +</p> + +<p> + In this approach, to minimize disruption while a user is deeply engaged in + the app, the system bars are semi-transparent. The bars automatically + disappear after a few seconds of no interaction or as soon as the user + touches or gestures anywhere outside the system bars. +</p> + +<h2 id="lightsout">What About Lights Out Mode?</h2> + +<p> + Before Android 4.4, the design guideline was to use Lights Out mode, a mode + in which the Action Bar and Status Bar fades away and becomes unavailable + after a few seconds of inactivity. The Navigation Bar is still available and + responds to touches but appears dimmed. +</p> + +<p> + Replace previous implementations of Lights Out mode with the Lean Back or + Immersive approaches. Continue to use Lights Out mode for implementations of + your app targeted for earlier releases. +</p>
\ No newline at end of file diff --git a/docs/html/design/patterns/fullscreen.jd b/docs/html/design/patterns/fullscreen.jd index 191ca40..de016fe 100644 --- a/docs/html/design/patterns/fullscreen.jd +++ b/docs/html/design/patterns/fullscreen.jd @@ -9,8 +9,9 @@ page.tags="full screen","immersive", "leanback" controls and protecting users from escaping the app accidentally. </p> +<div style="margin:auto;padding:auto;text-align:center;"> <img src="{@docRoot}design/media/fullscreen_landing.png" style="margin:1em auto 2em auto;"> - +</div> <p> In version 4.4, Android offers two approaches for making your app go full screen: Lean Back and Immersive. In both approaches, all persistent system diff --git a/docs/html/design/patterns/gestures.jd b/docs/html/design/patterns/gestures.jd index 837a6dd..213902f 100644 --- a/docs/html/design/patterns/gestures.jd +++ b/docs/html/design/patterns/gestures.jd @@ -65,8 +65,9 @@ following table shows the core gesture set that is supported in Android.</p> <div class="layout-content-col span-4"> <img src="{@docRoot}design/media/gesture_doubletouch.png"> <h4>Double touch </h4> - <p>Scales up the smallest targetable view, if available, or scales a standard amount - around the gesture. Also used as a secondary gesture for text selection.</p> + <p> Scales up a standard amount around the target with each repeated gesture until reaching + maximum scale. For nested views, scales up the smallest targetable view, or returns it to + its original scale. Also used as a secondary gesture for text selection.</p> <ul> <li class="no-bullet with-icon action"> <h4>Action</h4> diff --git a/docs/html/design/style/branding.jd b/docs/html/design/style/branding.jd index 9ef934d..2ea4d47 100644 --- a/docs/html/design/style/branding.jd +++ b/docs/html/design/style/branding.jd @@ -49,16 +49,16 @@ and app name in the action bar.</p> <div class="vspace size-1"> </div> <div class="layout-content-row"> - <div class="layout-content-col span-6"> - <img src="{@docRoot}design/media/yourbranding_icon.png" style="width:60px;float:left;padding-right:1em;"> - <div class="figure-caption" style="widdth:220px;margin-left:20px;"> - The HowzAbout app uses a launcher icon that is a shortened version of its full logo. + <div class="layout-content-col span-6" style="padding-top:24px;"> + <img src="{@docRoot}design/media/branding_launcher_icon.png" style="width:60px;float:left;padding-right:1em;"> + <div class="figure-caption" style="width:290px;margin-left:20px;"> + Google+ reinforces its brand by carrying its launcher icon through to the action bar. </div> - + <img src="{@docRoot}design/media/branding_logo_icon_action_bar.png" style="width:320px;float:left;padding-right:1em;"> </div> <div class="layout-content-col span-6"> - <img src="{@docRoot}design/media/yourbranding_app.png" style="width:94%"> - <div class="figure-caption"> + <img src="{@docRoot}design/media/yourbranding_app.png" style="width:320px;"> + <div class="figure-caption" style="width:320px;"> Example of a the logo in the action bar. This works well in cases where the brand's logo matches the name of the app. </div> </div> @@ -77,7 +77,7 @@ and app name in the action bar.</p> </div> <div class="layout-content-col span-6"> - <img src="{@docRoot}design/media/yourbranding_in-app-icons.png" style="width:300px;margin:12px 48px 0 16px;""> + <img src="{@docRoot}design/media/yourbranding_in-app-icons.png" style="width:300px;margin:12px 48px 0 16px;"> </div> </div> </div> @@ -100,9 +100,9 @@ and app name in the action bar.</p> <div style="margin-bottom:1em;"> <span class="do-dont-label bad" style="margin-left:12px">Don't</span> - <span style="margin-left: 44px;" class="do-dont-label good"><strong>Do</strong></span> + <span style="margin-left: 64px;" class="do-dont-label good"><strong>Do</strong></span> </div> - <img src="{@docRoot}design/media/yourbranding_sharing.png" style="width:200px;"> + <img src="{@docRoot}design/media/yourbranding_sharing.png" style="width:180px;"> </div> </div> diff --git a/docs/html/design/style/iconography.jd b/docs/html/design/style/iconography.jd index b0a3439..fe4a3f9 100644 --- a/docs/html/design/style/iconography.jd +++ b/docs/html/design/style/iconography.jd @@ -139,7 +139,7 @@ files for further customization. </p> <p> <a onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Action Bar Icons (@iconography page)']);" - href="{@docRoot}downloads/design/Android_Design_Icons_20130926.zip">Download the Action Bar Icon Pack</a> + href="{@docRoot}downloads/design/Android_Design_Icons_20131106.zip">Download the Action Bar Icon Pack</a> </p> <div class="layout-content-row"> diff --git a/docs/html/design/style/touch-feedback.jd b/docs/html/design/style/touch-feedback.jd index a5bf7b3..2d15166 100644 --- a/docs/html/design/style/touch-feedback.jd +++ b/docs/html/design/style/touch-feedback.jd @@ -7,8 +7,6 @@ page.tags="input","button" <p>Use illumination and dimming to respond to touches, reinforce the resulting behaviors of gestures, and indicate what actions are enabled and disabled.</p> -<p>Whenever a user touches an actionable area in your app, provide a subtle visual response. -This lets the user know which object was touched and that your app is "listening".</p> <p><strong>Be responsive to touches in a gentle way</strong>. Whenever a user touches an actionable area in your app, let them know the app is "listening" by providing a visual @@ -22,27 +20,16 @@ of encouragement</a> are more pleasant than jolts.</li> easier because the default touch feedback works with whatever hue you choose.</li> </ul> - </div> - - <div class="layout-content-col span-6" style="float:right;"> - - <!-- <div class="framed-nexus5-port-span-5"> - <video class="play-on-hover" autoplay> - <source src="{@docRoot}design/media/calendar.mp4" type="video/mp4"> - <source src="{@docRoot}design/media/calendar.webm" type="video/webm"> - <source src="{@docRoot}design/media/calendar.ogv" type="video/ogg"> - </video> - </div> - <div class="figure-caption" style="margin-top:0"> - <div class="video-instructions"> </div> - </div> - </div> --> - - - <div class="layout-content-col span-6"> - - <img src="{@docRoot}design/media/touch_feedback_reaction_response.png"> +</div> +<div class="layout-content-col span-6" style="float:right;"> + <video poster="{@docRoot}design/media/touch_feedback_thumb.png" class="play-on-hover" width="270" autoplay style="border:1px solid #ddd;"> + <source src="{@docRoot}design/media/touch_feedback.mp4" type="video/mp4"> + <source src="{@docRoot}design/media/touch_feedback.webm" type="video/webm"> + <source src="{@docRoot}design/media/touch_feedback.ogv" type="video/ogg"> + </video> + <div class="figure-caption"> + <div style="color:#a3a3a3;margin-left:130px;"><em>Click image to replay...</em></div> </div> </div> |
