Design of Motion

Jesse Hodges - AspDotNetStorefront

Inherent Challenges for Users

• Postbacks• Alerts and Messages• Differences in Technology

Tools to Solve Problems

AJAX• Simple• Direct• Easy to get wrong• Easy to get right

HTML 5• Non-standard• In Process• Stuck on IE6

o “I’ve never seen a company work so aggressively at getting people to stop using their product.”-John Gruber

AJAX and AspDotNetStorefront

• .Net AJAX Librarieso A really nice way to code it "right"o Very powerful when writing controls

• Hand Craftedo Less obtrusiveo More control

Basics of AJAX

• XMLHttpRequest• InsertAjax loads an external page and replaces the the innerHtml of an element with the result

• jQuery

x-{packagename}.aspx

Minicart Demo

The above xml package demonstrates how to use the allow engine attribute (which defaults to false). After setting the attribute to true your package will be available to the xml package engine methods, e-packagename.aspx and x-packagename.aspx. To include the skin use e-packagename.aspx. To run the package without the skin use x-packagename.aspx.

Simple steps to using xmlpackages for AJAX requests:• Create a driver xml package. This package should contain everything that will not be posted back by AJAX requests.

At a minimum this driver should include the javascript and a target element for the AJAX postback.

The second part of the solution is to create a content xml package. This package includes all of the information that you want to reload on the AJAX post. The green arrow above shows where the driver package loads the initial contents of this xml package. Note that the first load is not AJAX. The content xml package must have the allowengine attribute set to true.

The above function, updateMiniCart, will insert the AJAX response into the target div, vMiniCart. This method should be called when the item is added to the cart. The random number appended to the request URL keeps IE6 from caching the AJAX response.

Engage and Inform with Movement

• Users are used to posting back. • The more direct you can be with your users, the better.• Let us show the item moving to the cart.

Movement Demo

MoveElementToElement

This function should be called when initiating the AJAX call. It clones the element being passed in (the product image), positions the clone absolutely, animates the clone moving to the cart, and then removes the clone.

Fewer Clicks

• Industry Buzz• Find a balance• Let the user choose

Lightbox Demo

For this example we will use a jQuery plugin called ColorBox. The above html will be created for each product on the category page. It is a link to the product page using x-dash so that it does not include the skin. We also pass “isquickview” on the query string so that we can toggle elements on the product page if the product is being viewed from quickview.

We then tell ColorBox to open all links with the class “productquickview” in a lightbox.

In order to use the product xml package in this way we must set it’s “allowengine” attribute to true. This will allow us to call x-product.ajaxproduct.aspx?productid=42&isquickview=true.

HTML5

• Adoption• Browser Implementations• CSS Attributes

o -webkito -moz

• The technology is ready, most development stratagies are not.

HTML5 Demo

The 8 lines of css above use CSS 3 to animate the cart dropping down when the user hovers over the minicart. –webkit-transition takes 3 parameters: attribute to animate (height), duration (1s), and transition type (ease-in-out). Note that mozilla based browsers have a similar attribute named –moz-transition.

The example above has a hard coded height per row. Unfortunately transitions do not yet support percent correctly.

HTML5 Focus

-• Client Side Storage• Descriptive Markup• Drawing• Drag and Drop•  ...

+• CSS Animations