am 4fdaf938: docs: Design section fixes for new templates

* commit '4fdaf938ee28577324a3068b915c01deb61ade78':
  docs: Design section fixes for new templates

5 files changed, 90 insertions, 126 deletions

diff --git a/docs/html/design/wear/context.jd b/docs/html/design/wear/context.jd
index 688806f..7a0baf8 100644
--- a/docs/html/design/wear/context.jd
+++ b/docs/html/design/wear/context.jd
@@ -2,19 +2,19 @@ page.title=Context Awareness on Android Wear
 @jd:body
 
 <style>
-div.slide-wrapper {
+.slide-wrapper {
   width:780px;
   overflow:visible;
 }
-div.slide {
+.slide {
   width:370px;
   float:left;
   margin:0 20px 0 0;
 }
-div.slide p {
+.slide p {
   height:40px;
 }
-div.slide img {
+.slide img {
   height: 208px;
 }
 </style>
@@ -140,8 +140,8 @@ app.</p>
 
 <div class="slide">
 <h2>Location-based Query</h2>
-<p>Ask things like, "Are there any picnic tables free at the park?" and get answers from 
-people who are there.</p>
+<p>Ask questions like, "Are there any picnic tables free at the park?" and get answers in real-time
+from people in the area.</p>
 <img src="{@docRoot}design/media/wear/ContextualExample.015.png" alt=""
      srcset="{@docRoot}design/media/wear/ContextualExample.015.png 1x,
              {@docRoot}design/media/wear/ContextualExample.015_2x.png 2x" />
@@ -149,4 +149,6 @@ people who are there.</p>
 
 
 
-</div>
\ No newline at end of file
+</div>
+
+<p style="clear:both;height:0">&nbsp;</p>
\ No newline at end of file
diff --git a/docs/html/design/wear/creative-vision.jd b/docs/html/design/wear/creative-vision.jd
index 0955240..36a87eb 100644
--- a/docs/html/design/wear/creative-vision.jd
+++ b/docs/html/design/wear/creative-vision.jd
@@ -25,34 +25,29 @@ Wear experiences are:</p>
 
 
   <div class="page-vision">
-    <img src="{@docRoot}design/media/wear/vision_traffic.png" width="147" height="147" />
-
     <h2 id="Launched">Launched automatically</h2>
+    <img src="{@docRoot}design/media/wear/vision_traffic.png" width="147" height="147" />
     <p>Most people are used to launching apps by clicking an icon. Android Wear is different. Wearable apps are aware of the user’s context - time, location, physical activity, and so on. The apps use this information to insert cards into the stream when they become relevant. This makes Android Wear timely, relevant and very specific.</p>
   </div>
 
   <div class="page-vision">
-    <img src="{@docRoot}design/media/wear/vision_navigation.png" width="147" height="147" />
-
     <h2 id="Glanceable">Glanceable</h2>
+    <img src="{@docRoot}design/media/wear/vision_navigation.png" width="147" height="147" />
     <p>A classic wrist watch is designed to let you see the time in a split second and get on with what you were doing. Designing for Android Wear is no different. The less time it takes to use your software, the more time the user can be present in whatever they are doing. Android wear is fast, sharp, and immediate.</p>
   </div>
 
   <div class="page-vision">
-    <img src="{@docRoot}design/media/wear/vision_voice.png" width="147" height="147" style="border: 1px solid #ddd;" />
-
     <h2 id="SuggestDemand">All about suggest and demand</h2>
+    <img src="{@docRoot}design/media/wear/vision_voice.png" width="147" height="147" style="border: 1px solid #ddd;" />
     <p>Android Wear is like a great personal assistant: it knows you and your preferences, it only interrupts you when absolutely necessary, and it’s always on hand to provide a ready answer. Android Wear is helpful, respectful, and responsive.</p>
   </div>
 
   <div class="page-vision">
-    <img src="{@docRoot}design/media/wear/vision_music.png" width="147" height="147" />
-
     <h2 id="Interaction">Zero or low interaction</h2>
+    <img src="{@docRoot}design/media/wear/vision_music.png" width="147" height="147" />
     <p>Staying true to the strengths afforded by a smaller form factor, Android Wear focuses on simple interactions, only requiring input by the user when absolutely necessary. Most inputs are based around touch swipes or voice, and inputs requiring fine-grained finger movements are avoided. Android Wear is gestural, simple, and fast.</p>
   </div>
 
 <p>By providing a smart connection to the rest of the world while respecting the user’s attention, Android Wear feels personal and global, simple and smart, unobtrusive and ever-ready. Applications that represent these principles will feel most at home in the overall Android Wear experience.</p>
 
 <p>Third party apps extend Android Wear to be more specialized and helpful throughout the day. Installing apps are a way for the user to tell the Android Wear how to do that.</p>
-
diff --git a/docs/html/design/wear/patterns.jd b/docs/html/design/wear/patterns.jd
index e56ac2d..0436cf5 100644
--- a/docs/html/design/wear/patterns.jd
+++ b/docs/html/design/wear/patterns.jd
@@ -46,11 +46,9 @@ page.title=UI Patterns for Android Wear
 
 <h2 id="Dismissing" style="clear:both">Dismissing cards</h2>
 
-  <img src="{@docRoot}design/media/wear/dismiss_cards.png" height="147">
-
 <p>Swiping from left to right on a card causes it to be dismissed from the stream. Dismissed cards may return when they next have relevant information. State is synced between the Android Wear context stream and the notifications on the Android handheld device, so dismissing from one causes an automatic dismissal from the other.</p>
 
-
+<img src="{@docRoot}design/media/wear/dismiss_cards.png" height="147">
 
 <h2 id="Actions" style="clear:both">Action buttons</h2>
 
@@ -162,12 +160,11 @@ to check-in to.</p>
 
 <h2 id="Selection" style="clear:both">Selection List</h2>
 
-  <img src="{@docRoot}design/media/wear/selection_list.png" width="147" height="147" style="float:right;margin:0 0 20px 40px;border:1px solid #ddd">
+  <img src="{@docRoot}design/media/wear/selection_list.png" width="147" height="147" style="float:left;margin:0 0 20px 40px;border:1px solid #ddd">
 
 <p>Choosing an item from a list is a common interaction. The Selection List pattern (available as the <a
 href="{@docRoot}training/wearables/apps/layouts.html#UiLibrary"><code>WearableListView</code></a> component) creates a simple list optimized for ease of use on a small screen where the focused item snaps to the center of the screen and a single tap selects. This widget is recommended as a common pattern for selecting items. It is used throughout the system UI, including in the list that can be accessed by swiping up on the cue card.</p>
 
-
 <p>Of course, it is possible for Android Wear apps to extend themselves beyond the familiarities of these patterns. For a deeper look at the options available, see the <a href="{@docRoot}design/wear/structure.html">App Structure</a> guide.</p>
 
 <a class="notice-developers left" href="{@docRoot}training/wearables/ui/lists.html">
@@ -176,3 +173,5 @@ href="{@docRoot}training/wearables/apps/layouts.html#UiLibrary"><code>WearableLi
     <p>Creating Lists</p>
   </div>
 </a>
+
+<p style="clear:both;height:0">&nbsp;</p>
diff --git a/docs/html/design/wear/style.jd b/docs/html/design/wear/style.jd
index bb559fe..75bd65f 100644
--- a/docs/html/design/wear/style.jd
+++ b/docs/html/design/wear/style.jd
@@ -48,19 +48,18 @@ href="{@docRoot}training/wearables/apps/layouts.html#UiLibrary"><code>WatchViewS
 </div>
 
 
-
-  <img src="{@docRoot}design/media/wear/low_info_card.png" width="147" height="147"
-  style="float:right;margin:29px 0 20px 40px">
-
 <h2 id="InfoDensity" style="margin-top:0" >Low Information Density</h2>
 
+<img src="{@docRoot}design/media/wear/low_info_card.png" width="147" height="147"
+style="float:left;margin:5px 20px 20px 0">
+
 <p>Cards should be designed to be glanceable in a split second, just like reading the time on a traditional watch. In most cases a pairing of an icon and value, or a title and short caption should be enough to convey a meaningful message. Note that the background photo should also be used to convey information; backgrounds that change to reflect and support the primary message in the card work great. For example, in the case illustrated to the right, a suitable background image is chosen to reflect the severity of current traffic conditions. This is not just a nice piece of attention to detail; the background actually reinforces the message and makes the content more glanceable.</p>
 
 
-<img src="{@docRoot}design/media/wear/separate_info_cards.jpg" height="147"
-  style="float:right;margin:29px 0 20px 40px">
 
 <h2 id="Chunks">Separate Information into Chunks</h2>
+<img src="{@docRoot}design/media/wear/separate_info_cards.jpg" height="147"
+  style="float:right;margin:5px 0 20px 20px">
 
 <p>In cases where additional information is absolutely necessary, don’t crowd out a card layout to the point where glanceability is affected. Instead, add an additional <a href="{@docRoot}design/wear/patterns.html#Pages">page</a> (or multiple pages, if needed) to the right of the main card in the stream to which the user can swipe for more information. See also <a
 href="{@docRoot}design/wear/patterns.html#Continuing">Continuing activities on phone</a>.</p>
@@ -73,21 +72,19 @@ href="{@docRoot}design/wear/patterns.html#Continuing">Continuing activities on p
 
 
 
-<img src="{@docRoot}design/media/wear/clear_bold_type.jpg" height="147"
-  style="float:left;margin:19px 40px 20px 0">
-
 <h2 id="Typography" >Use Clear, Bold Typography</h2>
+<img src="{@docRoot}design/media/wear/clear_bold_type.jpg" height="147"
+  style="float:left;margin:5px 20px 20px 0">
 
 <p>The system font is Roboto Condensed, with Regular and Light variants. Text should adhere to the size and color recommendations (see the UI Toolkit in the <a href="{@docRoot}design/downloads/index.html#Wear">Downloads</a> page). In general, text should be displayed as large as possible. Your goal should be to convey maximum information with minimum fuss.</p>
 
 
 <h2 id="Branding" style="clear:both" >Use Consistent Branding and Color</h2>
 
-<p>The app icon is used to identify and brand your application. The icon is optional but when present always appears in the same location, overhanging the top right edge of the card. Note that app icons or branding should not be displayed in the background photo, which is reserved to display an image relevant to the information on the card.</p>
-
-
 <img src="{@docRoot}design/media/wear/copywrite.png" height="147"
-  style="float:left;margin:19px 40px 20px 0">
+  style="float:right;margin:0 20px 0 20px">
+
+<p style="margin-bottom: 60px">The app icon is used to identify and brand your application. The icon is optional but when present always appears in the same location, overhanging the top right edge of the card. Note that app icons or branding should not be displayed in the background photo, which is reserved to display an image relevant to the information on the card.</p>
 
 <h2 id="Copywrite" >Copywrite Sparingly</h2>
 
@@ -98,18 +95,11 @@ href="{@docRoot}design/wear/patterns.html#Continuing">Continuing activities on p
 
 <p>Wearables are personal devices by nature, but they are not completely private. If your notification serves content that may be particularly sensitive or embarrassing (such as notifications from a dating app or a medical status report), consider not displaying all of the information in a peek card. A notification could place the sensitive information on a second page that must be swiped to, or an application could show different amounts of detail in peek and focused card positions.</p>
 
-
-  <img src="{@docRoot}design/media/wear/confirmation.png" height="147"
-  style="float:left;margin:29px 40px 20px 0">
-
-
 <h2 id="ConfirmAnim">Confirmation Animations</h2>
 
-<p>If your app allows the user to perform an action, it is necessary to provide positive feedback. Show a generic confirmation animation or create your own. A confirmation animation is an opportunity to express your app’s character and insert a moment of delight for your user. Keep animations short (less than 1000ms) and simple. Animating the confirmation icon is an effective way of transitioning the user to a new state after completing an action.</p>
-
-
-
-
-
+<img src="{@docRoot}design/media/wear/confirmation.png" height="147"
+  style="float:left;margin:5px 20px 20px 0">
 
+<p>If your app allows the user to perform an action, it is necessary to provide positive feedback. Show a generic confirmation animation or create your own. A confirmation animation is an opportunity to express your app’s character and insert a moment of delight for your user. Keep animations short (less than 1000ms) and simple. Animating the confirmation icon is an effective way of transitioning the user to a new state after completing an action.</p>
 
+<p style="clear:both;height:0">&nbsp;</p>
\ No newline at end of file
diff --git a/docs/html/design/wear/watchfaces.jd b/docs/html/design/wear/watchfaces.jd
index 2def05b..e018523 100644
--- a/docs/html/design/wear/watchfaces.jd
+++ b/docs/html/design/wear/watchfaces.jd
@@ -4,7 +4,7 @@ page.title=Watch Faces for Android Wear
 
 <!-- developer docs box -->
 <a class="notice-developers right" href="{@docRoot}training/wearables/watch-faces/index.html"
-   style="clear:left;margin-bottom:90px">
+   style="clear:left">
   <div>
     <h3>Developer Docs</h3>
     <p>Creating Watch Faces</p>
@@ -22,7 +22,7 @@ ambient modes, and consider how system user interface elements will interact wit
 <p>Follow the guidelines in this page to design your custom watch faces.</p>
 
 <!-- H2 creative vision -->
-<div style="float:right;margin-top:-100px;margin-bottom:20px;margin-left:20px">
+<div style="float:right;margin-bottom:20px;margin-left:20px">
   <img src="{@docRoot}design/media/wear/Render_Next.png"
        width="200" height="195" alt="" style="margin-right:5px"/><br/>
   <img src="{@docRoot}design/media/wear/Render_Interactive.png"
@@ -137,44 +137,39 @@ You can configure your watch face to display different ambient designs depending
 of screen available on the device. Consider the best design for your watch faces on all
 screens.</p>
 
-<div class="cols" style="margin-top:20px">
-<div class="col-9">
-  <h3>Reduced color space</h3>
-  <p>Some displays use a reduced color space in ambient mode to save power.</p>
-  <p>One reduced color space power saving method is to use a "low-bit" mode. In low-bit mode,
-  the available colors are limited to black, white, blue, red, magenta, green, cyan, and yellow.
-  When designing for low-bit ambient mode, use a black or a white background. For OLED screens,
-  you must use a black background. Non-background pixels must be less than 10 percent of total
-  pixels. You can use low-bit color for up to 5 percent of pixels on screens that support it.
-  You should also disable antialiasing in your paint styles for this mode. Make sure to test
-  your design on devices with low-bit ambient mode.</p>
-  <p>Other displays save power in ambient mode by not producing any color. When designing for
-  displays which do not use color in ambient mode, the background may be either black or
-  white.</p>
-</div>
-<div class="col-4">
+<div style="float:right;margin-bottom:20px;margin-left:20px">
   <img src="{@docRoot}design/media/wear/Render_LowBit.png" width="200"
        height="" alt="" style="margin-top:45px;margin-left:13px">
 </div>
-</div>
+<h3>Reduced color space</h3>
 
-<div class="cols" style="margin-top:20px">
-<div class="col-9">
-  <h3>Burn protection techniques</h3>
-  <p>When designing for OLED screens, you should consider power efficiency and the screen
-  burn-in effect. When these screens are in ambient mode, the system shifts the contents of
-  the screen periodically by a few pixels to avoid pixel burn-in. Do not use large blocks of
-  pixels in your ambient mode designs and keep 95% of the pixels black. Replace solid shapes in
-  your regular ambient mode designs with outlined shapes in burn-protected ambient mode. Also
-  replace filled images with pixel patterns. For analog watch face designs, hollow out the center
-  where the hands meet to avoid pixel burn-in in this mode.</p>
-</div>
-<div class="col-4">
+<p>Some displays use a reduced color space in ambient mode to save power.</p>
+<p>One reduced color space power saving method is to use a "low-bit" mode. In low-bit mode,
+the available colors are limited to black, white, blue, red, magenta, green, cyan, and yellow.
+When designing for low-bit ambient mode, use a black or a white background. For OLED screens,
+you must use a black background. Non-background pixels must be less than 10 percent of total
+pixels. You can use low-bit color for up to 5 percent of pixels on screens that support it.
+You should also disable antialiasing in your paint styles for this mode. Make sure to test
+your design on devices with low-bit ambient mode.</p>
+<p>Other displays save power in ambient mode by not producing any color. When designing for
+displays which do not use color in ambient mode, the background may be either black or
+white.</p>
+
+
+<h3>Burn protection techniques</h3>
+
+<div style="float:right;margin-bottom:20px;margin-left:20px">
   <img src="{@docRoot}design/media/wear/Render_1Bit.png" width="200"
        height="" alt="" style="margin-top:-10px;margin-left:13px">
 </div>
-</div>
 
+<p>When designing for OLED screens, you should consider power efficiency and the screen
+burn-in effect. When these screens are in ambient mode, the system shifts the contents of
+the screen periodically by a few pixels to avoid pixel burn-in. Do not use large blocks of
+pixels in your ambient mode designs and keep 95% of the pixels black. Replace solid shapes in
+your regular ambient mode designs with outlined shapes in burn-protected ambient mode. Also
+replace filled images with pixel patterns. For analog watch face designs, hollow out the center
+where the hands meet to avoid pixel burn-in in this mode.</p>
 
 
 <h2 id="SystemUI">Accomodate System UI Elements</h2>
@@ -183,9 +178,11 @@ screens.</p>
 user the status of the wearable and show notifications from services on the user's phone. Try
 to keep critical elements in your watch face designs from being obscured by the UI elements.</p>
 
-<div class="cols" style="margin-top:20px">
-<div class="col-9">
-  <h3>Cards</h3>
+<div style="float:right;margin-bottom:20px;margin-left:20px">
+  <img src="{@docRoot}design/media/wear/CardsRender_Build.png" width="200"
+        height="" alt="" style="margin-top:20px;margin-left:13px">
+</div>
+<h3>Cards</h3>
 <p>Cards are the notification system that bridges information between the wearable and a
 mobile device. Cards are also how most applications communicate with users. The user will be
 notified on the wearable about items such as emails and messages. As a watch face developer,
@@ -201,16 +198,13 @@ variable peek card is that it displays more notification information. Faces with
 the bottom half of the face should leverage the small peek card instead.</p>
 <p>The system notifies your watch face when the bounds of a peek card change, so you can
 rearrange the elements in your design if necessary.</p>
-</div>
-<div class="col-4">
-  <img src="{@docRoot}design/media/wear/CardsRender_Build.png" width="200"
-       height="" alt="" style="margin-top:20px;margin-left:13px">
-</div>
-</div>
 
-<div class="cols" style="margin-top:20px">
-<div class="col-9">
-  <h3>Indicators</h3>
+
+<div style="float:right;margin-bottom:20px;margin-left:20px">
+  <img src="{@docRoot}design/media/wear/Indicators_Cropped.png" width="200"
+       height="" alt="" style="margin-top:0px;margin-left:13px">
+</div>
+<h3>Indicators</h3>
 <p>Indicators tell the user the status of the wearable, such as charging and airplane mode.
 When designing a watch face, consider how the indicator will fall over the watch face.</p>
 <p>The indicators can be placed in several fixed locations on the wearable. If you have a
@@ -218,16 +212,12 @@ large peek card, the indicators should go on the top or on the center of the scr
 position the status icons or the hotword on the bottom of the screen, the system forces small
 peek cards. If the edge of the watch face contains strong visual elements, such as
 ticks or numbers, place the indicators on the center of the screen.</p>
-</div>
-<div class="col-4">
-  <img src="{@docRoot}design/media/wear/Indicators_Cropped.png" width="200"
+
+<div style="float:right;margin-bottom:20px;margin-left:20px">
+  <img src="{@docRoot}design/media/wear/Hotword_Cropped.png" width="200"
        height="" alt="" style="margin-top:0px;margin-left:13px">
 </div>
-</div>
-
-<div class="cols" style="margin-top:20px">
-<div class="col-9">
-  <h3>The hotword</h3>
+<h3>The hotword</h3>
 <p>The hotword is the phrase "OK Google", which tells the user that they can interact with
 the watch using voice commands. When a user turns on the wearable, the hotword appears on
 the screen for a few seconds.</p>
@@ -236,12 +226,6 @@ this element is not as critical. You should still avoid covering up elements of
 watch face. Finally, background protection for the hotword and the indicators should be
 turned on unless your design is tailored to have these elements appear on top of them, for example
 using dark solid colors with no patterns.</p>
-</div>
-<div class="col-4">
-  <img src="{@docRoot}design/media/wear/Hotword_Cropped.png" width="200"
-       height="" alt="" style="margin-top:0px;margin-left:13px">
-</div>
-</div>
 
 <p>For more information about measurements and positioning of system UI elements, see
 <a href="#SpecsAssets">Specifications and Assets</a>.</p>
@@ -253,24 +237,27 @@ using dark solid colors with no patterns.</p>
 <p>Your watch face can show users contextually relevant data and react to it by changing styles
 and colors in your design.</p>
 
-<div class="cols" style="margin-top:20px">
-<div class="col-9">
-  <h3>What do you want your user to know?</h3>
+<h3>What do you want your user to know?</h3>
+
+<div style="float:right;margin-bottom:20px;margin-left:20px">
+  <img src="{@docRoot}design/media/wear/Render_Saturn.png" width="200"
+       height="" alt="" style="margin-top:-10px;margin-left:13px">
+</div>
+
 <p>The first step in designing a data-integrated watch face is to define a conceptual user
 outcome based on available data. First, generate a strong concept or outcome you believe is
 supported by real user needs. What do you want your users to know after they have glanced
 at your design? Once you have identified your outcome, you need to determine how to obtain
 the required data.</p>
-</div>
-<div class="col-4">
-  <img src="{@docRoot}design/media/wear/Render_Saturn.png" width="200"
+
+<div style="clear:both;"/>
+
+<div style="float:right;margin-bottom:20px;margin-left:20px">
+  <img src="{@docRoot}design/media/wear/Render_Episode.png" width="200"
        height="" alt="" style="margin-top:-10px;margin-left:13px">
 </div>
-</div>
 
-<div class="cols" style="margin-top:20px">
-<div class="col-9">
-  <h3>A watch dial is a timeline; add data to it</h3>
+<h3>A watch dial is a timeline; add data to it</h3>
 <p>Your watch face concept may include use of data beyond time, such as weather, calendar
 and fitness data. Consider the inclusion of data integration creatively. Avoid simply
 overlaying a time-based watch face with extra data. Rather, think about how the data can
@@ -278,16 +265,13 @@ be expressed through the lens of time. For example, instead of designing a weath
 watch face as a clock with an indication of the current temperature in degrees overlayed,
 you might design a watch face that describes how the temperature will change over the
 course of the day.</p>
-</div>
-<div class="col-4">
-  <img src="{@docRoot}design/media/wear/Render_Episode.png" width="200"
+
+<div style="float:right;margin-bottom:20px;margin-left:20px">
+  <img src="{@docRoot}design/media/wear/Render_Albumem.png" width="200"
        height="" alt="" style="margin-top:-10px;margin-left:13px">
 </div>
-</div>
 
-<div class="cols" style="margin-top:20px">
-<div class="col-9">
-  <h3>Stick to one message</h3>
+<h3>Stick to one message</h3>
 <p>Once you have solidified your conceptual direction or desired outcome, you will need to
 begin visualizing your watch face. The strongest watch face designs are highly glanceable
 and deliver a singular expression of data. In order to identify your singular message, you
@@ -295,12 +279,6 @@ must identify the most important supporting data point. For instance, instead of
 an entire month of calendar events,  you might decide to display only the next
 upcoming event. By a process of reduction, you should arrive at a powerful singular
 expression of data to include in your design.</p>
-</div>
-<div class="col-4">
-  <img src="{@docRoot}design/media/wear/Render_Albumem.png" width="200"
-       height="" alt="" style="margin-top:-10px;margin-left:13px">
-</div>
-</div>
 
 <h3>Begin with some insight and test as you go</h3>
 <p>Make sure your approach begins with insight into the needs and expectations of your users.